Custom theme development with WordPress – Part I.

In the first part of this article set I’m going to explain the basics of custom theme development with WordPress. The second and third part of the article is coming int the next few weeks.


Theme structure

WordPress themes are located in the /wp-content/themes folder. Every theme has its own directory. We will start with an empty directory to understand the basics of a WordPress theme. Let’s create an empty directory with a name of your choice inside the /wp-content/themes folder:

Custom theme basics

Get inside your new directory and create 3 empty files:

  • style.css
  • functions.php
  • index.php.

These 3 files are the basic files of every Wordrpress theme. As for the next step, we are going to add a few lines to our style.css file to make it recognizable by WordPress.

You can change the values (after the semicolon) in every line according to your needs. The Theme Name variable is the name of your theme, the Autor, Description and Version are self explanatory. The Text Domain is the text domain of the theme to handle translations in the future, make sure you pick a unique text domain.

To test our theme, let’s add a singe line to the index.php file:

Log in to your WordPress administration area, go to Appearance -> Themes where you should see your new theme:

Wordpress themes

Click Activate and go to your homepage. If you made every step right you should see the single line what was added to the index.php file before:

Custom theme home

Believe me or not, your basic WordPress theme is ready, but there is still a lot to do.

Scripts, styles and design

Every website needs a design. In this tutorial I’m going to use Bootstrap 4.6 framework, but you are free to use anything of your choice. Add your CSS and Javascript files into /css and /js directories inside your themes folder:

Wordpress CSS and JS location

To include these CSS and Javascript files in our theme we need to create a function and hook the function to the wp_enqueue_scripts action in our functions.php file. If you don’t know what actions and filters are, please have a look at our article about WordPress hooks. The content of the functions.php file should look like this:

To test the styles and scripts, I’m going to use the HTML from the Starter template of Bootstrap:

I copied the source code from the Bootstrap example file to my index.php file (which is inside the themes folder) with a few changes:

  • the existing <style> tags (CSS) are deleted
  • the existing <script> tags (JS) are deleted
  • there is an extra line right before the closing </head> tag to call the WordPress wp_head method: <?php wp_head(); ?>
  • there is an extra line right before the closing body tag to call the WordPress wp_footer method: <?php wp_footer(); ?>

Make sure you always have the wp_head and wp_footer methods in your theme. The styles and scripts included by the themes and plugins are printed to the source code by these methods. The wp_head method should be always right before the </head> tag and the wp_footer method should be always right before the closing </body> tag.

If you followed all the steps above, your homepage should look exactly the same as the Bootstrap starter page:

Wordpress Bootstrap homepage

Getting ready for part II.

The core of your custom theme is done. Before the next step you need to understand the hierarchy of a WordPress theme. It’s a template based system, which means every entity (e.g. posts, pages, custom post types) and the archives of these entities (e.g. categories, post list) have unique templates. You don’t have to create every single template in your theme. There is a picture of the template hierarchy on,:

Wordpress template hierarchy

On the image the template hierarchy goes from the left to the right (from the red boxes to the dark blue ones). For example if you want to have different design for your category page (list) and your authors, you have to create two files: category.php for your categories and author.php for your authors. If the design is the same, an archive.php file is enough. Use this image as a “cheat sheet” in the future.

In the next part of the article we are going to create the templates for our site to handle pages, posts, categories, tags and archives with a custom homepage. Stay tuned for Custom theme development with WordPress – Part II.

0 0 vote
Article Rating
Notify of
Inline Feedbacks
View all comments