How to Create Your first WordPress Theme: Part 1

WordPress is the most popular and the best (in my opinion) blogging platform, created by Automattic. It’s really easy to use and it’s very powerful, giving you the opportunity to build any kind of site, from blogs to shopping carts and CMS’s.  In this series of tutorials, we are going to create our first WordPress theme. For this tutorial you need to have a little more than basic knowledge about HTML and CSS. Let’s get started.You can Download source files and you can also Live preview the theme here. It’s a basic css layout so it will be easy for beginners to convert it into a working WordPress theme.

What we need

WAMP/XAMPP Server (or similar software) – Download

WordPress 2.9.2 (latest version, recommended) – Download

Getting started – creating the working environment

First thing first, you need to install WAMP Server. After installing WAMP, download and copy the WordPress files in the www directory from your WAMP folder. Start WAMP Server, click on the icon in the task bar, and a pop-up list show appear, then select phpMyAdmin.

Now, create a new database. Give it any name, but you need to keep it in mind as we need it at the WP installation. As for now, we are done with WAMP Server, just leave it running.

WordPress Installation

After copying all the files, you need to install WordPress. Enter on the address where you have put the WP files. The address would be exactly, without any www or http, localhost or localhost/WordPress. After accessing the address, the installation may start.

Click “Create a Configuration File”. After this, you will see some listing of things you need to know. I’ll just tell you what you need:

  1. Database name: your given name of the database we’ve created earlier
  2. Database username: this should be “root” if you set it on your computer.
  3. Database password: there is no password set.
  4. Database host: localhost
  5. Table prefix: for now, leave it as it is.

Now, just fill in the fields with the required information, and go further! After filling up the fields, next give any name to your blog, and write your e-mail address.

Now, copy the auto generated password, and paste it in the password field at the site login. Now, because you cannot keep that weird password in mind, go the upper right corner of the site and click on “admin”. You should see a page where you have your account info. You can modify anything there, but for now we are setting a new and easier password.

Go to the bottom where it says “New password” and set your new password.

Good, now you have WP installed, but we have a lot more things to do.

1. Planning the theme layout

When I’m starting a new project on developing a WordPress theme, as everyone should do, I first build my HTML/CSS template. This is easier because you also learn how to convert a simple HTML template into a fully functional WordPress theme. So i won’t go through building the template, considering you already know how to build your own. I’ll just use a simple layout from in this tutorial. Go here and download the #7 template.

2. Starting the conversion

When I’m making a theme, I’m always copying code snippets from a default WordPress theme (because i cannot remember all of them). I use the WordPress Classic theme, but you can also use a cheat sheet. The best one i’ve found is the one created by Ekinertac. After it opens in the PDF format, save it in your computer (you may need it when you do not have access to the internet).

All the contents from the sheet are the most used functions from WordPress, and the ones that you need to create a basic WP theme.

A thing that you have to notice is that WordPress is using PHP. Even if you aren’t a PHP master, or you have absolutely no idea what PHP is, you are still able to create a basic theme. When creating a theme, you need to know just tags and what they are doing, so do not worry about PHP.

2.1 Making the theme recognizable by WordPress

A very important part of a WordPress theme is the CSS file. In the CSS file are written some lines that WordPress is using to g a theme. First, you need to rename the styles.css to style.css as WordPress is search for style not styles. Copy and paste these lines at the start of your CSS file:

Theme Name: Free-CSS template WP version
Theme URI: <a href=""></a>
Description: A very basic  WP theme based on a simple CSS layout from
Version: 1
Author:  >your name<
Author URI: >your site url<
Tags: free, css,  tutorial, simple, basic

You can change everything that is located after the “:” dots. Save your CSS file as we won’t need it because we are just trying to give to the HTML template functionality.

2.2 Converting the HTML file

After you set up your CSS file, we need to go and change some things in the index.html file. First of all, clear all the sample text.
Save you file as index.php. We do not need the sample text anymore as we will introduce our own text from WordPress later.

Now, we need to make some declarations for the WP theme. We need to make the title dynamic and to set the stylesheet path. These lines will help you:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type');  ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true,  'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">@import url(  <?php bloginfo('stylesheet_url'); ?> );</style>

Now, we will start with the header of the design. For adding your blog’s name with a link to your homepage in the header, we will use this line of code:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

The first PHP tag is used for retrieving the blog’s homepage link and the second is for the blog’s name (the one you set in the installation).

Now we’re going further for the loop. The loop is a block of code that will repeat for each post from WordPress. We will use the loop to construct the article. I’ll cover more about the loop in the second part, where we will use it for other things too.

Now, all your code is wrapper by some loop specific tags. Here they are:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!--Code to be repeated here-->

