Since its original launch in 2003, WordPress has evolved from a simple blogging tool into a powerful and popular website builder and a comprehensive CMS (content management system) used by about 38% of the websites on the web! Given its popularity, if your site needs to stand out from the crowd, you’ll need to create WordPress theme that is unique to your site.
In reality, it’s no wonder that WordPress was able to make it so far and become so popular.
The amount of flexibility it has and the features it hosts, allow its wide use across different website types. Besides, WordPress is fairly easy to use with little to no prior experience in coding or web development whatsoever.
These are the reasons behind WordPress’s success story and are precisely the reasons nearly 40 percent of all websites on the World Wide Web are powered by this software.
WordPress has an array of handy features that make web development and programming less complicated and more accessible to everyone.
Introduction to WordPress Theme Development
Another popular feature that makes WordPress so popular is its themes. The theme is simply a collection of stylesheets and templates which define how a WP-powered site will look and display.
The software gives the user a wide variety of different editing options when it comes to themes from the WP admin area.
Hundreds of WordPress themes are completely free or with many others at a reasonable price of a few tens of dollars.
In fact, WordPress.org hosts a huge database of themes in their Themes Directory.
Other websites such as Themeforest also offer lots of premium themes from different developers.
Each of these themes features a different layout, design pattern, and features.
It’s up to the user to find one that will suit their website’s needs the best. In most cases, themes are made with particular industries or professions in mind, meaning that, for example, restaurant owners can easily find themes with booking features.
While there are plenty of awesome themes that might suit your needs, it’s safe to say that if you want to make something outstanding, you’ll pretty much have to do it yourself. If you’re unable to program, a good alternative option would be to go for a freelance software developer (prices may vary depending on various factors).
In this article, however, we’re going to go over ALL the steps necessary to create your very own custom WordPress theme for your WP-powered website. We will be taking a look at every important aspect to make sure that you get the best that WordPress has to offer.
Getting started with creating your very own theme as a beginner might, at first glance, seem like a mammoth task.
However, creating a custom theme from scratch isn’t too complicated in WP. You don’t need to be a web development whizz, if you’ve got the basics of coding with PHP, you can easily learn how to create a WordPress theme.
Moreover, creating your own theme can be quite rewarding, especially when you see the end result live on your website.
Creating your first custom WordPress theme
In order to get started with creating a WordPress theme, you’ll need a few basic things:
- A WordPress website
- A good hosting plan
- A little prior experience with things such as local staging environments
- Basic understanding of CSS and PHP coding languages
- A starter theme
Understanding the WordPress Template Hierarchy
In WordPress, template files (the building blocks of your theme) are modular and reusable.
Template files are responsible for generating the pages on your WP site. Some of these files are used on almost all of your pages while others are used only in specific circumstances.
Have a look at the diagram below – it explains how the WordPress template hierarchy is organized.
Template files will determine the overall look of the content on the website. If you want to create a header, you will use a header.php file, or if you want to add a comment section, you’ll use the comments.php file.
To understand the template hierarchy, you should know that WordPress uses something called a “query string” to decide which template or template set should be used to create and display a certain page.
The query string is information stored in the link of each part of the website you’re trying to modify. In simpler terms, WordPress analyzes the info and performs searches through the template hierarchy to find a template file that matches the provided info in the query string.
This is basically a scheme in which WP looks for matching template files every time pages are loaded.
For example, if you type in the following URL http://example.com/post/this-post, WordPress will locate the necessary template files in the following order:
- Files that match the slug, in this case, this-post.
- Files matching the post ID.
- A generic single post file, like single.php.
- An archive file, in this case, archive.php.
- The index.php file.
The last file (index.php) is required in every theme, as it’s the default (or fallback) if no other file can be found in the matching process. Underscores (a WP starter theme) has the most common files. These files included in this theme will work right out of the box.
You can edit them if you feel like experimenting, or need to create some custom functionality on your site.
What is a WordPress Starter Theme?
A starter theme is a bare-bones foundation of a custom WordPress theme.
You can use it as the basis to get your own unique theme up and running. With a starter theme, you can build your very own custom WordPress theme without having to design or code an entire theme from scratch.
WordPress starter themes contain all the files as defined per the above hierarchy.
Using a starter theme enables you to get a better understanding of how WordPress functions because it shows you the basics, the structure of a theme, and how the different parts work together.
A custom-built WordPress theme can be applied to a range of different website types from presentations and directories-to online shops built with WooCommerce, social media, or whatever else you may need your website for.
Opting for starter themes (such as UnderStrap, Underscores, and Bones ) will help create WordPress theme that opens the door to using a variety of different options.
Using Underscores might be the best choice for beginners as it offers the most important features. It also comes from a long-time and reliable developer. This means that it’s more likely to be compatible, secure, and reliable, and will have better support in the long run.
Why Should You Use a Starter Theme
As stated above, a starter theme is a foundation, a blueprint that helps you come up with a unique website. It’s already fully functioning but still lacks the defining key features which make a user-friendly website.
Essentially, it still needs to be styled and properly configured.
That being said, starter themes are ideal for those who have little or no experience with WordPress or web development in general. It’s a great way to get introduced to the topic of theme building and learning the basics of WP-powered websites.
A WordPress Starter theme saves you time and requires little to no background knowledge in coding and the rest of the WordPress complexities.
You can leverage years of hard work of the developers of the starter theme and use these guidelines to get a better understanding of how WordPress and theme design work.
Popular Starter Theme Examples
- Underscores – A reliable and renowned starter theme that gives beginners a head start in theme development. Underscores is fairly basic and perfect for getting started right away if you have all the necessary tools. The theme is great for understanding the concepts of theme development. Underscores is all about starting a new project which should be viewed more like a constantly evolving toolkit and less like a framework.
- Roots – This starter theme gives you an approach that’s geared more towards developers with its markup being based on the HTML5 Boilerplate. It also supports more advanced tools like Bootstrap and Grunt. The Roots starter theme also includes a theme wrapper which helps you keep your process streamlined and eliminates calling the same template parts repeatedly.
Roots also uses CSS preprocessors and supports LESS, a backward-compatible language extension for CSS, that can significantly speed up the process of developing your theme.
That being said, Roots gives a more pragmatic approach and requires a bit more know-how from the developer.
6 Basic Steps to Develop Your WordPress Theme
After covering the basics, you are finally ready to get started with creating a WordPress theme.
Since this article is geared more toward beginners, we will be using a starter theme, however, you are also free to create everything from scratch without any starter themes.
If that’s the route you want to take, don’t forget that you will need a lot more time and will need to immerse yourself a little deeper in coding, and web development in general.
1. Setting Up the Development Environment
Your first step in the process should be creating a development environment.
This is basically a server you need to install on your computer to manage and develop local WP sites. A development environment enables you to develop your website safely, besides giving you to multiple options for creating a local environment.
Using DesktopServer is one of the ideal paths you can take. It’s an easy way to get a local and fast version of WP which is compatible with both Windows and Mac. Select the free version, register and download it, then install the software.
Once you’ve installed, open the program and configure your local environment.
It’s a fairly simple process and you’ll be ready in minutes. After the setup, you’ll have a website and development environment that will both work and look like any live WP website.
2. Download and Install a Starter Theme
The most basic starter themes (like Underscores) are easy for first-timers to get started with.
Contrary to most basic themes, Underscores allows customizing options through its Advanced Options (like author and description) after naming your theme.
You can also add Syntactically Awesome StyleSheets or SASS which is a preprocessing CSS language enabling you to introduce features like nesting, math operations, utilization of variables, etc.
After making your choices, all you have to do is to click on Generate to download the .zip file with your starter theme.
Now, install the file on your local site. If you’ve done everything correctly, you are now able to see a bare-bones, basic version of your custom WordPress theme.
Understanding the WordPress Core Principles
Now that the basics are set up, you can get to work. However, before diving into the customizing process, you’ll need to get familiar with the core principles and components of creating a WordPress theme using core principles of WP.
First of all, you must learn about template files, the main building blocks of any theme in WP.
Template files basically determine how your layout and content will be displayed on your site. If you want to create a header, you’ll want to use the header.php file, while comments.php would be used to display any comments.
As discussed above, WP uses its template hierarchy to determine which template file it will choose to execute the content a user is requesting/needs. You can work with these files as they are, but given that you are here to create WordPress theme, your bulk of work will be to tweak these files to your needs.
When we are talking about WP core principles, you should also understand the concept behind The Loop.
It is the code WP primarily uses to display your content and it can be found in all content displaying template files, like the index.php or sidebar.php. It’s a fairly complex subject but fortunately, it comes bundled in with the starter theme (if you use Underscores) meaning your process should be simpler.
You’ll need to understand the concept and work with it. Check out some of the examples in the link above, to better understand how the loop is used and how you can customize the code to your needs.
3. Create Theme Details
Themes aren’t purely cosmetic components.
There are loads of different features you can add to your site which can improve functionality. We’re going to discuss how to implement a few basic features to spice up your website.
Adding Hooks can enable you to run different PHP actions, display other info, or insert styling data as necessary.
Hooks are code snippets that are inserted into template files. Most of them are directly implemented as part of the core of WordPress, but some hooks are pretty useful when customizing themes as well.
Here’s a list of the most common hooks and their roles:
- wp_head() – is added to the element in header.php. It enables scripts, styles, and other info which runs when the site starts loading.
- wp_footer() – usually added to footer.php before the tag, most often used to insert code for Google Analytics or other code that needs to show up on each page but is too heavy to load in the header.
- wp_meta() – Generally found at sidebar.php, and it’s most often used to include additional scripts (for example, a tag cloud).
- comment_form() – Added to comments.php directly before the file’s closing
tag to show comments.
When you’re using Underscores, these hooks will be already included with the theme, but it’s always a good idea to learn more about them and see all available hooks. Hooks allow you to extend the capabilities of your custom theme.
4. Adding Styles using CSS
Cascading Style Sheets or CSS defines the appearance of the content on the site you’re creating.
By using the style.css file, which is already included in your theme, you can edit any of the styles found here and save them to see how it changes your design. By default, it only contains the basic styling.
CSS is used to enable the presentation and separation of the content on your website, everything from layout to fonts and content. CSS can help make the content on your site more accessible and more flexible.
Going into depth about how to use styling with WordPress themes can get quite hairy and is beyond the scope of this article. If you’re not too sure about this, you might want to read up more on CSS before you go on.
5. Including JavaScript
Adding JavaScript files to your theme if necessary can boost interactive features and capabilities and have a better functioning site. It especially comes in handy when you want to incorporate third party plugins into your sites, like specific video or audio players, stuff such as sliders, popup support and other 3rdparty libraries to create advanced functionality.
To use Javascript with your custom site, you can create a call using the syntax below to add the script file to the theme.
Alternatively, you can use the script directly in your header.php template file between the meta tags and the style sheet link, as you would do in the case of an HTML page. When using it in the header file, it should look something like this:
If you want to use JS directly add the call for the files directly as per below. If you want to set a “send this to a friend” feature, you can put it under the post title. That would look similar to this:
