{"id":5307,"date":"2020-08-24T14:46:05","date_gmt":"2020-08-24T14:46:05","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=5307"},"modified":"2021-12-27T08:21:40","modified_gmt":"2021-12-27T08:21:40","slug":"dos-and-donts-for-wordpress-sidebars","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/","title":{"rendered":"Dos and Don&#8217;ts for WordPress Sidebars"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Back to basics.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are 4 website sections that can help out with the navigation structure:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Primary navigation menu (usually placed above the website header)<\/span><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/colibriwp.com\/blog\/how-to-edit-footer-in-wordpress-with-4-easy-methods\/\"><span style=\"font-weight: 400;\">Footer<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Left sidebar<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Right sidebar<\/span><\/li>\n<\/ul>\n<p>Sidebars are column sections on a website, placed on the left or right-hand side of the web page, that contain links to other pages, and other useful information.<\/p>\n<p><span style=\"font-weight: 400;\">Sadly, sidebars are often overlooked or misunderstood.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s solve this once and for all!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, we\u2019ll talk about sidebars in general, and their purpose, then we\u2019ll go into some technical WordPress aspects.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">What\u2019s the purpose of a sidebar?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s settle two things before we begin:<\/span><\/p>\n<ol>\n<li><strong>One shouldn\u2019t place a sidebar on a homepage (unless you have some online newspaper), portfolio, or product page (because it will distract users from the purpose of that page). <\/strong><\/li>\n<li><strong style=\"background-color: transparent;\">Use meaningful information in your sidebars. Ask yourself: \u201cIs this going to be helpful and relevant for my reader?\u201d<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Why would you have a sidebar on your website?<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">To help people find specific sections of a website and help them navigate<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">To get leads\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">To bring in a new revenue stream through ads<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">When you start building your sidebar you should have a functionality-first approach, then the style. Just don\u2019t mess up your user experience.<\/span><\/p>\n<h2><\/h2>\n<h2><span style=\"font-weight: 400;\">What can you include in your WordPress sidebars?<\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Newsletter subscription:<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5318\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/newsletter-subsctiption.jpg\" alt=\"sidebar newsletter subscription\" width=\"289\" height=\"434\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/cxl.com\/blog\/\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Social sharing icons<img loading=\"lazy\" class=\"aligncenter wp-image-5323\" style=\"display: none !important;\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/Social-sharing-icons.jpg\" alt=\"Social sharing icons in sidebar\" width=\"605\" height=\"282\" \/><\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Social proof: showing off subscribers and followers<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Social engagement items (like recent Facebook comments)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Events promotion<img loading=\"lazy\" class=\"aligncenter wp-image-5313\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/Events-promotion.jpg\" alt=\"Events promotion in sidebars\" width=\"605\" height=\"224\" \/><\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.shopify.com\/blog\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Various announcements<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" class=\"size-full wp-image-5311 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/contextual-CTAs.jpg\" alt=\"annoucements in contextual cTAs\" width=\"576\" height=\"303\" \/><\/span><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.netguru.com\/blog\/handling-devops-processes-the-netguru-way\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<p><b>Tip<\/b><span style=\"font-weight: 400;\">: make sure you place these announcements wisely, try to match them in a specific context.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Your own promotions and offers:<\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><img loading=\"lazy\" class=\"size-full wp-image-5320 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/promotions.jpg\" alt=\"own promotions in sidebars\" width=\"583\" height=\"235\" \/><\/span><a href=\"https:\/\/creativemarket.com\/blog\/best-graphic-design-creative-jobs-groups\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ads, if you think of them as an important revenue source <img loading=\"lazy\" class=\"aligncenter wp-image-5308\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/ads.jpg\" alt=\"Ads in sidebars\" width=\"350\" height=\"248\" \/><\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"http:\/\/Forbes.com\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">E-commerce filters<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" class=\"aligncenter wp-image-5314\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/filters.jpg\" alt=\"e-commerce filters\" width=\"421\" height=\"443\" \/><\/span><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/Amazon.com\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">In the case of blogs, the sidebar can include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Search bar<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5322 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/searchbar.jpg\" alt=\"Blog searchbar\" width=\"596\" height=\"253\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.shopify.com\/blog\/girls-chronically-rock\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Authors presentation<\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><img loading=\"lazy\" class=\"alignnone wp-image-5309 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/authors.jpg\" alt=\"Articles Authors \" width=\"610\" height=\"317\" \/><\/span><i><span style=\"font-weight: 400;\">Source<\/span><\/i>: Yoast SEO<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Other blog posts (latest, most popular, contextually relevant to the current article) recommendations<img loading=\"lazy\" class=\"size-full wp-image-5319 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/popular-stories.jpg\" alt=\"Popular stories\" width=\"567\" height=\"224\" \/><\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.nationalgeographic.com\/history\/2020\/07\/united-states-vice-presidents-irrelevant-to-influential\/\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Long-form content promotions<\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\"><img loading=\"lazy\" class=\"wp-image-5316 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/long-form-content.jpg\" alt=\"\" width=\"404\" height=\"401\" \/><\/span><a href=\"http:\/\/unbounce.com\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Table of contents for blog articles<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5326\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/digital-marketer-table-of-contents.jpg\" alt=\"Table of content\" width=\"605\" height=\"353\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.digitalmarketer.com\/digital-marketing\/\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<h2><\/h2>\n<h2><span style=\"font-weight: 400;\">Left Sidebars versus Right Sidebars<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">This is a never-ending debate\u2026<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Because we read from left to right does this mean we should all place the most important subject to the left? This means we should all have right-hand sidebars because they are second-tier importance elements.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Except for e-commerce, of course, where filtering is vital, and we\u2019re used to having it on the left (if there are too many options, or centered-up if fewer options).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the blogging use case, where the content is news-related, the right-hand convention is very common.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, I feel this is a chicken and egg debate, which was first? The left or the right sidebar? Are \u201cconventions\u201d born as \u201cconventions\u201d or are they the effect of testing?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We, humans, learn a lot, and we are being educated about our online experience. Like we\u2019ve been educated on mobile to identify the hamburger icon when looking for a website menu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Does it all relate to education or to innate pattern models hidden in our brains?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I\u2019m guessing we haven\u2019t figured this out yet.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the end, if the user is really looking for something, he will find it on the left as well as on the right&#8230;you might need only the proper visual cues.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Like here&#8230;where the menu is not on top like we got used to. But our minds are already educated to look for the hamburger symbol that will eventually lead to the menu&#8230;which is on the left in the<\/span><a href=\"https:\/\/papelitobrasil.com\/\"><span style=\"font-weight: 400;\"> Papelito<\/span><\/a><span style=\"font-weight: 400;\"> case.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5317 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/menu-left.jpg\" alt=\"menu on the left\" width=\"582\" height=\"305\" \/><br \/>\n<span style=\"font-weight: 400;\">There\u2019s only one way to find out which one is better for you and your user: AB testing (I\u2019m going to expand a bit on this in the next chapter).<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">The Case Against Sidebars<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Many UX designers say sidebars are becoming irrelevant, especially in a mobile-first world.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I would argue that a bit, just because the mobile devices are forcing us to cut them off, it doesn\u2019t mean that they\u2019re becoming obsolete.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s take a look at some other arguments.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Minimalism<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">With the era of flat design, \u201cless is more\u201d. A minimal design will highlight the sole purpose of a page, a unique call to action which will focus on what\u2019s important.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The rise of AdBlocks coupled with banner blindness call for a need to give up on ads sidebars<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Sidebars distract users from your content<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Sidebar clutter can affect conversion rates<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">An <\/span><a href=\"https:\/\/videofruit.com\/blog\/website-sidebar\/\"><span style=\"font-weight: 400;\">experiment<\/span><\/a><span style=\"font-weight: 400;\"> ran by Videofruit in 2015 revealed that 0.3% of the time people were clicking on the sidebar. In the sidebar, they had a CTA with a newsletter subscription. VideoFruit saw a 26% increase in newsletter conversion rates by removing the sidebar and placing the CTA elsewhere.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, which side are you on?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you don\u2019t know what to do about sidebars, there\u2019s one way of finding out: measurement.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The first question to answer before building an experiment: would this be something relevant for both my business and my users?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If so, A\/B test this.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Prepare a control page, with no sidebar and experiment page with a sidebar.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Start with a change.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s say, place a subscribe banner to the right. In the control page, have the subscribe banner in the header, or below the content.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Leave the experiment run until you reach enough sample size and your desired confidence. Then check if the number of subscribers differs significantly. Use <\/span><a href=\"https:\/\/abtestguide.com\/calc\/\"><span style=\"font-weight: 400;\">this calculator<\/span><\/a><span style=\"font-weight: 400;\"> for this.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How can you build a WordPress Sidebar?<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now we know what we want to include in our WordPress sidebar.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s build one, shall we?<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">How to create WordPress sidebars using widgets<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">WordPress widgets are blocks of content that you can add to your site&#8217;s sidebars, footers, and other sections. They were created with the purpose of avoiding code and making it easy for the users to design and add content.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<blockquote><p><span style=\"font-weight: 400;\">A set of widgets is included with the default WordPress installation. In addition to these standard widgets, extra widgets can be included by themes or plugins. An advantage of widgets built into themes or plugins is to provide extra features and increase the number of widgets.<\/span><\/p><\/blockquote>\n<p style=\"text-align: right;\"><i><span style=\"font-weight: 400;\">Source: <\/span><\/i><a href=\"https:\/\/developer.wordpress.org\/themes\/functionality\/widgets\/\"><i><span style=\"font-weight: 400;\">https:\/\/developer.wordpress.org\/themes\/functionality\/widgets\/<\/span><\/i><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">The advantage of using these widgets is that they won\u2019t affect page speed.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, where are these widgets located in the WordPress dashboard? Under Appearance-&gt; Widgets. All you\u2019ll have to do is drag a widget on the right.<\/span><\/p>\n<p>We have even prepared a short tutorial on how to build WordPress sidebars using widgets, you can watch it below.<\/p>\n<div class='embed-container'><iframe loading=\"lazy\" title=\"How to create a WordPress sidebar using Widgets\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.youtube.com\/embed\/CTglHRnZEmc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p><span style=\"font-weight: 400;\">Now, if you want to spice your sidebar up with some imagery, just drag the \u201cImage widget\u201d and upload your image. In here you could use your own design of an offer, let\u2019s say. You can even add a link to it.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">The thing that gives you superpowers is the \u201c<a href=\"https:\/\/colibriwp.com\/blog\/wordpress-html-editor\/\">Custom HTML<\/a>\u201d widget.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5312 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/custom-HTML.jpg\" alt=\"custom HTML WordPress sidebar widget \" width=\"598\" height=\"264\" \/><\/p>\n<h3><span style=\"font-weight: 400;\">How to create WordPress sidebars using the WordPress customizer<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Now, you can also add widgets by visiting Appearance -&gt; Customize in the WordPress dashboard.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The WordPress Customizer relies heavily on the theme\u2019s functionalities. So, be careful with your theme choice!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For the purpose of this example<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><a href=\"https:\/\/colibriwp.com\/\"><span style=\"font-weight: 400;\">Colibri Builder<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you scroll down in the left-hand side menu you\u2019ll see the \u201cWidgets\u201d section.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5325\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/widgets-2.jpg\" alt=\"Add WordPress sidebar widgets\" width=\"468\" height=\"478\" \/><span style=\"font-weight: 400;\">Let\u2019s see pick \u201cCustom HTML\u201d.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the example below we used basic HTML code to insert an image with a link on the right-hand side of our blog.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5315\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/HTML.jpg\" alt=\"WordPress custom HTML\" width=\"525\" height=\"320\" \/><\/p>\n<h3><span style=\"font-weight: 400;\">How to create WordPress sidebars using the WordPress plugins<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">If you want to take your sidebars to a whole new level you can use additional plugins.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you go to your WordPress dashboard, to Plugins -&gt; Add New, you can install any plugin you need. Just make sure to activate it before using it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s take a look at 3 of our favorite sidebar plugins.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ol>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/custom-sidebars\/\"><span style=\"font-weight: 400;\">Custom Sidebars by WebFactory<\/span><\/a><img loading=\"lazy\" class=\"aligncenter wp-image-7440 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/custom-WordPress-sidebars.jpg\" alt=\"\" width=\"935\" height=\"443\" \/><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/wordpress.org\/plugins\/custom-sidebars\/\"><i><span style=\"font-weight: 400;\">Source<\/span><\/i><\/a><\/p>\n<p><span style=\"font-weight: 400;\">This plugin allows you to be creative. It lets you add unique elements depending on which page your users are browsing. You don\u2019t need to have one sidebar, you can have sidebars that match a specific context.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>2. <a href=\"https:\/\/wordpress.org\/plugins\/content-aware-sidebars\/\"><span style=\"font-weight: 400;\">Content Aware Sidebars<\/span><\/a><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5310 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/content-aware-sidebars.jpg\" alt=\"Content aware sidebars\" width=\"582\" height=\"269\" \/><\/p>\n<p><span style=\"font-weight: 400;\">This plugin allows you to replace your theme sidebars on different conditions.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also get full control over the look and feel of your sidebars and widget areas (no matter the theme you use), by being able to change HTML and CSS classes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the premium package, there&#8217;s included a sticky sidebar feature as well.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>3. <a href=\"https:\/\/wordpress.org\/plugins\/recent-posts-widget-with-thumbnails\/\"><span style=\"font-weight: 400;\">Recent Posts Widget With Thumbnails<\/span><\/a><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5330\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/recent-posts.jpg\" alt=\"Recent posts widget\" width=\"610\" height=\"273\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In the default WordPress sidebar widgets, there\u2019s an option that displays recent posts. The thing is it will show only links.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s kinda dull, don\u2019t you think?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s spice it up a bit by adding an image to each post in order to draw attention.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This plugin lists the most recent posts with post titles, thumbnails, excerpts, authors, categories, dates, and more.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, there are tons of sidebar plugins in the WordPress ecosystem.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to grow your email subscribers list, there\u2019s a plugin for that.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to want to show off your Youtube videos, there\u2019s a plugin for that as well.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want a plugin with more sidebar plugins included,<\/span><a href=\"https:\/\/wordpress.org\/plugins\/so-widgets-bundle\/\"><span style=\"font-weight: 400;\"> you got it.<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Conclusions<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are so many pieces of information to place in a sidebar, that you can get overwhelmed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Always ask yourself: is this information essential, does it help the reader, does this help my business?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, see our Dos and Don&#8217;ts!<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Dos<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Before deciding on your sidebar elements, you should first consider their placement and integration with the other elements of your website. Will they match the website as a whole?<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If you want to add a social media icon on every page, a best-case practice is to place them on a fixed left sidebar.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Anything you want to appear highlighted or on multiple pages can go in a sidebar (eg: the same offer, CTA, or long-form piece of content).<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If you decide to add advertisements, make sure they\u2019re not spammy.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A\/B test: with or without a sidebar.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use content-aware sidebars<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Don\u2019ts<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Don\u2019t add too many widgets, your sidebar will look cluttered.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Don\u2019t use too many plugins, you\u2019ll increase your chances of a plugin\/plugin or plugin\/theme conflict.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Don\u2019t allow too many ads (unless your revenue stream depends on them)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Aaaand\u2026.that\u2019s a wrap!<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Back to basics. There are 4 website sections that can help out with the navigation structure: Primary navigation menu (usually placed above the website header) Footer Left sidebar Right sidebar Sidebars are column sections on a website, placed on the left or right-hand side of the web page, that contain links to other pages, and&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":5332,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[161,160],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dos and don&#039;ts for WordPress sidebars [tools included]<\/title>\n<meta name=\"description\" content=\"WordPress sidebars are often underrated. Let&#039;s see how we can build them and what tips and tricks are there. Check our Dos and Don&#039;ts!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dos and don&#039;ts for WordPress sidebars [tools included]\" \/>\n<meta property=\"og:description\" content=\"WordPress sidebars are often underrated. Let&#039;s see how we can build them and what tips and tricks are there. Check our Dos and Don&#039;ts!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-24T14:46:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-27T08:21:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/pablo-garcia-saldana-lPQIndZz8Mo-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"427\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/pablo-garcia-saldana-lPQIndZz8Mo-unsplash.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/pablo-garcia-saldana-lPQIndZz8Mo-unsplash.jpg\",\"width\":640,\"height\":427,\"caption\":\"WordPress sidebars\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/\",\"name\":\"Dos and don'ts for WordPress sidebars [tools included]\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#primaryimage\"},\"datePublished\":\"2020-08-24T14:46:05+00:00\",\"dateModified\":\"2021-12-27T08:21:40+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"WordPress sidebars are often underrated. Let's see how we can build them and what tips and tricks are there. Check our Dos and Don'ts!\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dos and Don&#8217;ts for WordPress Sidebars\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dos and don'ts for WordPress sidebars [tools included]","description":"WordPress sidebars are often underrated. Let's see how we can build them and what tips and tricks are there. Check our Dos and Don'ts!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/","og_locale":"en_US","og_type":"article","og_title":"Dos and don'ts for WordPress sidebars [tools included]","og_description":"WordPress sidebars are often underrated. Let's see how we can build them and what tips and tricks are there. Check our Dos and Don'ts!","og_url":"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/","og_site_name":"ColibriWP Blog","article_published_time":"2020-08-24T14:46:05+00:00","article_modified_time":"2021-12-27T08:21:40+00:00","og_image":[{"width":640,"height":427,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/pablo-garcia-saldana-lPQIndZz8Mo-unsplash.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/pablo-garcia-saldana-lPQIndZz8Mo-unsplash.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/08\/pablo-garcia-saldana-lPQIndZz8Mo-unsplash.jpg","width":640,"height":427,"caption":"WordPress sidebars"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#webpage","url":"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/","name":"Dos and don'ts for WordPress sidebars [tools included]","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#primaryimage"},"datePublished":"2020-08-24T14:46:05+00:00","dateModified":"2021-12-27T08:21:40+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"WordPress sidebars are often underrated. Let's see how we can build them and what tips and tricks are there. Check our Dos and Don'ts!","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/dos-and-donts-for-wordpress-sidebars\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dos and Don&#8217;ts for WordPress Sidebars"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5307"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=5307"}],"version-history":[{"count":5,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5307\/revisions"}],"predecessor-version":[{"id":9607,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5307\/revisions\/9607"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/5332"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=5307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=5307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=5307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}