9 min read

WordPress is the most widely used content management system amongst bloggers for many reasons. Not only does it make site management seem like a walk in the park, but it also uses a type of shared hosting, which means that most users can afford it. It has plug-ins for any occasion and desire and finally, it has themes.

For many WordPress users, finding the right theme is a long process that often leads to endless tweaking in the code and stylesheets. However, only a few ever consider learning how to create their own. If you are one of them, this tutorial by Brian Franklin will help you learn how to built and start your own theme.

Template files and DIV tags

The WordPress theme that waits to be created in this tutorial consists of one stylesheet, one functions file, one comments file and a number of template files. Each template file represents a separate part. Together they form the outline of the website’s overall look. However, it is in the stylesheet that web design elements for each template file are decided.

WordPress Plugin Development: Beginner's Guide


DIV tags are used to define, design, and format values of each template file as well as structure its content and elements. The

is often described as an invisible box that is used to separate site content in a structural manner. These are later defined in the stylesheet where size, position, form etc. are assigned. 

Template files that will be used in this tutorial are:

  • Index
  • Header
  • Footer
  • Sidebar
  • Single
  • Page

And the files that define specific functions for the theme are:

  • Functions
  • Comments

DIV tags that will be used in this tutorial are:

Using tags requires proper opening and closing. If any tag is not properly closed (

) it may affect the presentation on the entire site. There is difference between a DIV id and a class is what they are used for. Unique site features require definition by ID while values that are used to define several elements are defined as class. In the stylesheet, div id is identified with a # and div class with a . (dot).

Install WordPress

Before you can start building a theme you need to decide how to work. It is recommended to install WordPress on your local computer. This will allow you to save your changes on a local server rather than dealing with remote server access and uploading. Follow the link for further instructions. The other alternative is installing WordPress through your hosting provider. WordPress hosting is a popular plan offered by most hosts. Either way you need to have WordPress installed, remote or local, and create a folder for your theme under the directory /wp-content/themes/yourtheme.

Create the template files

Use Dreamweaver, Notepad, EditPlus or any other text editor of your choice and create the template files listed above, including the functions files. Leave them blank for now and save them as PHP files (. php) in your theme folder.

index.php

Open the index. php, add this piece of code and save the file:







The index-file now contains the code that calls to the header, sidebar and footer template file. But since there is no code to define these template files yet, you will not see them when previewing the site.

The index file is the first file the web browser will call when requesting your site. This file defines the site’s frontpage and thus also includes DIV ID tags “container” and DIV classes “post” and “entry”. These elements have been included to structure your frontpage content; posts and post entries. If you preview your WordPress site you should see your three latest blog posts, including ‘next’ and ‘previous’ buttons to the remaining ones. To shorten the length of displayed frontpage post, simply log in to the WordPress admin and insert a page break where you want the post to display a Read more link.

You will come back to index.php in a moment, but for now you can save and close the file. It is now time to create the remaining template files.

header.php

Open header.php, add this code and save the file:

br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<?php bloginfo('name'); ?><?php wp_title(); ?>





type="text/css" media="screen" />
href="" />
href="" />
href="" />










The header template file now has the opening tags and . Included in the tag is the tag that holds the meta tags and stylesheet links. The body tag includes two DIV ID tags; wrapper and header that define the boxes and hold the overall position of the site and the header content.

footer.php

Open footer.php, add the code below and save the file:




The footer is a template that defines the bottom part of the website. The footer for this theme now holds a Copyright announcement and a php code that adds the name of the blog as a permalink. As it is the last template file to be called for a site it also closes the body and html tag.

sidebar.php

Open sidebar.php, add the code below and save the file:

The sidebar template is now defined and includes the site’s pages, categories, archive and blogroll. Study the code and see the changes in the web browser. Regarding the DIV class, it is left to be designed in the stylesheet.

single.php

Open single.php, add the code below and save the file:






The single.php template file specifically defines the elements on the single post page that is different from both the frontpage post listing and pages. The code above is basically a copy/paste from the index-file, only with minor changes to the Next and Previous links. 

LEAVE A REPLY

Please enter your comment!
Please enter your name here