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.
Prerequisites
- Download WordPress: https://wordpress.org/download/
- Install WordPress: https://wordpress.org/support/article/how-to-install-wordpress/
- Make sure you know what are actions and filters in WordPress
- Basic HTML, CSS, Javascript and PHP knowledge is needed
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.
|
1 2 3 4 5 6 7 8 9 |
/* Theme Name: freelancedev.tech tutorial Author: freelancedev.tech Description: Our tutorial theme Version: 1.0 Text Domain: freelancedev */ |
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:
|
1 2 3 |
<?php echo 'Hello from custom theme'; |
Log in to your WordPress administration area, go to Appearance -> Themes where you should see your new theme:
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:
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:
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:
|
1 2 3 4 5 6 7 8 9 10 |
<?php function add_our_custom_scripts() { wp_enqueue_style( 'bootstrap', get_template_directory_uri().'/css/bootstrap.min.css' ); wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array ( 'jquery' )); } add_action( 'wp_enqueue_scripts', 'add_our_custom_scripts' ); |
To test the styles and scripts, I’m going to use the HTML from the Starter template of Bootstrap: https://getbootstrap.com/docs/4.6/examples/starter-template/
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(); ?>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content="freelancedev.tech"> <title>Freelancedev Tutorial</title> <?php wp_head(); ?> </head> <body style="padding-top: 100px"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <main role="main" class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </main><!-- /.container --> <?php wp_footer(); ?> </body> </html> |
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:
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.org,:
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.