Creating a WordPress theme isn’t as hard as it initially may seem. It is simple a matter of learning and executing the different components that holds a wp theme together. In this tutorial we have included all the necessary steps in building your very own theme. So let’s get to it.
Step 1 – Download and configure WordPress
First off, you need to head on over to WordPress.org and download the CMS files, unzip them and store the folder on your computer. Then open the folder, locate the file wp-configsample.php and open it in your favorite text editor (EditPlus recommended). This is the file where you will set your database settings.
Replace the following values with your DB information:
- DB_NAME – define your databases’ name within the following parenthesis
- DB_USER – define your databases’ username within the following parenthesis
- DB_PASSWORD – define you databases’ password within the following parenthesis.
99.9% of the time you will not have to define DB_HOST, and can leave the value as “localhost”.
Save the file in the WordPress folder and rename it to wp-config.php. Delete wp-configsample.php.
Step 2 – Upload to hosting account
Assuming you have obtained both a domain and a hosting account, it is now time to upload the files. It is recommended to use the FireFox extension FireFTP for this step. This FTP client is completely free and easy to install and configure. Download FireFTP here.
When all files have been transferred, open another tab in your browser and go to, if you have uploaded the whole WordPress folder; www.yoursitename.com/wordpress/wp-admin/install.php, and if you have uploaded files only; www.yoursitename.com/wp-admin/install.php. There you will finish the installation.
In the case that we assumed wrong, and you do not yet have obtained a domain and hosting account, make sure to have web hosting ready before starting this tutorial.
Step 3 – Creating a theme and template files
By default, your new WordPress blog will now have the layout of Kubrick’s theme. Most wp users however, are quick to go out looking for a more professional and advanced theme. Nowadays you can find WordPress themes all over the web, made by professionals as both free and premium. But if you prefer to learn how to create your own basic theme as a basis for further designing, pay attention. We will now start building your very own one column WordPress theme.
Creating index.php and style.css
Create a folder and give it the name you want to call your theme. Open your favorite text editor and create a new document, then save it as index.php to the theme folder. Add this code to the index.php, save the file and close it.
Then open a new document, save it as style.css, add this code, edit in your theme name, site url, description, version, author name etc., then resave the document and close it. We will return to define the css file late. Now, it is time to create the rest of the files and add the legendary loop.
Upload the theme folder to your hosting account file directory (extension: wp-content/themes/ ) and log in to the WordPress admin (extension: wp-admin/), go to Appearance>Themes and activate your theme. Since we haven’t added anything visible to the theme, your site should display as blank in the browser. If you get an error message, redo this step and try again.
Creating header.php
To create the top part of your site layout, we will now build the header. Add this code between the body tags in index.php. This creates two boxes to hold the top positioned content on your site, such as logotype, the wrapper and header. The tags used are div tags that are included to help you later position the header in the CSS stylesheet.
Then open your text editor and create a new document, add this code and save it as header.php. Every time the index.php file is loaded, the added code will tell the browser to find header.php and include its code.
The header file is thus now a template file, and moving on we will create template files for sidebar and footer as well. Rather than having all code in one file, with template files we can divide the code for each section and simply tell the browser to fetch it when the page is loaded.
Adding The Loop
Now that we have defined the header it is time to add an element that is legendary for WordPress sites. The loop is the streamline of posts that exists on virtually any WordPress powered website homepage.
Open index.php and add this code within the body tags, under the header snippet.
Creating sidebar.php
Like the loop, the sidebar is a mandatory element of any WordPress blog. In it a list of your pages, categories, blogroll and archive will be displayed. Create a new document in your text editor and save it as sidebar.php. Add this code and resave it to the theme folder. Then add this code under the “box” div end-tag in index.php to include the sidebar template file.
Creating footer.php
For the last “invisible box” to structure the content and design of your WordPress blog, we will now create the footer. Open a new document and save it to the theme folder as footer.php. Add this code to footer.php and add this code to index.php
Creating single.php and page.php
Since there is a difference is content structure and layout for a Page and a Post page, we cannot forget to create two different template files. Open your text editor and create two new documents, save them as single.php and page.php to the theme folder. Add this code to single.php and add this code to page.php. For the single post page we have now made sure to include comments, while content on your Pages will display as simply static.
Creating functions.php
Before we continue to create the footer template file, we have to make the sidebar widget ready. To do so we have to define it as a theme function, which is done through the functions file. Create a new document and save it to the theme folder as functions.php. Add this code and save it again. Then add this code to the file sidebar.php on the second line after the div tag on the first line.
Adding Commenting
We have already added the required code to single.php so that comments are displayed under the posts. Now, we have to create a template file. Create a new document in your text editor and save it as comments.php and add this code.
Step 4 – Designing the theme
Though we would like nothing else but to design this theme for you, unfortunately we have reached the final step and here you will get to add the selectors to the stylesheet, and we’ll leave you to define them with properties and values as you wish. Open style.css and add this code.
About the Author
Mirko Humbert
Mirko Humbert is the editor-in-chief and main author of Designer Daily and Typography Daily. He is also a graphic designer and the founder of WP Expert.
