You have to invest countless resources and hours to create a WordPress theme. It’s a laborious activity if you want to create a decent theme. A best-selling theme requires intense research, professional coding skills, much patience, solid marketing, and a little bit of good luck.
However, it’s pretty straightforward to create a basic WordPress theme.
There are a few reasons why you should try to create a theme. First, there is no better way to learn than through practice so that you will learn a lot about WordPress. Second, you will sharpen your coding skills. Finally, you will become a genuine WordPress theme developer, an accomplishment you can be proud of!
Without any further ado, here is a beginner’s guide to creating a WordPress theme. It won’t teach you how to design a new best-selling theme, but it’s the perfect start.
The Components of a WordPress Theme
People who have used WordPress for at least a few months have probably heard about the functions.php or index.php files. But you’ll probably need a short recap of the components of a WordPress theme before creating your first theme:
- header.php: a global file that displays a web page’s header.
- footer.php: a global file that displays a web page’s footer.
- sidebar.php: the file responsible for managing the sidebars. The users insert the content into these files through the WordPress dashboard.
- index.php: a vital file. A theme won’t run without this file. By default, it displays the latest blog posts.
- style.css: a file that contains the CSS stylesheet and specifies the theme name and its author. It’s another must-have for a WordPress theme.
Setting Up a Working Environment
Before you can create the first files, you need to set up a working environment. It’s the base of the site that will run on your WordPress theme.
There are two options for setting up a working environment:
- An online testing site. This method is used less frequently, but it works just fine. In plain English, you buy a domain name and a hosting package to test themes, plugins, or other things.
- A local development environment. This approach is more effective. You can install some software to create a local environment. Local by Flywheel or DesktopServer are two effective options for creating the environment. Both are relatively simple to install and configure. Just follow the instructions listed on the official sites. Local by Flywheel and DesktopServer has versions for Windows and Mac.
Create the Theme’s Folder
No matter your choice of a working environment, you have to go to the wp-content/themes and create a folder with the name of your theme. It will store the theme’s file.
index.php and style.css
These two files are the cornerstone of every WordPress theme. A basic theme may consist only of these two files.
You should learn about the WordPress hierarchy to better understand the role of index.php. In simple words, it’s the ultimate fallback file. If a user wants to visit a particular page from the WordPress hierarchy that doesn’t exist, WordPress displays index.php. That’s why you can’t create a WordPress theme without index.php.
Open your text editor of choice (even Notepad works fine) and save a blank file as index.php. Do the same for style.css and add these lines of text:
/*
Theme Name: My First Theme
Theme URI: https://testsite.local/
Author: Daniel Pintilie
Author URI: https://wppluginsify.com/
Description: My first WordPress theme
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: clean, basic
*/
Replace “Theme Name” with the name of your theme. Do the same for the theme URI, author, author URI, description, and tags.
This text is mandatory so that WordPress can identify the theme. You have to name and describe your theme and choose a few representative tags. style.css contains all the CSS styling information.
Once you have completed this step, you have created your WordPress theme, and you could stop there. But it’s only a very basic version that lacks any functionality.
Useful Hint: Each WordPress installation comes with a default WordPress theme developed by a skilled team of developers. Consequently, it’s a good idea to study each file of a theme. For instance, check the index.php and style.css files to learn more about how these files look for a complex theme.
Other Noteworthy Files
Under no circumstances, your current theme will win a design award. It will be a long journey until your theme is decent. Consider your new index.php and style.css files as the embryo of your theme. You need more files to reach the desired maturity. Here are a few noteworthy files that are vital for any theme.
Templates Files
You are free to add your own files to your theme, but the following ones are recognized by WordPress. The list isn’t exclusive but has only the most important one:
- home.php: the default home page. It displays the latest blog posts if you decide to go for a static front page (select from your WordPress dashboard Settings > Reading).
- single.php: the template for a post. If your theme is missing a single.php file, it will display index.php.
- page.php: the default file to render when a page is queried.
- category.php: the default file to render when a category is queried.
- search.php: used when the user performs a search query.
functions.php
This file is almost equally important as index.php, even though a theme can theoretically exist without it. The functions.php file is responsible for the entire functionality of the theme. For instance, you place the following code inside functions.php to allow users to add a favicon:
function blog_favicon() {
echo “;
}
add_action(‘wp_head’, ‘blog_favicon’);
Use a Starter Theme
Building a working theme from scratch on the first try is unrealistic. It’s only suitable for learning purposes. Instead, use a starter theme to streamline the crafting of a WordPress theme.
Underscores
UnderStrap
Sage
These themes are a few massively used starter themes. They include a limited set of files—just enough to make a theme with limited options.
Working with a starter theme is relatively simple. Just follow these steps:
- Choose and download your favorite starter theme.
- Install and activate it on your chosen working environment.
- Go to Appearance > Theme editor and edit the files you want.
- Upload files via FTP or through cPanel to extend the theme’s functionality.
Use Beaver Themer
Someone once said that there is a plugin for everything. I was reticent to believe that there was a plugin for creating a complete WordPress theme, but there is!
Beaver Themer is an add-on for Beaver Builder—a famous WordPress page builder. Indeed, it doesn’t offer the complete freedom provided by a starter theme, but it’s a huge step forward. More or less, it enables people with no coding skills to design a functional WordPress theme.
Beaver Themer is a plugin add-on, so you have to use both Beaver Builder and Beaver Themer on your site. Go to the WP Beaver Builder home page and click on the Try a Live Demo button to test Beaver Themer for free.
The idea behind this plugin is simple: users can create templates and theme components. For instance, you can create a template for a custom post page or a type of header or particular sidebar as a reusable component. It’s not the easiest plugin to use, but create a WordPress theme from scratch isn’t simple either.
Create a Child Theme
Creating a child theme is different from creating a theme. If you want to develop and sell a theme, this approach isn’t feasible. But you are probably reading this article because you want to learn more about theme development. Eventually, you will develop themes. Under these circumstances, it makes sense to improve your skills by creating and tweaking a child theme.
Before learning how to create a child theme, let’s recap parent and child themes. A child theme inherits the look and functionality of a parent theme but with a bunch of modifications that are separate from the parent theme’s functions.
Here is how to create a child theme:
- Go to the theme directory and create a new folder for the child theme. For your convenience, name it parent_theme_name_child.
- Create a style.css file. Open your editor, add the below comment, and save the file.
/*
Theme Name: Twenty Twenty Child
Theme URI: http://yourwebsite.com/twentytwenty-child/
Description: My first child theme
Author: Daniel Pintilie
Author URI: http://wppluginsify.com
Template: twentytwenty
Version: 1.0.0
Tags: black, green,
Text Domain: twenty-twenty-child
*/
Pay close attention to theme name and template; theme name is the name of the child theme, while the template is the name of the parent theme.
While the child theme loads, it checks for the existence of various files. If a particular file is within the child theme, then it’s used. Otherwise, the child theme uses the file from the parent theme.
Worth-Mentioning Tips
As you can see, there are many ways to build a theme. Whichever way you choose, it takes a lot of time and serious work to craft a decent product. It’s an amazing feeling when you finish your first theme.
Check out the following suggestions to build a better WordPress theme.
- Learn how to code. I tried to avoid adding snippets of code within this post. Usually, any sequence of code scares non-coders. This article aimed to show you that it is possible to create a WordPress theme with limited knowledge of coding, but you considerably limit your chances of creating a cool theme without coding.
- Learn HTML, CSS, and PHP. HTML and CSS are relatively simple to learn, and there are tons of online resources in this respect. PHP is a whole different story. It requires a lot more effort to understand and write code.
- Be patient and work hard. Working on your own WordPress theme sounds great, but it takes a colossal volume of work. It’s impossible to estimate how much time it will take for a complete newbie to develop a competitive theme. A rough estimation is that it will take you at least a year if you work two hours per day. What do you think? Is my estimation realistic?
- Check out the competition. If you decide to sell themes, you have to plan everything in advance. Start by studying the market and finding an unexploited niche. It’s a step you should give all your attention to.
Over to You
The chances are that you are a little bit confused after reading this article. Theme development is pretty challenging, so your reaction is understandable. But the biggest mistake you can make is to quit following your dream if you want to create a WordPress theme.
If you are a complete beginner, I recommend you start by creating a child theme and customizing it. In this way, you will learn HTML and CSS. Next, go further with a starter theme. Finally, open Notepad and write the first lines of code for your new theme. It’s not a productive approach, but it’s the most challenging.
Finally, keep in mind that nothing great can be achieved without small efforts!
Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, we will receive an affiliate commission.
Keep reading the article at WP Pluginsify. The article was originally written by Daniel Pintilie on 2020-05-01 11:46:54.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.