How the Sidebar Below Content Error in WordPress

Sometimes when working on your WordPress website something might go wrong and you'll find yourself ending up with your sidebar appearing below your page content messing up the site layout.

This is a common WordPress error and this post will cover

• Causes of the error
• How to troubleshoot the error
• How to fix the error

Causes of the Sidebar Error

Firstly, I will give a brief illustration of the sidebar error.

The sidebar error is an occurrence where the sidebar on a page moves from its original position on the left or right side and reappears below the main content on the website.

Source

The causes of a sidebar error are not far fetched, the sidebar error could occur as a result of

• Error in the HTML code

Usually a <div> tag not closed properly

Source

• Error in the CSS code

the common attributes causing this in CSS are the height width and float attribute

• An old layout being incompatible with a new theme
• A damaged plugin (not so common)

Fixing the Error

Before attempting to fix the error you will need to check which parts of the website has been affected by the error.

You can use this checklist for confirmations

• Check page.php page file if only the pages are affected by the error
• Check the single.phpfile if the error displays on all blog posts
• Some plugins create pages automatically as a result of their functions, if the error is limited to pages created by a certain plugin then you should double-check that plugin.
• If the page affected has custom HTML and CSS customizations added by you, you need to review those customizations.
• If you recently made modifications to your theme then you need to create a backup for the website, remove the changes and create a child theme where you can add the changes

Useful Tools To Make Troubleshooting Easier

There are certain free tools on the internet that you can use to automatically scan the code on your website to determine if there are any errors. Some notable ones are

For HTML Validations

• W3C Validation Service
• Online Web Check

For CSS Validations

• W3C CSS Validation
• ServiceOnline Web Check

Use an FTP client to gain access to the file causing the error, find the error, fix it and save.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---