I’ve been doing some WordPress customisation recently. Something that always bugged me about WordPress was that it seemed very hard to manipulate the page structure, so you always ended up with this very, well, WordPress-y-looking site. Now, clearly you’ve written in in WordPress,  but really you want to make it look as though you didn’t. Well that’s what I think anyhow. I’ve just spend a few hours figuring it out, and I thought I’d share it, since there didn’t seem to be a single place online where someone talked you through it.

So, to start off with, I’m using a fairly vanilla WP install, with the rather splendid Toolbox theme. Toolbox is very stripped back and minimal, and it makes it relatively easy for a new user to find his or her way around the structure of a theme.

Creating a new template

1) Open the theme folder (wordpress/wp-content/themes/toolbox) and find page.php, which is the file WordPress uses as the standard template.

2) Save the file as something different, whatever you want to call it. Mine is called two-sidebar-page.php.

3) At the top of the page, between two php tags, there’s some text, starting “The template for displaying all pages…”. Remove that, and replace it with the following:

Note in particular the template name. I’ve called mine Two sidebar page (largely because I thought if I called it Diamonds are Forever people would confuse it with the James Bond film). WordPress needs that data to name the template – it’s what you’ll see in the Template dropdown when you add a new page.

Note also that I’ve left the get_header() function in. Without this WordPress won’t be able to get all the header information, like the location of the stylesheet, which won’t break anything but it will make your site look rubbish.

Adding sidebars in the body

Now, in the body of the original page, you’ve got a division with some functions that get the content, then you’ve got  a get_sidebar() and a get_footer(). There’s no prizes for guessing what these two functions do. However, the functions file in Toolbox provides some good dynamic sidebar features. Don’t worry too much about the functions file too much for the time being), simply know that you can use <?php dynamic_sidebar( ‘sidebar-1′ ); ?> and <?php dynamic_sidebar( ‘sidebar-2 ); ?> to put two dynamic sidebars into your page. Here’s my body (matron!):

Note that I’ve put the sidebars in their own divisions, and I’ve stripped out or renamed some of the divisions around the main content area. The latter I did for simplicity, the former because I wanted to position my three new elements. I’ve included the modifications to the CSS (style.css, in the same file as page.php) at the end of this post. There are a couple of other things you’ll probably want to do:

1) I’m using WordPress so it’s set a bit like a CMS – in the Reading settings, I’ve got the home page set to a specific page, and the post page set elsewhere. I removed the sidebar functions from the index file as I found they conflicted with my new templates. Same thing goes for single.php, which is the template for single posts.

2) The content in the dynamic sidebars is controlled in Appearance > Widgets. Have a look and decide what you want in there. Coming soon (with any luck) will be some guidance on adding content from posts and pages into sidebars.

That’s it, everyone. Below, as promised, are the new CSS classes I made to lay my screen elements out (ignore the dotted lines, they’re just their to make my life marginally easier whilst building):