WordPress Theme Development – Best Step by Step Guide

WordPress Theme Development is not as challenging as one might think.

The state of the web has evolved way beyond the early days of HTML and CSS web pages Today websites are powerful enough to run high-performance applications similar to desktop apps and games. With a rich environment of development languages and frameworks to support the growth of technologies, the web has become a booming marketplace for nearly everything we can imagine.

The security and stability of the internet have also significantly improved over the last few decades. Today technology giants like Google and Microsoft have come up with powerful and effective solutions to nearly all kinds of problems we might ever face while browsing online. This has been largely possible due to the numerous standards of technologies implemented by the major international organizations responsible for standardization like the ICANN etc.

But with the rise in quality, there has been a significant rise in the complexity of the technologies. Unlike the early ages of the internet where anyone could create a simple webpage to post or create anything, they wished on the internet, now it has become nearly impossible for newbies to learn the complicated standards of web protocols and programming languages for building satisfactory webpages.

HTML and CSS have remained the dominant languages on the web but numerous other technologies like the Flash have eventually faded away due to a number of reasons. JavaScript has become a force to be reckoned with and is now one of the most popular programming languages on the web. It can now power websites on the frontend with its numerous frameworks and libraries while at the same time working efficiently under the hood in the backend.

Languages like PHP, Python, Java, and C# have brought in much necessary power to the servers. Along with cloud servers, these languages can now run nearly any scale of application to support millions of users at any moment. Some of the most used web applications use these languages to serve their consumers with efficiently built applications on all available devices.

However, complex an application might be, it can still be divided into 2 major sections based on the technologies used and the purpose they serve. They are the frontend and the backend. Let’s understand them both before we delve deeper into development.

 

Frontend Overview

The frontend is everything that the user can see and interact with. Every time you open a browser and navigate to a website, you see the frontend technologies at work. The major frontend technologies that produce everything you see on any website are HTML, CSS, and JavaScript. There are also other technologies like SVG that are programmatically embedded in the code to create images but they are rarely used and only in more advanced websites.

The HTML provides the structure to the website while the CSS provides the color and layout. JavaScript allows for sophisticated functionality and interaction. If we consider a web page to be a human body then HTML is the skeleton, CSS is the skin and JavaScript acts like the muscles. All major websites you notice on the web are sophisticated implementations of these 3 major technologies.

 

Backend Overview

Backend, on the other hand, is an application that controls the frontend. The backend application generates the frontend and helps it store data and information while allowing it to change dynamically based on the input of the user. It can be considered as the brain of the body as it controls everything that the body does. The backend application can be built with a number of languages like PHP, Python, Java, C#, JavaScript, and a lot of others.

These languages have over the years proven their worth by helping developers build sophisticated web applications that can run efficiently with millions of users at once.

 

The Bridge Between Development and Management

With the rise of the world wide web, there arose a need to develop everything before the content on the websites could be managed. As programming became a niche due to the sophistication of the numerous programming languages, content managers could no longer create webpages as easily. Therefore, developers had to build powerful and sophisticated applications to allow content managers to use web applications to manage their respective content on the websites.

This gave rise to a new class of web applications called content management systems. These CMS’s were developed by programmers to help non-programmers manage their content on the websites. After decades of struggling through the right methods of management and organization, a few CMS’s rose to the top due to their popularity among their users.

WordPress, Drupal, Joomla, and some others became a de-facto standard for creating websites and managing content on the websites. Eventually, WordPress became widely popular among its users due to its ease of management and flexibility in development. Today WordPress runs on more than 30% of the websites on the internet and thousands of developers all over the world are constantly making it better for its users.

It helped managers maintain control of their content while allowing developers to build and grow the website as per requirements without interfering with the manager’s work. Thus it got quickly adopted by millions of people all over the world who can extend the features of their websites as per their requirements.

 

Basics of WordPress Development

