How to Fix a Missing Sidebar in WordPress

Every now and then crazy things happen within WordPress that cause your site’s layout to delete your sidebar, or do something else strange like move it under your content or to the footer. The WordPress missing sidebar is usually just the result of misplaced code. Sometimes it’s caused by a theme, plugin, or even an update error. Thankfully, a little bit of troubleshooting is all it takes to fix it.

Troubleshooting the WordPress Missing Sidebar

The missing sidebar problem is almost always caused by a recent change that you’ve made. Such a change may be the result of:

• A new theme
• A new plugin
• A recent post
• Recent changes in code

Some of the fixes are simple. Others may take some time to go through the code and remedy. With a handful simple troubleshooting procedures this won’t be too difficult. Let’s take a look at a few examples and see how to fix them.

Settings and Simple Solutions

I’ve learned the hard way when troubleshooting to look at the simple things first. It’s too easy to spend half a day digging into code when the problem was a simple setting in a theme. Start with any recent additions or updates like code, themes, and plugins.

Before we dig into code, let’s look at a few things that are so simple they can be easily overlooked. Some of these might seem obvious to those with lots of WordPress experience, but even someone that has used WordPress for years might not have encountered them. For example, it’s possible to have used WordPress for years and never changed themes.

Widgets Disappear with New Theme

Sometimes the solution is as simple as needing to place widgets when you change to a new theme.

Themes have different widget layouts and when you go to a new theme they have to be set up.

In this example the widget areas are in place but there are no widgets within them.

Drag and drop your widgets and you’re back up and running.

Post Layout Settings

Many themes have extra settings that you might need to check. For example, Divi gives you an extra set of post settings. On the right side of the screen across from the posts title is a box called Divi Post Settings. Here you’ll find a dropdown box called Page Layout. You can choose from Right Sidebar, Left Sidebar, and Full Width. Full Width turns off the sidebars for that post. If you have sidebars on some pages or posts and not on others this could be the issue.

Update WordPress

Make sure you haven’t missed an update. WordPress and themes are the most important for this issue. Sometimes you might have to reinstall WordPress or the theme.

Modifying Themes

One way this problem happens is through modifying the theme and then updating it. Once you update the theme all of your custom code is lost.

There are two ways around this:

1. Use a child theme. When using child themes you’ll still need to make sure the parent theme is updated.
2. Save your custom files and paste them back in after updating the theme.

Code

Sometimes we make mistakes with code. Trust me… it’s easy to do. Something as simple as using a sidebar’s name instead of id is enough to damage your layout’s normally zen state. Sometimes this is caused by an error in the code that keeps the code from executing further. It can even be code within a post. When this happens, you can see the sidebars on every page except the page with that post.

Before you start experimenting and making changes with your code, make sure you have a recent backup. Trust me, it is possible to make it worse in which case a backup is your best friend. In fact, always make a backup before updating WordPress, themes, plugins, or making modifications to your code. If there are any issues, you can restore it to the original version.

Code Within Posts

Pasting code into posts can be tricky. When copying code from other sources it’s easy to miss a tag or accidently embed random code from word processors such as Microsoft Word (Word sometimes adds its own formatting. I once killed my sidebars by pasting Amazon affiliate code from Word). Typically random pieces of code within a post will move the sidebar to the bottom of the page.

Something as simple as an extra </div> can cause the problem. This can make the theme respond as if the sidebar were outside the div element wrapper. Also check for an unclosed div element. Another possible cause is the category span is too wide and it pushes the content of the sidebar to the bottom. Look at any code that you’ve placed within your sidebars and widgets, too. This can also be caused by plugin issues or setting the width in CSS too high.

In this example the sidebar moved to the footer and the comments submission login moved to the sidebar location. It only does this on this post or a screen that includes this post. To find the problem go to each post individually until you find the specific post with the issue. Next go into edit mode for that post.

To troubleshoot I went to the post and selected the Text tab. I found a piece of code that I didn’t delete when I copied the text from another source. It was a closing </div> but it didn’t have a matching opening <div>. I removed the code and the sidebar moved back to its proper location.

W3 Developer Tools

W3 Developer Tools is a set of online tools to validate your code. It will test HTML, CSS, mobile compatibility, RSS feeds, links, and lots more. It looks for missing pieces and will highlight all of the problems so you can troubleshoot them further. This is a good choice if you have a lot of code to troubleshoot or you’re not able to find the problem. You can type in the URL you want it to check, upload the code as a file, or paste the code in as a direct input. It will then test the code and give you an analysis.

I pasted in my URL and it gave me a list of errors to troubleshoot. This can get confusing and time-consuming though if there are lots of errors that are not part of the problem.

StyleSheet

The problem could be caused by code within the theme’s stylesheet. You can find it under Appearance > Editor. Scroll down and click on Stylesheet under Styles.

You should see code that looks like this:

.sidebar

Here’s the code for Twenty Sixteen:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

In this example I’ve made a simple error when I tried to make a modification in the Twenty Sixteen theme.

.sidebar {
float: right;
margin-left: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;

Float tells the sidebar its position on the screen. I found that the float and margin positions had been swapped. The code should look like this:

.sidebar {>
float: left;
margin-right: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}

This brings my sidebar back. Other issues that can cause this are using the wrong width percentage and pixel size. You can experiment and see what works best for your theme.

Widgets

If you’re initializing widgets make sure to use the widget’s ID and not its name. This is mostly seen in free themes where the programmers place links back to their companies. Here’s an example of what the code looks like in the Twenty Sixteen theme.

function twentysixteen_widgets_init() {
register_sidebar( array(
'name'          => __( 'Sidebar', 'twentysixteen' ),
'id'            => 'sidebar-1',
'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget'  => '</section>',
'before_title'  => '<h2 class="widget-title">',
'after_title'   => '</h2>',
) );

In the theme’s functions.php file search for register_sidebar and look at the widget’s id.

// Adds a class of no-sidebar to sites without active sidebar.
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
$classes[] = 'no-sidebar';
}

Now search for the sidebar’s id and name and make sure the id is being used and not the name.

Changing this one line from the id to the name moved the sidebar below the content.

Changing it back to the id moved the sidebar back into place.

The widgets themselves could be the issue. Open your text widgets and look for missing or misplaced code. Extra tags can cause problems within widgets just like they can within posts. If you’re not sure which widget is causing the problem you can remove them one at a time until the problem goes away. Alternately, you can remove them all to see if the problem is fixed, and when it does, you can add them back one at a time until you find the widget with the bad code.

Note: It doesn’t even have to have code in the text widget. An empty text widget can sometimes be enough to keep the rest of your widgets from loading. Delete all unnecessary widgets; especially those without content.

Adding a Sidebar to a Theme

Some themes are designed without sidebars. If you want to add them you should look at our tutorial called How To Manage The WordPress Sidebar.

Final Thoughts

The WordPress missing sidebar issue can be a nuisance and make your site look wonky until you find the right fix. Taking a quick look at your settings and code will find most of the likely problems quickly and help get your site back up and running properly.

We’d like to hear from you. Have you had the WordPress missing sidebar issue? What was the cause? Do you have anything to add? Let us know in the comments.

Article thumbnail image by Sira Anamwong  / shutterstock.com