creating a wordpress theme

Premium Jobs BlogTutorials ! Courses !

Advertisement

Code SeriesCategories ! Software & Tools ! "

THEME DEVELOPMENT

Creating a WordPressTheme From Static HTML:Creating Template Filesby Rachel McCollin 18 Dec 2013

In the first part of this series, I showed you how to prepare your HTML andCSS files for WordPress, ensuring the structure would work, the code wasvalid and that the correct classes were being used.

In this tutorial you'll learn how to take your index.html file and split it upinto a set of template files for use by WordPress.

What You'll Need

For this tutorial all you'll need is the most basic tool for editing HTML andPHP:

A code editor of your choice.

What Are Template Files?

A WordPress theme consists of a number of template files. At the veryleast, a theme must contain two files for it to work, these are index.phpand style.css.

#

$

+

&

Creating a WordPress Theme From Static HTML: Creating ... http://code.tutsplus.com/tutorials/creating-a-wordpress-theme-...

1 of 10 3/6/14, 11:52 PM

However, in a well written theme, the contents of the index.php file will besplit up into the main template file (index.php) and a set of include files.These are the files containing the code for the header, sidebar and footer.

In some themes, an additional include file is used for The Loop; I'll cometo that in Part 4 of this series. The files are called include files because youadd code to your index.php file to tell WordPress to include theircontents.

Our index.html file will be split into four PHP files:

