Create your own WordPress theme

12 Finishing touches

Now, the new personalised theme has been finalised and is ready to use. However, it is always worth adding the finishing touches now that the basis of the theme is complete. An example with the theme we have used is that removing the original background images has left a lot of white space, especially between the posts. To help resolve this issue, we are going to remove the class post_top from the index.php file. This is effectively a space that is not needed any more. Open index.php and locate <div class=”post_top”></div>. This resides about six lines down. Delete the code, press Update File and reload the site to note the better spacing. Other noticeable elements from the original theme include the old-style Search button and the Blog Feed image. New versions of the images have been created to match the theme. The simple way to replace the old images is to give the new images the same name and upload to the Themes Images folder. This will instantly replace the old with the new.

13 Advanced options

Most of the work throughout this tutorial has taken place with the style sheet, style.css. This gives the theme new images, positioning and padding, margins, text styles, colour and size. To go beyond the aesthetics, users will need to start delving into the code base. Effectively, this is already in place and been tried and tested to make sure all is operating as intended. However, it does no harm to find out what some of the PHP tags mean within each of theme elements, ie header.php, footer.php, index.php etc. Take a look inside the header.php and the PHP tag ?php bloginfo(), makes a few appearances. This displays information about your blog, mainly using the information users add in their profile. It can be used anywhere within a page template. Examples of the tag in action include the following:

<h1><?php bloginfo(‘name’); ?></h1>

This displays blog’s title styles by the <h1> tag.
Another popular tag is <?php wp_list_pages(). This displays a list of WordPress pages as links, often used in the header or sidebar. An example of how it is used is:

<ul>
<?php wp_list_pages(‘title_li=&depth=1’); ?>
</ul>

This particular example only lists top-level pages.

For more information, be sure to check out www.wordpress.org.

This tutorial originally appeared in Web Designer issue 149, authored by Steve Jenkins

Pages: 1 2 3 4