Making a Simple Theme

This is an intermediate level WordPress tutorial for aspiring theme developers. In this tutorial you will learn how to create a simple theme to get you started on the path to being an accomplished theme developer. This is meant to be a quick start guide to get you started and does not cover everything in detail, but gives you just enough to develop a simple theme without spending months learning before you do so.

The Basics

Always start with the basics. To get started with theme developing, there are some key files you should be familiar with. Below I will name and describe the more important ones briefly so that you can understand the file structure of WordPress themes enough to understand the rest of this tutorial. The first thing you need to know is how to locate the themes directory. Go ahead and open an ftp editor to follow along. Go to your WordPress site and find the wp-content directory. Inside wp-content you will find your main “themes” folder. Open that and you will see a folder for each theme you have installed or that came with your installation of WordPress. Everyone reading this tutorial should have a folder named twentyeleven which is the default theme for WordPress at the time of writing this tutorial. Open that and let’s look at the files inside. I will descripe the relative ones below:

  • index.php – The theme’s index.php file is the file that is responsible for creating the multiple post page you see when you visit a default installation of WordPress. WordPress can be configured to show another page by default, but unless you have changed the settings, this is the default page. It is a basic layout page that shows all posts using the famous WordPress loop. If you are not familiar with the loop, read my tutorial on it on wphub.com at: http://blog.wphub.com/tutorials/customizing-posts-wordpress-loop/. It is important to understand what the loop is at minimum. If you haven’t done so yet, see my tutorial on the loop. I won’t discuss it in detail here because I already wrote another tutorial on the loop.
  • Header.php – The header.php file will also be found in almost every theme. This page is called from index.php with the get_header core function of WordPress. The get_header function is important to understand as well. By default(with no parameters) the get_header function calls the header.php function. It can also be used to call a custom header file you can create. To call a custom header file use it like this:


    get_header(“name”), where “name” is an extension of a new header file name. So, you would name your alternate header file something like header_name.php and make the “name” part whatever you wish and use it in the parenthesis of the get_header function hen calling it to call your alternative header instead of header.php.
  • Style.php – This is the file that contains the CSS styles for your theme. Obviously this is an important file for making changes to the default theme, so earmark this file as we will be making changes to it below.
  • Functions.php – This is probably the fourth most important file when creating a new them. Although, I won’t go into this one too much in this tutorial, just understand that this is the place where you would add any PHP functions that are specific to your custom theme. You may or may not wish to do this from the start, but there is a good chance you will want to when you further customize your theme later on to adapt to your specific needs or requirements.

Believe it or not, those are the only files you really have to make significant changes to in order to build your own custom theme. Continue reading and I will demonstrate how you can do it.

Naming Your Theme

The first thing you will do on the path to creating a custom theme is to choose a name. The name itself isn’t as important as what it does. Choosing a name and renaming key folders and files is crucial so that the WordPress core recognizes your new theme as a them and allows you to install and activate it. Here are the steps necessary for naming your theme and setting it apart from the theme you started with. In this case, we started with the default Twenty Eleven theme. For the purpose of this tutorial, I am using the theme name of “ianstheme” but you can use what ever you want, just replace every occurrence of “ianstheme” with the name you choose. To keep things simple, keep your name all lowercase as I have done and just use letters.

  1. Make a copy of the twentyeleven folder and rename it to your new theme’s name. In my case, I named my folder “ianstheme”. Be sure to leave the original twentyeleven folder in tact so you are not losing your default theme and you can always go back to it. You will most likely have to use your FTP application to do this. One simple way to copy it is to download the folder to your desktop, rename it and upload it again under the new name.
  2. Open you new theme’s folder and locate the style.css file. This is the file that officially sets the name of the theme for WordPress. When WordPress looks for the theme’s name, it looks in the top few lines of style.css. Here is what the top of the original twentyeleven theme’s styls.css file should look like:


    /*
    Theme Name: Twenty Eleven
    Theme URI: http://wordpress.org/extend/themes/twentyeleven
    Author: the WordPress team
    Author URI: http://wordpress.org/
    Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background — then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom “Ephemera” widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured “sticky” posts), and special styles for six different post formats.
    Version: 1.4
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
    Text Domain: twentyeleven
    */

  3. Taking a look at the above code, you can see it’s nothing but comments. For those of you not so familiar with PHP code, the opening star and slash and closing star and slash indicate that it is a comment and not actual functional code. In this case however, WordPress has a core functionality that reads the comments and parses this information so it can determine the theme’s name and other attributes.
    Go ahead and change the comment lines to something like I have done below:


    /*
    Theme Name: Ians Theme
    Theme URI: http://www.jafty.com
    Author: Ian Lincicome
    Author URI: http://www.jafty.com
    Description: a custom theme template using the original WordPress Team’s Twenty Eleven theme with changes by Ian Lincicome of Jafty.com.
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
    Text Domain: ianstheme
    */

When you are done with the above changes, go to your WordPress admin. From the admin area, go to the themes option under the Appearance option in the left main navigation bar. You should now see your new theme with the same image as the twenty eleven theme. It should look like this:

ians theme

Changing the Theme’s Image

Now that you have named your theme appropriately, lets get that image changed. Simply use your favorite image editor to create something suitable for your theme. You can do this in two simple steps as follows:

  1. Open a new image file, name it screenshot.jpg and make it 300 pixels wide by 225 pixels high and add whatever you desire to it.
  2. Upload it to the current theme’s directory. This should be the directory you created above. Let it overwrite the existing screenshot.jpg file that was there before. Now refresh the admin page you should still be on with the available themes and you will see your new image.

