How to Create a Simple WordPress Theme from Scratch – Part 1

PHP Wordpress

The structure of a WordPress theme is fairly simple, I like to start with the CSS file. It details everything about the theme for WordPress to use. You then have index.php – it’s simply the template file you’re using with the PHP template tags included. Included with that is header.php & footer.php, files that are used across the whole site. Now most themes don’t use just four files and that’s because WordPress allows you to use template files to layout different content. There are the defined layout files, such as archives.php and single.php. However you can also create your own, say, if you wanted to make a page that had a totally different layout to the default.

The style sheet is the defining file of the theme for WordPress. There are a few simple things you need to do. The first is renaming the main (if you have more that one) file to style.css, next you need to add a bit of commenting to the file.

The code above is all contained in a comment, so it won’t affect the style definitions. Now I filled it out with a few details, these will be used by WordPress to display the details of the theme to admins. Make sure you add it to the top of the file with no white-spaces before it.

I’ve gone and renamed the style sheet file from the template, it was called 1.css. I have also made a new folder called typoMastro which will be what I upload to the WordPress theme folder. Put the style sheet in this folder, but not under another directory otherwise it cannot be seen by WordPress.

 

In this step, we’re going to create the two files: header.php and footer.php. Although they are optional both are used in most themes, they’re not exactly hard to use either.

Starting with the header, create a new file in the theme folder called header.php, then open up index.htmlfrom the template and copy the following from it. This will become the header and will be displayed on every page of the site, bear that in mind when making other templates.

We’re now going to add the WordPress template tags to header.php, these tell WordPress where to inject the various content into the theme. Also remember to change that link to the stylesheet.

There’s quite a lot that’s been added but it’s all fairly simple when you look through it. All the tags above are well documented in the WordPress Codex. I’m just going to go through what each of the functions do.

language_attributes() – Prints the language type for the <html>
tag.
bloginfo() – Used to print information about the site, the parameters
are available on the Codex, ‘name’ returns the title of the blog.
wp_title() – Simply returns the title of the page.
wp_head() – Prints the javascript links and other header stuff.
get_option() – Retrieves a value from the options database.
wp_list_pages() – Lists links to the site’s pages, the parameters sort
the pages correctly and also stop WordPress from printing a default title.

Create the file footer.php and copy everything in the template from <div id="footer"> down-wards and shove it in the new file. A dynamic footer that displays the correct year, site title and a feed link is common place in themes, so lets add one.

I’ve gone and changed the footer to display the copyright icon, followed by the current year (<?php the_time('Y'); ?>) and the site’s name (<?php bloginfo('name'); ?>) then on a new line put a link to the rss feed (<?php bloginfo('rss2_url'); ?>).

wp_footer() is what WordPress uses to add things to the bottom of the
site, more often that not used by plugins to add things like site tracking code.

 

We’re now going to create index.php

This is one of the two required files for a WordPress theme (the other being style.css), so lets get started. Create the file and put it along with the rest, then add to it the following.

This simply tells WordPress where to include the header.php and footer.php files. Because this is a two part series we’re going to include the creation of the sidebar in the next article. You can either chose to leave it’s div in as static html or just leave it out which is what I will do. Add the following between the previous two tags.

This is what WordPress call the WordPress Loop. The first line of PHP starts this loop, endwhile is the end of it. WordPress fills out the loop for each article on the site, and if there isn’t any it displays that “Woops…” content. I’ve also added a navigation link that will place link’s to more articles, so visitors can take a look at older content without using the archive.

In the next article we will write up single.php, this would be what is displayed if a visitor clicks on the title of a post. It will include the commenting system, unlike index.php.

Leave a Reply

Your email address will not be published. Required fields are marked *