<?php endwhile; else: ?>
<?php endif; ?>

Next, we will start constructing the article structure. We will need a title, some info about the dat when the article was published and it’s author.

The following line makes the article title:

<p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>

The first PHP tag is for the article’s link and the second is for the article title. These tags are kinda self-explanatory. We’re moving further for the meta data (date, author). Copy and paste the following code under the article title code:

<p>Published on <?php the_time('F d, y'); ?> by <?php the_author(); ?> in <?php the_category(','); ?></p>

First tag is for retrieving the date. The date tag have some parameters. These parameters are setting the date format (month, day, year). You can add characters like “-” or “.” or making something like “Month 02 Day 15 Year 1990″, it’s up to you! The second one, is for echoing the author of the post and the third, is for category or categories that the post is filed under.

Now, we will be placing the content tag. The content tag will output everything you write in a WordPress post:

<?php the_content(); ?>

The tag doesn’t need paragraphs because WordPress auto generates them for you. We’re finished with the loop. You can see the code pieces at the party:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>
 <p>Published on <?php the_time('m d Y'); ?> by <?php the_author(); ?></p>
 <p><?php the_content(); ?></p>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>

Next, we will be going to code the sidebar.

We will start with the navigation. As you see in the CSS layout, the navigation is located in the sidebar. It doesn’t matter because the technique is the same. For creating a basic navigation you need these lines of code, which will placed between the <strong>ul </strong>tags:

&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;&amp;lt;?php bloginfo('url'); ?&amp;gt;&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;?php wp_list_pages('title_li='); ?&amp;gt;

You already know what the first PHP tag does. The second one, is listing the pages that WordPress generates. The parameter is for list title. Try removing it and see what’s happening.

This is all you need to do for getting a nice working navigation menu. Now, we will create the categories list. All the blogs have categories and we don’t want our theme to lack categories. We will just add this code between the div #extra tags:

 &amp;lt;?php wp_list_categories('title_li='); ?&amp;gt;

There is another listing tag but this one is listing the blog’s categories. I’ll cover more things relating the sidebar in part 2, where i will teach you how to make a theme widget-ready. That means you will introduce new blocks inside of WordPress, without coding anything.

But what about the footer? Shouldn’t it have some text in it? Well, we will write the copyright:

&amp;lt;p&amp;gt;Copyright &amp;amp;copy; 2010 &amp;lt;a href=&amp;quot;&amp;lt;?php bloginfo('url'); ?&amp;gt;&amp;quot;&amp;gt;&amp;lt;?php bloginfo('name'); ?&amp;gt;&amp;lt;/a&amp;gt;. All rights reserved.&amp;lt;/p&amp;gt;

As you see, we have introduced some tags, just like in the header, to output the blog’s title.

The theme is functional, but we will need to make some page templates for single post (where the comments will appear) and the page (where you could write some info about your blog). If you use the same code for the header footer and sidebar, your template would get messy. Let’s say that you want to add one more thing to your sidebar. You will have to modify 3 times for each page template. Well, for avoiding this, we will chop the markup.

For each section of the index.php file we will have a separate file. So we will have header.php, footer.php and sidebar.php. Now, we will be starting to chop!

Copy and then replace the following lines:

&amp;lt;!DOCTYPE HTML PUBLIC &amp;quot;-//W3C//DTD HTML 4.01//EN&amp;quot; &amp;quot;;quot;&amp;gt;
&amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;&amp;lt;?php bloginfo('html_type'); ?&amp;gt;; charset=&amp;lt;?php bloginfo('charset'); ?&amp;gt;&amp;quot; /&amp;gt;
&amp;lt;title&amp;gt;&amp;lt;?php wp_title('&amp;amp;laquo;', true, 'right'); ?&amp;gt; &amp;lt;?php bloginfo('name'); ?&amp;gt;&amp;lt;/title&amp;gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot; media=&amp;quot;screen&amp;quot;&amp;gt;
@import url( &amp;lt;?php bloginfo('stylesheet_url'); ?&amp;gt; );
&amp;lt;div id=&amp;quot;container&amp;quot;&amp;gt;
&amp;lt;div id=&amp;quot;header&amp;quot;&amp;gt;&amp;lt;h1&amp;gt;&amp;lt;a href=&amp;quot;&amp;lt;?php bloginfo('url'); ?&amp;gt;&amp;quot;&amp;gt;&amp;lt;?php bloginfo('name'); ?&amp;gt;&amp;lt;/a&amp;gt;

With the following line:

&amp;lt;?php get_header(); ?&amp;gt;

Your copied code needs to be placed in the header.php file. The same thing we will do with the footer and sidebar

