Smarter Sidebars: How to build Better WordPress Sidebars

your sidebar is one of the most viewed elements on your website but have you been giving it the level of attention that it deserves i'm matt from build that website and in this video i'm going to show you how to build better sidebars we'll cover everything from the best widgets that you should be using to some simple styling tips and then we'll move on to sticky widgets and intelligent sidebars that are custom fitted to the content that they're next to all right let's get started okay so here we are on a post and this post is using a content and then sidebar layout and you can see that the widgets in our sidebar are pretty close to the default that comes with wordpress we have a search bar a related posts and a meta widget that has things like the login so first off how do you control whether a sidebar displays on a page or post or not well this is controlled entirely by your theme so if your theme does not support sidebars you can't have a layout with a sidebar fortunately most themes do especially premium themes for example i'm running generatepress and it gives you multiple sidebar layouts including sidebar left sidebar right the first place to look to control your sidebar layout would be the wordpress customizer and there you can usually set the default template for your blog pages in generatepress it's under layout sidebars and you can see that my default single post layout is set to content and then sidebar but we can easily move the sidebar to the left side by switching it to sidebar content and that will push the sidebar on the left you may also be able to control your sidebars on a per post basis so for example if i edit this post you can click this gear icon if the sidebar is not available on the editor view and we want to be in the post tab and if you scroll down to the layout you can specify which sidebar layout you want to use for this post so now it's using the default which we've set to be sidebar on the right however if i want to switch it to a left sidebar i can simply change the sidebar layout there click update and if i preview the posts the sidebar is now on the left so next up we want to customize the actual widgets that are in our sidebar and before we do that we should think about what we want to put there because the sidebar displays on every page of your site and so you should really choose carefully the things that you want to put in there and the number one thing you should focus on is what's good for the user and secondly what area of your site you want to direct them to so there are a few types of widgets that i like to put in my sidebars one is a search widget another is a recent post or more specifically related posts in the current category something that's highly relevant to the post that they're currently on third i might highlight some specific guides or posts maybe it's a resources page or a course or it might direct them to one of my very popular youtube videos links to your social media platforms is another popular widget something like that would have your facebook feed your youtube channel twitter etc i also frequently use table of contents widgets to help people navigate through very long posts very quickly so let's get started adding some widgets and wordpress has added a live widget view to the wordpress customizer so we can just open the customizer and go to widgets and pretty much every theme should have this available now and we can start customizing our right sidebar and you can see we've got a search widget this is a default widget that comes with wordpress same with the recent posts and the metadata so we can remove this i don't want the metadata in there and i do want some recent posts but we're going to get a better recent post plugin so let's just remove that as well and i'll leave the search bar at the top now to add a widget you can see all your available widgets by clicking this and you can scroll through the list for example we could add a gallery you can add a simple text widget that lets you put in html tag clouds a video recent posts recent comments etc but personally i like something a little bit more custom and for that we're going to have to install a plugin to give us those widgets so let's click publish for now so we'll go to plugins add new let's just search for a post widget okay so here's one option i like and it's very highly reviewed it's called recent post widget with thumbnails and this will allow us to get a nice visual recent post in our sidebar all right so we've installed and activated the plugin and now if we go back and refresh this page here if we go back into widgets and we go to add a widget we should now see our recent post with thumbnails has been installed by the plugin so just click the widget to add it to the sidebar and let's add a title so we can call it latest posts and we'll show four posts and you can see it's automatically pulling in the thumbnail from my posts and these are the featured images that i've specified on each post now if you're like me and you sometimes forget to add featured images to your post this plugin has an option to use the first image in the post as the widget thumbnail which is really nice you can choose different image sizes say if you want to make the images the full width of the sidebar or you can select which categories to display posts from and when you combine this with the contextual sidebars that i'll show you later in the video you can easily display the most relevant content to your visitors which can decrease bounce rate and even improve google rankings next up i want to design a custom callout box that is highlighting maybe one of my favorite videos now one option to do that would be you could add a widget and we could get the custom html widget and you could literally just hand code this widget using html and css if you know how to do that but i like to use a plugin that that gives you a bit more visual editing experience and the plugin is called black studio tiny mce widget it's free in the wordpress repository and i've already got installed so i'm just going to click activate and if we go back to our customizer and click add widget we can scroll down here and you can see the visual editor and that's what we want and now if we add this widget you basically get the old tiny mce sort of text editor experience and it makes it really easy to add things like shortcodes or to add an image and that's basically all i want is an image that has a link to my video so i'm going to go to add media and i've already uploaded the thumbnail of my video and let's add a title and we could just add a link and i'm not going to link to my youtube channel here but i'll just put a sort of blank link and you can see that now hovers and i can also click on the image and we could edit it and i can easily add something like a css class or something and this would allow me to add some css code and you can put that custom css wherever you normally do such as the wordpress customizer but i'm just going to write it directly in the text view of this widget and i'll add a bit of box shadow and then i think i'll add one more thumbnail and a link and we'll call this widget done now if i want to rearrange these widgets it's very easy to do i'll just click the reorder button and now i can just drag this up above the recent posts and click done and we'll just publish to save the changes next up let's add some social icons so one great plugin for that is called lightweight social icons so we'll just install and activate so we'll add a widget and lightweight social icons and all you have to do is pick the icons you want so we'll go facebook and in order for it to appear you have to add a link and you'll see it appears down there and we'll add flickr and let's do youtube and you can customize the background color of these icons for example we'll just make them that color and obviously you would want to put the exact links to your social media profiles in here instead of just this hashtag and you can customize the icon size for example maybe we want to make it a bit bigger and we'll add a title and i think we want to move these up maybe below the search bar now if you want more custom social media icons perhaps you want like the exact logos and different color branding for each icon you can use a different widget there's a number of free ones in the wordpress plugin repository or you could use the visual editor widget that we installed already and you could add your own icons from a site like flat icon or anywhere you want to get your icons and just upload them as an image all right and finally let's add a table of contents to our sidebar i've installed a free plugin called easy table of contents there's a number of similar good free table of contents plugins in the repository and this one gives us a sidebar widget so we can just go to widgets and we'll add the table of contents widget and let's reorder this so i'm going to bring it up for now just so we can see it on the screen and you can see it's pulling in all the h2 and h3 headings from our post and if we click one it scrolls right to it now you'll also notice the table of contents scrolled off the top of the screen and i actually prefer to have it stay fixed always in the sidebar on the screen no matter how far you scroll into the article so next up let me show you how to make a specific widget or sidebar fixed so let's install a plugin so we'll go to add new and we want this plug-in q2 w3 fixed widget and we'll install and what this does is it gives you the ability to make any specific widget sticky so we'll go to our widgets menu and if we click on our table of contents widget you can see that now we have this option to make it a fixed widget so if we do that and now if we scroll once it gets to the top of the screen it's going to be fixed now you can see that there's some issues where it's overlapping our other widgets and that's because i haven't specified a background color for my widgets i've actually made them transparent just so that the color of the sidebar shines through but if you're going to be using fixed widgets then you need to make sure that your widgets have a background color so let's do that and we're going to do some basic styling of our sidebar next now if you're using a paid theme typically they will give you the ability to apply some styles to the sidebar widgets for example i'm using generate press premium and if we go to colors in the customizer and go to sidebar widgets and go to background color currently it's set to transparent but i can just drag this up and make the background white or i could for example match it to my sidebar but now when i scroll down and become sticky now that it has a background color it goes over the other widgets now you'll see that if i scroll down here this widget is still having some weird glitches and that's because there's actually some custom css that's been applied by this by the developer of this plug-in that causes this to overlap so we can fix that by adding a z-index to our fixed widget to figure out which widget we want to target we can use the chrome inspector tool or whichever browser you in you can right click and go to inspect and we just want to get the class assigned to this widget and this plugin assigns the class easy toc that's what we want to target so you can go to the custom css section of your wordpress customizer and i'm just going to write a rule class widget which is also class easy tlc and we'll just give it a z index and we'll say two i think should be fine and now when we scroll down it hovers just fine over the other element the other option is you could just put the table of contents as the last widget in your sidebar and you don't have to worry about it overlapping all right next up let's do some actual design of our sidebar i'd like to show you a couple basic styles of sidebar design and i also want to fix some things like the spacing between my widgets so you might be able to control some of these settings from your theme and it's hard to do a tutorial for everybody uh when i'm using a different theme view so i'm going to show you also how to fix some of these things with css so first to understand the basic structure of your sidebar you can right-click inside your sidebar and go to inspect in your browser and i'm just going to look for the element that is the sidebar and i found it here you can see it's highlighted on the screen and it's the right sidebar but i actually want to target any sidebar probably because these rules are generally going to apply to all your sidebars so we're going to use the class sidebar and we're also going to be using the class widget so each individual widget has the class widget so it might be different in your theme so you need to find the correct classes to target so that's step one and again the first place you should check is inside your theme if you control things at least like widget padding and maybe the spacing between the heading and the body of the widget it's a lot easier to tweak inside your theme so i would look for that first all right so first off if i inspect this heading here so here's my h2 widget title and you can see that orange underneath it and that means that there's a margin below it so i want to change that so let's start with our first rule and this rule is going to be targeting class sidebar which contains class widget and then we specifically want to target the widget title so that's class widget title and i believe that's consistent across all wordpress themes i was going to change the bottom margin so i'm going to change it to 10 pixels and then instantly change the spacing now you can see i'm using sort of a flat layout here the widget backgrounds have the same background color as the sidebar so they kind of blend in but if you want to do more of a box layout you could do something like this so we'll target sidebar widget and let's say we want to give it a background color of white so it sticks out from the gray background but kind of subtle and then you could either give it a border so we could do border one pixel solid gray and you can see that's now like a box layout if i zoom out a little bit you'll be able to see it better and maybe want to be a bit more subtle or instead of the border perhaps you want to do some box shadow as you can see on our content container we have a bit of box shadow so i could just change this rule to something like box shadow uh it blurs over five pixels and we'll make it just really subtle okay that looks about right so that's one option as far as layout this is sort of like the classic box layout where each widget is in its own block all right but for now let's go back to the flat layout that's sort of what i prefer for my sites typically and i can show you how to change the spacing between these so these actually have a fair amount of padding if we inspect and we go to our widget class here that green area is padding and i believe it's 40 pixels not all sides so if we just want to get them a bit closer together we can change our padding to maybe 20 pixels on the top and bottom and 40 pixels on the left and right and that will space it out a little bit better and you can even make it even closer together if you wanted to 10 pixels on the top and bottom and that will just compress everything a little bit next up we could style our widget heading and again you should check in your theme to make sure it's the same but ours is an h2 of class widget title so let's write our rule and there's a couple basic styles you can do for example you could add a border bottom and maybe we do need a bit more margin under here and we could increase the font size for example so i think that looks pretty good another option is we could put a background color to do that we would go background and we could just try black for now and now you can see we can't really see our title so we just need to change the color which is the text color and we can make that white and we probably need to add a little bit of padding on the sides so let's say 2 pixels on the top and bottom and 10 pixels on the side and of course you can match this to your theme so i could grab this color from my theme and let's make that the background color and use this color as my text color and now you have more consistent branding across your site and we could add a bit more style with something like this so we could add a border radius and this would be 10 pixels on the left and right top and zero pixels on the bottom two and maybe we could add a border on the bottom and maybe i'll change this color back to white and just see how that looks all right i think that looks quite good uh one thing i might do is i'm just going to reorder the table of contents and put it on the bottom because i think it looks a bit odd when it's overlapping the other widgets and now when we scroll down because you don't really need the table of contents since you get a bit deeper into the article and now it'll stick to the top now one additional trick if you want to target rules at a specific widget on your sidebar like maybe you want to write some custom css just for one widget if we inspect here typically each widget will have its own id and you can see here if you highlight over and it will turn green as you're hovering over the widget but this widget has an id right here that we can copy and if we want to write a rule instead of the period which uses for a class we will use the hashtag for the id and we'll just paste the id name in there and we could write any rules we want for example we can give it a background color black and now you can see that's applied to the entire widget area we could also apply it to the inner area so if we scroll down here you can see that there's a little container inside the widget so we can grab that name and that's a class not an id so we'll put that inside our id with period and now we have the black background in there we could add a bit of padding and perhaps some box shadow to lift it off the page okay so it really is completely up to your imagination and what it is that you want to draw your visitor's eye to now to really take your sidebars to the next level you're going to want to be able to show different sidebars in different areas of your site this lets you show hyper relevant content to your visitors and keep them more engaged click through more articles and it's really good for seo there's a couple plugins you can use to do that one is clever widgets by thrive themes but that's a paid plugin but there's an excellent free plugin and let's go so if we go to plugins add new and i'm going to search for content aware sidebars and this is what we want here the plugin is unlimited custom sidebars contents or sidebars and we'll install and activate and this basically allows you to create an unlimited number of sidebars on your site so we could create a new custom sidebar here and we'll name it so so there's my rule and you can select display conditions like where do you want the sidebar to automatically appear and we could say maybe i only want to be on specific category of post so let's choose the category from the list let's say i want this to only show on the delusional animals category next we'll specify an action and basically this is do you want to replace the entire sidebar that would normally have been shown on the page or do you want to merge this sidebar with the existing sidebar so just to demonstrate this i'm going to replace it entirely and for the target sidebar we're going to replace the right sidebar and let's click create now in our dashboard if we go to appearance and widgets you'll see that we have this new feature here we can create a new sidebar and we also have our custom sidebar that we created with our plugin and if we click on this we can add widgets to the sidebar so let's say i only want to display a table of contents in that sidebar let's grab the table of contents widget and we'll make it a fix widget click save and now if we go back to the front end of the site if we're on the main area of the site you can see that this is our normal sidebar but what was the category we chose believe it was delusional animals now if we go to this sidebar you can see that it's only showing the sidebar that we just created so it's only showing our custom sidebar and there's all kinds of ways you can use this for example you can show really targeted affiliate offers or show specific course that somebody might be interested based on the content that they're reading you could use our post widget and show posts only from a certain category on each category sidebar it's really up to your imagination and how you want to structure your site but i hope you can start to see the potential of this approach there's also one other way you can control which sidebar displays with this plugin aside from the automatic rules that will say hook it into a specific category in your post settings you'll also have a new section here which is the sidebar's quick select for this plugin and for example you can choose the right sidebar to be any of the custom sidebars that you created so we can set it manually to this sidebar and if you do specify a sidebar manually this will override the automatic targeting rules from the plugin settings it lets you create truly custom sidebars on a per post basis if you want if you've got any questions about this video or your own sidebar tips to share with the community hit up those comments and if you enjoyed this video please give it a like and make sure to subscribe you'll find all the links and tools i mentioned in this video in the description below and up next i've got the perfect video for you waiting right here

Channel: Build That Website

Views: 5,833

Keywords: wordpress sidebar tutorial, fixed widged, sidebar css, table of contents widget, content aware sidebars, how to add a sidebar, how to add a sidebar in wordpress, wordpress sidebars, fixed widget plugin, q2w3 fixed widget for wordpress, wordpress sidebar, wordpress sidebar widgets, wordpress sticky sidebar, wordpress fixed sidebar, sidebar wordpress, wordpress custom sidebars

Id: YmtFQN3p7iY

Length: 20min 57sec (1257 seconds)

Published: Thu Mar 11 2021