Sidebar and widget question

Support Area Forums Forward Sidebar and widget question

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://newsite2016.thinknewmexico.org/WordPress/
  • Author
    Posts
  • #37397
    Kristina Fisher
    Participant

    Hi Bill,

    I am new to WordPress (previously used Dreamweaver to design several sites), and have a few questions for you as I am starting on a website redesign.

    First, I am wondering whether there is a way to get the sidebar to show up on the Homepage as well as the other pages? Ideally I would like it to be consistent throughout the site.

    Second, I am wondering if it is possible to add a widget to one specific page? We will have a “Contact” page, and I’d like to have the contact widget there rather than on the homepage.

    Third, we do not use Mailchimp for our listserv, we use a system called Engage/Capitol Advantage. (Here is our current signup: http://capwiz.com/thinknewmexico/mlm/signup/ ) Is there a way to edit the Mailchimp widget to send the email information to that sign-up form? Or do I need code from that company? I do like the clean way you have just the email box and a button in the Mailchimp widget.

    Finally, I am planning to have a four widgets in the footer, and am wondering if there is a way to have all four of them side by side horizontally when the screen is big enough to allow it (it looks like the current design only goes to three across, even when the screen size could accommodate four).

    Thanks!
    Kristina Fisher

    #37398
    Kristina Fisher
    Participant
    This reply has been marked as private.
    #37404
    Bill Robbins
    Moderator

    Hi Kristina,

    Welcome to WordPress 🙂 Great questions. Let’s track down answers for you.

    1. Sidebar. You can keep the same sidebar throughout. What you would want to do there is just use the default page template instead of the home page one. It will keep the sidebar like the other inside pages have. If you still need a slider on the home page, you can install a plugin like Meta Slider or Soliloquy to create one for the new home page.

    2. Different Widgets on Different Pages. You can do this and there are a few different ways to go about it. If only hide a widget or two on some pages and show them on others, then you could go with the widget visibility that’s built into the Jetpack plugin. Lots of sites use Jetpack so if you’re planning on it, it has that ability built in. If you’re not then you could use the JP Widget Visibility (https://wordpress.org/plugins/jetpack-widget-visibility/) which has the same functionality in a standalone plugin. It allows you to choose where widgets are either show or hidden.

    If you need truly distinct sidebars for different pages, I would suggest one of the sidebar manager plugins like Easy Custom Sidebars (https://wordpress.org/plugins/easy-custom-sidebars/). These allow you to replace the existing sidebars with new one on certain pages in your site. It’s a bit more involved than the widget visibility approach, but it separates the widgets a bit better which is helpful if you need to have lots of widget changes per page.

    3. What you’ll probably want to do for your newsletter is to grab an embeddable form from the service and add it to the site via a text widget. They may have a WordPress plugin that does that so you could check for that as well. Text widgets accept raw HTML so that should be an option if they have embeddable forms. It would be a good bit more straightforward than editing the MailChimp widget. If you need help styling their form, let me know.

    4. It is possible to have the widgets in the footer go four across. I was not able to view the site using the credentials you posted above. I just wanted to verify that the username and password are the same for that.

    If you don’t mind double check on that and add four widgets to the footer, I can send over the instructions on how to make those line up four across.

    Thank you for your business and let me know how it goes,
    Bill

    #37410
    Kristina Fisher
    Participant
    This reply has been marked as private.
    #37418
    Bill Robbins
    Moderator

    Good Morning Kristina,

    Always happy to help out. Thanks for explaining what you’re looking for a bit more for me. Let’s see what we can cook up.

    Home Page

    Here’s what I would suggest for the home page. I would add the widgets you add to the default sidebar to the home page as well. If you’ll throw in a Featured Posts Widget, it will occupy two “columns” allowing the other widgets to line up next it to similar to the sidebar on the inside pages. That would allow you to carry that content from the home page throughout the site and not require any special coding either.

    The order the featured post widget is placed will determine if it aligns to the left or the right. You can experiment with the order to get the placement you’re looking for there. I believe if it is either first or fourth, it will line up on the left. If it is second, then it will go on the right.


    Footer Widgets

    To make the footer widgets fit into rows of four, go to the Customizer and select the Advanced tab. In the spot for Custom CSS add this:

    
    @media only screen and (min-width: 1181px) {
    
    	#footer-sidebar .widget {
    		width: 247px;
    		padding: 0;
    	}
    
    }
    
    @media only screen and (min-width: 1024px) and (max-width: 1180px) {
    
    	#footer-sidebar .widget {
    		width: 200px;
    		padding: 0;
    	}
    
    }
    

    and save your changes. That will allow the widgets to fit into rows of four at browser widths 1024 pixels wide and larger. Smaller than that it will still follow the theme’s default arrangements since things would get a bit cramped if we kept them four across at too small of sizes.

    You may also want to make the text size a bit smaller in the buttons there so they don’t take up too much space. Add this to the Custom CSS too in order to adjust it:

    
    #footer-sidebar .widget .button {
    	font-size: 14px;
    }
    

    I try to make my themes as customizable with CSS as possible. You can add these snippets to the Custom CSS as well

    Center Footer Widget Text
    
    #footer-sidebar .widget {
    	text-align: center;
    }
    
    Change Background Of Footer Widgets

    This one is slightly trickier since the footer widgets sit inside the footer which has 30px of padding applied to itself. So we have to use a negative margin to pull it to the edges and then add in padding to push the content back where it belongs. Here’s the CSS to do that and set a background color:

    
    #footer-sidebar {
    	background-color: #cccccc;
    	width: calc(100% + 60px);
    	margin-left: -30px;
    	margin-right: -30px;
    	margin-top: -30px;
    	padding: 30px;
    }
    

    See how those work for you and let me know if you have questions.

    Have a great day,
    Bill

    #37424
    Kristina Fisher
    Participant

    Hi Bill,

    Your solutions are terrific, thanks so much! I also hadn’t discovered the custom css area yet, that is super helpful. 🙂

    The only thing that isn’t completely working is that the third and fourth widgets on the homepage run into each other (e.g., I currently have twitter and facebook there, and facebook overlaps onto twitter).

    Also, I’m not sure how I managed to override the button styles in the header, but for some reason the text in my “donate” button there is red instead of yellow… any ideas on how to fix that?

    That’s it for now, and thanks again for all your help!

    -Kristina

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Sidebar and widget question’ is closed to new replies.