How To Create A Simple Theme On WordPress

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 WordPress theme without spending months learning before you do so.

The Basics To Develop a WordPress Theme

Always start with the basics. To get started with theme development, 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.

Locate Themes Directory

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 describe 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: https://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 theme. 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 WordPress 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 2021 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 WordPress 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:

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:

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:

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:

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 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!

Ani Hoang
Ani Hoang

Ani has been managing WordPress websites and optimizing different affiliate sites. She is also passionate about digital marketing and branding. She joined WPHub to plan and execute the backend operations to support your experience on our site.

FREE EBOOK: How to Build a Wordpress Website

FREE

As a complete beginner!

FREE EBOOK: The Ultimate Guide To Speed Up Your Website and Increase Conversions!

FREE

Site Speed Secretsis a is a step-by-step blueprint about how to speed up your website and increase conversions.