In this step by step Guide To Making Custom WordPress Theme in 2020, we will start our journey into creating a WordPress theme from scratch using best practices so that our theme may be accepted by wordpress.org for distribution and by ThemeForest and other popular marketplaces for WordPress themes.
Please keep in mind that we will not be coding the HTML and CSS portion of the theme from scratch as this guide is not a guide on HTML and CSS. Our goal is to create a WordPress theme. So what we will do is to take an already existing HTML template and convert it into a WordPress theme.
There are a few options to get a ready-made HTML template.
(Option A) – Code the template yourself. For this guide, I have written the code for a template I plan to use in this course. We will simply convert this template into a WordPress theme. Simply, I said? Well, it’s not that hard. The link to the HTML template is https://wpexplode.com/template/business_one
(Option B) – Purchase an HTML template from sites like ThemeForest and convert it to a WordPress theme. You may not be able to sell this theme and it’s design to multiple clients unless you get an unlimited license. Technically, you could tweak and edit the theme to have a different look and feel, convert it to a WordPress theme and then sell it.
To make the whole process transparent, you could browse through our collection of HTML templates for your use. Simply convert them to WordPress themes and sell them under your own brand.
STEP 1: Guide To Making Custom WordPress Theme in 2020
Since we are currently developing our theme in a local environment, errors are prone to arise, turn on DEBUG = true to ensure that all errors while developing our theme can be displayed on the screen.
To do this, open up your text editor of choice. Click on file -> open folder and navigate to your WordPress folder named business-site.
If you followed our previous post on installing WordPress on xampp, you will remember that our site folder is business-site and this can be found in C:\xampp\htdocs.
Once the business-site is open in your code editor of choice, find wp-config.php at the root directory and locate the line define( ‘WP_DEBUG’, false ); and change it to define( ‘WP_DEBUG’, True );
Save your changes. Please when you push your website to the world wide web, do not forget to set debug to false. We do not want our clients to be presented with erratic error messages when they try to access our site.
Next Step: Try to understand the files in your business-site directory. While there are lots of files in this directory, I do not want you to be overly concerned about them at the moment. The only folders I will want you to understand a little are the :
wp-admin folder: contains the admin files that run the WordPress dashboard.
wp-includes: contains files and folders that WordPress uses to process your data.
wp-content: This is presumably, the single most important folder we will use. This folder contains plugin, theme and uploads folder. Remember, that as theme developers, what we are primarily interested in, is this theme folder.
START CREATING OUR THEME.
Navigate to wp-content folder and click on it. This folder drops down to reveal the theme, plugin and uploads folders respectively. Right-click on the theme folder and click on the new folder. Name your theme folder to martins_business_one. (or any name of your choice).
Now that we have this sorted, we should create about three (3) files in the martins_business_one folder named:
index.php => the entry point to WordPress
style.css => provides information about our theme. It can also contain styles for our theme.
screenshot.png => image to be shown on the backend. This image should be identical to the final projects homepage design.
Our sample theme screenshot.
Note: It is important to use your homepage final design as the screenshot.png if your theme is to be accepted by WordPress.org.
Now, let’s see the result of our hard work so far!
Go to http://localhost/business-site/wp-admin
Log in with your admin username and password.
Click on Appearance on the menu and also click on Themes. You should now see our theme listed among other themes as shown below.
We can activate our theme now, but clicking on it reveals that there are pieces of information like the version, description of the theme, author information that is missing.
To enable this, go back to your theme folder (martins_business_one) in your code editor and then click on style.css. Remember, that the style.css is responsible for providing information about our theme.
In style.css, open up a multiline comment and enter the information as presented below:
Theme Name: Martins Business One
Theme URI: https://wpexplode.com/themes/martins_business_one
Author URI: https://wpexplode.com
Description: Martins Business One is a multipurpose WordPress compatible theme that is lightweight, creative, responsive and boasts a minimalistic design. It can be used by corporate agencies, entertainment, and non-governmental organizations.
License: GNU General Public License V2 OR Later
License URI: HTTP://www.gnu.org/license/gpl-2.0.html
Tags: entertainment, custom-logo, custom-menu, featured-images, footer-widgets, theme-options, traslation-ready, blog, right-sidebar, sticky-post
A little note about the information in our stylesheet.
If you plan to submit your theme for distribution on wordpress.org, make sure your theme URI and author URI are different.
The theme URI is usually a folder on the author’s server where details about that particular theme can be seen.
Text-domain: is used for translation. We will see this in upcoming posts. But for now, just keep in mind that your text-domain is usually your theme folder name.
Tags: It is optional. But if you want to distribute your theme, then it’s important to add tags. Tags are generally a search facilitators. If your theme is sent to wordpress.org, then searches made using the tags will easily identify your theme in WordPress databases of themes.
Please read this guide to understand what should be included in tags: https://make.wordpress.org/themes/handbook/review/required/theme-tags/
Save and go back to Appearance – > Theme. Click on your theme and it should have all the information needed.
Well done for your hard work!
I am as excited as you are to complete this theme creation. But not so fast!
Next up, we will start building the homepage and setting up headers and footers and enqueuing style sheets. Please stay tuned!
For now, stay safe and and see you later.