WordPress Advanced Theming with K2

Technology Blog

K2 is a popular WordPress theme, noted for its sophisticated features. What’s more, it can be used as the basis for your own themes, giving you access to some great site tools.

If you are used to the standard Kubrick theme and others like it, you may be slightly confused at first by the way the K2 files are organized. Most themes have a separate instance of the loop code in each main template, so there’s one in index.php and another in page.php for example. K2 instead keeps its loop in a separate file called theloop.php, which is included wherever needed.

This has advantages and disadvantages. It means that consistency of appearance is ensured, but at the same time when variation is required things can get hairy. K2’s loop code is much more complicated than in most other themes, and this is one of my least favourite things about it. It cries out for some refactoring. If you need to change it, do so with care.

Adapting K2 to another design

Here are the steps I’d suggest you follow to customise K2 to make a new theme.

  1. Copy the K2 theme to another directory, and edit the comments in style.css to give your new theme a meaningful name. Activate your new theme through the control panel.
  2. Go to the K2 options under presentation and choose those you want. Make sure you set the number of columns correctly to match the new design.
  3. Edit the header.php and footer.php files first. In most designs the header and footer can be worked on in isolation from the main content, and getting them right will give you the confidence to proceed. Edit the CSS (in style.css) carefully so only the header and footer are affected. At this stage you can also set global font and color properties.
  4. Now you need to edit style.css to get your column widths right. Bear in mind that the sidebars in K2 come after the main content in the HTML, which is great for SEO but can be confusing when playing with layout. In a 3-column layout the left-most positioned column is the last in the page source. This also means that changing the geometric properties of the central column or the right-hand sidebar will affect the left-hand one as well. Firebug can be a big help at this point!
  5. Now you can set about editing the format of the main column items such as posts and comments.
  6. Time to get widgety! K2’s sidebar manager (SBM) is one of its strengths. It has a fairly intuitive drag’n’drop AJAX interface, and the ability to control which widgets appear where. If you are feeling extra bold, try your hand at developing your own widgets: SBM makes it very easy to give them editable options as well.

K2 has even more to offer than I’ve covered here including smart archive navigation and the mysterious “asides” feature. Hopefully I’ll get to those in a future post. In summary, K2 makes a great starting point for custom themes. Even though you may need to spend some extra time getting accustomed to its ways, it’s well worth the trouble.

One Response to “WordPress Advanced Theming with K2”

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>