Prevent Overgrown Sidebar Height In WordPress

Now a days, almost all WordPress themes provides you a responsive layout as that looks good on all screen sizes but there is one more problem which is generally ignored by most website owners, it is the height of your sidebar.

For instance, if you a re using a lot of widgets in your sidebar, they will cause unnecessary scrolling area on posts having less content in them.

As a result your sidebars become longer than the actual content height. In this tutorial, we will show you how you can make your sidebar adjust itself to match your content height automatically.

There are two ways of fixing sidebar height:

First, you can use less number of widgets and make the last one sticky. We have already discussed about this here.

Second, you can use SidebarAutomizer plugin, it works by removing last sidebar widget(s) on pages where your content height is smaller in comparison to your sidebar height.

This way the plugin prevents height of your sidebar to overgrown height of your content and hence your visitors see equalized content and sidebars on your website.

How To Use Sidebar Automizer Plugin?

Start by installing and activating SidebarAutomizer in your WordPress site. Upon activation visit your admin area dashboard Settings -> sidebarAutomizer page.

Now enter the div ID or Class of your the content and sidebar containers.

How To Find DIV ID Or Class Of Your Sidebar And Content Area? Remember, the values are different in each WordPress theme. But you can easily find these values by visiting the homepage of your website, right clicking and selecting ‘Inspect Element‘ option from the context menu.

Now by hovering your mouse over elements listed there in the source will be highlighting them in your window. Just find the div ID having the content area and div ID containing the sidebar.

Paste these IDs on sidebarAutomizer settings page and save your changes. That’s it.