Copy the following:

&amp;lt;div id=&amp;quot;navigation&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;Navigation Here&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
 &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;&amp;lt;?php bloginfo('url'); ?&amp;gt;&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;?php wp_list_pages('title_li='); ?&amp;gt;
&amp;lt;div id=&amp;quot;extra&amp;quot;&amp;gt;
 &amp;lt;?php wp_list_categories('title_li='); ?&amp;gt;

Paste them to sidebar.php then in the index.php file replace it with:

&amp;lt;?php get_sidebar(); ?&amp;gt;

Now, do the same thing with the footer. Copy the footer div and it’s contents, paste it in footer.php file, and then remove it in index.php with:

&amp;lt;?php get_footer(); ?&amp;gt;

You should have something like this:

&amp;lt;?php get_header(); ?&amp;gt;
 &amp;lt;div id=&amp;quot;wrapper&amp;quot;&amp;gt;
 &amp;lt;div id=&amp;quot;content&amp;quot;&amp;gt;
 &amp;lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&amp;gt;
 &amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;&amp;lt;a href=&amp;quot;&amp;lt;?php the_permalink(); ?&amp;gt;&amp;quot;&amp;gt;&amp;lt;?php the_title(); ?&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
 &amp;lt;p&amp;gt;Published on &amp;lt;?php the_time('m d Y'); ?&amp;gt; by &amp;lt;?php the_author(); ?&amp;gt;&amp;lt;/p&amp;gt;
 &amp;lt;p&amp;gt;&amp;lt;?php the_content(); ?&amp;gt;&amp;lt;/p&amp;gt;
 &amp;lt;?php endwhile; else: ?&amp;gt;
 &amp;lt;p&amp;gt;&amp;lt;?php _e('Sorry, no posts matched your criteria.'); ?&amp;gt;&amp;lt;/p&amp;gt;
 &amp;lt;?php endif; ?&amp;gt;
 &amp;lt;?php get_sidebar(); ?&amp;gt;
 &amp;lt;?php get_footer(); ?&amp;gt;

Now you’re done with chopping the markup. We are going to create the page templates. We will create firstly the single template. Just save your index.php file as single.php. We won’t modify anything in this page yet. We will do it in part 2 where I will learn you how to create a comment form and how to list comments and other things like custom fields.

Now, for the static page, page template, delete the line where you have placed the meta data (the line with date, author and category tags). Then save the file as page.php. Being a page, we won’t need any info about the creation date or the author. We won’t even use comments on page because there is no point in it.

The last move we need to do is to print screen our template and save it in a canvas of 300 x 225 px and save it as screenshot.png in the root directory of your theme. This will be used in WordPress theme menu.

Well, we’re done with the first part. Go ahead and test your theme. If there is something you want to ask, do it via comments. Don’t forget that you can download the source files too.

To be continued

There are a lot of things to cover about WordPress. Making a theme isn’t so difficult, you just need to be patient. There are a lot of things that are needed to make a fully functional WordPress theme. That’s why, this tutorial will have a Part 2. Maybe there will be more parts, but i will let you know what I will be covering in the next part:

  • Widgetizing the sidebar
  • Using the single page template: comments, custom fields, author details
  • Using custom fields for showing an image for each article
  • Making a nice and working search form

Stay Tuned.

Cosmin Negoita