As stated above, WordPress is a popular content management system. But what is it really? Is it software? It is a file? Or is it an operating system like Windows? What exactly is it? The answer is neither of them. The closest thing it can resemble is software. Like Ms. Word, it helps users create documents. But like Dreamweaver, it also helps users design the web pages and edit code. More importantly, it is in itself your website.

Whatever you publish from your WordPress admin dashboard, is visible to the users of your website. So we can safely say that WordPress is software that runs on your computer to help you build, manage and run your website. WordPress can be divided into 2 major sections. The frontend and the backend. Do not confuse it with the frontend and backend development mentioned above.

The frontend of the website is the part that is visible to customers on your websites. The backend of the website is the part that is used by website managers and developers to build the website and publish content. The backend is also called the WordPress Admin as it is used to administer the website. Every WordPress website is built of 3 major components. They are the WordPress Core, Themes, and Plugins. The WordPress core is the default WordPress installation that comes with basic features available to all users.

It can be used to run a simple website with minimal necessary features and helps users get started soon without getting involved in too much complicacy. The themes help users change the design and layout of the website. They are responsible for nearly all kinds of user interface elements you find on the website ranging from the menu design to the sidebar and the whole website layout itself. WordPress themes are very powerful components that can help you customize the design of any type of WordPress website into the design specified in the themes.

They are flexible and easy to switch between. The third and most powerful components are the plugins. They help you extend the feature of the base WordPress installation. They have the ability to modify nearly all the core features of the WordPress installation and help users create sophisticated applications on top of WordPress. The core WordPress installation comes with only a few features that are absolutely necessary for all kinds of websites. It is ideal for beginners but lacks any and all necessary features required for sophisticated websites. Thus developers extend the default functionality of WordPress by creating themes that have all kinds of features necessary for large-scale websites.

Often themes are necessary to project a layout for a website and thus have separate layouts along with JavaScript and CSS rules for multiple designs. We shall explore each of these in the detailed development guide below. Sometimes themes also come with plugins that allow it has extended functionalities. However, plugins are often kept separate for better feature additions wherever necessary.

 

Before We Begin

Before we begin developing for the web, it is crucial to understand how websites and the internet in general works. Only then we can improve our knowledge instead of simply copying code. It all starts when a user opens a web browser. Every time a browser is opened, it checks the connectivity to the internet. If the system (Mobile or Computer) is connected to the internet, then it connects to a DNS that helps it resolve domain names to IP addresses.

When the user types an address(URL) in the address bar of the browser and presses enter, the browser sends the URL to the DNS to check if the domain name actually exists. If it does, then the DNS replies back with an IP address associated with the domain name(URL). The browser then redirects to the IP address to reach the target web server. The web server when it receives a connection request by a browser sends the request to its server software.

The most popular server software are Apache and Nginx. Depending on the type of request the server software redirects the request to an application on the server. Once the application receives the request sent by the browser, it analyses to check what exactly the browser wants. Then replies back to the server software with the data. This data is again passed from the application to the server software and then to the webserver and finally to the browser. When the browser receives the data, it interprets the data to display it on the screen or download it based on the user’s requirements.

In this case, the server software will be WordPress and the web server can be any of the major Linux/Windows/Mac variants that can be deployed as a server.

 

Getting Started with WordPress Theme Development

WordPress theme development can get quite sophisticated if you don’t understand HTML, CSS, and JavaScript. However, this guide shall try to help you through the basics by explaining all concepts and terminologies wherever necessary. Ensure that you understand the Before We Begin section prior to delving into development. As stated above, every CMS needs a server. The server can be any laptop or desktop including any of the major Linux, Windows or Mac variants.

For simplicity reasons, we shall use Windows along with a software package that will automate all necessary server configurations to create a base WordPress installation. We shall use Laragon as the preferred server installation package. There are other alternatives to Laragon like Xamp, Mamp or Wamp but Laragon is ideal for all kinds of processes as it automates numerous features generally not found in other packages. Laragon can be downloaded from its official website and installed directly on your system.

