A client recently asked what they could do to make the content in their sidebar column match their main content column.
The short answer is: it’s not easily user-editable, but it can be done.
WordPress works by using “theme files” to construct a web page ‘on the fly’. The content of the page is stored in a database, but the design of the page is stored in theme files. While WordPress only requires two theme files (index.php and style.css), most WordPress web sites use at least six files. The main theme files are as follows:
- header.php – contains information for the header
- index.php, front-page.php, page.php, or single.php – calls the header and footer; contains instructions for the middle part of the page
- footer.php – contains information for the footer
- sidebar.php – contains instructions for the sidebar
In this client’s particular design, the header and footers go all the way across the page and the middle content area is split into two columns. The sidebar is a column that goes all the way from the top, just under the header, to the bottom, just above the footer. The other column is where the post or page content goes. Whichever column’s side has more content will determine how long the page is. The sidebar only appears when it’s ‘called’ to appear. Each page you see could be a different type of page. Page types are as follows:
- Front page – what the home page looks like (front-page.php)
- Page page – what a Page looks like (page.php)
- Post page – what a Post looks like (single.php)
- Category page – what a Category view of Posts looks like (index.php, category.php, or archive.php)
For example, the front-page.php theme file controls the home page and it doesn’t call the sidebar. There are other types of theme files like search.php for searches, but this is a short list. There are also more specific theme files that can be created based on a page name. For example, I could create a theme file called “page-health-benefits.php” for the Health Benefits page and I could code it to look completely different if I wanted to. I could also call a different header, footer, or sidebar, for example.
Here are some options for when columns don’t match up in your WordPress design layout:
- Stop using the sidebar – You can eliminate the problem by only having a one-column layout.
- Page-specific theme file(s) – I can code a theme file specific for the Health Benefits page which would show a different sidebar altogether or none at all.
- Page Continuation / Pagination Code – to make the sidebar area never have white space at the end, I could code in a ‘page continuation code’ so that when the content gets to a certain length, it paginates to a ‘page 2’.
- Manually Code in Scenarios to the Sidebar: I can code in scenarios that say, “If the page is Health Benefits, then display more content in the sidebar”. This would not be something you could easily edit.
Summary
It’s not uncommon for sidebars to have more or less content than it’s corresponding column. Dynamic changes to column length are possible through custom coding. Custom coding makes the site harder to keep updated in the future, but that’s not really your problem unless you’re doing it yourself. If it really bothers you, go to a single-column layout. If you can’t get over that extra white space, contact us. We are an Indianapolis web design firm that makes custom WordPress websites.