Site icon Templatic

How to build a WordPress Blog Template from scratch?

Disha

WordPress is the most-loved content management system (CMS) and we’ve already explained to you why. The feature that makes CMS like WordPress so easy to use and flexible is the template system. Besides, integration with MySQL or MariaDB makes a developer’s job as easy as a child’s play to create a multi-functional website. There are several components that go into developing a WordPress.

We’ve already been introduced to a variety of themes already, and here we’ll talk about WordPress templates and why it is so cool to use them in your websites. WordPress templates are often confused with a WordPress theme, and so we’ll talk about their difference at the top. Before you read any further, go grab a cup of coffee as this is going to be an insightful read for a professional WordPress developer.

After reading this post, you will understand:

Before you read further, let me tell you a story about my friend Jake. Jake recently bought an apartment in a high-rise building in Manhattan. It’s a plush 3 BHK apartment in one of the affluent areas of the city. But Jake is very confused. He can’t decide where his furniture will go in these rooms? He can’t decide where to keep the TV unit, where and in which direction should be the couch, where should be the dining table, and similarly where should he align his bed.

All these components are basic requirements of any house. This will define how your house looks and whether it’s designed properly. You can’t have a bedroom in the front room and can’t have a dining table in the bedroom. Everything has its place and purpose. Similarly, WordPress templates define the position, orientation, and function of some components of a website like a header, footer, comments section, sidebar, and other page settings.

Now let’s get started:

What are WordPress templates?

WordPress templates are files that control how your website’s page looks. WordPress websites have an index.php file as their homepage template, and similarly, we have header.php, footer.php, and several other files that control how these components look and where to place them on our web pages.

The templates are the building blocks of WordPress theme development. It is important to have good knowledge of the templates and it’s a hierarchy to customize a theme. WordPress templates are PHP source files that your browser requests to generate the web pages requested by the user. Template files consist of template tags, HTML, and PHP.

WordPress is very flexible in allowing you to create different templates for different parts of your website. Also, you can have a single template file called index.php which can act as a template for all your pages. The most practiced method is to create different template files for various aspects of your website for maximum customizations.

However, the call to create new templates depends on the WordPress theme developer. Templates are generated based upon the template hierarchy, depending on the templates that are available in your WordPress theme.

Difference between WordPress templates and WordPress themes:

Since both themes and templates go hand-in-hand, it gets quite confusing for some developers to understand the difference between these two. Simply put, templates are the subset of a WordPress theme. A theme changes the look of your entire website, while templates only change the layout of a single page of a website. You set a different template for different areas of your site, while you can only set one theme for your website. Think of templates as compartments inside your themes. For example, your header, footer, blog post title, comments section, etc can be compartmentalized into their respective templates. So in short, a WordPress website can have only one WordPress blog theme at a time, while it can have several templates for a page. You can have different headers and footers for different pages of your website with templates.

 

References: https://codex.wordpress.org/Theme_Development#Template_Files

Glossary


How WordPress processes templates:

WordPress uses a query string to decide which template(s) to choose to display on the page. A query string comprises information related to the content on your website. It comprises several parameters that are separated by an ampersand (&) and it will always start after a question mark (?)

Example: ?category_name=planets&value=earth

The WordPress traverses through the template hierarchy until it finds the matching template file. The WordPress follows these steps in processing the query string to determine which template files to load:

  1. It matches the query string to a query type and understands which page is being requested (example, WordPress blog posts page, contact page, menu page)
  2. WordPress selects a template according to the template hierarchy.
  3. WordPress looks for template files with specific names in the WordPress theme directory and selects the first matching template file from the hierarchy.

The basic/default file that WordPress looks for is the index.php file, and you’re able to call your custom template file WordPress because of this file. WordPress keeps looking for your custom file in the templates hierarchy and if it does not find a match, it will use the index.php of the theme.

A simple example:

If you’re having your WordPress blog at http://your-website-here/blog and a user clicks at a page with link http://your-website-here/blog/category/planet-name/, the WordPress starts looking for a template file that matches the category’s ID to generate the required page.

