Customizing WordPress/K2 Pages

I wanted to create a couple of static pages on the blog, namely the about & projects pages. On each of these I wanted to display different content in different styles. This turned out to be more of a challenge than I initially though (probably due to ‘what’ I actually wanted to do). The idea was simple, the about page should contain information about me, possibly containing an embarrassing mugshot and other various contact details and info. The projects page is to be somewhere I can blog about the various personal projects I’m working on. Let me go into more detail….

The about page is pretty simple, it contains static content, no sidebar, and the page is centered. Easy huh? Well, not quite so. Firstly, lets figure out how to remove the sidebar (just as a side note this post will be referencing the k2 theme, other themes may have a different filestructure or indeed code structure). First we need to create a custom page template, easiest way to do this is to copy the existing “page.php” file and rename it to, say “about-page.php,” add to the top of the file the template name:

Remove the reference to “get_sidebar();” from the file and you’re done!

Next job is to create a CSS class for that template. I did this simply by adding the respective class to the default “style.css” sheet and referencing it from within the page template. ie;


<div class="content"> became
<div class="content-about">

I then simply copied the original “content” class in the style.css and appended “-about” to the copied class. This causes wordpress, when loading the custom page template to override the default content class with you’re new one – leaving you to customize that class however you like. This is the same for any class referenced by the template.

For reference, here is my about_page.php file:

And if you are interested, this is what was added to the style.css file:

Ok so the about page was pretty simple. Now we move on to the fun stuff – I wanted the Projects page to display a custom loop based on a pre-determined category, aptly named… Projects. For future reference, this category had an ID of ’4′

Rather than me explain every little detail of how I accomplished this, I’ll just give you the code, afterall, if you are reading this you’re probably pretty comfortable messing with code. The basic premise was to take the majority of the content from the “k2-loop.php” page and cram it into my custom page template, all be it with a little bit of code at the top (credit goes to this post) to display only posts in the specified category.

The same premise applies as above with the css, however this time the css is a proper override, referenced by the </p>
<div id="primary: class="projects" role="main"> tag, with the corresponding style.css addition of .projects #primary.

The only thing I didn’t manage to get working was the “more” tags, for some reason on that page template they were ripped out and wouldn’t display no matter what I did. To rectify it I just changed “the_content” to “the_excerpt” under the entry-content div. This then displays the post in exactly the same format, style and place as the homepage, but just shows the excerpt as the post summary, which in all fairness works out much better for that particular page. Still, I would be interested to know if anyone can shed any light as to why it wouldn’t work with the more tags.