WordPress – Restructure Your Theme

WordPress Site Architecture 1.5 gives a nice description of how the template files are used to create the resulting web page. In addition to this Lorelle’s Designing Themes for WordPressMU explains nicely the details to consider when designing a theme. It should not just be pretty, but it should be pretty valid and pretty detailed. Let us look at the control and restrictions WordPress gives to for designing themes.

The good thing about WordPress is that it gives you complete control of the theme – which includes

  • Structure of the page
  • Content is to be shown
  • Formatting of the page

The only restriction that WordPress enforces is the template names in the template heirarchy – index.php, single.php, page.php, category.php and likes. The heirarchy itself is a very powerful feature using which one can design a theme with just one template file – index.php. WordPress gives two pre-packaged themes with the installation.

Anatomy of the Default Theme

The default theme structure contains following components in the page display:

  • header
  • main area
  • sidebar
  • footer

The main area is controlled by the corresponding template:

  • index.php
  • single.php
  • page.php
  • category.php
  • archives.php
  • 404.php

The components follow modular design, header.php contains everything about header (masthead image, html head, logos), sidebar.php for sidebar and similarly footer.php for the footer. All or most of the templates include these components by functions like get_header(), get_sidebar() and get_footer(). If you want to add a copyright notice to your website, just go and add it to the footer and it will be reflected everywhere.

Components of your Theme

For your theme though, you can decide what components you want. It is in no way dependent on the default theme or other aspects of WordPress. For example, if you want a three column layout, instead of just a sidebar, you can have a left sidebar and a right sidebar. If you want top-level navigation, then you can choose to have a component for it. Or a component for breadcrumbs. Structure of your theme is completely your choice.

So, in addition to the files mentioned above, you can have navigation.php and leftsidebar.php. And then you can include them in whichever templates you want to include them into. You can do what get_header, get_footer and get_sidebar do yourself by using

<?php include('navigation.php'); ?>
<?php include('leftsidebar.php'); ?>

This code should be placed where you want the navigation and left sidebar to appear.

Components and Template Files

Once the components and layout of your theme is decided, its time to implement in WordPress templates. This also depends on which content you want to show where. For example, if navigation is going to included in all the files, it might make sense to just include it in the header component. Consider this scenario:

This is a question I have come across sometimes. Typically a post becomes long and the meta data or related information about the post is put in the bottom. Would it be more usable if I can put it in the sidebar?

So the next question is, how do I access the current post’s information in the sidebar? The way it is included in the default theme, it is not supported. The reason is that usually the sidebar is included outside the loop in a template. Just include it within the loop and all the template functions will be available there. Using this you can not only show categories of the post, but also author information, related articles, or any custom field of the post. The sample code will look like this:

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
  <?php get_sidebar(); ?>
  <div id="content" class="narrowcolumn">

In the sidebar you can then use any number of template functions you want to use, e.g., the_author() for displaying the author name or use wp_getpostcats() to get categories associated to a post. All the information related to the post being displayed id available. If you look at the loop

Instead of get_sidebar() you can include any specific file you have for the component.

There is a way of getting the current post information in the sidebar outside the loop too, but I would categorize it under hacking. $posts is a global variable used by WordPress, when a post is being displayed, $posts[0] always contains the post being displayed. You can then use $posts[0]->post_author to get the author name and other information. But this falls under hacking because $posts is not part of the plugin API. Later, WordPress team can choose to change the name of this variable for various reasons and your theme will break because of this.

There are innumerable number of combinations you can do with the freedom you have with WordPress templates, it is all upto your imagination.

Layout and Style

Layout of your webpage can be completely controlled in the CSS. CSS in WordPress let you control two aspects of your design – layout and the style. Whether you want to show the sidebar in the left or right can be switched just by changing float: left; to float: right; in the CSS ID associated with the sidebar.

WordPress lets you control not only the attributes in the CSS classes or IDs, but also the CSS class and ID names themselves. You yourself can create the templates where you can specify the CSS class and ID names and then specify attributes for them in the CSS.

Separate Syle From Layout

As mentioned earlier, CSS in WordPress controls both – layout and the style. If these two are physically separated then you can later choose to change just the style (e.g., colors) and keep the layout same. This also applies a discipline to the editing of CSS, as the changes required for layout and style are in different files. The only restriction WordPress puts is on name of CSS file it uses, it is called style.css. You can very well create your own CSS files, e.g., layout.css and formatting.css and then import them in style.css using:
@import url('layout.css');
@import url('formatting.css');

Site Search tags: , , , , , , , , . , , , , , , , ,

Copyright Abhijit Nadgouda

8 Responses to “WordPress – Restructure Your Theme”

  1. Lorelle VanFossen Says:

    >>>It should not just be pretty, but it should be pretty valid and pretty detailed.>>> Stepping Into Templates from the WordPress Codex, the online manual for WordPress users. It takes you step by step through the process of how templates work and how they work together to make things happen and appear on your blog.

  2. Abhijit Nadgouda Says:

    Yes, nice codex document, I had missed it completely.

  3. anand Says:

    how to design a php based theme or change the existing theme

  4. Abhijit Nadgouda Says:

    Hi Anand,

    I am assuming your question is in WordPress context. When you install WordPress, you get two themes packaged with it – the classic and default versions. The easiest way to begin is to make a copy of these themes and play around with the template and CSS files. Read the WordPress codex documents. Additionally, Lorelle (http://lorelle.wordpress.com/tag/wordpress-themes/) has some excellent posts on designing themes.

    Hope this helps.

  5. Joie Says:

    Index page: index.php no articles/posts

    Can I add the posts in articles/index.php

    like this:

  6. Abhijit Nadgouda Says:

    Hi Joie,

    I am sorry, I didn’t understand your question. Can you elaborate or point to some site?

  7. true Says:

    Perfect pages… tnx

  8. search Says:

    Hi My Friend,

    This site is very nice. I am new to computers and blogs and am just
    looking what is out there, to get ideas for my own site someday.
    search engine ranking

    Best Regards,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: