Getting started with templating in WordPress

What is a template and how does it work

WordPress comes with many powerful features right out of the box. One of the most regarded is the support of themes. A theme is a set of template files and functionality that is accessed by the WordPress core to render your website.

Public repository vs creating your own

Templates can be easily downloaded from the public repository. This is a convenient option if you are just getting started. Without the need to respect a design guide, you may simply browse the public repository until you find a theme that looks like a perfect choice for your website. This feature accounts for most of WordPress’s success among small businesses and sole traders.

The other way is to create your own theme or hire someone to do it for you. This is certainly more difficult than selecting a random theme, but tends to pay itself off on the long run.

Optimising a general all-purpose theme can become a nightmare especially if changing it is not an option. Once you have thousands of users expecting your site to look the way it does, your options are limited.

We are not advising one over the other. While you are small and want to do everything by yourself, it is a good idea to save time and money on using a general theme. Later however if speed, ranking and user experience suffers due to some limitations imposed by your theme, you may need to consider a fix.

In the rest of this article, we will be focusing on the anatomy of a theme.

File structure

WordPress has a built in routing engine. It means that every time you visit a WordPress website, it looks at the url and decides what files to load to compile the web page that is presented to you.

Pages generally share common headers, footers, scripts and style sheet files but load different content.

To tell exactly what template will be used for a specific page or post, you need to be familiar with the template hierarchy.

WordPress template hierarchy. If you are a developer, print it now and stick it on your wall. 🙂

If you need to make changes to an existing theme, simply locate the right right file, update it and voilá. Simple.

If however you decide to build your own template, it may take a little more effort. The recommended way is to use a non-distracting boilerplate. Our all time favourite is blankslate by tidythemes.

Page structure

In the early years of the internet, static websites were the standard. A static website means that you write some html, link your css and javascript files, copy the whole thing onto your web server and you’re good to go. The downside is obviously the relative lack of ability to edit (at least not in a web browser)

WordPress lets you edit the content of your website through your admin area. How is this possible?

The key to understand is the following: what can change, WordPress stores in a database while what is likely to be static is stored in files.

The static part of a page can also consist of multiple elements. For example a shared header and content layout and a footer specific to the given page.

The template file is located according to the template hierarchy while template parts are loaded using hooks.

Hooks

Hooks are a powerful yet simple way of interacting with the core functionality provided by WordPress. Worth mentioning at this point that WordPress is written in PHP and therefore using virtually any of its functionality through directly editing files requires a strong understanding of it.

Hooks take care of a specific piece of functionality.

The hook get_template_directory_uri() as an example will return the url that points to your local template directory while get_header() will… can you guess? Yes, it gets the header.

This article is designed to give you an oversight of what you need to know to build a theme. We won’t go deeper into hooks for now. If you want more knowledge, look no further than the official documentation.

Custom functions

In your template directory you will find (or need to create) a file named functions.php

This is where your theme’s logic is found or need to be placed. Every time you need to register a new widget or add template support for a new functionality, you’ll be working with this file.

There are times though when you need something very specific to your application. Let’s see through an example, how you can display the date 2 weeks from today in your pages.

In your functions.php:

function dateInTwoWeeks() {
    $today = new DateTime();
    $twoWeeksFromNow = $today->modify('+14 days');
    return $twoWeeksFromNow->format('d-m-Y');
}

// In any of your template files

<?php echo dateInTwoWeeks(); ?>

That’s it. You can use any custom functionality in your WordPress application.

Widgets

Widgets are dynamically placed elements that can be defined in your admin area and stored in the database. First you need to register your widget areas. Find out how in this article.

Once your widget areas are ready, you can edit them in the Appearance -> Widgets section of your site.

Templating engine

The last 2 point here are completely optional and require more advanced skills not only in PHP but concepts like OOP and MVC as well as managing packages.

We love templating engines. They make life easier and speed up the workflow at the same time. Check out Twig and Blade to have an idea. These can be used as part of robust mvc frameworks they have originally been developed for, but they are also available through composer as standalone packages.

composer require twig/twig

composer require philo/laravel-blade

To take full advantage of this approach, you need to have advanced skills and know how to install composer on your server, autoload your components or manage composer cache.

With this said, let’s see what is needed to use your favourite templating engine in WordPress.

To use philio/blade, simply define the blade template file to be loaded on your WordPress template file:

<?php require 'vendor/autoload.php'; // Autoloading the packages

use Philo\Blade\Blade; // Let's use Blade

$views = __DIR__ . '/views';
$cache = __DIR__ . '/cache';

$blade = new Blade($views, $cache);
echo $blade->view()->make('page')->render(); // Grab a template file and render it.

Now create a views directory within your theme and define your blade template files according to the documentation.

The benefit? You’ll end up with a much more readable code and clean template structure you have full control over.

Javascript frameworks

Do you happen to love working with React or Vue? Have you ever wondered how cool it would be to finally turn your back to jQuery? By no means we say jQuery isn’t a wonderful tool in its own right. It used to be the only solution over plain JavaScript. In recent years however, its fame has significantly faded. The reason is the entrance of the powerful JavaScript frameworks that make it painless and actually quite enjoyable to add advanced interactivity to web applications.

Our choice is Vuejs for WordPress projects.

You can simply install it through npm and load the single compiled file using the wp_enque_script() hook.

Once you are done with the development, make sure that you compile your Vuejs in production mode as it will significantly reduce the file size.

Static assets

Minifying css can be a pain sometimes. Search engines tend to react negatively to unminified assets. Find out more about what is minification.

Tools like webpack and Laravel mix are powerful and simple to combine and optimise your asset files.

Conclusion

Thank you for reading this article. It is not easy to build a WordPress theme that performs to the highest standards, looks beautiful on all devices and simple to edit. It is a nice challenge though and if you are looking to stand out, it is an effective way.

Please share your thoughts in the comments section.

Leave a Reply

Your email address will not be published. Required fields are marked *