Though not every website uses them, sidebars are an essential part of WordPress. They serve as a way to highlight content or provide additional information. For instance, sidebars are often utilized to show calendars, posts archive, banners, links to other pages on the website, or advertisements for external products and services. This is great when it works as intended, whether it be a static sidebar or a sticky one that follows visitors as they scroll. Problems arise when it starts appearing underneath rather than on either or both sides. Hence, we decided to show how to fix the sidebar below the content WordPress error. Let’s begin.
Things to pay attention to
Before you do anything, you should observe how and when the error appears. That will help you, and, by proxy, anyone you may contact for help, whether a web hosting service, problematic plugin/theme developer, or WordPress Community and other forums. To clarify, you should conclude whether some of this is the case:
- The sidebar goes below the content on a single page
- The error is isolated to blog posts, i.e., doesn’t appear on the home page and other pages
- Only pages that share a template are affected
- The error appears after you try to edit HTML or CSS or open WordPress Live Preview, but not before that
- All pages on the website suffer from the problem
1. Revert the latest alterations
We’re starting with steps you’ll deem obvious at first glance, and perhaps even sigh. However, with so many different causes, some exclusive to your website or a set of actions, it makes sense to start simple. If you manage to find the reason for the sidebar below content error on your WordPress website, you can fix it on the spot, without reading the techniques below. With that said, we propose you:
Turn back any code-related changes
Did you access your WordPress website via FTP or used Theme Editor within WordPress? Edited HTML, CSS, or PHP files? Did you add code snippets or any custom code from the aforementioned languages? All these could interfere with your website, cause conflict, and push the sidebar out of its regular place on either side of your content.
Investigate plugins
Have you installed a WordPress plugin recently? Or, perhaps, updated one shortly before the issue arose? Start by disabling it to see if that solves the issue because plugins tend to be the culprit. This especially applies to those that have to do with custom post types, custom page layouts, or anything related to header, footer, and sidebar. If it gets rid of the problem, you can:
- Inspect the plugin and see if it adds extra HTML or CSS code (common with contact forms and pop-up/advertisement plugins) or has a typo or an error in code (Advanced users only)
- Contact the plugin developer and explain the problem
- Look for an alternative on the WordPress repository
Check your active theme and its compatibility
The currently installed and activated theme may be a problem if it’s the latest addition to your website. Content on your website may be incompatible. Additionally, the customizations you made to CSS, plugins you installed, or custom functions you added to functions.php may not play well together. Therefore, you should recall what the most recent modification was, and regress it to run a quick test.
2. Set content width to 100%
Whether you tried to widen your content and bungled it up or it was a result of a plugin or theme, the result is identical. Your content width (with all elements combined) might exceed 100%, so the sidebar simply cannot fit. Unsurprisingly, this would push the sidebar below WordPress website content until you fix the error.
It’s hard to determine what could’ve affected it, but the place to start is your theme’s primary stylesheet file, style.css, in the following location: “root/wp-content/themes/theme-name”. We already taught you to edit CSS in WordPress and mentioned the file.
The code may look like this:
.wrap {
width: 80%;
}
That simply means all the elements with a class name wrap will have a width of 80% of the content width (if it’s the parent element). Look through the file and ensure all defined classes add up to 100% in width. You may also have to add up pixels if the element has a property such as:
.wrap {
width: 100%;
max-width: 410px;
}
Though we would tell beginners to check other methods if they encounter “rem” and “em” values, advanced users would also need to check those are in line with the theme and add up correctly.
3. Inspect for extra or unclosed tags
Though any extra tag (such as <tag>content<tag></tag>) or tag that isn’t closed (<tag>content) can cause issues, <div> and </div> opening and closing tag, respectively, are oftentimes the culprit in this particular case. Without both tags present and sidebar code in-between, browsers will load the sidebar but cannot place it correctly, hence the wandering across the page, including the bottom. To solve that problem, depending on the intricacy of your website, you can use:
- Free reputable third-party solution: Enter your website URI (Uniform Resource Identifier), upload a file or copy the code to check with the W3C Markup Validation Service tool.
- For simpler websites: Access your website via FTP and look through all .html and .php files that correspond to pages you experienced the problem on.
- For complex websites: Method 1 from the CSS editing guide we mentioned in method 2 above is pretty handy. Once again, depending on the affected pages, you should check the Theme Files section. We propose starting with the files under the “Template parts” section before going over files under “content”. Click Update File after you’re done.
4. Ensure your theme has correctly defined float properties
Content width is at 100% and your tags seem perfectly fine? There’s one more thing that could cause all this: proper floating properties. Here’s what to do:
- Visit any page showing these symptoms on Google Chrome.
- Right click and select Inspect.
- While in the Elements tab, click on the sidebar.
- Code will be highlighted. More importantly, you’ll see the class or element code isolated in the Styles tab.
- Double-check the width adds up.
- Ensure the sidebar is floating correctly. For example, to the right of content. Here’s a quick example:
.wrap {
max-width: 410px;
float: right;
}