To edit code, we will also need a code editor. Although there are dozens of excellent code editors on the web, we only need a minimal and feature-rich editor ideal for all our tasks. Visual Studio Code is, therefore, one of the best as it allows excellent integration with all languages and supports HTML, CSS, JavaScript and PHP development across multiple operating systems.

You can download the respected version ideal for your operating system and install it along with Laragon on your operating systems. If you’re using Windows, it is highly recommended to install at their default location i.e. the C drive as it will reduce confusions and help is speeding up the development process.

For Visual Studio Code, you might need some additional plugins for PHP support and you can find all the details on the footnotes. You can also use Sublime Text but it has recently been overtaken by Visual Studio Code due to its faster processing time and flexibility.

 

Passing The Baton

In the previous post, we discussed briefly the minimal necessary information about developing WordPress themes. We also discussed the tools necessary to build WordPress websites. We shall continue with setting up the development environment that will help you greatly along the way to create any kind of theme or plugin. To continue with this post, you need to have the following downloaded and installed in your system:

1. Visual Studio Code
2. Laragon

 

Setting Up The Environment

Once you have downloaded and installed the above applications, follow the below steps to setup a new WordPress website and load it in your browser while enabling editing with your code editor.

1. Click Start All. It will start the Apache, MySql, and other services necessary for your local server.
2. Open Laragon and Select: Menu > Quick App > WordPress. Provide a name for your website and press OK to start the process. Laragon will download and install your bare WordPress CMS in your apache directory where you can access it.
3. Open Visual Studio Code and Open Folder to the name you provided above inside the www folder inside the default installation of Laragon.
4. Open wp-config.php in your editor and search for: define( ‘WP_DEBUG’, false ); and change it to: define( ‘WP_DEBUG’, true );
5. Again search for define( ‘WP_DEBUG_LOG’, true ); and set it to true if it is not.

This setup helps you detect errors quickly while developing your theme. The debug and debug logs are necessary to identify what went wrong and where. Now we shall understand what a WordPress theme is actually made up of. This will help us create components that are necessary and omit others whenever suitable.

 

Basics of A WordPress Theme

Even the simplest themes in WordPress have numerous moving parts in the form of components. Understanding them is crucial to building extensible and powerful WordPress themes. Templates, theme files, and post types are the building blocks of each WordPress theme. Let’s understand each of them in detail.

 

What is a Template file?

WordPress themes are made up of template files. These are PHP files that contain a mixture of HTML, Template Tags, and PHP code. When you are building your theme, you will use template files to affect the layout and design of different parts of your website. For example, you would use the header.php template to create a header, or the comments.php template to include comments.

When someone visits a page on your website, WordPress loads a template based on the request. The type of content that is displayed in the template file is determined by the Post Type associated with the template file.  The Template Hierarchy describes which template file WordPress will load based on the type of request and whether the template exists in the theme. The server then parses the PHP in the template and returns HTML to the visitor.

The most critical template file is index.php, which is the catch-all template if a more-specific template cannot be found in the template hierarchy. Although a theme only needs an index.php template, typically themes include numerous templates to display different content types and contexts.

 

Template Partials

A template partial is a piece of a template that is included as a part of another template, such as a site header. Template partials can be embedded in multiple templates, simplifying theme creation. Common template partials include:

• header.php for generating the site’s header
• footer.php for generating the footer
• sidebar.php for generating the sidebar

While the above template files are special-case in WordPress and apply to just one portion of a page, you can create any number of template partials and include them in other template files.

 

Common WordPress template files

Below is a list of some basic theme templates and files recognized by WordPress.

