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: wordpress, theme, default theme, template, template heirarchy, header, sidebar, footer, get_header. get_sidebar, get_footer, current+post, author, layout, style, css, theme design, custom fields
Copyright Abhijit Nadgouda
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
