Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Mark Billen
9th April 2009

Create your own WordPress theme

12 Finishing touches

12 Finishing touches

Step12

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

Step13

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

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

    10 Comments »

    • Atlanta Web Design said:

      Nice article, thank you for the WordPress development tips! – Kate

    • tattoo said:

      Thanks for sharing, es ist großartig!

    • Ernest said:

      Does anyone know where I can downlaod the images that this tutorial requires?

    • Fastest Live Chat said:

      Thanks for sharing .. Creating own wordpress theme in less than 20 mins

    • online trading in india said:

      Awesome collection of wordpress themes

    • Adele said:

      Thanks for all of this! I am very new to WP and asked a WP designer to explain to me how it works and all I got was ‘it’s harder than programming. You’ll never get it right’! WELL! Guess what! Webdesignermag just made everything so clear and I’m working ‘behind the scenes’ on my website to convert to WP! Thanks guys!!! Thanks for the above and everything else!!

    Trackbacks

    What's your opinion?

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.

    * Required fields