Creating a WordPress Theme From Scratch

Estimated reading time: 7 minutes, 22 seconds

There is a lot to learn about WordPress theme development. In this intermediate level tutorial for aspiring WordPress theme developers, I will describe the bare essentials for developing your own responsive WordPress theme from scratch.

What is a Responsive WordPress Theme?

When I speak of a responsive WordPress theme, I mean a theme that is mobile friendly with elements that change size and sometimes position according to your current screen size. In my opinion a truly responsive web page should look good in any browser window and any elements on the page should self-adjust according to the window size.

Dynamic sizing of elements on the webpage is important. This means that elements should change size and sometimes even shift position while you resize the browser window. In other words, you will see the images change size as you resize the window. Other objects can resize as well, but images are often the number one concern. Divs, text and other inline or block objects can also be sized accordingly while the window size is manipulated. Of course this allows for the page to open at any size and size the elements accordingly.

File Infrastructure

The first thing you can do to start your WordPress theme is create a directory to house your theme in the wp_content/themes directory of your WordPress installation. Name a new directory after the theme you are creating. In this tutorial, we are creating a theme called responsive_jafty so that is what you can call the directory unless you have a more appropriate theme name in mind.

The actual files we will be creating will be are style.css, index.php, header.php, sidebar.php and footer.php, which are the bare essentials to get you started in WordPress theme development. These files need to be named as stated above or WordPress will not recognize them as it should.


Before you start coding it is crucial to know what you are doing. The very least you should do is draw a basic wireframe with the main areas of your webpage defined as in the following image:

Generic WordPress theme layout

When developing a professional theme, you will want to do a little more than a simple wireframe, but this works for our learning purposes. In real life, if you were developing a professional theme for yourself or a paying client, you would want to develop a detailed Photoshop rendering of the theme you wish to create. You should at least layout the home page or main posts page in Photoshop including all details. The finished Photoshop template should look exactly like the theme you wish to create. However, a wireframe is often a great way to start if you don’t really know what you want or if you are a stronger developer than you are a designer.

Creating Your header.php Script

One of the essential files to create a theme is the header.php file. From looking at the above wireframe, I can tell how I will need to code header.php. Here is a working example:

<!DOCTYPE html>
<title>Jafty Responsive WordPress Theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<div id="wrapper">
    <div id="header">
    <h1>Jafty Responsive Theme</h1>
    </div><!--end header-->

That’s all there is to a simple header file. It just needs a doctype declaration, opening HTML tags, an opening wrapper div and the site’s header div with the contents of the header.

Creating the index.php file

The next essential page for your WordPress theme is the index.php file that includes the above header as well as the sidebar and footer files. Here is a working example of a simple index.php page:

<?php get_header(); ?>

    <div id="main">
   	 <div id="content">
   	 <?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>
   	 <?php endwhile; else: ?>
   		 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
   	 <?php endif; ?>
   	 </div><!--end content-->
    </div><!--end main-->

    <div id="sidebar">
    <?php get_sidebar(); ?>
    </div><!--end sidebar-->

<div id="delimiter"></div>    
    <div id="footer">
    <?php get_footer(); ?>
    </div><!--end footer-->
</div><!--end wrapper div-->


That’s a very basic working example which you may expand upon as necessary to get the desired results. Now let’s move on to the footer and sidebar pages.

Creating Your sidebar.php Script

The sidebar.php script just needs to have a few built in functions from WordPress to get your sidebar objects into your template such as categories and archives as in the following example code for sidebar.php:

<h2 class="sidebartitle"><?php _e('Categories'); ?></h2>
<ul class="catlist">
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
<h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
<ul class="archivelist">
<?php wp_get_archives('type=monthly'); ?>

That concludes sidebar.php, next let’s move on to footer.php to finish off our PHP files.

Coding footer.php

The footer.php script just needs to have the content for the footer widget. It is nice to have footer.php file so making changes to one file will change the footer throughout the entire site.

<h2>Another WordPress Site created by Jafty Interactive Web Development</h2>
&copy; 2013-2035 Jafty Interactive Web Development.

That’s a start, you can add what is appropriate for your own footer.

The Magic is in the Style Sheet!

The style sheet is probably the single most important file for a new WordPress theme. It is what WordPress uses to recognize the theme and provide information in the WordPress admin area regarding your theme, so be careful to include all the necessary elements indicated in the below example:

Theme Name: Responsive Jafty
Theme URI:
Description: A bare bones responsive WordPress theme example.
Author: Charlie Livingston
Author URI:
Version: 1.0
Tags: blue, white, two-columns, flexible-width, flexible-header,

License URI:

General comments (optional).

body {

display: block;
border: 1px #000 solid;
margin:0px auto;

border: 2px #000 solid;

width: 35%;
border: 2px #000 solid;
float: left;

width: 62%;
border: 2px #000 solid;
float: right;


border: 2px #000 solid;

There you have it. Notice the tags I used. Those help people searching for themes find what they are looking for, so will help make your theme popular if people are searching for the attributes of your particular theme. There are only certain tags that will work here. For a list of working tags, see:

Putting It All Together

Okay, we have laid out all the theme elements above. It is time to put it all together and have a working responsive WordPress theme. It is just a start, but you can build on this. It is fluid and adjustable. When you are done, you will probably want to add a section of JavaScript code or Jquery code to resize images on page resize.

Now simply upload all the files to the new theme directory we created at the start of the tutorial, then go to your WordPress installation and activate the theme from the admin console. Simple as that! When you open your site you will see a very basic wireframe responsive theme layout as in the two examples below that demonstrate the way it will look in two vastly different screen sizes:

Wordpress Theme Responsive Design Structure - Narrow Browser

Above is a narrow screen size and below is a wider size. Notice the way it behaves:

Wordpress Theme Responsive Design Structure - Wide Browser

About the author…
This post has been written by Charlie Livingston, who enjoys writing about a wide range of WordPress-related topics. He also runs Res WP Themes.

Scan to Donate Bitcoin
Like this? Donate Bitcoin to at:
Bitcoin 13vYNWKj3npQTYr7EJVBhcoVkwncEbDUvJ


3 Responses to “Creating a WordPress Theme From Scratch”


    Great website you have here but I was wanting to know if you knew of any user discussion forums
    that cover the same topics discussed here? I’d really like to be
    a part of community where I can get feedback from other knowledgeable individuals that share the same interest.
    If you have any recommendations, please let me know.

    My website:

  2. Recommended Cincinnati Roofer

    Not all Nashville roofing contractors are transparent with their fees and services;
    they will provide you with a veery low estimate initially, and then add additional
    fees towards the end oof the job for extra supplies oor additional
    services. They should run to aan underground drainage system or made to at
    leastt run away from the foundation by way of an extension oor splash
    block. By choosing a well-known and reputed firm, you can assure abut their qualitty of work, as all big firms have
    staff well rained and experienced in their own field.

    My web bllg Recommended Cincinnati Roofer


Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>