Stop Tweaking! Create Your Own Wordpress Theme
Published: Mar 3, 2009
This tutorial goes out to anybody who has ever found a Wordpress theme he thought he liked only to end up tweaking the stylesheet and template files until it looked nothing like the original. We ask you this; why not create a Wordpress theme from scratch and learn how things work? Think it's too much hassle? Get your copy/paste moves ready. We'll show you how to create a theme in 10 steps.
In this tutorial we willshow you how to create a classic Wordpress theme. You will learn how to build valid XHTML template files, how to create them in PHP and define their stylesheet design. This is a beginner's guide that will hopefully result in a theme of your own or the very least help you understand how a theme is built.
Table of Content
Since this turorial is quite extensive a table of content has been included. This is so that you can finish each step in your own time, not having to go through the whole tutorial at once.
1. Create Index.php and Style.css
2. Define the header
3. Separate the content
4. Add the Sidebar
5. Make sidebar widget-ready
6. Create the Footer
7. Validate Your Code
8. Start Stylesheet & Initial Tweaking
9. Add Commententing
10. Divide index.php into separate template files
Installing Wordpress locally
Before you start we suggest you get Wordpress installed on your local computer. It will allow you to view your creation offline which is much more convenient than using a remote web server. To do this (Windows XP is required) you need to download XAMPP lite. Follow our 3 steps to install Wordpress on your local computer and have a local server and Wordpress up and running in no time. Remember to create a local folder for your theme files: c:\xampp\htdocs\wordpress\wp-content\themes\yourtheme
Remote Wordpress Hosting
If you do not wish to install XAMPP lite on your personal computer, since it will require both space and memory, you have other options. Eventually you will still need to move your theme to a web server and we can help you find a secure and relibale hosting plan to meet your Wordpress needs. Here at WebHostingSearch.com we have dedicated an entire toplist to a type of hosting plan that is referred to as Wordpress Hosting. This simply means that the hosting providers presented on the list all offer tailored hosting plans that fully support the Wordpress CMS. This includes MySQL, PHP, Linux/Windows and pres-installable scripts to ease your Wordpress installation process.
1. Create index.php and style.css
To save you time and sanity we'll jump right to it. Open your favorite text editor, Notepad or EditPlus recommended, and save the new document as index.php to your theme folder. Copy all code from this file: index.txt and paste it into index.php.
Then open another new document in Notepad and save it as style.css. Paste all the code from style.txt into you your css-file and save again. You now should have two files in your theme folder: index.php and style.css. We'll come back to fill the stylesheet later. For now you can close the css-file.
Activate the Theme
If you have installed Wordpress on your local computer, log in to the Wordpress admin and click Appearance>Themes in the left dashboard column. If you are running Wordpress on a remote hosting server simply replace localhost/wordpress with your domain and directory location.
Back to the admin, locate your theme, New Theme, and activate it (Note! If you first want to change the theme name, simply open your style.css and change the theme details listed there). Click on the link in the top right corner to view your site. It should display a blank page. If any errors occur, double-check your index-file and css-file.
2. Define the header
The header is a standard template, used in most PHP based websites and certainly Wordpress themes. It defines the top section of a page. Open the index.php file and add this code in between the <body> and </body>:
<div id="wrapper">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>
</div>
What are DIV tags?
You are using the <div> tag to initially define the header. A DIV-tag is like an invisible box where you include the things you want in the header. Assigning an ID to the div-tag is so that you later may define the design of the header in the stylesheet-file, style.css. When defining the design of a certain div-tag you can either use an ID or Class. Simply put, DIV ID is for unique designs and DIV Class for reoccurring designs.
Save the file index.php and open your web browser. Go to http://localhost/wordpress to view the changes. Remember to always start the XAMPP software and activate server and database. Otherwise your site won't show in the web browser.
Code Explanation
You should now see the blog title and blog description in the upper left corner. We have thus used DIV tags to define two invisible boxes so far: the "wrapper" and the "header". The "wrapper" is simply added as the big box in which the other smaller boxes, like the header, will be placed. The "header" DIV now includes the blog's title and description using:
- <h1> - to determine the title's size
- <a> - to make it a link
- 2 PHP codes within the <a>tag to display where the link should lead and what it should say. A 3rd PHP code has been included to add the blog description.
Included PHP code
- <?php bloginfo('url'); ?> - defines the link source as blog-url: http://localhost/wordpress
- <?php bloginfo('name'); ?> - Defines the title as the blog's name: New Theme
- <?php bloginfo('description'); ?> - code to display the blog description.
3. Separate the content
Next thing to do after defining the header is to make sure that the following content will be properly separated from other sections like the header, footer and sidebar. Here the blog's posts will be displayed. In the Wordpress community this slip of code is referred to as the Loop.
Add the invisible box for posts
Open you index.php and add this DIV ID in between the <body> and </body> tag under the header div tags:
<div id="box">
</div>
Then add this PHP code within the DIV tags:
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
Add the Loop
By first adding a ID-assigned DIV tag you have created an invinsible box which you will later get to style and define in the stylesheet. Inside the invisible box you have put the loop; PHP code that basically calls posts, if there are any, from the database to be displayed on the site, in the "box". To structure the posts that will appear in the "box" div tag you will now define the post title(as a permalink) and the post as content.
Add this code after the_post(); ?> and before <?php endwhile; ?>:
<div class="post">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
You have now created two more invisible boxes within the "box"; one for the post title (div class="post") and one for the post content (div class="entry"). In these div-tags you have also entered PHP code that calls for the post's specific title name, making it a permalink, and the posts content.
Add postmetadata
To add postmetadata to each post simply copy all the code from this document: postmetadata.txt and paste it under <?php the_content(); ?>. You will now have comment details, category etc. displaying in the post.
And last but not least you need a link to the rest of your posts that didn't make it to the frontpage. In the Wordpress admin under Settings>Reading you can decide how many posts that should be displayed on the frontpage. Your visitors will then be able to find remaining posts thanks to a Next and Previous link under listed posts.
Add this code between <?php endwhile; ?> and <?php endif; ?>:
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
Now save the index.php-file and refresh your web browser window. In order to see the Next and Previous links you need to 1. add more posts and 2. define how many post to be displayed on the frontpage.
So far your index.php should look like this. Do a cross-reference with your own code to make sure you haven't missed anything. If you have, simply select all you code and replace it.
4. Add the Sidebar
The sidebar is an essential part of any Wordpress theme and it is now time to add it. In the sidebar you will add listings of categories, pages, archive and blogroll. Later on you will also make the sidebar Widget-ready so that you may use the Widget function in the admin to customize the sidebar.
To add the sidebar including category, page, archive and blogroll listings add this code under the "box" div end-tag in index.php:
<div class="sidebar">
<ul>
<?php wp_list_pages('depth2&title_li=<h2>Pages</h2>'); ?>
<li><h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
<li><h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php get_links_list(); ?>
</ul>
</div>
Save index.php and refresh you browser window. Your index.php code should now look like this
5. Make sidebar widget-ready
This step is easy. In order to make the theme work with Wordpress' widget feature we need to create a file called functions.php. Open Notepad and a new document, save it as functions.php in your theme folder. Copy the code from functions.txt and paste it in to functions.php. Then open index.php and add this before the first <ul> tag in the sidebar DIV:
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
And this code right before the last </ul> tag in the sidebar DIV:
<?php endif; ?>
Save the index.php and refresh your web browser. No changes will appear until you start using Wordpress Widgets. If it does, double-check you code.
6. Create the Footer
The last template you need is the footer. This part of the page defines what comes in the bottom; normally Copyright announcements and page-links. Add this code to index.php, under the sidebar DIV tags:
<div id="footer">
<p>
Copyright 2007 <?php bloginfo('name'); ?>
</p>
</div>
View code here and screenshot below.
You now have a footer section containing Copyright and your blog's name. We will soon start looking at the stylesheet where you will be able to style the footer as well as all the other DIV tags/ invisible boxes.
7. Validate Your Code
But first it is time to validate your code, just to make sure the code is clean and worthy. Open a new tab in your web browser and visit the XHTML Validator. View the page source of your site (go to site, right-click, choose page source), copy all code and paste in the window Direct input at XHTML Validator. Click "Check" and hopefully your code will be passed. Otherwise the validator lists its noted errors below the box.
8. Add Commententing
Leaving the CSS tweaking for a moment, you'll now get to not only add a commenting feature to each post, but also start dividing all the code in the index-php-file into separate template files. You'll then use special PHP function for Wordpress to call on specific template files when a page is requested by the web browser. Let's start with the comments.
Add the comment feature
Open Notepad and save a new document as comments.php to your theme folder. Paste all code in comments.txt into comments.php, save and close the document. Then paste the code from comments.css and paste it into the empty style.css. Where in the stylesheet does not matter, as long as the code is correctly closed.
The next step is dividing the posts into a separate template file; single.php. You will later continue to divide the index.php into separate template files.
Open Notepad and save the new document as single.php and then as page.php in your theme folder. Paste all code from index.php into these files and save them. You have now created separate template files for pages and posts since they normally look different in classic Wordpress themes. For now we will concentrate on the post template file, single.php, since commenting rarely is applied to static pages.
But before we forget it, you have to replace <?php posts_nav_link(); ?> with this code in single.php to create next and previous links below the single post:
<?php previous_post_link('<< %link') ?> <?php next_post_link(' %link >>') ?>
Finally to add the commenting function to published posts, add this code under the "entry" DIV end-tag in single.php:
<div class="comments-template">
<?php comments_template(); ?>
</div>
Save your files and refesh your browser window. Go to a single post and see the comment feature and navigation link under it.
9. Divide index.php into separate template files
Previewing the theme in your web browser you can see the theme works as it is and you could even leave it as is. Regardless, to keep your files as clean and structured as possible we shall divide the DIV tags and code content into several template files. This will ease future tweaking and additional programming.
Let's start by creating all the template files. Open Notepad and create the following php-files, then save them to your theme folder: header.php, sidebar.php and footer.php. Starting with the header; copy everything from the top down to the end of the "header" div tag in index.php and paste into header.php, single.php and page.php. Then replace everything you have selected in index.php with this code:
<?php get_header(); ?>
Then select the "sidebar" DIV tag, from start to end, in index.php and copy it into sidebar.php. Replace what you have selected with this code:
<?php get_sidebar(); ?>
The same goes for the "footer" tag in index.php. Select everything from the start of the footer DIV tag to the end of the page, including </body> and </html> and copy it into footer.php. Replace what you've selected in index.php with this code:
<?php get_footer(); ?>
When you've replaced all code with the code above, your index.php should look like this:
Note! Do not forget to divide the code into its appropriate template files, in single.php and page.php as well.
10. Start Stylesheet & Initial Tweaking
Now comes the really fun part. Up until now we have kept you buisy defining what content your Wordpress theme will have. The only element you have defined in the stylesheet is comments. Now you get to decide how everything else will look as well. In the stylesheet you'll define all the remaining DIV ID's and Classes. So let's get to it.
Note! Make sure you have both FireFox and Internet Explorer open when you style your site. The trick is to make the design work for as many browsers as possible, as they all interpret CSS differently.
Open the style.css - file you created in the first tutorial step. Simply copy all the code from stylesheet1.txt and paste it into the stylesheet under the */. With all the DIV ID's and Classes defined you can now locate them in the stylesheet and change their assigned values as you wish.
Here are some design values that are used to define the different elements of the site:
Font-family
Defines the ovarall typography of the site. Normally added to the {body} value in the stylesheet, you also need to add two or three font-families so that the web browser will have alternatives if the first on does no work. Here is an example from the stylesheet:
{body
font-family: Arial, Verana, Times New Roman;
}
Margin
When setting the margin you are defining the space around an element. Margin is defined according to four values; top, right, bottom, and left. In plain code an elements margins is thus defines like this:
margin: 0 0 10px 0;
Defining an element with the values in the example above, it would thus have a 0px top-margin, 0px right-margin, 10px bottom-margin and 0 px left-margin. The code in the pink boxes we use in this tutorial, for example, have a standard 10 px bottom margin.
Margins are also used for position. In the stylesheet for this tutorial we have centered the "wrapper" DIV tag using this margin code:
margin: 0 auto 0 auto;
Padding
The padding value defines the space between the element border and its content. Padding properties are defined according to top, right, bottom, and left margins and looks like this in plain code
padding: 0 0 10px 0;
Float
This value defines where in an element a text or image shall be set. Left, right or Default will set the text or image to the left, right or as inserted in the element. Common is to place thumbnail images or text paragraphs to the left in an element, thus requiring this definition in the stylesheet:
float: left;
Clear
When the postition of text and images are set by the float-tag within an element, the clear-tag simply clears the sides. The clear tag can be defined to clear both, left, right or no sides of an element. An example:
clear: both;
Width & Height
We have set the width for the ovarall wrapping invisible box (div ID wrapper) to 750px since it ensures proper display on smaller screen resultions as well. The width value simply defines the width of the parent element. It is important that all other elements are not wider than this main width.
For example, we have set the width for the "wrapper" to 750px, the "box" to 500px and thus the sidebar to 240px since it has a 10px left-margin (10px+240px+500px=750px).
The height value is useful to alter headers and footers for example. This value simply defines the height of an element. Try adding this slip of code when defining the header and footer DIVs in the stylesheet:
height: 150px;
As you can see when you save style.css and refresh your web browser window, the styesheet has added a design to your site-elements. Basic elements like background color and font-family have been defined in the body-tag. Special design rules have been set for the "wrapper" DIV ID, that for example has been centered and limited to 750 px in width. After you have finished this tutorial we urge you to return to the stylesheet to create your own web design.
Congratulations! You've Made Your Own Wordpress Theme
You have made it through this tutorial and here is our tweaked version of this theme. If you like it, you can download the Squeeze Theme here for free. Think of it as a reward for finishing this tutorial.
Now, your own Wordpress theme should look like the screenshot below. Bare in mind that the posts in the screenshot are our own test posts and that we have changed the theme name to Squeeze. Well done!
Here are all the files you have created this tutorial, if you encounter any errors in you own files, please cross-reference with these:
- Index.php
- Style.css
- Header.php
- Sidebar.php
- Footer.php
- Single.php
- Functions.php
- Page.php
- Comments.php
Hopefully you have now reached a better understanding how a Wordpress theme is built. From here on out we suggest you return to the stylesheet and just mess around for a bit, trying out margins, color, widths etc. If you feel that this theme is too basic, which you probably do, simply take what you have learned here and start adding more templates and site elements. Remember it all really comes down to DIV tags and proper PHP and a stylesheet. Good luck!
Last remark! If you find any errors in this tutorial, we would appreciate if you report it by commenting below. And that goes for any questions that may arise.
Comments
James Stratford @JRStratford on Twitter
05:51, March 7, 2009
Nice tutorial that even the newer people will understand and be able to implement.
Rajeev Edmonds
08:43, March 7, 2009
Great tutorial. I've been developing blogger templates till now. After going reading this post, I'll definitely try my hand on developing WP theme from scratch. Stumbled :)
Kumar
12:52, March 7, 2009
Simple tutorial.... So I can create my own WP theme using this tutorial. I need to convert my blogger blog to Wordpress . Thanks for this tutorial.
Brian Franklin
23:55, March 7, 2009
thanks guys, glad you like it. Since the very start I´ve been using Wordpress and only recently took the step from tweaking only to creating own themes. It´s more of a leap than a step really, but a very educating one to say the least. keep it up!
Preeti
11:22, March 19, 2009
Yea, I really need to get on the bandwagon and make a theme. I'm tired of tweaking mine to death.
Dig
13:54, April 4, 2009
Where are the files, nothing?? Good Text
Markus
10:33, April 6, 2009
Dig: Which files are missing?
nicole
20:50, May 2, 2009
looks like a great tutorial! the index.txt link isn't working, can you fix? thanks so much for the info!
blueocto
15:46, May 11, 2009
Just a note, you said that "Then open index.php and add this before the first tag in the sidebar DIV" but it should go AFTER the first . Otherwise, great tutorial! Nicely broken down in layman's terms :D
Matt
15:02, May 29, 2009
I have tried quite a few online tutorials and bought a few books, but I wishe I would have done this tutorial earlier. It is fantastic! Thank you so much.
Debbie T
05:55, June 18, 2009
This tutorial is a big help. Thank you. Did I miss something or was there some additional steps/edits to the page.php file? Your finished file shows the 'get header' and 'get footer' tags. I don't see any mention of that in your steps. Thanks again
Mohit
20:57, June 23, 2009
One of the simplest tutorials, but still the most effective one. Thanks. You made it all look so easy.
Nelson Tresballes
07:50, June 25, 2009
Thank for the tutorial. I'll do this soon.
forari puturi
19:03, June 27, 2009
Thank for the tutorial. I'll do this soon Its seems to be easy
Brian Franklin
17:36, July 3, 2009
Debbie: Thanks for the comment, and yes I seemed to have forgotten to mention that. I added a paragraph to divide into template files for single.php and page.php as well. Thanks ;-)/Brian
pram
15:26, July 9, 2009
wow... this is great tutorial for a newbie like me :) very inspirative... now I'm searching css tutorial :D
Biju Subhash
09:26, July 18, 2009
great tutorial.... Thank you for sharing... :D
Spicy Web Design
04:46, September 7, 2009
Another easy way to create your own WordPress theme is to create a child theme using a parent WordPress theme framework http://www.spicywebdesign.com/so-you-want-to-create-wordpress-themes-huh-the-remix/
Julian
13:22, September 17, 2009
Great! I'm trying to make my own theme now! Thanks!
Scott
09:34, September 29, 2009
Hi Brian, Thanks for this simple and great tutorial. I have an idea for a VERY simple theme but, what I'd like to be able to do is have only certain pages or posts show up in my header, or footer, and be able to exclude these by id. Now, I'm not a programmer but I can hack php and I do have my current theme (I didn't build it from scratch) that I added a bit of php code to exclude certain page ids in the footer, and certain page ids (or post ids) in the header. But, you have to manually go to single.php or page.php. So, I thought it would be great if, for example, when I create a post if there was a say to have a little check box that says "exclude from footer/header" just like on the post/page you see a checkbox for "Allow comments on this post" or "Allow trackbacks and pingbacks on this post". Is that difficult to add? Basically, is it difficult to add functionality to the admin section inside wordpress? Thanks!
Learnin'
18:04, October 9, 2009
Is there a mistake in step 9? It says: copy everything from the top down to the end of the "header" div tag in index.php and paste into header.php, single.php and page.php. But I think you're only supposed to paste it into the header.php file, cause there's already stuff in the single.php and page.php files. Am I right?