I'm a young web designer & developer from Romania who fell in love with creativity and Adobe. Follow me at @cssfactory

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now


  1. Andhie Mawan says

    thanks! i’ve just created my first wp theme in 2 weeks, :) thanks for all your tutorials 1stwebdesigner!
    You guys are totally amazing!

  2. says

    Great artricle i have searching to learn some good tutorials on wordpress..Great place to increase such a gerat Knowledge….

  3. Carlos Andres says

    The links to resources does not work, I wonder if there is any way to get these, I am somewhat confused and would like to know how is the end this tutorial, thanks

  4. Ekin Ertaç says

    Hey! Thanks for the link :) by the way you wrote great tutorial !!!

  5. Kris says

    Awesome Tut, thanks!

    Am currently in the process of creating a WP theme for a client / friend and this tutorial has helped no end! Now to part 2….

  6. Mustapha NAJAH says

    a well written article, i hope that by finishing all steps there will be the same thing for Joomla 1.5.x. Again Thank you so much

  7. Sofia says

    Thanks a lot mate. I’ve read through lots of resources about that before and I can honestly say you’ve described the wordpress templates creation in a very easy-to-understand way. Really nice post.

  8. Ilie Ciorba says

    Greate article, I have been looking for a good tutorial like this for a long time

  9. says

    Great tutorial for those wanting to create their first Theme. I like tutorials like this, no long winded technical explanations to confuse those who are non tech savvy.

  10. says

    Actually, I’d like to give a tip here and change one thing about your code here!
    I actually got this from Themeshaper, hade never thought of it before, but hey I’ll share the knowledge!! =)

    The main header for the blog, is usually the H1, but on a Post, or Page page, it should in fact be the post/pages header, as that is the focus point of that page (from an SEO point of view especially). So a tip is to change the header (H1) part like the following:

    <a href="/”>

    <a href="/”> ” >

    This will use the H1 tag only when on the homepage of the site, and you can use the H1 tag on your post title or page title without it “conflicting” with the H1 of the blog title….

    Hope you find this usefull =D

    • Cosmin Negoita says

      I totally agree with you, but this these are just basics and it would be some little extra work to change the source files and the code in tutorial. I’ll cover this in part 2 or in future article. For now, thank you :) and please, don’t get me wrong.

      • Saad Bassi says

        Well Cosmin, no doubt, you have no need to touch these details in beginner tuts. You can definitely write a separate article on advanced WordPress tricks.

        • Cosmin Negoita says

          Well, maybe you’re right. Normally beginners won’t know what SEO is…I’ll try to cover more things about SEO for WordPress in a separate article.

  11. says

    Thank you for this! I’ve been eager to start making my own WP themes for a while now. I’m looking forward to studying this tutorial closer.

  12. wpin says

    Awesome tutorial, been looking for a DECENT guide to creating your own theme for an absolute age!

    Really looking forward to Part II

  13. Dee says

    Thanks for a good introduction to working locally with WordPress. Up until now, I’ve always used FTP and developed against a test site online. This looks like a better way to go :)


    • Cosmin Negoita says

      I used to do that too, but I realized that working directly on the set theme is taking less time…

  14. says


    Overall a very nice introductory lesson in creating your own wordpress theme. A couple things I might change is using h2 tags for the links to the blog posts as opposed to a paragraph and strong elements. That makes styling the links through css much easier. I also would probably use wp_page_menu() in place of wp_list_pages() simply because page_menu handles more configurations with less hassle than list_pages.

    I’m looking forward to part 2

    • Cosmin Negoita says

      Hey John, I’ve never used that, but of course I’ll give it a try and I think I’ll cover this too in part 2! Thanks for the suggestion!

  15. alfiks says

    Thanks for the tutorial, really helpful at the moment! Hope to see part 2 soon!

  16. Chummy says

    I’d like to go further with the tutorial but the CSS template referred to (#7) is unavailable to me — when I download and scan it, my security software notes it is infected.

    • Cosmin Negoita says

      Strange, I haven’t got any problems like this. Just trust me, download and do not worry! The file isn’t infected. I have AVG Antivirus and I wasn’t alerted.

  17. Omer Greenwald says

    Very straight forward and clear. Once the theme is implemented in a specific website, you can turn some of these dynamic PHP calls to static HTML to increase speed.

    • Saad Bassi says

      Totally Agreed with Omar here. This helps to fasten WordPress a lot

    • Cosmin Negoita says

      Could you give me some information about that? It’s something I do not know…

      • says

        useful tutorial cosmin ! one request – in your upcoming post – can you teach us how to add community news link feed like used in popular sites(tuts network) and others similar ! the submission links should appear in one static page. with the form .
        that will be very helpful !! please consider it :D
        – sriganesh.m

      • Omer Greenwald says

        Sure, Cosmin. What I meant was that after the theme is done, you can view the HTML source and copy values to the theme’s PHP file.

        For example, the following dynamic code:
        <meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>" />
        can be replaced with this static code:
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        (or any other charset for that matter)

        By doing this you reduce the PHP queries and make your WP site faster.

  18. Cosmin Negoita says

    I’m happy that this article is helping you guys! I’ll try to cover all the things I’ve listed at the end of the article and I’ll try to make it very easy for all of you!

  19. Design Earth says

    Amazing, really thanks Cosmin. As I’m new to wordpress & this help me a lot. Definitely try this.

  20. says

    Thanks Cosmin, this is what I’ve been looking for – a tutorial on building a WordPress theme. It is something that I’ve always wanted to do and I envy seeing people creating those nice-looking themes. Soon I can release my own themes too I believe.

    Just keep going my friend.

    • Cosmin Negoita says

      Hehe, that’s what I felt like too when I wasn’t a theme developer, but then I realized I should do something…Wordpress have a lot of tags, I don’t feel like knowing 50% of them yet. But with the ones I know, I can build a little more advanced themes. You can do a lot with WordPress, just read around the web and learn from the masters…