• index.php – The main template file. It is required in all themes.
• style.css – The main stylesheet. It is required in all themes and contains the information header for your theme.
• rtl.css- The right-to-left stylesheet is included automatically if the website language’s text direction is right-to-left.
• comments.php – The comments template.
• front-page.php – The front-page template is always used as the site front page if it exists, regardless of what settings on Admin > Settings > Reading.
• home.php – The home page template is the front page by default. If you do not set WordPress to use a static front page, this template is used to show the latest posts.
• header.php – The header template file usually contains your site’s document type, meta information, links to stylesheets and scripts, and other data.
• singular.php – The singular template is used for posts when single.php is not found, or for pages when page.php are not found. If singular.php is not found, index.php is used.
• single.php – The single post template is used when a visitor requests a single post.
• single-{post-type}.php – The single post template used when a visitor requests a single post from a custom post type. For example, single-book.php would be used for displaying single posts from a custom post type named book. The index.php is used if a specific query template for the custom post type is not present.
• archive-{post-type}.php – The archive post type template is used when visitors request a custom post type archive. For example, archive-books.php would be used for displaying an archive of posts from the custom post type named books. The archive.php template file is used if the archive-{post-type}.php is not present.
• page.php – The page template is used when visitors request individual pages, which are a built-in template.
• page-{slug}.php – The page slug template is used when visitors request a specific page, for example, one with the “about” slug (page-about.php).
• category.php – The category template is used when visitors request posts by category.
• tag.php – The tag template is used when visitors request posts by tag.
• taxonomy.php – The taxonomy term template is used when a visitor requests a term in a custom taxonomy.
• author.php – The author page template is used whenever a visitor loads an author page.
• date.php – The date/time template is used when posts are requested by date or time. For example, the pages generated with these slugs: http://example.com/blog/2014/, http://example.com/blog/2014/05/, http://example.com/blog/2014/05/26/
• archive.php – The archive template is used when visitors request posts by category, author, or date. Note: this template will be overridden if more specific templates are present like category.php, author.php, and date.php.
• search.php – The search results template is used to display a visitor’s search results.
• attachment.php – The attachment template is used when viewing a single attachment like an image, pdf, or other media file.
• image.php – The image attachment template is a more specific version of attachment.php and is used when viewing a single image attachment. If not present, WordPress will use attachment.php instead.
• 404.php – The 404 template is used when WordPress cannot find a post, page, or other content that matches the visitor’s request.

 

Using template files

Within WordPress templates, you can use Template Tags to display information dynamically, include other template files, or otherwise customize your site.

For example, in your index.php you can include other files in your final generated page:

To include the header, use get_header()

To include the sidebar, use get_sidebar()

To include the footer, use get_footer()

To include the search form, use get_search_form()

To include custom theme files, use get_template_part()

Here is an example of WordPress template tags to include specific templates into your page:

<?php get_sidebar(); ?>

<?php get_template_part( ‘featured-content’ ); ?>

<?php get_footer(); ?>

There’s an entire page on Template Tags that you can dive into to learn all about them.

 

Main Stylesheet (style.css)

The style.css is a stylesheet (CSS) file required for every WordPress theme. It controls the presentation (visual design and layout) of the website pages.

Location – In order for WordPress to recognize the set of theme template files as a valid theme, the style.css file needs to be located in the root directory of your theme, not a subdirectory.

For a more detailed explanation on how to include the style.css file in a theme, see the “Stylesheets” section of Enqueuing Scripts and Styles.

 

Basic Structure

WordPress uses the header comment section of a style.css to display information about the theme in the Appearance (Themes) dashboard panel.

 

Example

Here is an example of the header part of style.css.

/*

Theme Name: Twenty Seventeen

Theme URI: https://wordpress.org/themes/twentyseventeen/

Author: the WordPress team

Author URI: https://wordpress.org/

Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: twenty-seventeen

Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, RTL-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you’ve learned with others.

*/

Items indicated with (*) are required for a theme in the WordPress Theme Repository.

Note: WordPress Theme Repository uses the number after “Version” in this file to determine if the theme has a new version available.

Theme Name (*): Name of the theme.

Theme URI: The URL of a public web page where users can find more information about the theme.

Author (*): The name of the individual or organization who developed the theme. Using the Theme Author’s wordpress.org username is recommended.

Author URI: The URL of the authoring individual or organization.

Description (*): A short description of the theme.