Here are the steps that WordPress will take under the hood once the user requests for a page:

  1. Look for the matching template file in the WordPress blog theme directory that matches the category’s slug. For example, if the slug is “planets”, then WordPress will look for a template file defined as category-planets.php.
  2. If category-planets.php is not present and if the category ID is 8, then WordPress will look for a template file, category-8.php in the directory of the WordPress blog theme.
  3. If both the above files are not present, WordPress will look for a generic template file called category.php in the directory of the blog theme.
  4. If the category.php is non-existent, then WordPress will look for a generic archive template file called archive.php in the WordPress blog theme directory.
  5. If all the files mentioned above are missing in the WordPress blog theme directory, WordPress will use the default/main template file called index.php

This is how WordPress processes a template request every time a user navigates from one page to another if we equip the WordPress site with multiple templates.

WordPress Templates Hierarchy explained:

The WordPress templates hierarchy for different queries is explained below:

  1. Home page display:
  2. Your website’s home page is by default the main page to display your latest posts when someone visits your web URL
  3. You can create a custom index page for your blog posts
  4. The home.php is the file that renders your blog posts index, be it on the front page or another static page
  5. If the home.php is not present, WordPress uses index.php
  6. front-page.php has special status over the home.php template and in case it is present in the configuration, it will be preferred over the home.php template.
  7. If all of these files are missing, index.php will be used
  8. Frontpage display:
  9. The Front-page.php file has an upper hand over your blog’s home.php file
  10. WordPress tries to access the template in the following hierarchy for the front page.
  11. front-page.php
  12. home.php
  13. page.php
  14. index.php

As seen above, WordPress can take a lot of paths and it can get confusing at times. So to ease the development, WordPress has created a flow chart that explains the templates hierarchy. We’ve attached the image sourced from WordPress here:

You can try out the flow chart WordPress Template Hierarchy.

3 . Privacy Policy page:

In order to redirect your users to the privacy page, a template called privacy-policy.php is used for the page set in settings > Privacy > Change your Privacy Policy page

Again, in absence of the privacy-policy.php file, WordPress will use the other files already mentioned below in the hierarchy as given below:

  1. privacy-policy.php
  2. custom page template (if set)
  3. page.php
  4. page-{slug}.php (here slug is privacy)
  5. page-{id}.php (here id is page number)
  6. page.php
  7. singular.php
  8. index.php

4 . Single Post:

When a single post is rendered by WordPress, the Single post template is used in the hierarchy as mentioned below:

  1. single-{post type}-{slug}.php (here slug is mainly the post name and post type is the type of post being rendered, for example, if the post type is a ‘new-product and the post name is ‘avengers toy‘, then your template would become single-new-product-avengers-toy.php).
  2. single-{post type}.php (from the example above, WordPress would look for a file called single-new-product.php)
  3. single.php
  4. singular.php
  5. index.php

5 . Single Page:

Similar to Single post templates, single-page templates are used while rendering a static post page. The template hierarchy for the same is given below:

  1. the custom page template file
  2. page-{slug}.php (slug could be any page title, so if your page name is ‘WordPress-tutorials’, your template would become page-WordPress-tutorials.php)
  3. page-{id}.php (id is your WordPress page id, so if your page id is 9, your template file would be page-6.php)
  4. page.php
  5. singular.php
  6. index.php

6 . Category pages:

To display the category pages, WordPress uses the following hierarchy of template files:

  1. category-{slug}.php (slug could be any category, so if your category is ‘tutorials’, your template would become ‘category-tutorials.php’)
  2. category-{id}.php (id is the category id, so for example, if your category id is 7, your template file will be ‘category-7.php’).
  3. category.php
  4. archive.php
  5. index.php

7 . Tags:

To display the tags, WordPress uses the following hierarchy of template files:

  1. tag-{slug}.php (slug could be any tag, so if your tag is ‘tutorials’, your template would become ‘tag-tutorials.php’)
  2. category-{id}.php (id is the tag id, so for example, if your tag id is 7, your template file will be ‘tag-7.php’).
  3. tag.php
  4. archive.php
  5. index.php

8 . Custom Taxonomies:

To display a custom taxonomy, WordPress uses the following hierarchy of template files:

  1. taxonomy-{taxonomy}-{slug}.php (taxonomy could be any tag, so if your taxonomy is ‘some_taxonomy’, and your slug is ‘taxonomy-1’, your template would become ‘taxonomy-some_taxonomy-taxonomy-1.php’)
  2. taxonomy-{taxonomy}.php (taxonomy could be any tag, so if your taxonomy is ‘some_taxonomy’, your template would become ‘taxonomy-some_taxonomy.php’).
  3. taxonomy.php
  4. archive.php
  5. index.php

9 . Custom posts type:

To display the custom posts types, WordPress uses the following hierarchy of template files:

  1. archive-{post-type}  (for example if post type is ‘products’, then template file will be ‘archive-products’.php)
  2. archive.php
  3. index.php

10 . Author:

To display the author index page, WordPress uses the following hierarchy of template files:

  1. author-{name}.php (slug could be any author name, so if your tag is ‘Anthony, your template would become ‘author-anthony.php’)
  2. author-{id}.php (id is the author id, so for example, if your author id is 795, your template file will be ‘author-795.php’).
  3. author.php
  4. archive.php
  5. index.php

11 . Date:

To display date-based pages, WordPress will use the following hierarchy of template files:

  1. date.php
  2. archive.php
  3. index.php

12 . Search results:

To display the search results, the hierarchy of template files is as follows:

  1. search.php
  2. index.php

13. 404 Not Found:

To display 404 not found template, the hierarchy is as follows:

  1. 404.php
  2. index.php

14 . Attachment:

To send an attachment page template, the hierarchy used for templates is as follows:

  1. {MIME}.php (Multipurpose Internet Mail Extensions or MIME type can be of any type, for example, images.php, videos.php, pdf.php, text.php) For plain text, the following sub-hierarchy is used:
  2. text-plain.php
  3. plain.php
  4. text.php
  5. attachment.php
  6. single-attachment-{slug}.php (here slug can be anything, for example, if the slug is holiday-list, then the template file will be single-attachment-holiday-list.php)
  7. single-attachment.php
  8. single.php
  9. singular.php
  10. index.php

15 . Embed:

To render the file which gives a description of the post which is being embedded. The template hierarchy is as follows:

  1. embed-{post-type}-{post-format}.php (Here WordPress looks for post type and then post format, for example, if your post type is a ‘post’ and the post format is video, then the template becomes, ’embed-post-video.php’).
  2. embed-{post-type}.php (Here if the post type is new product, then the template becomes – ’embed-new-product.php’)
  3. embed.php
  4. wp-includes/theme-compat/embed.php template

16 . Non – ASCII character handling:

After WordPress version 4.7, any template file names containing Non-ASCII characters in the name are actually supported in both encoded and un-encoded formats. The template hierarchy for the same is as follows:

  1. page-testing-😀.php
  2. page-testing-%f0%9f%98%80.php
  3. page-744.php
  4. page.php
  5. singular.php

17 . Filter hierarchy:

WordPress allows us to filter the hierarchy. For example, the filter in get_query_template() function uses a filter “{$type}_template” where $type is the template type.

Interesting observation: If you’ll see all the hierarchies above, you’ll notice that they end with an index.php file, thus making it an important component of WordPress blog themes development. If all other templates fail, index.php comes to the rescue.

When and why use custom WordPress templates?

WordPress templates are useful when you want to customize your WordPress theme on page level. So, each page on your WordPress site can have its own template, and there’s no limit to the number of templates you can have on a website. So, to simplify again, a WordPress theme is applied to an entire website and a WordPress template is attached to a particular page of that WordPress theme. So, by default, your WordPress theme would consist of some default template files, like index.php, archive.php, home.php.

The question is, why do you need custom WordPress templates? Let me give you an example, suppose you have a WordPress blog where you share the latest toys and cars. You share multiple posts in your genre. Some are reviews, some are new arrivals and some pages are reserved for selling some products. Now as a designer, you’d want the new arrivals to be highlighted in your feed and when the user clicks on it, you want the user to experience a different color and texture page for it. In this case, having separate templates for each page saves you a lot of time in managing and maintaining the blog theme. And so, having a custom WordPress template is useful in WordPress theme development.

