How to Create Your first WordPress Theme: Part 1

Posted in Tutorials • 1113 days ago • Written by Cosmin Negoita • 57 Comments

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:

Database name: your given name of the database we’ve created earlier
Database username: this should be “root” if you set it on your computer.
Database password: there is no password set.
Database host: localhost
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 Free-CSS.com 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="http://free-css.com/">http://free-css.com</a>
Description: A very basic  WP theme based on a simple CSS layout from Free-CSS.com
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('&laquo;', 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:

<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>

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:

<p><strong>Categories</strong></p>
<ul>
 <?php wp_list_categories('title_li='); ?>
</ul>

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:

<p>Copyright &copy; 2010 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>. All rights reserved.</p>

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
</head>
<body>
<div id="container">
<div id="header"><h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1></div>

With the following line:

<?php get_header(); ?>

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:

<div id="navigation">
<p><strong>Navigation Here</strong></p>
<ul>
 <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<div id="extra">
<p><strong>Categories</strong></p>
<ul>
 <?php wp_list_categories('title_li='); ?>
</ul>
</div>

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

<?php get_sidebar(); ?>

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:

<?php get_footer(); ?>

You should have something like this:

<?php get_header(); ?>
 <div id="wrapper">
 <div id="content">
 <?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; ?>
 </div>
 </div>
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
</div>
</body>
</html>

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.

Join over 55,891 Subscribers Today! FREE UPDATES!

Get The Only Freelancer crash course you will ever need to read!

Cosmin Negoita

3 Written Articles

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

57 Comments Best Comments First

Grün Weiss

Friday, May 7th, 2010 15:47

13

good article, perfect details

+1
Dee

Saturday, May 8th, 2010 02:07

21

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 :)

Dee

0
- Cosmin Negoita
  
  Saturday, May 8th, 2010 10:45
  
  25
  
  I used to do that too, but I realized that working directly on the set theme is taking less time…
  
  0
Chummy

Friday, May 7th, 2010 23:44

17

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.

0
- Cosmin Negoita
  
  Saturday, May 8th, 2010 07:02
  
  23
  
  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.
  
  0
John

Friday, May 7th, 2010 19:17

19

Cosmin,

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

0
- Cosmin Negoita
  
  Friday, May 7th, 2010 22:21
  
  20
  
  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!
  
  0
alfiks

Friday, May 7th, 2010 18:27

18

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

0
Hastimal Shah

Saturday, May 8th, 2010 06:13

22

Awesome tutorial.
Nice and easy to learn.
I will be waiting for part II.
Thanks

0
Jen Oliver

Sunday, May 9th, 2010 00:39

28

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.

0
Jenny

Saturday, May 8th, 2010 17:45

27

Super tutorial. Mind if I share this with my readers?

0
wpin

Saturday, May 8th, 2010 16:54

26

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

Really looking forward to Part II

0
Adena

Saturday, May 8th, 2010 15:39

24

Great Tutorial! Waiting for part 2

0
ulaganathan

Friday, May 7th, 2010 12:25

1

it is really good. Waiting for part2
Thanks

0
Cosmin Negoita

Friday, May 7th, 2010 12:52

6

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!

0
Mouadm

Friday, May 7th, 2010 18:44

5

it is really good.

0
Design Earth

Friday, May 7th, 2010 12:16

4

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

0

Andhie Mawan

Thursday, March 29th, 2012 23:01

57

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

0
macinfo

Wednesday, February 15th, 2012 15:03

56

Could someone please re-upload the source files of the tutorial?

Thanks!

0
Ben

Wednesday, December 21st, 2011 10:12

55

I am waiting for the second part.

0
Dan

Wednesday, December 21st, 2011 10:03

54

Is there the part 2?

0
- Rean John Uehara
  
  Wednesday, December 21st, 2011 12:09
  
  53
  
  Of course: http://www.1stwebdesigner.com/tutorials/how-to-create-your-first-wordpress-theme-part-2-2/
  
  0
Brian

Thursday, September 22nd, 2011 08:08

52

I need help to download the source code. Thanks

0
Hammad

Tuesday, May 3rd, 2011 20:29

51

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

0
Hiren Khambhayta

Friday, October 8th, 2010 17:26

50

Nice one, but there are other tutorial of such kind on nettuts, spoongraphics, csstricks and much more. Expected deeper article.

0
Carlos Andres

Monday, September 20th, 2010 23:06

49

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

0
Ekin Ertaç

Sunday, May 23rd, 2010 19:31

48

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

0
Kris

Saturday, May 22nd, 2010 15:12

47

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

0
Vinicius Almeida

Monday, May 17th, 2010 20:41

46

Awesome tuto! tnks!

Waiting for part two! ^^

0
Mustapha NAJAH

Tuesday, May 11th, 2010 16:55

44

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

0
Sofia

Monday, May 10th, 2010 17:40

43

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.

0
Ilie Ciorba

Monday, May 10th, 2010 15:25

42

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

0