Changing Your Theme’s Content

This is where everyone is most likely to go off on their own. Surely each of you reading this tutorial has their own vision of how you want your new theme to look. I will go over several steps for making common changes and you can choose to do the same or make your own similar changes once you learn how. Here is what I did:

First I wanted to change the header, so let’s look at header.php again for the new theme and see what we can change. The first thing that bothered me was the two search boxes. I only wanted one, so I took out the code for the one a the top of the page above the header image. I also didn’t want the header image, so I took out all that code which was quite a bit because the default theme allowed for many different header image attributes and set them dynamically with PHP. Here is what my code for header.php was like when I was finished:

<?php
/**
 * The Header for ianstheme
**/
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;
 
	wp_title( '|', true, 'right' );
 
	// Add the blog name.
	bloginfo( 'name' );
 
	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";
 
	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
 
	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );
 
	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>
 
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
	<header id="branding" role="banner">
			<hgroup>
				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>
 
			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
	</header><!-- #branding -->
	<div id="main">

If you save the above code as your header.php file you should know have a theme that looks something like the following image. Notice that the header image and top search are gone, leaving just a simple black navigation bar at the top of the page:

newhead 2

Removing Site Description

The next thing I wanted to do was take out the description. The description is the text that says “not just another WordPress site. You can choose to remove this text completely or to change it. Some changes are best off made in the theme’s settings and not programmatically. This is one of those changes that should probably be made in the admin settings. Go to your WordPress dashboard and click on settings under the appearance option. Look for the tag line, that is what controls the description. Either replace or remove the text and save your change.

If you really want to remove it from the header.php file permanently, you can, but you will not be able to add it back later if you wanted to and if you are planning on sharing your theme, it won’t be set up proper unless you completely remove the admin settings as well, so it’s not recommended, but if you still want to, just remove the line that looks like this:

<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>

Doing that will also drop the site name down to just above the navigation menu, so you may either just remove the PHP part and leave the h2 tags or just add a couple br tags in it’s place.

That does it for changes to the head of the site. You may or may not want to make additional changes yourself, but that is all I am going to do here so we can get on to the rest of the page.

Editing index.php

The rest of the programing changes will be done in index.php with the exception of CSS changes which will done in style.css and additional PHP functions which should technically be added to functions.php. We won’t go into that here though. Go ahead and open your index.php file in your theme’s folder. You can open it in the WordPress editor or download it to your desktop and use your favorite text editor. Either way will work. Look through the code and see what changes you can safely make without messing up the loop or any default functions to the point where it will make the site no longer work. You do have to be careful what you edit, but I will show you how you can start from scratch instead of going over the existing default code and trying to change it. The first thing I wanted to do was make the simplest index.php page possible that still has the basic features expected in a WordPress theme. Here is the very simplest form of an index.php page that still has the header, footer and sidebar elements along with the mandatory WordPress loop:

<?php
/**
 * a basic template file.
 *
 * This is the most generic template file possible in a WordPress theme
 *
 * @package WordPress
 * @subpackage ianstheme
 */
 
get_header(); 
 
 
if (have_posts()) :
	while (have_posts()) :
		the_post();
		the_content();
	endwhile;
endif;
 
?>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The above code is pretty much the simplest possible index.php page. It has the get_header function at the top that calls the header.php file. It has the loop explained below. Then it has the get_sidebar and get_footer functions to call the sidebar and footer. I am leaving this simple so you can use your own HTML skills to make changes. You can do things such as use HTML markup to put the sidebar and footer where you want them and add any additional features you want in your theme.

Additional Information

There is some helpful additional information you should be aware of for styling your theme that I will give you here. For example, you need to know how to find the code that creates the sidebar and footer in order to effectively make changes to the style.css file and even the elements themselves if you so choose. The sidebar is created in a template file of it’s own called sidebar.php and the footer is in a file called footer.php. Both files are in the main theme folder you created, so look at the mark up in those files, find the corresponding

The WordPress Loop

If you look at the code just above, the first part after the get_header function is the actual loop. The loop is what does the work of showing every post. The actual loop in this case is very simple. It is just the following code:

if (have_posts()) :
	while (have_posts()) :
		the_post();
		the_content();
	endwhile;
endif;

That is the bare-bones loop. It is a lot simpler than the one the original Twenty Eleven theme uses, but this way you can make changes to it as you see fit. With the code above, there are no columns or anything, but your an add them with some very simple HTML changes. This is where I will leave you because the rest of the changes are up to you. Just remember to edit your style.css file to make corresponding changes to whatever you develop into your index.php page.

Summary

After reading this tutorial, you should know what files to edit to build a basic theme from the the Twenty Eleven default theme in WordPress. It is not that difficult as long as you at least know the basics of HTML, PHP and CSS. JavaScript is also very handy for theme developers. Good luck with your own theme development and have fun doing it!

About 

Ian Lincicome is a web developer and freelance writer with over 20 years experience in web development and writing. He specializes in Web Development, Custom WordPress Development, Programming, Online Application Development, Fiction Writing and Technical Writing. He enjoys sharing his knowledge with others on WPHub.com.

3 thoughts on “Making a Simple Theme

  1. Very good article. In depth and well explained.
    I`m just missing a paragraph with a few starter theme suggestions like ROOTS or _s UNDERSCORES. There are many good blank themes available.

Comments are closed.