How to Auto Adjust WordPress Sidebar to Match Content Height


Widgets make it super easy to add cool things to our WordPress sidebar. However, sometimes your sidebars can become much longer than the actual content area. Recently a user asked if there was a way to automatically make the sidebar height the same as the content area to make it symmetrical. In this article, we will show you how to auto adjust WordPress sidebar to match the content height.

Lengthy sidebar

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

First you need to install and activate the SidebarAutomizer plugin. Upon activation, go to Settings » sidebarAutomizer to configure the plugin.

Sidebar Automizer settings

You can auto adjust the height of your sidebar by entering the div ID or Class for the content and sidebar containers. These values are different for each theme which is why the plugin cannot auto detect them. Finding these values is easy. All you need to do is open your website in Google Chrome, and open Inspect Element by right clicking anywhere on your website.

Finding div ID or class using inspect element tool

This will split your browser screen into three sections. On the bottom left screen, you will be able to see the HTML source code for your page. Moving your mouse over different elements in the HTML source will highlight them in the upper window. You need to find the div containing the main content area.

As you can see, in the screenshot above the div containing the content area uses the ID primary and class site-content.

Repeat the inspect element process once again to find the div ID or Class used for sidebar and for the single widget element.

That’s all. You can now save your settings. Visit a page on your website where the sidebar height is supposed to be longer than the content area. You will notice that the plugin will automatically hide the extra widgets to adjust the sidebar height.

Sidebar height adjusted

We hope this article helped you auto adjust WordPress sidebar to match content height. You may also want to check out how to show / hide widgets on specific WordPress pages.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.