In this intermediate level WordPress tutorial we will discuss a quick and easy method of creating new WordPress themes. This tutorial is not just for time-savers who want to create their themes in no time at all; it’s for everyone who has a need for a basic theme template including professional developers. There are several advantages to using a WordPress theme template that has all of the files for a new theme and only basic bare-bones style content. For one thing, the theme’s users will be able to easily make style changes and choose the theme’s elements individually. Developers who use the theme template available for download in this tutorial will save vast amounts of development and design time creating themes from now on. We will show you how to install the basic theme with only minor changes at first. Then, later, you can make further changes at your convenience. Make your changes as you go so you can see the changes instantly and you will know whether or not the changes were successful or not. This is a proven theme development method adopted from several leading WordPress theme creators including the author of this tutorial.
CREATING A BASIC WORDPRESS THEME
To start out, you should download the basic WordPress Theme Template Files which we will refer to as WTTF for short. WTTF is also the name of the directory the theme resides in. Go ahead and download them now FROM HERE Once you have the files, we will go over how to mold them into a brand new theme you can be proud of.
GETTING STARTED QUICKLY WITH A WORDPRESS THEME TEMPLATE
It is much quicker and easier to start off with a good WordPress theme template like we have provided you with. This theme template is called the “Jafty Basic WordPress Theme Template” and is what I personally use for developing new WordPress themes. I made a basic HTML5 layout with current HTML5, CSS and PHP code and the basic elements for starting any WordPress theme. I used the same basic infrastructure that WordPress gurus such as those at http://digwp.com and at http://html5reset.org use, but I have added some elements and taken away others. I personally modified the files to make them into what I feel is a better basic template to start a new theme design from. Download the files and tweak them however you want to develop your own custom theme. We also added hints in the theme’s content that you will see the first time you view the theme live. The hints are in orange text so you can easily identify them. Hints were added in version 2.00 because of several problems locating which file holds what content. Now you can easily determine what content goes in which file from these orange hints throughout the theme. You can easily remove the hints by going to the file and locating the hint which is often at the very top of the page.
WORDPRESS THEME INFRASTRUCTURE
To develop a theme, you need to understand and follow the basic anatomy of a theme. You will find each of the files listed below and a few more in the Jafty Basic WordPress Theme Template. Here are the basic pages to quickly sum up the anatomy of a theme:
- index.php – the home page which normally contains the following included files:
- single.php – a page made for displaying individual posts.
- page.php – individual pages. You can have multiple pages with different looks as long as you include a unique name for each page style at the top of the page’s PHP file inside PHP and comment tags like
- archives.php – you can create archive pages to style archives. You don’t necessarily have to do this because if you do not, then all archives will be displayed using your index.php page template. Other archive pages are:
NAMING NEW FILES IN YOUR WORDPRESS THEME
You may run into cases where you need to name files in your theme if you do a lot of customizing. There are some reserved words that you cannot use as WordPress theme file names. Certain reserved words are mentioned because using certain filenames in your theme could interfere with the default WordPress functionality.
Here is a list of NAMES YOU CAN NOT USE in your WordPress theme filenames or the theme’s name for that matter:
When developing the files for your theme, be sure not to use any of the above names. Also be sure to follow the WordPress Coding Standards which can be found at http://codex.wordpress.org/WordPress_Coding_Standards. The WordPress Codex explains the finer points of how to structure your PHP, HTML, CSS and SQL code. That covers the very basics of what you would need to do to create a theme from scratch, but for slightly less advanced users or users who are more time conscious, we definitely recommend the time saving method used in this tutorial of starting with the basic theme template files.
CHANGING YOUR THEME NAME:
To make the theme your own, you will probably want to change the theme’s name. You especially will want to change the name if you plan on making it available for others to use. This is the second thing you should do before installing your theme to play with it. The first thing you should do is install the theme as-is so you can see it work before making any changes. To learn how to install a copy of the theme as-is before you begin, you can read the below section on installing your theme. You should also save a backup copy of the theme before making any changes so you have an untouched copy to revert back to in case you have problems later. As long as you don’t use any of the above reserved names for your template name and you stick to regular letters without using just numbers or any weird characters in your theme’s name, you will be fine. Do not name your theme just a number because it will prevent it from displaying the theme name in the admin area of WordPress. In order to change the theme name that shows up in the WordPress Administration area, you need to locate the style.css file within the main “WTTF” folder. The top of style.css will look like this:
Theme Name: Jafty Basic WordPress Theme Template
Theme URI: http://blog.wphub.com/tutorials/quick-method-creating-wordpress-themes
Description: A basic theme template with all of the necessary files for you to modify at will and create a theme you can call your own. This theme is the standard base template used by Web Developers at Jafty Interactive Web Design. The theme has many of the standard extras, but not too much so that it becomes bloated and confusing. Jafty Web Design has made it as simple as possible for starting new themes rather than doing it from scratch and having to create several basic files each time. Anyway, why not save hours of time by starting with the basics? It makes perfect sense. The theme also contains easy to understand comments in orange text to help you along the way.
Author: Ian Lincicome
Author URI: http://www.Jafty.com
In the above example, after the “Theme Name” heading, at the top, is the text that shows up in WordPress as the theme’s name. It is important that whatever you name your theme, you include it here. Also be careful to stay away from any of the reserved filenames above in case you use your theme name as a file name and to avoid other possible conflicts. The next item listed in the above example, after the name, is the “Theme URI”. This is where you add your theme’s description which will also show up in the WordPress admin area. Then the author, author URI and Version number are also items that show up in WordPress. Be sure to edit them all according to your own theme’s information.
Another thing you should do either before or after changing the name in the style.css file, is change the main file folder name as well to something that fits your theme name. If it’s short enough, name it the same name as your theme name, but make sure to follow common directory naming conventions and replace spaces with underscores. Some computer systems don’t like spaces in directory names.
CHANGING THE THEME ICON AND THUMBNAIL IMAGES
There are two images you want to change before installing your theme so you can correctly identify it in your browser during installation. First, you want to change the favicon file so your blog visitors will see the correct favicon image when going to your site. The favicon is the little image that shows up on most sites in the address bar before the URL. The second image you should change is the thumbnail that will be used to identify the theme in your WordPress Admin area. Use an image that you would want users to see just before installing your theme. It should be a screen shot or an image that corresponds with the theme’s name in some way. Both images are found in the main folder of your theme, i.e.: the folder named WTTF in our case. Let’s start by replacing the thumbnail image. Complete the following easy steps to do so now:
- The thumbnail image is called screenshot.png because it is often a screen shot of the theme’s main page. Find screenshot.png in the main theme folder (the folder originally named WTTF). The screenshot.png file we used looks like:
- Delete the original screenshot.png file. These can often have other image file extensions, but not in this case.
- Use the graphics software of your choice that supports the .png file extension to make a new screenshot.png file or simply take a screen shot of a mockup of your page if you did one.
- Place the new screenshot.png file in the main theme folder once again.
- Next you will replace the favicon.ico file like this:
- Delete the old favicon.ico file in the main theme directory. The favicon image we used looks like:
- Upload a new favicon.ico file of your own. Use a FTP client such as FileZilla if you do this after installing the theme, but if you have not installed it yet, just change the file in the main folder while it is on your desktop waiting to be uploaded.
- Open the file named header.php from the main directory and add the following line of code after the opening head tag:
- Save header.php and move on to the next section of this tutorial.
INSTALLING YOUR THEME
Now that you have made a couple minor changes to identify your new theme as yours, you will need to install your theme and make even more changes later. We will use the WordPress Theme Template Files (WTTF) to install an almost format free theme so you know you have a working theme to start with. You can then easily make and test your changes one at a time to be sure everything works as you alter your individual template files.
Below is how to install the basic WTTF theme, but you would use the same method to install any theme you might want to install that isn’t already part of WordPress. Be sure to change the theme name before installing it as described above in this tutorial. Here is how to install it:
- Download the WTTF zip folder to your desktop but do not extract it (if you are downloading the original, if you are downloading your own modified theme, you will need to save it as a zip file at this point instead). Save it so that only the files are in the zip archive and not the containing directory. In other words, open the theme directory so that you see the style.css file and the languages folder. If you see those two items along with several more, you are in the right place. Select all the files and folders in that directory then right click on the selected items and chose “send to” and “zip archive”.
- Log into your WordPress blog and go to the dashboard.
- Select “Appearance” followed by “Themes” then click on the “Install themes” tab.
- Next, click on the upload option on the top of that page.
- Then use the browse button to browse your local machine for the theme, select it and install it. Upon successful installation of the theme, it will give you a message saying “Theme installed successfully”. If it did not install successfully you will get an error message.
- If it installed correctly, activate your new theme. Go to the “Manage Themes” tab, locate the theme you want under available themes and click the “activate” link below it.
DISABLING WORDPRESS SIDEBAR WIDGETS
Widgets can cause real headaches for developers that have not been informed regarding widget functionalities. When I began developing WordPress Themes, I wasted hours trying to modify my sidebar.php file. The modifications I made did not show up. After a half dozen trial and error experiments and an hour on Google, I found out that the WordPress sidebar widgets were overriding my changes. Be sure to disable your sidebar widgets before you try to make any customizations to your sidebar or even if you want the basic sidebar.php file the theme comes with to work. Disabling sidebar widgets isn’t too difficult, just follow these two simple steps:
- Go to your WordPress dashboard and click on “Appearance”, “Widgets”.
- You should notice three areas on the widgets page. For this exercise, we are only concerned with the top two. On the left the heading reads “Available Widgets” and on the right the heading reads “Sidebar Widgets”. Simply drag each of the widgets on the left over to the right and drop them one at a time until there is nothing on the left under “Sidebar Widgets”. You are done! Now your sidebars will behave as you would expect them to with the sidebar.php file.
If you have followed this tutorial correctly and didn’t make any typos while editing file names or content, then you should now have a bare-bones style WordPress theme template to mold as your heart desires. You just saved several hours of work by not having to write all those template files from scratch! If you do not have a basic working WordPress theme successfully installed at this point, then read on for some common mistakes that could cause the theme not to work.
So, you didn’t get a working WordPress theme going? Well, here are some common possible errors that beginning theme developers often make:
- Check your style.css file to make sure you didn’t make any spelling errors in your comment tags at the top of the file. If you made changes to the actual CSS below, check over that as well.
- If your changes to sidebar.php are not taking place live, be sure you followed the above steps for disabling side bar widgets correctly.
- If you theme is throwing an error when you try to activate it, you probably have an error in one or more of your files or file names.
- A lot of people have problems with sidebar.php when trying to make changes, so if your problems stem from there, read our next tutorial on “Styling WordPress Sidebars” http://blog.wphub.com/tutorials/quick-method-creating-wordpress-themes.
- If you have other problems or simply cannot get the basic theme working, try a fresh download of the WTTF theme directory from the download link http://jafty.com/Jafty/WTTF.zip. If the fresh download works, try making edits to it one at a time and testing it to find out where you went wrong and fix the error that way.