Version (*): The version, written in X.X or X.X.X format.

License (*): The license of the theme.

License URI (*): The URL of the theme license.

Text Domain (*): The string used for text domain for translation.

Tags: Words or phrases that allow users to find the theme using the tag filter. A full list of tags is in the Theme Review Handbook.

Domain Path: Used so that WordPress knows where to find the translation when the theme is disabled. Defaults to /languages.

After the required header section, style.css can contain anything a regular CSS file has.

 

Post Types

There are many different types of content in WordPress. These content types are normally described as Post Types, which may be a little confusing since it refers to all different types of content in WordPress. For example, a post is a specific Post Type, and so is a page. Internally, all of the Post Types are stored in the same place — in the wp_posts database table — but are differentiated by a database column called post_type.

In addition to the default Post Types, you can also create Custom Post Types. The Template files page briefly mentioned that different Post Types are displayed by different Template files.  As the whole purpose of a Template file is to display content a certain way, the Post Types purpose is to categorize what type of content you are dealing with. Generally speaking, certain Post Types are tied to certain template files.

 

Default Post Types

There are five default Post Types readily available to users or internally used by the WordPress installation:

• Post (Post Type: ‘post’)
• Page (Post Type: ‘page’)
• Attachment (Post Type: ‘attachment’)
• Revision (Post Type: ‘revision’)
• The navigation menu (Post Type: ‘nav_menu_item’)

The Post Types above can be modified and removed by a plugin or theme, but it’s not recommended that you remove built-in functionality for a widely-distributed theme or plugin.

The most common post types you will interact with as a Theme Developer are Post, Page, Attachment, and Custom Post Types.  It’s out of the scope of this handbook to flesh out the Revision and Navigation Menu Post Types. However, it is important to note that you will interact with and build the functionality of navigation menus and that will be detailed later in this handbook.

 

Post

Posts are used in blogs. They are:

• displayed in reverse sequential order by time, with the newest post first
• have a date and time stamp
• may have the default taxonomies of categories and tags applied
• are used for creating feeds

The template files that display the Post post type are:

• single.php and single-post.php
• category.php and all its iterations
• tag.php and all its iterations
• taxonomy.php and all its iterations
• archive.php and all its iterations
• author.php and all its iterations
• date.php and all its iterations
• search.php
• home.php
• index.php

Additionally, theme developers can display Post post types in front-page.php if they so desire.

 

Page

Pages are a static Post Type, outside of the normal blog stream/feed. Their features are:

• non-time dependent and without a timestamp
• are not organized using the categories and/or tags taxonomies
• can have page templates applied to them
• can be organized in a hierarchical structure — i.e. pages can be parents/children of other pages

The template files that display the Page post type are:

• page.php and all its iterations
• $custom.php and all its iterations
• front-page.php
• search.php
• index.php

 

Attachment

Attachments are commonly used to display images or media in content, and may also be used to link to relevant files. Their features are:

• contain information (such as name or description) about files uploaded through the media upload system
• for images, this includes metadata information stored in the wp_postmeta table (including size, thumbnails, location, etc)

The template files that display the Attachment post type are:

• MIME_type.php
• attachment.php
• single-attachment.php
• single.php
• index.php

 

Custom Post Types

Using Custom Post Types, you can create your own post type. It is not recommended that you place this functionality in your theme. This type of functionality should be placed/created in a plugin. This ensures the portability of your user’s content, and that if the theme is changed the content stored in the Custom Post Types won’t disappear.

While you generally won’t develop Custom Post Types in your theme, you may want to code ways to display Custom Post Types that were created by a plugin.  The following templates can display Custom post types:

• single-{post-type}.php
• archive-{post-type}.php
• search.php
• index.php

Additionally, Theme Developers can display Custom Post Types in any template file, often by using multiple loops.

 

Now that the theme is ready, you can customize it and launch your website soon. The next steps are to work on the Search Engine Optimization (SEO) of your website. Reach out to us if you have any questions or need help.