In this tutorial, I am going to walk you through my process of creating a very simple starter theme with only the bare minimum features and functions. By following this tutorial, you’ll be able to build your own WordPress theme with the following features:
- Custom header with a dynamic site logo and header navigation.
- Fully functional sidebar.
- Separate templates for the homepage, page, single, search, 404 and archives.
- HTML5 support.
- SEO friendly modern markup.
Even though you can just copy/paste the codes included in this tutorial, I highly recommend you to explore the world of WordPress development a bit more. It is fun, easy and if you are into freelancing and web design, having WordPress development as a skill set will extend your reach and boost your monthly income.
Table of content: Creating A Custom WordPress Theme
- Necessary files needed for a WordPress theme to Work.
- WordPress’ developer handbook.
- Creating the screenshot.png file.
- Adding vital theme information to the style.css file.
- Index.php: The default WordPress Template file.
- Functions.php: Heart of your WordPress theme.
- Single.php: For single blog posts.
- Page.php: For single pages.
- Search.php: The default search template.
- Comments.php: The default comments template.
- 404.php: WordPress’ custom 404 template.
- Basic styles for your theme.
- WordPress Coding Standards.
- Using a starter theme.
- Using a child theme.
- What to do next?
Necessary files needed for a custom WordPress theme to Work.
Unlike a simple HTML/CSS website, you need a few more files to make your custom WordPress theme work. You might have seen or explored the default WordPress themes such as TwentySeventeen/Nineteen. These default WordPress themes come packed with almost every possible file that you might need in the future. So, when creating your own custom WordPress theme, you don’t need that many files.
To be honest, you only need these 4 files to get the ball rolling:
But, if you plan on using only the above mentioned 4 files, you will have to put all the template related snippets inside the default index.php file which will make modifying the website in future very complex. So, to keep everything simple and safe, I always create separate template files for different templates.
In this tutorial, I am going to use these files:
I am also not going to use get_template_part(); (WordPress function that helps you load a part of your template without having to copy and paste the whole part manually each time you need it.) as I think it is not suitable for beginners who are new to coding. Once you become familiar with coding WordPress themes, you can explore some more advanced methods and hooks using WordPress Developers Handbook.
WordPress’ developer handbook
There’s no better resources for an aspiring WordPress developer than WordPress’ developer handbook/code reference resources. If you are already an experienced WordPress developer, you’ll only need a WDH to build a good and secure WordPress theme.
I will be linking out to a lot of WDH resources throughout this tutorial. Make sure to bookmark these resources for future reference and explore https://developer.wordpress.org/ briefly. Some functions are upgrades and a future bug patch may deprecate these functions. So, make it a habit to visit Developer Resources every week.
When I started developing with WordPress, I used spend hours exploring WDH.
Creating the screenshot.png file
Having a screenshot file doesn’t make any difference. Your theme will still work just fine but I prefer having this image ready as it helps your customers to differentiate between different themes.
You don’t have to create the most beautiful image for the screenshot. Traditionally, most developers have a screenshot of the front page of the website when the said theme is fully set up and customized with inbuilt theme features.
The recommended image size of screenshot.png file is:
- Width: 1200px;
- Height: 900px;
If you don’t have any image manipulation software such as Photoshop, use Canva which is a free online that I use for my projects. The only issue with using Canva is that it doesn’t let you download transparent .png files in the free plan. So, if you want to have a screenshot image with a transparent background, signup for their premium plan or use Photoshop(also a premium option) to design .png images.
Please note, most developers use a lightweight .png file to reduce the overall size of the theme folder. Some web hosting especially shared hosting, will not allow uploads of considerably larger file size.
Adding vital theme information to the style.css file
The “style.css” file is perhaps the most important CSS file of your WordPress theme. It is the default stylesheet that WordPress uses to pull theme information and textdomain(more on this later).
If you haven’t already created a folder in your WordPress theme directory, create one now and name it “rohbitstutsample” or anything you want.
Add the style.css and screenshot.png in this folder. If you want your theme to be visible in the WordPress admin dashboard, you will these files as well:
After adding these two files to the theme’s folder, you will be able to see your theme listed in the “themes” option in the “Appearance” section.
If you take a closer look, you’ll see no information listed with the theme.
FYI: I copied the above snippet from WordPress theme handbook and changed the details to suit the need of this tutorial.
All the tags are self-explanatory except “Text Domain”. Text domain is a unique keyword/identifier that WordPress uses to differentiate between different functions, and translations. You will need to add a unique textdomain to your theme for future function modification.
Note: If you are planning on listing your WordPress theme on WordPress’ free theme repository, you will want to add appropriate tags to help WordPress sort your theme accordingly. You can not add any tag you want. Make sure to only use tags that describe a feature included in your theme.
A complete list of theme tags that can be used can be found here (WordPress Theme Tags).
After pasting the above snippet inside your stylesheet, you can save it.
These days, to make stylesheets modular, many developers use SASS and the base stylesheet is located in a different directory. Since this tutorial is targetted towards beginners, we will put all our styles inside the default “style.css” file.
Index.php: The default WordPress Template file
Index.php is the default WordPress template file. If WordPress fails to find any specific template file for singular blog post, archive, search, home…etc., it will fall back to index.php file. WordPress requires you to have index.php file in every standalone WordPress theme.
It may look a bit complex but index.php file is an easy-to-understand PHP file.
You’ll have a few WordPress hooks such as get_header(), get_template_part() and get_footer();
You’ll be carrying out most of the heavy tweaking inside these templates which makes your theme modular, easy to troubleshoot and understand.
Apart from helping you store the header section of your theme in a separate file, get_header.php also helps WordPress to insert scripts and styles inside the head of your HTML document.
Before adding get_header() to your index’s head, you need to create a new file called, header.php. Inside, header.php file, you’ll have to insert some HTML boiler template and some custom PHP WordPress functions.
I use Emmet to generate some basic HTML tags and then insert PHP functions manually. Here’s how the header.php file should look like:
This particular header.php is structured in this manner:
Document Header [<head> </head> ]
Document header container wp_head(); which lets WordPress insert scripts and styles inside the head section of the HTML document. So, when you enqueue styles and scripts, WordPress uses wp_head() and wp_footer()[later] to determine where to insert these files.
Main Site Header [Website Title, tagline, logo, and navigation menu(s)]
Most themes feature a branding section, header navigation and sometimes even a search icon. I prefer only adding the branding and navigation menu unless a client specifically asks me to add the search icon.
In a future tutorial, I will share some custom functions that you can use to extend the functionality of these WordPress functions and hooks. You will be able to add ID’s, class and wraps/containers. For beginners, I recommend going with basic functions and then moving to complex features as you gain some experience and confidence as a WordPress developer.