Designing and Coding a Wordpress Theme From Scratch (Part 9)

Webmaster Blog

Designing and Coding a Wordpress Theme From Scratch (Part 9)

Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”
Part 7 - “Beginning with PHP for Wordpress”
Part 8 - “Putting the Press in Wordpress with PHP”

Because Wordpress is fundamentally a PHP system we can add a few snippets of code to make our header, footer and sidebar files dynamic.

Marking Up Header.php

Your blog header file usually contains the title of your site linked to the homepage. In an HTML page we would simply add text or place an image and link to the homepage using <a href=”"></a>. The key to making our Wordpress theme, however, is we need to make all our links relative so that the end user can install the theme and use it with their own unique site with as little fuss as possible. It should just work.

How is this done? We use PHP requests to request and print the blog title allowing it to be dynamically relative to the database.

The code for a text blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

The code for an image blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<img src="your/image/path.jpg" title="<?php bloginfo('name'); ?>" />
	</a></div>

These are the only two codes we need to place in our header.php file. In my case I needed to request other PHP documents that are meant to be displayed before the document continues: the sidebar and the center rotating headline areas. I this did using this code:

	<?php require('yourphpfile.php'); ?>
	<?php get_sidebar(); ?>

Still confused? The image below contains a region map of my theme’s index.php as it displays in a browser. The red region represents “header.php”, the purple region represents “center.php”, the blue region represents “sidebar.php” and the green is the post area, the code for which is contained in index.php.

Because the format of my blog is unique to my design this may not apply to your own design, I just want to make sure everything is throughly explained so that when you download my theme in Part 10 you’ll understand how everything works.

Marking Up Footer.php

Footer.php is even easier because there’s no crucial PHP requests that need to go here to make it function. This means it can be entirely HTML or you can add a dynamic request for the blog title like you did above. You may want to try something like this:

	<div class="footer">©2008 <a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

…which would simply display the copyright and year followed by the blog title.

Marking Up Sidebar.php

Sidebar.php is essentially the same in that it can contain nothing more than HTML or it can also contain PHP queries. Here are some popular PHP queries often used in sidebar.php:

	<strong>Display the Blogroll:</strong>
	<?php get_links_list(); ?>

	<strong>Display the pages of the site:</strong>
	<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

	<strong>Display the site's categories:</strong>
	<?php wp_list_cats(); ?>

I recommend reading “Customizing Your Sidebar” if you’d like to explore your options a bit more. In Part 10 we’ll create the other pages of our theme and then we’ll learn all about“Packaging a Wordpress Theme for Distribution”

Bookmark It