In this tutorial you can watch as I walk you through exactly how to easily build your own WordPress Theme. This is the final post in the three part WordPress tutorial series, detailing how to create your own WordPress theme.
You should look at the past two tutorials where I have showed you how to create the design:
Creating Your WordPress Theme
When creating a WordPress theme I first create all the blank PHP/CSS/JS file I will need in a theme folder. My theme folder is called ‘minimalwp’.
Files in this folder, such as header.php, footer.php are called into the index.php file which helps build the page you see on screen, depending on what page you are on, WordPress will pull in different files from the theme folder. WordPress themes are fairly easy to build once you have an understanding of the template tags which provided the dynamic functionality of your blog.
The minimalwp theme is fairly simple in its construction, using mostly standard template tags, my theme folder looks like this:
Every theme you create you should document the basic information so the user can read about it before they install. Insert this at the top of your style.css to provide theme information.
Theme Name: minimalwp
Theme URI: http://www.designwoop.co.uk/
Description: A premium clean and minimal WordPress theme.
Author: David Martin @webadelic
Author URI: http://www.webdelic.co.uk
You will also need to create a nice screenshot of your theme design. All this information will be displayed as below when you activate a new theme.
Last week I created a single html file of the whole theme, now I will break up that single file to get the html elements for each file in my theme folder.
I take the header contents from my mock up file and paiste it directly into my header.php file. I now have populate the old static html attributes with the dynamic WordPress theme tags.
After I have pasted my mock-up code into my WordPress template, It’s time to go through and add in the WordPress template tags.
Just before the closing </head> tag, the wp_head(); tag is added so WordPress can insert additional code into the head itself, this comes in handy when using other plugins.
Common template tags you will use will be:
Title replacement -
[php]<?php wp_title(); ?>[/php]
CSS link -
[php]<code><?php bloginfo(‘stylesheet_url’); ?></code>[/php]
Theme URL -
[php]<?php bloginfo(‘template_url’); ?>[/php]
This file is what will generate all your posts on your blog homepage, at the top of this file I include <?php get_header(); ?> and
<?php get_sidebar(); ?> and and the very bottom of the file I also include <?php get_footer(); ?>.
These include functions will include the files, header.php, sidebar.php and footer.php into my index.php template.
I will take the html from my mock up template into the index.php file, this will be the html for one post. This html is inserted into the WorePress loop and will generate the layout for each blog post. Common template tags I will use here are <?php the_permalink(); ?> to get the link to a post, <?php the_title(); ?> to get the post title, <?php the_excerpt(); ?> to get the post excerpt and <?php the_tags(”,’, ‘,”); ?> to generate the tags for each post within the loop.
The archive and tags template are almost identical to the index file, the only difference in this instance is I include a few extra title tags. When the user comes to your blog, they are served the index.php template. On archive and tags pages they are served slightly different versions of the index template. You can customize these as much or as little as you wish. Check out the various conditional tags you can use.
These templates are exactly the same as the index.php file, but I insert these lines of code to set the page titles to the relevant page.
This template files are similar, in the fact that they are really just stripped down versions of the index file. We still need to include the <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_footer(); ?> functions into our page. The page template includes the loop that generates the post content, although there is no need to include tags that pull in ‘Read More’ button as it will only display one single page. For the page we are using this template tag – <?php the_content(); ?>, rather then <?php the_excerpt(); ?>. Using <?php the_content(); ?> will display the full post/page content, rather then just the excerpt.
You can customize the 404 page as much or as little as you wish with standard html/css, the 404.php template is even more stripped out then the page.php template. This page gets served to the user if they follow a bad link or when something most terrible happens to the user with life in general…
The single.php template is served to the user, whenever they are viewing a individual blog post. The structure is much the same as the index template, however just like a page we remove the template tags that call in our read more buttons and again replace <?php the_excerpt(); ?> with <?php the_content(); ?>.
An important template tag to include in the single.php file is of course, <?php comments_template(); ?>. If you want people to comment on your blog posts and build a conversation around your content comments are a great platform for this. Using the comments function will includ the comments.php file into your blog post.
The comments.php file looks a little more complex than most other templates we have used. Inside is alot of comment specific tags that enable you to build acomplete comments section with ease, so dont be put off!.
<?php comments_number(); ?> is a simple tag used to display the number of comments on a post.
The comments file uses its own loop,
<?php if ( have_comments() ) : ?> this checks to see if there are any comments on the post, if so, the list of comments is included using just one tag:
<?php wp_list_comments(); ?>. The comments file as standard is very customizable, having its own set of pagination links, this combined with WordPress’s own discussion settings allow you to split comments over multiple pages.
This is the final template we will use in the theme, it has been called in pretty much every template so far, in this I close up the div tags I opened in the header.php template, I also included the typekit JS and the call to the external JS files.
An important function to call in the footer is <?php wp_footer(); ?>, some plugins will included their own JS calls which are called in within this function, infact without it, some plugins will break your theme!
Making Your Own WordPress Widgets
In the footer of my theme I am including two widgetized areas, here the user will be able to add in any widgets or plugins that they download, for this example I am just including a page list and a text box for an about section.
You will need to create a functions.php file if you have not done so, within this file you will need to do this:
[php]if ( function_exists(‘register_sidebar’) )
‘name’ => ‘NAME_YOUR_WIDGET’,
‘before_widget’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
This would look like this in the functions.php file:
Once you registered and named your ‘sidebar’ as WordPress calls it you will be able to drag and drop widget in within the admin panal:
The Final Theme
Building your own WordPress theme is not to hard, it involves a little work and some research. Essentially you are taking a CSS/HTML template and and splitting the code into different PHP files and adding WordPress Template tags.
Take a look at the WordPress Codex to read up on all the available template tags.
The theme is fully constructed and it is now time to do some testing and bug fixes. In the mean time, take a look at it.
- Check out some premium WordPress themes if you do not feel you can design or code a theme.