How to Build A WordPress Theme From Scratch Part One

Oct 12, 2011
WordPress
364 Shares
By

So you have WordPress installed and now you are ready to install a theme to give your blog/site the look you want.

For most people, this involves using a theme that was purchased or using a free theme that they found on the Internet.

But these don’t have to be the only two options you have to choose from.

A developer with some skill in CSS and HTML can easily create their own WordPress themes to give their site the ability to provide a unique experience for their visitors. This tutorial will walk you through the steps of creating your own theme.

Understanding How Themes Work

Before we can roll up our sleeves and start designing a theme we have to understand how they work when it comes to WordPress. First you need to understand that there is a difference between themes and templates when it comes to WordPress. The template file is one or more sets of codes that your theme will call upon. Templates, like sidebar.php, header.php, index.php, etc., are called upon by the theme. The theme is the collection of template files, images, etc. that tells the visitor’s browser how your page(s) will look.

Your theme can consist of the following template files, however only the style.css and index.php files are required:

  • style.css
  • rtl.css
  • index.php
  • comments.php
  • front-page.php
  • home.php
  • single.php
  • single-<post-type>.php
  • page.php
  • category.php
  • tag.php
  • taxonomy.php
  • author.php
  • date.php
  • archive.php
  • search.php
  • attachment.php
  • image.php
  • 404.php

Step 1 – Setting the Layout Of Your Theme

For our theme we are going to use a pretty basic layout consisting of a header, a footer, the main content area and a sidebar.

Basic layout for creating your own WordPress theme

To create this you will need to open a text editor.

If you are using a tool like Dreamweaver to create your theme then set it on the Code view for now. You can also use a basic text editor like Notepad, eMacs or TextMate.

Now that your text editor of choice is open, type the following lines of code and save it as index.html.

<html>
<head>
     <title>Our Very Own WordPress Theme</title>
</head>
     <body>
       <div id="wrapper">
          <div id="header">
             header
          </div> <!-- close header -->

       <div id="content">

          <div id="main">
             main
          </div> <!-- close main content area-->

          <div id="sidebar">
             sidebar
          </div> <!-- close sidebar -->
        </div> <!-- close complete content -->

          <div id="footer">
             footer
          </div> <!-- close footer -->
       </div> <!-- close wrapper -->
     </body>
</html>

Notice that in the body of the HTML file we are using div ids to layout our theme. Next, we will create the individual template files for each.

Step 2 – Create the Template Files

The first file we are going to create is the index.php file.

Open up your text editor and create a new file called index.php where you will enter the following code:

<?php get_header(); ?>

<div id="main">
<div id="content">
<h1>Main Content Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr>
<?php endwhile; else: ?>
<p><?php _e('Sorry, we couldn’t find the post you are looking for.'); ?></p>
<?php endif; ?>
</div>

<?php get_sidebar(); ?>

</div>

<div id="delimiter"></div>

<?php get_footer(); ?>

Now you can make some changes here if you want. Specifically, the text that reads Main Content Area between the <h1> tags and the text that reads Posted on after the <h4> tag can be customized to something that you would rather see on your blog. You can also change this later if you want, and since these are template files, the changes will be reflected across your entire blog.

WordPress’ internal functions will read this file and understand that the theme is telling them to go out and grab the files required for your page to look right. This link will take you to the WordPress Codex page that describes the functions in much greater detail.

Now we can create the other php files required.

The Header File

<html>
<head>
<title>My Theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>This is the header</h1>
</div>

The Footer File

<div id="footer">
<h1>This is the footer</h1>
</div>

</div>
< ?php wp_footer(); ? >
</body>
</html>

The Sidebar File

<div id="sidebar">
<h2 class="sidebartitle"><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>

<h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
<ul class="list-archives">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

Now the sidebar will go ahead and grab the Categories and display them as well as the Archives that will be displayed monthly.

Where is the Main.php file?

No, I didn’t forget a part. The main content area will be populated with the blog posts themselves so we won’t be creating a main.php. We do need to create a style.css file though. So let’s do that.

body {
    text-align: center;
}

#wrapper {
    display: block;
    border: 1px #000 solid;
    width:90%;
    margin:0px auto;
}

#header {
    border: 2px #000 solid;
}

#content {
    width: 75%;
    border: 2px #000 solid;
    float: left;
}

#sidebar {
    width: 23%;
    border: 2px #000 solid;
    float: right;
}

#delimiter {
    clear: both;
}

#footer {
    border: 2px #000 solid;
}

.title {
    font-size: 11pt;
    font-family: arial;
    font-weight: bold;
}

Now when you upload everything to your test site and activate the theme you should see the following:

Building your own WordPress theme

