Creating a WordPress Theme From Scratch

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 responsive WordPress themes, 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 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, in which case you are free to name it as you please of course.


The actual files we will be creating will be style.css, index.php, header.php, sidebar.php and footer.php, the bare essentials to get you started in 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:

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 then 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 heaer.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 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.’);



      <?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 lets move on to the footer and sidbar pages next.


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, now move on to footer.php to finish 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



&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 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: Ian L.

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:



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

Using JavaScript in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *