Your Own Template in Wordpress
The vast majority of websites are built on different CMS systems that are meant to make content management easier. One of the most popular is Wordpress. Today, let us look at how to build a basic template for Wordpress.

From this article you will learn:
- What are the most important features of Wordpress?
- What does the directory structure look like in a Wordpress project?
- How do we configure our own template?
- How do we use resources available from the panel in our template?
According to statistics, 35% of websites in the visible part of the Internet were built on Wordpress. Every month, the word "wordpress" is searched for around 2.8 billion times. In one of the most popular stores with Wordpress templates, we can choose from more than 11,000 themes.
In my opinion, the strength of Wordpress comes from 4 things:
- it has a very simple and intuitive admin panel - much simpler than Drupal or Joomla,
- it is very flexible and easy to extend through hooks, actions, and filters,
- it has a large number of free and paid plugins that make adding new features easier,
- users have a very large choice of free and paid templates.
Wordpress also has many disadvantages, but I would not like to discuss them in this article. In fact, you do not need to be a programmer to build your own site on Wordpress. Installing a ready-made template should not be a challenge. Building your own template is a little more demanding. Today I would like to develop this topic a bit.
Directory Structure
When we log in to our server and go to the directory where Wordpress is installed, we will see 3 main subdirectories: wp-admin, wp-includes, and wp-content. The last one contains two more subdirectories: plugins and themes. In plugins we will find all plugins that have been added to our site. Similarly, in themes we will find all templates.
What Goes in the Template Directory?
Every template must have two files: index.php and style.css. The index.php file is the file that will load the view, so this is where we will place the code of our page. The style.css file is the file that will contain the settings of our template. It may also contain styles, because after all it is a CSS file, but this is not required.
Style.css
In the previous paragraph I mentioned that the configuration of our template should be placed in the style.css file. The whole configuration should be placed as a comment at the beginning of the file. Each rule should be written on a new line.
What Can I Change in style.css?
Quite a lot, actually. Starting with the template name, author, or links leading to the template / author page, through description, license, and version, and ending with the key for translating our localization strings and tags. There are quite a few possibilities. An example style.css file could look like this:
/*
Theme Name: My template
Theme URI: https://address-of-my-template.pl
Description: Description
Author: Mateusz Jabłoński
Author URI: mateuszjablonski.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 1.0.0
Text Domain: 'mj'
Tags: custom-theme, translation-ready, post-formats
Domain Path: /lang
*/Only the last two entries are not required (Tags, Domain Path). The remaining ones should be filled in.
Pages and Posts
Every Wordpress user has certainly noticed two tabs in the admin menu: Pages and Posts. Posts are blog articles, while Pages are static pages where we can present our offer, a few words about ourselves, or contact details. This distinction helps separate content - the dynamically created content that appears with some regularity, and the content whose content is stable.
In the index.php file, we could distinguish them appropriately by using built-in Wordpress mechanisms, but this would not be the nicest solution. It is much better to add two more files to our template: single.php and page.php. If Wordpress has to load a Page, it will start looking for the page.php file, and only when it does not find it will it load index.php. It is similar with Posts - only then Wordpress will look for the single.php file.
Tags, Categories, Archives, Search Results, Author
Just like with Pages or Posts, Wordpress works with other kinds of content that we can create in the panel. Each resource can have its own file that will be loaded when the user sends a request for specific access.
- for tags:
tag.php - for search results:
search.php - for categories:
category.php - for archives:
archive.php - for author page:
author.php - for the 404 error page:
404.php
Reusable Files
Most of our files will have a similar beginning and ending. Every page has a header and a footer, after all. In addition, every PHP file should have a correct HTML structure, so according to good practices it should contain the head tag. For this purpose, we can prepare two files: header.php and footer.php, which will contain shared code for the header and footer. For these files to work, they need to be called properly. An example PHP file with calls to these files could look like this:
<?php get_header(); ?>
/* page content here */
<?php get_footer(); ?>The comments.php file can also be included among reusable files. It would contain the template for the comments structure.
wphead() and wpfooter()
In addition, there are two functions that our template should have called. Both are responsible for letting Wordpress place additional libraries in our output files, such as jQuery or our CSS and JS files added through functions.php. wp_head should be placed in the header, right before the closing head tag. wp_footer, respectively, should be placed in the footer, right before the closing body tag.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php wp_head(); ?>
</head>
<body><?php wp_footer(); ?>
</body>
</html>The Brain of Our Template
We have already met the heart and body of our template. The functions.php file is responsible for all the logic that our template will contain. In this file we can connect new CSS and JS files, add new actions and filters, and write functions that we will want to use within our template. The functions.php file is also responsible for enabling appropriate Wordpress features, such as menus, in our template, because not all possibilities are enabled automatically.
Summary
Our template already works and has gained a simple structure. As we can see, preparing your own template in Wordpress is also not very complicated. Of course, some more advanced work will require knowledge of PHP and knowledge of Wordpress implementation details, so I encourage you to read the Wordpress documentation in order to develop your template with many additional interesting features.




Comments (0)
No one has posted anything yet, but that means.... you may be the first.