wordpress: modifying themes

Every site design has a "content area" with a given width, and this width determines the maximum size for media that can be embedded in that page. Try to embed media wider than the content area and it will either be clipped, or it will stomp all over the sidebar. But sometimes, you want the ability to let site authors say "For this post only, suppress the sidebar and give me a content area that's as wide as the site design itself." Setting this up will make your authors and editors really happy, and it's also a rewarding experiment in WordPress theme hacking.

We need the ability to:

1. Let an author specify that a given post needs special treatment
2. Detect that setting in the template
3. Suppress inclusion of the sidebar
4. Change the CSS width of the content area

Every WordPress Post view has an optional Custom Fields section. If you don't see it, click the Screen Options tab at the top of the Post writing view. Create a new test post, enable the Custom Fields section, and create a new custom field with the exact Name "full_width". Into the Value field enter the value "1". Save the post.

Now we need to know which template handles single post views, since this is where the action should take place. In most themes, this template will be single.php. Open that template in a text editor and find the place where it invokes the sidebar:

We need to wrap this in a "conditional" that tests whether the current page is set to use the full width option. Replace that line with this:

This PHP says "Call the function get_post_width() with an argument that is the ID of the post currently being viewed. If that function does NOT return true (i.e. if the author did not set this post to be full-width), pull in the sidebar." In other words, only pull in the sidebar if the author has not set the post to be full-width.

But wait, where did this get_post_width() function come from? It's not a native WordPress function, and it's not provided by any plugin. We have to write it ourselves! Look to see whether your theme has a functions.php file. If it doesn't, create it. Go to the end of that file and paste this code:

Now your theme becomes aware of this function that's been called from within the template. Save both files and access that post on your WordPress site. Voila! No more sidebar (but the sidebar is still present on all other Posts).

That gets us most of the way there ... but simply dropping the sidebar doesn't automagically make the content area wider. The content area width is defined in the stylesheet, not in the template, and we can't put programming logic into the stylesheet! True enough - all we can do in the template is to change the name of the containing div, and define an alternate div width in the stylesheet. So, back in single.php, find the div that wraps around your post content, creating the content block (use your debugger to find it, if necessary!). It may look something like this:

Now we're going to wrap that in a conditional, just like we did with the sidebar inclusion. Replace the line above with this:

See what we did there? If the option "full_width" is enabled for that post, the containing div gets an alternate CSS ID. Otherwise it uses the usual one. To test that this is working, refresh the page and view source - you should see the alternately named div.

Finally, open up your stylesheet and define the rule for your alternate div. In this example, we already had this:

All we have to do is add another rule just below it, like this:

That should do it! Of course, every theme is different (uses different CSS techniques and naming conventions) - you'll need to tweak this to match the requirements of your own theme.

And that's it - a crash course on WordPress theme modification. We haven't covered all of the bases, but you should now understand how themes work, and where to look in the codebase to change the things you want changed. You'll need to rely on your HTML/CSS skills to make substantial changes, but you'll be surprised by how much you can accomplish with a bit of practice. Happy hacking!