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.

Layout

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>
<html>
<head>
<title>Jafty Responsive WordPress Theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
    <div id="header">
    <h1>Jafty Responsive Theme</h1>
    </div><!--end header-->
</div>

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>
   	 <hr>
   	 <?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-->
</body>

</html>

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'); ?>
</ul>
 
<h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
<ul class="archivelist">
<?php wp_get_archives('type=monthly'); ?>
</ul>

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: http://reswpthemes.com/
Description: A bare bones responsive WordPress theme example.
Author: Charlie Livingston
Author URI: http://reswpthemes.com/
Version: 1.0
Tags: blue, white, two-columns, flexible-width, flexible-header, http://wordpress.org/extend/themes/tag-filter/

License:
License URI:

General comments (optional).
*/

body {
text-align:center;
}

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

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

#sidebar{
width: 35%;
height:500px;
border: 2px #000 solid;
float: left;
}

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

#delimiter{
clear:both;
}

#footer{
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: http://wordpress.org/extend/themes/tag-filter/

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
Donate

Share

7 Responses to “Creating a WordPress Theme From Scratch”

  1. Ian L.

    I see you copied this exactly word for word from my blog jafty.com/blog. I don’t necessarily mind even though I wrote it myself, but could you please include a link to my site in return at least? Thanks -Ian L.

    Reply
  2. internet lifestyle network

    I’ve been surfing online greater than three hours
    these days, but I never discovered any interesting
    article like yours. It is beautiful value sufficient for
    me. Personally, if all web owners and bloggers made excellent content as you probably did,
    the internet shall be much more helpful than ever before.

    my site: internet lifestyle network

    Reply
  3. www.yourconveyancingsydney.com.au

    It’s perfect time to make some plans for the longer term and it
    is time to be happy. I have read this submit and if I may just I wish to recommend you few fascinating things or suggestions.
    Maybe you can write subsequent articles relating to
    this article. I desire to read even more things about it!

    Reply

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>