Create A WordPress Theme From Scratch

How to Create a Wordpress Theme from Scratch

Sep 5th in Wordpress by Sam Parkinson

Creating a WordPress Theme, The Homepage Following on from the recent article on "PSD to HTML", this tutorial will look at taking a HTML/CSS template and turning it into a functioning WordPress theme. There is so much you can do when creating your own theme we couldn't nearly cover it all. So, we're going to look at how themes are structured, creation of the core files and splitting up that index.html file.

Author: Sam Parkinson

I live in London, the capital city of England. I enjoy it, there is always something to do. As to what I've done web related, I've created a proxy site, a blog and a club site, I've also havd the pleasure of creating several web designs for a few lucky people. I've almost learn't PHP, HTML and CSS are my area of expertise though I'm also a good guy to have when it comes to hardware.

Overview - The Structure Of A Theme

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 your 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.

Because this is such a large topic we're splitting it into a two part series, this part making a simple but functioning theme from a standard HTML & CSS template, and the second part will look at add more of the advanced parts, such as sidebars.

I will be working on turning the great template "Typography Paramount" by Six Shooter Media into a simple WordPress theme.

Step 1 - style.css

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.

/*   
Theme Name: Typography Paramount
Theme URI: http://www.sixshootermedia.com/
Description: An image-less template focusing on Typography.
Author: Sam Parkinson
Author URI: http://xseria.com
Version: 1.0
.
General comments/License Statement if any.
.
*/

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 typography-paramount 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.

Step 2 - The Header and Footer

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, there not exactly hard to use either.

header.php

Starting with the header, create a new file in the theme folder called header.php, then open up index.html from 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>-</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/1.css" type="text/css" media="screen,projection" />

</head>
 
<body>

<div id="wrapper">

	<div id="header">
		
	<p class="description">
				
	An imageless template focusing on Typography.
				
	</p>
				
	<h1><a href="#">Typography Paramount</a></h1>
				
	<ul id="nav">
				
	<li><a href="#">Link Here</a></li>
						
	<li><a href="#" class="active">Link Here</a></li>
						
	<li><a href="#">Link Here</a></li>
						
	<li><a href="#">Link Here</a></li>
						
	<li><a href="#">Link Here</a></li>
				
	</ul>
		
	</div>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen,projection" />

<?php wp_head(); ?>

</head>
 
<body>

<div id="wrapper">

	<div id="header">
		
	<p class="description"><?php bloginfo('description'); ?></p>
				
	<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
				
	<ul id="nav">
	<?php wp_list_pages('sort_column=menu_order&title_li='); ?> 
	</ul>
		
	</div>

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.

footer.php

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.

<div id="footer">
		
	<!-- Please leave this line intact -->
	<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a><br />
	<!-- you can delete below here -->

	© <?php the_time('Y'); ?> <?php bloginfo('name'); ?><br />
	<a href="<?php bloginfo('rss2_url'); ?>">Grab the feed</a></p>
		
</div>

</div>

< ?php wp_footer(); ?>

</body>
</html>

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.

Step 3 - The Core File

We're now going to create index.php

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.

<?php get_header(); ?>

<?php get_footer(); ?>

This simple 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.

<div id="content">

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		
	<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
				
	<?php the_content(); ?>
	
	<p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('No comment', '1 comment', '% comments'); ?></p>
	
	<?php endwhile; else: ?>
	
	<h2>Woops...</h2>
	
	<p>Sorry, no posts we're found.</p>
	
	<?php endif; ?>
	
	<p align="center"><?php posts_nav_link(); ?></p>
		
</div>

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.

Review - Does it Work?

So we now have four files in out theme, assuming that you didn't forget to update you index.php file (doh!) it should work as a simple but functional theme.

Test it out in that new theme previewer that been put in the latest WordPress, after looking around there only seems to be an issue with long titles, easily fixed by adding the following to #content h2 in the style sheet.

line-height: 30px;

Continue to Part 2.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

User Comments

