WordPress Theme Development for Beginners

WordPress is a powerful tool that helps you create your blog, personal website or a corporate website easily. There are lots of free themes and plugins available to get started. While there are lots of free stuff available, requirement for premium themes and theme developers are in high demand. So if you are a web designer or PHP developer who wants to grow skills and get hike in your salary, then WordPress theme development is great way to start.

In this article I’ll get you through WordPress theme development basics, where you’ll learn how to code your own WP theme.

WordPress Theme: The Definition

According to WordPress codex “WP themes are files that work together to create the design and functionality of a WP site”.

So themes are collection of PHP, JS, CSS files which works with WordPress to deliver information in particular design layout. Every theme can be different in design & functionalities from each other. Themes are different from plugins in a way that themes mainly provide overall website layout, where plugins mainly focus on particular feature or functionality of the website. For plugin development check out my previous tutorial.

There are various ways we can create themes for WordPress.

• Child Theme
• Theme Framework
• Theme development from scratch

Child Theme

As the name suggests it is a theme which inherits properties from its parent theme. It is mainly useful when you wish to modify an existing theme. Child theme is a good starting point to theme development.

Here you may ask if I know about coding then I can do the necessary changes to existing theme files.

Yes, you can do so. But it is not recommended, because after doing the changes if the theme gets a newer version update, it will overwrite all your custom codes. Then again you need to spend time to make those changes on the theme.

To start creating child theme you can start with creating theme directory like “/{parent-theme}-child/”. Within this directory you have to create 2 files, style.css and functions.php.

To know more about child theme development stay connected within few days I’ll do a complete tutorial of it.

Theme Framework

Theme frameworks work like coding frameworks. As Laravel is PHP framework, angular is JavaScript framework. These frameworks are based upon those languages and helps to builds applications easily.

Theme framework helps to develop themes easily & more efficiently and they provide their own standards upon WordPress coding standards. Anyone can use theme framework as the foundation of their project.

By using framework you can have core features and functionalities such as settings, options, configurations throughout different themes within same theme framework. So it will provide much more reliable flexibility to your development.

There are many WP theme frameworks available which are free and premium also. Some theme frameworks provide various free and premium themes within them. There are many names in this category such as TeslaThemes, Divi, Genesis etc.

Theme Development from Scratch

If you are a person who loves coding and love to have control over codes of own project, then this is the best solution. It is also helpful for you if you want to be a custom WP theme developer and list & sell themes from WP theme directory.

To start developing themes from scratch first we need to understand template hierarchy. It shows how WordPress determines which file to look for the layout of a page. When a visitor visit a page of a website then from URL WP finds out which page is getting visited currently and shows the page layout how it is mentioned on that particular file.

To get started here also we have to create a directory called “theme-name” within “/theme/” directory in “/wp-content/“ directory. And then we need to create few mandatory files to show the theme to WP admin panel.

Here are those files:

• style.css
• Functions.php
• index.php
• screenshot.png

These files are mandatory files which is required to display the theme properly within WP admin panel. Other than these there will be many more files depending upon theme requirement and for it we will look into template hierarchy. Style.css file contains theme information as well as theme css. Functions.php is for theme setting functions and configurations. Index.php is for main and common layout of the theme and screenshot.png is an image file which shows the look of the theme as a thumbnail within theme section in admin panel.

Suppose we are creating a theme called “My First Theme“, then we need to create a directory as “my-first-theme”.

In this directory we will put all our necessary files. Here is a sample information which we need to add at the beginning of style.css file.

/*
Theme Name: My First Theme
Theme URI: https://example.com
Author: Pradip Debnath
Author URI: https://www.pradipdebnath.com
Description: This is my first theme development in WP.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
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.
*/

After adding this code to style.css and index.php file we can see our theme is available from appearance -> theme in WP admin panel.

So here are some basics of WordPress theme development for beginners. I’ll get into more details of each section later. But from this I think you got a fair overview of how WP theme works and how many options available to get started.

Hope you learn something from it.

Happy coding.