I'll be presenting an easy way to create a simple and minimalistic WordPress theme skeleton from scratch. Once you've created this skeleton, you can freely add advanced functionalities and features as per your requirements. If you have a working knowledge of PHP, CSS, and HTML, you can easily create and customize any WordPress theme. You only need three important things to create a basic WordPress theme. First, you must know the mandatory theme files that are used for a typical theme. Secondly, you must be familiar with the template (skeleton) for each of these files. And lastly, you must know how to gel everything together within WordPress software. That's all you need to create a basic WordPress theme. So, let's get started and see how we can create our very own WordPress theme in a few easy steps. Initial Setup
If you're creating a WordPress theme for the first time, do not start the development process on your production web server. If anything goes wrong, it can choke your server bringing other websites down. The best strategy is to install good web server software on your personal computer.The other important tool that you need is a good code editor. Although there are thousands of such code editors, my personal favorite is Brackets, which is available both for Windows and Mac.
So, your local web server is ready and so is your favorite code editor. Now it's time to dig into the real stuff.
Create Essential Files and Directories
Every WordPress theme consists of some of the essential files that serve as a foundation for building a more complex framework. For better management, developers also create additional folders for hosting multimedia content and scripts that are used for the theme. The most common folder is 'images' that is generally used to store common or frequently used images within the theme.But, where should we create these files within WordPress? That's very simple. All the themes are located at '/wp-content/themes/' folder. So first of all, create a folder at this location. You can provide a meaningful name to this folder which is generally the name of the theme itself. For example, I've created a folder with name 'my-first-theme'.
Now, let's take a look at all the basic and essential files that must be created within this folder in the first step. At this stage, don't worry about the contents of these files.
- style.css - This is one of the most essential theme files that contain the necessary code to stylize the appearance of your theme.
- index.php - This file contains the essential code to render the home page of the website when the theme is active.
- header.php - As the name suggests, this file looks after the contents of the theme's header.
- footer.php - Yes, you're right! This file governs how your theme's footer will shape up.
- sidebar.php - Again, the name says it all! This file lets you manage theme's sidebar.
- single.php - This important file contains the code to manage the content of a single post web page.
- page.php - This is yet another essential file the let's you manage the content of a single static page created by the users.
- archive.php - The content of your theme's archive pages can be managed through this file.
- functions.php - If you or theme users want to add additional custom functions for your theme, this file is the right place to do that.
You can make the necessary changes in this template as per your requirement. Save and close the file and go to 'Appearance → Themes' within your WordPress dashboard. You'll see the theme's entry as shown below.
You can see, the preview contains a blank theme screenshot, theme name, hyperlinked author name and the necessary links to manage the theme. To include your theme's screenshot within this preview entry, create a theme image of size 600 by 450 pixels. You can reduce this size to half (300 by 225 pixels) too.Make sure you name this image file → screenshot.png. Here's how the theme preview will look once the screenshot file has been added to the same folder.
If you activate this theme now, you'll get a blank page with no visible components. So let's move on the next important step of adding something more concrete to this theme.Create Basic Containers
Here we're talking about primary content sections viz., header, content section, sidebar and footer. To create these containers, open style.css and add the following code.This code gives the basic skeleton to the theme's web page. You can see some of the familiar names like sidebar, header, and footer. Although you can change the name of these containers, I'll strongly suggest you to use these common names to avoid any kind of confusion.
Create Header Template
The next important step involves creating a skeleton of your theme's header. It contains the most essential code to render a minimal header for a typical WordPress theme. Following is the code to be used in the header.If you carefully examine this code, you can see some code that is essential for themes that may use threaded comments. By default, this theme will have normal comments, but if you modify and extend this theme to add thread comments support, the code in the header will help you activate it easily.
You can also see a call to a function 'wp_head();' which is one of the essential function calls that must be present in the header template file. This function call should be present right before the closing </head> tag.
Also pay attention to the inclusion of 'content-wrapper' section that will encapsulate all other sections within it.
Add Home Page Template
Add this stage; you must be impatient to see how your minimal theme looks. To make it possible, add the following code in the file index.php.You can see, I've included 'post-content' wrapper in this file that will be populated with the latest posts on your blog, if any. You may notice that calls to sidebar and footer are also included in this file.
Both these sections have not been coded as yet, but this index file is good enough to show you something on the index page. Here's how your blog page will appear after activating the theme and opening the index page.
You can the big blog title and the default WordPress post entry. This is a very basic skeleton of this theme at this stage. One important thing that's missing here is a custom navigation menu right below the header. Let's add one to this theme.Add Support for Custom Navigation Menu
Since WordPress 3.x, you can easily add support for creating custom navigation menus for your theme. It just requires two simple steps as shown below. First add the following code in the functions.php file.Thereafter, add the following code at the end of header.php file. In fact, you can place this code anywhere you want the menu to appear within your theme.
Once both these code snippets have been added in both the files, you can head over to 'Appearance → Menus' to create a custom menu for your theme.
But, without any formatting, the resulting menu will appear like a simple hyperlinked bullet list. To stylize it, you need some CSS code as follows. If you carefully look at the code above, you can see that the class associated with the menu is 'menu-header'. Let's see how to do basic styling of our newly created menu. Append the following code at the end of style.css file.
You can see, we've used 'menu-header' class for stylizing the menu. I've done very minimal styling for this menu. Making it look more attractive is left as an exercise for you. You can also add child sub menus to this menu. Let's see if you can do that!
Add Post Thumbnail Support for Excerpts on the Index Page
Bloggers often want to show small post image thumbnails as well as some text while showing the latest posts on the index page. To enable post thumbnail feature, we simply have to add two lines of code right below our custom menu code we've added earlier in the functions.php file.The first line enables post thumbnail support and the second line specifies the dimensions of the thumbnail itself. Depending on your requirement, you can easily change the thumbnail size by modifying this code.
Create Single Post Page with Comments Section
Now let's move on to the next step of completing the single post page template so that you can open and view individual posts on the blog.The code used for this page is almost the same as the code used in index.php file. The only difference is the inclusion of comments section container. Here's the code to be included in the single.php file.
You can see the comments section is included right after the post content. The class associated with this section is 'comments-wrapper' which can be used to stylize this section.
Create Sidebar and Footer Templates
A sidebar is only considered good if it's widget-ready. So the first step of creating our theme's sidebar is to widgetize it. This can be done very easily by adding the following code to the functions.php file.After adding this code, of you go to 'Appearance → Widgets', you'll see the following blank widget container ready for use.
You can add different kinds of widgets in this container, but none of them will be visible since the sidebar.php file is still empty. But before we add the relevant code there, we'll need a custom function for pulling the static widgets, if any. In simple words, this custom function will return the information about the widget-ready container we've created above. Here's the code that must be added to the functions.php file.Now, we'll use this custom function in our sidebar template to fetch the information about the container we've created above. Thereafter, you can add as many widgets as you want in this container. Here's the template for our sidebar.php file.
You can notice two things in this code. First, we've encapsulated this code in the 'sidebar' class we declared in the style.css file. Secondly, I've used the text 'widget-class' for identifying and activating this container because this was the same ID we used while creating this container in the functions.php file.
Now let's quickly create a footer template to complete a basic web page layout for this theme. Here's the code that must be added in the footer.php file.
You can make necessary changes in this code as per your requirements. You can notice that we've used the ID 'footer' which was initially declared in the style.css file. Through this ID you can easily stylize this container to give it a more professional look.
Create Archives and Static Page Templates
The last two important files that need attention are static page template file and blog archives page template file. We'll start with the former to create a basic template to display a general static page created by the users. Here's the template code that should be added to the page.php file.You can see that the template code for this file is almost similar to the single post page template. There are two changes in this code. First, I've omitted the comments section code which is generally not used on static pages.
I've also omitted the navigation links section that may take you to the previous or next page. This section is also generally not needed while creating static pages for the blog. If you want them in your template, you can easily add these sections.
Now let's move on to the last important file that'll decide the structure of archive pages on your blog. Bloggers often structure their archives pages in different formats. Some prefer just the post titles while others also prefer to include post excerpts with each entry. Let's see how we can make a simple archive template. This code should be added in the archive.php file.
Although there are dozens of ways to create an archive page template, for simplicity's sake I've created a basic version that matches with the page template. You can note that I've included the navigation section in this template to go through all the archives pages if required. Again the comments section has been omitted which is not needed on the archives page.
Extend and Optimize This Template
Remember, this tutorial is not for making a visually appealing theme template. The whole purpose of this tutorial is to make you aware of all the necessary steps needed to make a typical theme template from the scratch. There are so many things that can be added to this template to make it ready for use on a live website or a blog.You can use this template to add more functionalities and features to this basic skeleton. Hopefully, this tutorial will help you get started with designing killer WordPress themes for your own blogs as well as for the community. Good luck!