( ADD YOURS )

  1. Dan September 5th

    That was the fastest tutorial I have ever seen for wordpress


  2. Dan September 5th

    This should increase flow to Theme Forest.


  3. Snorri3D September 5th

    Thanks alot for that this is just what i needed a good tut about how to connect my Xhtml/css to wordpress


  4. Paul Dukes September 5th

    This is a great tutorial. Having just done my first Wordpress themed site, I can honestly say this is all you really need to get one going.


  5. patt September 5th

    splendid!

    straight ahead, only the strings you need to know,
    seems like what i’ve been looking for all my life.


  6. Riff September 5th

    @Dan

    This should increase flow to Theme Forest.

    Nah, better not - if someone is gonna to create a theme for Wordpress after reading this tutorial, then ThemeForest will be overun by low-quality stuff - because it takes time and practice to learn the secrets behind theming WP, you can’t do it after one tutorial :P


  7. benjo September 5th

    Wow…this is what I have been afraid of? Thanks for making this manageable.!


  8. Niklas September 5th

    Nice tutorial! As always it’s easy to follow and to the point. Great for a friday fun time :)


  9. Shane September 5th

    As @Dan said, probably the quickest get yourself up and running theme tutorial I’ve ever seen.

    Perhaps many people survive by hacking available themes until they’re happy with the output, but it’s great to know how to start from scratch. I’ve found that themes out there never quite have what I’m after.

    Thanks for the tutorial.


  10. Mike T. September 5th

    this is great, i am in the process of doing wordpress for my personal site, and wanted to learn more about styling, thanks for this!


  11. Max | Design Shard September 5th

    Great stuff


  12. Sam P. September 5th

    Great to hear you like the tutorial :)

    @Riff I’m sure there is some sort of quality control for Themes Forest, and if not there should be.


  13. insic September 5th

    WOW cool tutorial. Im having a hard time creating Wordpress theme before. Now here comes the nice tutorial


  14. Josh September 5th

    Great tutorial.


  15. Ludovic September 5th

    Yes, great job, very useful.


  16. Joel September 5th

    Wow, that was fast!

    Now if you could show people how to work with sidebars, it’d be awesome.

    Still waiting for that book on WordPress theming!


  17. kyle September 5th

    check out CSS-Tricks.com. Much better 3-Part Tutorial for building a wordpress site from scratch.


  18. Patrick Lewis September 5th

    This tutorial is sweet and to the point; could there be a little explanation on custom fields, to explain how you displayed the picture with the post?


  19. Rich September 5th

    Thanks for the great tutorial. I’m just beginning to learn how to build wordpress themes, and this helps a lot! Not to be pushing but when do you expect to publish part 2?

    Thanks


  20. Chris Robinson September 5th

    nice tut, but this only scratches the surface of creating themes for WP


  21. Dainis Graveris September 5th

    Yeah, right Chris Robinson, but how you imagine to see complete wordpress tutorial here? Maybe I must give a suggestion to create WP theme creation series from scratch? That would be too good to be true, am I right? :)


  22. Chris Reynolds September 5th

    Probably one of the better, and more simple, Wordpress theme tutorials.

    Nice job!


  23. kyle September 5th

    @Dainis Graveris - there are other places on the web you can find in depth articles for wordpress. google “wordpress 3 part tutorial”


  24. Nate September 5th

    Short and sweet. Thanks for sharing.


  25. Tabris Chen September 5th

    Very nice, dugg!


  26. curtis allen September 5th

    Great Wordpress tutorial. Keep up the good work.


  27. Lamin Barrow September 5th

    @Dan.. am agreeing with you on that but it will require deep wordpress knowledge to make it function and look good.


  28. Sam P. September 5th

    @Patrick Ha, it’s just a standard picture inserted into the content of the post, just put at the top an floated left, no custom fields on this simple template :P

    @Rich I’m looking at a week, but theres a lot going on at school right now so… not too long though.


  29. Sam P. September 5th

    @Joel Sidebar’s coming in the next article. Feel free to wait impatiently :P


  30. Fabryz September 5th

    Thanks for posting! I started making some templates in fireworks, this will help me handling the coding step.


  31. Ben Griffiths September 5th

    Excellent, goes in hand with themeforest too ;)


  32. accessoire September 5th

    Thank you SO much!!! I didn’t read it yet but i guess it’s a good tut as always. I’m looking for such a tutorial for thousands of years ^^!


  33. chris September 5th

    n1 dude! thx 4 it!


  34. Brandon Kaylor September 5th

    Awsome Tutorial. I am going to try this out when I get the time.
    Very detailed and goes in depth.

    Thanks Sam. :)


  35. Taylor Satula September 5th

    Wow that was the fastest tut to theme a wp theme on earth. Good review though


  36. Jonathan September 5th

    Quick and easy. Nice introduction into wordpress themes.


  37. Damir September 5th

    Bravo.


  38. dlv September 5th

    D10, excellent
    i won’t create a wordpress theme, but like a W user i can learn more about it with this kind of “base” tutorial
    thanks a lot!
    adeux


  39. Mark Abucayon September 6th

    I love the outcome of this one. thank you for sharing this.


  40. Orama September 6th

    I actually visited this site today in hopes of finding an introductory CMS tutorial and VOILA!


  41. Chad September 6th

    You say “Also remember to change that link to the stylesheet.”

    Mine is inside theme folder of course, and called style.css

    However, nothing is getting picked up.


  42. Chad September 6th

    Question…

    where’s the “next article” for single.php tutorial? How do we add side bar column?


  43. Jad Graphics September 6th

    Great tutorial. I was looking for something like this for a very long time.

    I hope to use this to convert my site, http://www.jadgraphics.net to a wordpress site. Thanks again!


  44. Nysuatro September 7th

    You guys can read my mind. I needed this. Thanks alot


  45. zamdesign September 7th

    yeah, very simple way to making wordpress theme, i will try :) thanks


  46. Sam P. September 7th

    @Chad check you code against the downloadable source, that one works for sure.


  47. Dainis Graveris September 7th

    @kyle thanks! That’s was more than I expected! Appreciated!


  48. Jared September 7th

    I’ve been looking for a tut like this one, thanks!


  49. Manaswinee September 8th

    Great Stuff!! fastest n easiest way..


  50. Tom September 8th

    Really basic guide, but it’s well done.
    I’m waiting for more advanced hacks!


  51. Johnny September 8th

    Yes, this was a really short tut. It should’ve had another title of it. But ok to see some of the basics in Wordpress core funcs.


  52. Mike Bobiney September 8th

    Wordpress is a great platform for creating blog themes on as this article demonstrates.

    notepad++ - good stuff


  53. Hans September 9th

    Thanks for a quick intro to php and wordpress! I’ll probably use it in the future to modify existing themes!


  54. Jake Holman September 9th

    Awesome! This is exactly what I’ve been looking for myself, need to eventually get around to skinning my own blog for my portfolio - have to give this tut a good going over later!


  55. Aaron Irizarry September 9th

    Brief and useful… thanks again… css-tricks.com also has a bit more in depth one that is a great resource.
    Will there be more parts to this?

    ~ Aaron I


  56. JamieB September 10th

    Good stuff, I’m a newbie to wordpress but have played about with some of the themes. This article answers a couple of questions I had.


  57. Andris September 10th

    Thanx a lot for that. I was always looking for some good tutorial to show me how to write my own wordpresstheme, and that’s a really helpful tutorial.


  58. Tom George September 10th

    Excellent tut and well explained!

    Would be love to see a tutorial on plugin creation.

    Thanks!


  59. Josh September 12th

    Great tutorial…I can’t wait for “How to Be a Rockstar Wordpresser”. These posts should keep me busy until then though. :)


  60. deniar September 17th

    Wow thanks, it helps me so much


  61. zen September 18th

    Thanx for this nice tutorial


  62. Joe September 19th

    Could you have made this any harder to follow?

    In step 2:

    What theme folder?

    What index.html are you talking about?


  63. Desserts September 25th

    great post, thanks for this!


  64. praveen September 26th

    Thnx ..was really for a newbie like me :D
    keep up da gud wrk..


  65. liquid October 1st

    Great post, excellent for newbies like me!!
    Thanks


  66. alex October 3rd

    I’ve been putting off getting into Wordpress theming for far too long

    great tutorial, thanks!


  67. Ken October 9th

    Hi,
    You did a great job writing down here a lot of good information.
    I’m not an expert in php and your advices really help.
    Now, I want to change my default wp theme (on my new blog - the old one is ok) in just one way: I want every post from index and achieve pages to has (read more) by default. Let’s say, they will can read only the first paragraph, or first 50 characters or something like this… not entire post in index.
    I really don’t like when the people can read with just one click on my home page, all (10) latest posts.
    Can you help me with this?
    I really appreciate!
    Ken.


  68. Mr Bootle October 16th

    Really, really, really simple, clear, quick and easy tutorial. Been hunting for something like this for a long time. Well done and thanks. I now have about 5 wordpress based sites to create!

    WoO-hoO!


  69. Aizat October 30th

    What a very great tutorial for me to learn to create my own wp theme. tyvm


  70. GeemeeTheway October 30th

    Geat! I’ve been looking for something that simple so far! Good work!


  71. Wrablizliar November 17th

    i want to share my free wordpress theme here.

    Preview:
    http://www.elegantthemes.com/preview/eVid/

    Download:
    http://www.sendspace.com/file/6uv0n2


  72. belko December 18th

    fantastic tutorial, thanks


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name January 9th

Arrow


Trackbacks