index.php, which will contain the main content plus the code toinclude the other filesheader.php, which will include the <head> section plus everything inthe header and navigationsidebar.php, which will contain the sidebar widget areafooter.php which will contain (you've guessed it!) the footer, plus theclosing </body> tag

Over the course of this series, you'll add to these files so that your themecan include widgets, menus and a loop, and you'll add hooks which willbe used by plugins. You'll also add extra template files to display differenttypes of content. If you want to get a head start on this, have a look at theCodex page on the WordPress Template Hierarchy.

But for now, all you're going to do is create a set of PHP files and split thecontents of your index.php file to them.

Creating PHP Files

The first step is to create empty files. Create four blank files with thefollowing names and open them in your code editor:

index.phpheader.phpsidebar.phpfooter.php

Make sure all of these are in a folder which has the name of your theme -


2 of 10 3/6/14, 11:52 PM

in my case I'll name the folder 'wptutsplus-demo-theme'.

Copy your stylesheet into this folder, as well. You won't be editing it in thistutorial, but you will be doing so in the next part of the series.

Populating the Header File

Next you'll copy the top part of index.html into your header.php file.

Open index.html and select everything from the opening DOCTYPEdeclaration to the opening div class="main" tag:

Copy this code and paste it into your header.php file.

0102030405060708091011121314151617181920212223242526272829303132

 <mmeettaa charset="utf-8" /> <mmeettaa name="viewport" content="width=device-width" /> <ttiittllee>WordPress Theme Building - Creating a WordPress theme from static HTML< <lliinnkk href="style.css" rel="stylesheet" media="all" type="text/css" <hheeaaddeerr role="banner"> <ddiivv class="site-name half left"> <ddiivv class="site-name half left"> <hh11 class="one-half-left" id="site-title"><aa title="Creating a WordPre <hh22 id="site-description">Creating a WordPress theme from static html< </ddiivv>  </hheeaaddeerr>  <ddiivv class="main">


3 of 10 3/6/14, 11:52 PM

Save your new header file.

Populating the Sidebar File

Now repeat this for the sidebar.

In your index.html file, select the aside class="sidebar" element andeverything inside it:

Now copy this into your sidebar.php file and save it.

Populating the Footer File

The process of populating the footer.php file is identical to the header andsidebar.

Select everything after the sidebar in your index.html file:

0102030405060708091011

<aassiiddee class="sidebar widget-area one-third right" role="complementary" <ddiivv class="widget-container"> <hh33 class="widget-title">A sidebar widget</hh33> <pp>This is a sidebar widget, in your WordPress theme you can set these up </ddiivv> <ddiivv class="widget-container"> <hh33 class="widget-title">Another sidebar widget</hh33> <pp>A second sidebar widget, maybe you could use a plugin to display a soci </ddiivv></aassiiddee>

01020304050607080910111213

</ddiivv><ffooootteerr>  </ddiivv> <ddiivv class="second quarter widget-area"> <ddiivv class="widget-container"> <hh33 class="widget-title">Second footer widget area</


4 of 10 3/6/14, 11:52 PM

Copy it and paste it into your footer.php file.

Save your footer file.

You might be wondering why the .main div is closed in the footer file and not

the sidebar. This is so that if you later set up a template file for pages which

don't have a sidebar, you'll miss out the sidebar include in that template and

keep the footer include, and the .main div will be closed correctly.

Populating the Index File

The final step is to set up your index.php file. This is slightly moreinvolved, you'll have to add some PHP functions which WordPress uses toinclude the header, sidebar and footer.

Open your empty index.php file and add the code shown below:

Be sure to leave a space between the opening header include and the

1415161718192021222324252627282930

<pp>A widget area in the footer - use plugins and widgets to popula </ddiivv> </ddiivv> <ddiivv class="third quarter widget-area"> <ddiivv class="widget-container"> <hh33 class="widget-title">Third footer widget area</ <pp>A widget area in the footer - use plugins and widgets to popula </ddiivv> </ddiivv> <ddiivv class="fourth quarter right widget-area"> <ddiivv class="widget-container"> <hh33 class="widget-title">Fourth footer widget area</ <pp>A widget area in the footer - use plugins and widgets to popula </ddiivv> </ddiivv> </aassiiddee></ffooootteerr>

1234

<?php get_header(); ?> <?php get_sidebar(); ?><?php get_footer(); ?>


5 of 10 3/6/14, 11:52 PM

sidebar include, it's here where you'll add the contents of the index filewhich aren't in the header, sidebar or footer.

Now open your index.html file again and select all of the code betweenthe opening div class="main" element and the sidebar:

Copy this and paste it into your index.php file below the get_header()line.

Save your index.php file.

Advertisement

010203040506070809101112131415161718192021

<ddiivv class="two-thirds" id="content"> <aarrttiiccllee class="post" id="01"> <hh22 class="entry-title">This is the title of a post or page</ <iimmgg class="size-large" alt="" src="images/featured-image.jpg" <sseeccttiioonn class="entry-meta"> <pp>Posted on 5 November by Rachel McCollin</pp> </sseeccttiioonn> <sseeccttiioonn class="entry-content"> <pp>This is the content of the post. On an archive page it might be an <hh33>Images in WordPress</hh33> <iimmgg class="alignright" alt="" src="images/another-image.jpg" <pp>This post has some images included - once you've converted this htm <pp>It also has a featured image - again, WordPress will handle these f </sseeccttiioonn> <sseeccttiioonn class="entry-meta"> <hh33>Post Categories and Tags</hh33> <pp>In this section you can display information about the categories an </sseeccttiioonn> </aarrttiiccllee></ddiivv>


6 of 10 3/6/14, 11:52 PM

Summary

You now have the beginnings of a WordPress theme. You've convertedyour HTML file to a set of PHP files and set them up to work together.

In the next part of this series, I'll show you how to edit the stylesheet tomake your theme work, and upload your theme to WordPress.

Resources

The WordPress Template Hierarchy (Codex page)Stepping Into Templates (Codex page)Anatomy of a WordPress Theme (blog post by Yoast)WordPress Theme Development Beginner's Guide by Tessa BlakeleySilver and Rachel McCollin (yes, me!)

Tutorial DetailsDifficulty: BeginnerLength: MediumTags: Theme Development, WordPress, Wordpress

Download Source Files

Advertisement

About the AuthorRachel McCollin is a WordPress

developer who writes books, articles


7 of 10 3/6/14, 11:52 PM

creating a wordpress theme

Documents