Introduction

Hi! Before diving in, I invite you to click this link. It will take you to the page that shows the number of times WordPress has been downloaded. This number is an opportunity for developers and designers to create WordPress themes and help users (about 97 Million users at the time of this writing) manage and present their content. While WordPress has default themes installed, it does not always serve the users based on their exact needs and some are just too basic with very few features. Custom-developed themes, such as the one shown, can be created to meet specific user requirements. The user can be a target user for a certain industry like photography, retail, advertising, etc, or a client that hires you to do a website that has features that will be a good fit for their business.

Users can also purchase your theme and install it by themselves or follow the instruction that you have written for them. There are a lot of online stores that offer Premium (or paid) WordPress Themes. Envato Market makes it easy to browse them based on categories such as eCommerce, Retail, Technology, Entertainment, etc. Yes, you can sell and distribute your own theme. You can even share them for free.

Blog Goals

This topic comes in 2 parts. The first part is focused on explaining what themes are, how they work, theme anatomy, theme template files, and a walkthrough of the theme that we are going to develop. The second part focuses on building a simple blog theme in the local environment, testing it locally and live, sharing or selling the theme, and looking at other resources to help in the development of advanced themes.

Skills Required

To be successful in following the instructions and examples, you are required to have at least a basic knowledge of WordPress, HTML, CSS, and PHP.

Technologies Required

For Local Development

Laragon: https://laragon.org/download/

To learn how to install and set up Laragon, please go to the next topic: Development Environment.

For Live Development

I will be using Bluehost: https://www.bluehost.com/wordpress/wordpress-hosting

Please note that you can use any hosting services for “wordpress.org”, not the free platform wordpress.com (the difference between the two is the .org and .com). The free platform does not allow the installation of your own developed theme.

For Coding

I will be using Visual Studio Code: https://code.visualstudio.com/

You may use any code editor that you are most comfortable using.

Development Environment

Local vs. Live Development

Local development means that you will be developing your theme on your own machine with the necessary server software to function properly. While developing a theme live on the internet using a hosting like Bluehost lets you upload files directly to a live server, it is not always secure. Someone else might see or use your project just before you have thoroughly tested it. They might see broken pages, interfaces not working properly, errors, etc. that are not intended for them to see or experience. In this activity, we will be using Laragon as our local development environment.

What is Laragon?

In the traditional installation and setup, WordPress Theme development must first go through downloading the latest version of WordPress, then going to the root server folder, creating a wpthemes folder, extracting the downloaded file, going to localhost, creating a new database, renaming some files, opening wp-config in a text editor and finally, going to the localhost/wpthemes to run and install the application. That was quite a number of steps!

In using Laragon, all you have to do is go to the dashboard’s menu, select the quick app, click WordPress and install it. That’s it. You have a local development server streamlined to WordPress. To learn about its installation and setup, go to the video below.

For more information about Laragon, you may visit their site here.

Video: Installing and Setting Up Laragon

What is a WordPress Theme?

When you open your file explorer on Windows, you will see the management of folders, subfolders, and files. Think of the WordPress Theme as a collection of files. These files are named specifically and have functions that work together to make up a website’s frontend design, backend system, and functions. Below are some of the files included in the Twenty Twenty-One Theme which is a default theme in WordPress.

Most themes are designed to be used in a variety of niches including eCommerce, blogs, entertainment, journalism, portfolio, photography, and many more. It also allows users to install them easily on WordPress and deploy a fully functional site without writing a single line of code. It is loaded with features and options that the users can adjust to their taste.

How Themes Work

When you go to the WordPress dashboard, on the left panel, there is a vertical menu that shows controls for the admin area. In the Appearance Option, just below the Comments, you will find a sub-option list when you click or hover over it. These sub-options change every time you install a theme because themes can be programmed to have additional features and you will be able to modify or disable them under the Appearance Option. You will see more of this when you watch the video below (VIDEO: How Themes Work – The Ashe Theme).

WordPress usually ships with its default pre-installed themes. In the image, the theme with the customize button is currently activated.

Also on top of the page, there is an Add New button that will take you to another page to upload the theme that you created, purchased, or downloaded free from other sources. The Add New button will also take you to a list of free themes that came with WordPress. We will be focusing on the creation of our own theme which will be uploaded here.

Customizing a theme, like changing the Site Header photo or adding a “Follow Me” button, can be easy and straightforward depending on how the theme was designed and programmed. In the following video, we will see a theme in action.

Below is a free theme Ashe by WP Royals. It is a lifestyle blog design that is offered by WordPress.Org. This theme has a lot of features including changing the header photo, setting up the colors and fonts, and adding or removing widgets. You will be able to change the look of the website by just going to the customize panel that can be found under Appearance or when you open the site with the theme activated.

VIDEO: How Themes Work – The Ashe Theme

What is the “Best” Theme?

Finding the right theme suited for users can be confusing. The first thing to do is capture completely the user’s or client’s requirements. It is also useful to know the kind of content, functionalities, features, and user interface that the client or the target user wants to include. The best theme is a theme that the user or client can use that constantly meets their needs.

Theme Anatomy

header.php

The file that displays the header and navigation. This part of the theme has the beginning HTML tag.

The Loop

This area is controlled by individual files: index.php, single.php, or page.php. The display depends on the loop output for each file.

index.php

The file that displays the home page.

single.php

The file that displays the individual post.

page.php

The file displays pages such as About, Contact, Shop, etc.

sidebar.php

The file that holds the widgets for Author, Avatar, Subscribe, No. of Followers, etc.

footer.php

The file that contains the footer. It closes the HTML tag.

These “files” are called template files in WordPress and they work together to generate the visitor’s requested page.

Theme Template Files

Below is the typical index.php template file without the HTML.

//Header
<?php get_header(); ?>

//Content with The Loop
<?php if (have_posts()) : ?>

 <?php while (have_posts()) : ?>   
   <?php the_title(); ?>
   <?php the_content(); ?>
 <?php endwhile; ?>

<?php else : ?>
 <h1>Post Not Found</h1>

<?php endif; ?>

//Sidebar
<?php get_sidebar(); ?>

//Footer
<?php get_footer(); ?>

The codes for the Header, Sidebar, and Footer are present on every page not just the home page, so it only makes sense to separate them into their own files. As you may have figured out already, the Header will be in the header.php, the Sidebar will be in the sidebar.php and the Footer will be in the footer.php template files. We can get those files by using the <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_footer(); ?> respectively. This will make the code simple and reusable.

We will explore these template files more in part 2 of this topic where I will show you how to design, program, and deploy a theme.

Theme Licensing

Licensing is different for every online shop. If you plan to sell on Envato, you may see their licensing terms of use here. It is up to you how you want your themes to be used and paid for. I would recommend looking into other sites that sell WordPress themes and reading their licensing terms. Those will definitely give you an idea of how to license your theme. As for the “free” themes that you like to share, make sure that you have the terms of use in place for that too. It is your own work and you do not want your theme to be abused by other people such as selling it and declaring your work as their own.

What’s Next?

I really can’t wait to show you how to create a theme from scratch. I’m excited! In the meantime, you may be able to see what I have in store for you by watching the video below.

Video: Simplest Blog Theme Walkthrough

Thank you for visiting.

xoxo, Michelle