Of course, we wouldn’t expect this to be the finished product on your blog. In the next part of this series we will look at adding a logo and some other elements to dress up your new theme.

Author: Jeff
Jeff is a freelance writer and the editor of Developer Drive. He writes on web development topics with a focus on web application security. In his spare time he coaches youth football and works as a technology coordinator for the Palm Beach County school district.
  • Josef

    Excellent .. the tuto is so simple and understandable .. Thanks a lot!
    waiting for Part 2 …

  • Twelvefootsnowman

    No Doctype?

    • Anonymous

      Should be XHTML.

  • Anonymous

    Check out Roots while your at it. Its a WordPress boilerplate theme in HTML5.

    • Anonymous

      Thanks for sharing this, its a great resource for template design.

  • Scott_g37

    Hey when I try to make the index.php file it keeps telling me there is a syntax error on line 20

    ” any ideas why this maybe?

    • Anonymous

      Not seeing it but I will look into it and see if I can replicate it. Did you copy and paste or retype the code?

  • Facinet Touré

    Nicely done! can’t wait for part 2 to implement this in my next web design project.
    http://selectiveform.com

  • mm

    This is a great read. Can’t wait for part two. I am not trying to be impatient I’m just excited but when will part two be available?

    Thank you!

  • Suren Eservices

    Thank you very much for this. I wasn’t sure where to begin wordpress theme development. now I got a good understanding on how the basics work.

  • http://twitter.com/pixelBender67 Tony Brown

    Is there a part 2 ?

  • http://www.facebook.com/ramprasadns Ramprasad Iyengar

    I am new to wordpress. This info is helping me a lot to build the theme. Please can you provide me the part 2 of this.. Thanks

  • Kyle Poyser

    Is there a part two?

  • http://twitter.com/metzuda Aaron McClinchey

    Hi there,

    The header, footer, and sidebar elements should be three separate files:

    header.php
    footer.php
    sidebar.php

  • http://www.nxn.vn/ Phatnlq

    You’ve written a good quality article, thank you! I learned a lot from your article. Truly you have shown me the benefits!

  • Gkdreamz

    nice tutorial dude….

  • http://touchwebsitesolutions.com/ Shaikh

    This is great. I have my own wordpress site but hope to design my own theme for it when I have the chance – this will really help!
    Thanks

  • http://twitter.com/ticketyboo72 Rita Dian

    It has to do with the word “couldn’t”. You can either change it to “couldn’t” or type out as “could not.”

  • Derek

    I wish I had more time and passion for coding I’m sure it could have solved a lot of the compatibility problems occurred in theme editors. I’m using Lubith for now and more than satisfied with it, it’s very flexible it saves me a lot of time

  • Kelderic

    I’ve been developing sites with static HTML/CSS for a while now, but am looking into moving over to using WordPress. I was surprised how little resources there are for beginners, and ended up just trying to play with twentyten. Your tutorial has really helped! If I might ask a question though, is index.html needed for the theme, or just written first as an overview to test the initial design statically?

  • guest

    zipped it up and tried to install and got this error: style.css does not contain a valid theme header.

    any idea why that would be?

    • jeff_DD

      Check to make sure you have header.php as a separate file.

  • Wes

    Hi thanks for a great tut… Ive noticed many others asking the same question, could you please tell us when will part 2 be available or if it will be?

    Thanks again

    • jeff_DD

      I will get that up for all of you shortly! Thanks for all the kind words on the tut!

  • Lisa Mayfield

    Great start! Where’s Part 2? :)

  • sadimahmud

    thanks :D . btw part 2? 6 months passed :S

  • Sultan Alshehri

    thank you this is help me alot, but I have one question why above
    ? can you explain this more?
    thank you :)

    • jeff_DD

      The Main is to encompass everything. Content is a separate area.

    • Nyk

      ha mane avde che…bopara

  • http://twitter.com/sby15 Seby Jean

    There’s a little problem with the css !!

    • jeff_DD

      What is the problem you are having Seby?

  • Amanda Weber

    You overlooked including just before the tag. A lot of plug-ins will break if you don’t have that tag in the footer.

    • jeff_DD

      Nice catch Amanda. I am adding it to the code above.

      • http://glocalfocal.com/ Tom

        You need to remove the spaces before and after the question marks in this added code.

  • http://twitter.com/FranHaselden Fran Haselden

    Part 2 any time soon? Is it possible for you to go into depth about how to actually upload this to your ‘test site’ as I’ve made the files but no idea what to actually do now in order to post!

  • http://twitter.com/FranHaselden Fran Haselden

    Would it be possible to go into detail (in part 2?) in how to upload this to your test site? I have created these files but have no clue what to do next to actually make it useable!

    • http://twitter.com/mchandleraz Matt Chandler

      If your test server is local, just move the files to the proper directory. If it’s a remote server, then you’ll have to upload them via FTP or with your hosts File Manager.

    • mrvv

      put them in wordpresswp-contentthemesyour_theme_name
      and activate the theme in http://your_server_name/wordpress/wp-admin/themes.php

  • Sana5_mardan

    there is some problem when i use your code

    • jeff_DD

      What is the problem you are having?

  • ravi

    Thanks this is good guidance…

  • Thomas

    To all the beginners out there, you have to add a css friendly comment into the style.css section right at the top. This is how wordpress recognises your theme. You need to add these simple tags as show:

    /*
    Theme Name: My Theme
    Author: Your Name
    Description: This is a basic description of your theme.
    */

    Once this is added you will be able to up[load your theme to wordpress

  • http://twitter.com/ahmedqahal Ahmed Qahal

    thanks jeff for this but could you please try to post the 2nd part ?

  • tryy

    Thank you for this. I really dnt know where to begin wordpress theme development. now I got a good understanding on how the basics work. so I done my homepage .. bt nw i want do further so i create header menus then plzz help how to add another pages and links to header menus..
    thanks.. plzz rply i’m waiting..

  • http://www.jtechcommunications.com/ JTech

    Helpful guide and user comments to get started with a theme installation.

  • Abdirahim Ali

    Mashallah … Great Leasson … thanks teachers … we wait more

  • http://twitter.com/BloggerFinds Blogger Finds

    Very Good Thanks for this Post i was looking arround for good tutorial and here it is

  • http://www.yourdigitalspace.com/ Swamykant

    Superb post. I am not going to create a new wordpress theme but i think it will surely help me in fix any defects or make changes.

    Thanks
    Swamykant

  • Chaitanya

    yeah its really helpful article, really looking for part 2 and further….Thanks

  • Shakir

    Nice tutorial..

  • http://twitter.com/ChristopherWere Christopher Were

    hmm, followed this to the letter and it didn’t work. I suspect this tutorial is out of date.

  • Nitin

    where’s part2…?

  • Hassan Pervaiz

    Thanks a lot me new at wordpress.. i dont even know PHP.

  • Rajnish

    Checkout the wordpress theme creation video tutorial here : http://codejuke.com/tutorial-how-create-a-wordpress-theme-from-scratch-basic-intro/

  • Alessandro

    is there part 2 for this tutorial please?

  • Jan Andersson

    This is a really awesome tutorial that I have been looking for for a long time :)
    I have always wanted to learn how to create a theme from scratch.
    There are not so many good websites out there to learn it from.
    Because if you can create a theme from scratch you can customize other themes
    due to if you understand the WordPress language and PHP code you can
    create anything you want.
    When will the 2nd part be published I am so looking forward to it :)
    Keep up the good work you’ll doing :)

  • http://kucingbelang4.net63.net/ Imam Tauhid

    Cool , but i need more clue about nav costumization

  • mkalik

    good tutorial ..please upload second part..

  • SMusa

    Thanks for Sharing this ..very helpful get underestanding wp them structure …:)

  • http://www.facebook.com/francesca.tamagnini Francesca Tamagnini

    Thanks Jeff :D I was so lost and then I found your post . So clear !! :D ! Is a great help :D

  • http://www.facebook.com/dodge.intheshed Dodge Intheshed

    Thanks for that Jeff, its got me off the ground regarding WP themes.

  • Amal Rafeeq

    Hi Jeff, But When I try to install the Theme. It says – The package could not be installed. The style.css stylesheet doesn’t contain a valid theme header.
    Theme install failed.

    Can you help me with it please ? :)

  • Umair Ulhaque

    Thanks man.. it helped me a lot as I have just entered into wordpress development. Btw where is the part two of this tutorial? I am curious to read that as well.

  • Nope

    That is ugly as fuck, but thanks for the tutorial

  • Jana

    This is a great site. How would you create a new “homepage” (index.php) that loads a newly created header.php file — besides the one used in the main theme? For instance, I want to create a Version 2 Header that includes a slider which will only be viewed on the homepage. Would I create a new index.php and load the new header?

    This would also help as I plan to use adsense and want to track homepage impressions vs. run of site.

  • Neevan

    perfect post for a beginner thankz alot it helped me…

  • http://www.facebook.com/people/Landon-Sanders/658858097 Landon Sanders

    Awesome!

  • aj

    Where is the nav?

  • http://www.widestate.com/ Baidya nath Singh

    I am looking for the part two of this tutorial, thanks for the great tutorial for the beginners.