Some WordPress websites might also restrict you to customize certain sections of your blog and it becomes imperative for a WordPress theme developer to start writing a custom template for the WordPress blog theme. A custom template can be used for a variety of reasons and some of them are mentioned below:

  1. show a collection of new arrivals
  2. social media feeds
  3. charts or dashboards for business blogs
  4. highlight best shots from your photography portfolio
  5. show comments or testimonials
  6. images carousel
  7. contact page
  8. recently uploaded photos

Do it yourself – First WordPress template:

Now that you know what templates are, what it’s hierarchy is, and why it’s important for any WordPress theme developer, let’s get our hands dirty and create our first WordPress template.

Step 1:

Open a text editor of your choice and define your template file with the following code:

<?php /* Template Name: PageWithOutWidget */ ?>

The above snippet defines the template name and tells WordPress that it’s a template file. Save the file with .php extension, example, pagewithoutwidget.php. It’s very important that you give the .php file extension, else WordPress will not be able to access it.

Step 2:

Now open the directory where your WordPress is installed, be it in your local or on a hosted server.

Go to WordPress > wp-content > themes > twentytwentyone (or the WordPress theme file you’re using)

And paste the pagewithoutwidget.php file inside the folder.

Now go to WP Admin panel > Pages > Add new and you can see a new custom page template pop-up on the right side of your screen.

Now select a new page and set the template to pagewithwidget.php and publish it. After you create this page, if you navigate to that page, you’ll see a blank page as no designs are implemented in the template file yet.

This shows the custom template is integrated successfully with WordPress.

Now inside the WordPress directory on your machine, navigate to WordPress/wp-content/themes/{your-wordpress theme}

Inside your WordPress blog theme folder, select the page.php code which looks like this:

<?php

/**

* The template for displaying all single posts

*

* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post

*

* @package WordPress

* @subpackage Twenty_Twenty_One

* @since Twenty Twenty-One 1.0

*/

get_header();

/* Start the Loop */

while ( have_posts() ) :

the_post();

get_template_part( ‘template-parts/content/content-page’ );

// If comments are open or there is at least one comment, load up the comment template.

if ( comments_open() || get_comments_number() ) {

comments_template();

}

endwhile; // End of the loop.

get_footer();

Copy the contents of this file and paste it into the pagewithoutwidget.php. So, the pagewithoutwidget.php looks like this:

<?php /* Template Name: PageWithWidget */ ?>

<?php

/**

* The template for displaying all single posts

*

* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post

*

* @package WordPress

* @subpackage Twenty_Twenty_One

* @since Twenty Twenty-One 1.0

*/

get_header();

/* Start the Loop */

while ( have_posts() ) :

the_post();

get_template_part( ‘template-parts/content/content-page’ );

// If comments are open or there is at least one comment, load up the comment template.

if ( comments_open() || get_comments_number() ) {

comments_template();

}

endwhile; // End of the loop.

get_footer();

Now if you refresh the page, you’ll see the default WordPress blog theme page that you’ve copied into the template file.

Now we can see the comments widget in the file, we search it and remove:

comments_template();

Save the file and reload the page and you’ll see the comments section is removed.

However, it might happen that the text format does not look good, so in that case, go to the template file pagewithoutwidget.php and change the ‘content-area’ to full width.

Now, you might wonder why we didn’t edit the page.php file directly instead of creating a new template? Well, the reason for that is changing page.php will change all the pages on the site. In order to make changes to specific pages, a custom page template in WordPress becomes handy.

Templates and template kits:

Template kits are a package of templates. It’s easy to confuse between templates and WordPress blog themes.

So, template kits are a collection of templates that are intended to be used with one WordPress blog. For example, a restaurant website will require templates that are quite different from the ones required by a photography artist.

A magazine company would require different features in its header, while a food blog would have completely different requirements for its header and footer section.

WordPress caters to a variety of customers and users and it has a strong network of experienced and smart developers that meet the customer’s requirements with ease. Thus template kits are a collection of templates that is user-specific.

A WordPress blog themes developer should consider studying the end-user of their WordPress blog themes and templates. You should study the people, their professions, their business, and their requirements like the items they deal in, the problems they’re facing on daily basis, and then design the templates that they’ll need to solve those problems.

After completing the research, the WordPress blog themes developer should design the header, footer, columns, logo, background, and other designs for search tools, services, and other page templates.

Exit mobile version