WordPress is the most used CMS that powers 30% websites over the internet!
WordPress uses themes to control look and feel of a website. You can create new theme or a child theme by following simple instructions found here.
As a WordPress developer you need to understand the structure of a WordPress theme and its components.
For example you may need to customize the layout of single post page. To customize single post page you usually need to edit single-post.php file inside your theme folder.
To edit the layout of your category page you usually need to edit category.php file inside your theme folder.
If you have a category named Vehicle you can create a vehicle-category.php template file to change the layout of the category page for Vehicle category only.
In this post you will learn about tricks of naming and editing different parts of your WordPress website.
Understanding WordPress Template Hierarchy
In WordPress a WordPress theme is a bundle of files. This bundle consists of templates (general php files with HTML and PHP code), stylesheets, Javascript files, images, a functions.php file etc. In this bundle of WordPress theme, template files are the most important components.
These templates are used to create the layout of different areas such as home page, category pages, single post pages, single pages, archive pages, search pages, tag driven pages etc.
Certain template files such as the header, footer and sidebar templates are used on all of website pages while others are used only in certain pages or under specific conditions.
This article will help you determine which template you should be using to update which area of your website.
How do WordPress templates work?
WordPress uses query strings to determine the template or set of templates to be used on a page. The query string is the information that is passed through a link to each part of your website.
After gathering information from the links wordpress template system looks for template files with specific names in the current theme’s directory and uses the first matching template file as specified.
With the exception of the basic index.php template file, you can choose whether you want to implement a particular template file or not. If WordPress cannot find a template file with a matching name, it will skip to the next file. If WordPress cannot find any matching template file, then theme’s index.php file will be used.
Home Page
By default, WordPress sets your website’s home page to display your latest blog posts. This page is called blog posts index. You can also set your blog posts to display on a separate static page. The template file home.php is used to render the blog posts index, whether it is being used as the front page or on separate static page. If home.php does not exist, WordPress will use index.php.
front-page.php – Used for both “your latest posts” or “a static page” as set in the front page display section of Settings → Reading.
home.php – If WordPress cannot find front-page.php and “your latest posts” is set in the front page display section, it will look for home.php. Additionally, WordPress will look for this file when the posts page is set in the front page displays section.
page.php – When “front page” is set in the front page displays section.
index.php – When “your latest posts” is set in the front page displays section but home.php does not exist or when front page is set but page.php does not exist.
Single Page
This is used to render static page. There are ways to show page information in frontend through templates:
1. Custom template file – The page template assigned to the page.
2. page-{slug}.php – If the page slug is recent-news, WordPress will look to use page-recent-news.php.
3. page-{id}.php – If the page ID is 6, WordPress will look to use page-6.php.
4. page.php
5. singular.php
6. index.php
Category
It render category archive index pages uses the following path in WordPress, weather its for default or custom post type texonomy, you can set template names as bellow.
1. category-{slug}.php – If the category’s slug is news, WordPress will look for category-news.php.
2. category-{id}.php – If the category’s ID is 6, WordPress will look for category-6.php.
3. category.php
4. archive.php
5.index.php
Custom Taxonomies
Custom taxonomies use a different template file path:
taxonomy-{taxonomy}-{term}.php – If the taxonomy is vehicle, and taxonomy’s term is car, WordPress will look for taxonomy-vehicle-car.php.
taxonomy-{taxonomy}.php – If the taxonomy were vehicle, WordPress would look for taxonomy-vehicle.php.
taxonomy.php
archive.php
index.php
Custom Post Types
Custom Post Types use the following path to render the archive index page.
1)archive-{post_type}.php – If the post type is car, WordPress will look for archive-car.php.
2)archive.php
3)index.php
Search Result
These template is used for showing search results in wordpress search.php – If search.php is not found then it will go for index.php
Template Tags
Template tags are used within themes to retrieve content from your database. The content could be anything from a blog title to a complete sidebar. Template tags are the preferred method to pull content into your theme because:
they can print dynamic content;
they can be used in multiple theme files; and
they separate the theme into smaller, more understandable, sections.
What is a Template Tag?
A template tag is simply a piece of code that tells WordPress to get something from the database. It is broken up into three components:
A PHP code tag
A WordPress function
Optional parameters
You can use a template tag to call another theme file or some information from the database.
For example, the template tag get_header() tells WordPress to get the header.php file and include it in the current theme file. Similarly, get_footer() tells WordPress to get the footer.php file.
There are also other kinds of template tags:
the_title() – tells WordPress to get the title of the page or post from the database and include it.
bloginfo( ‘name’ ) – tells WordPress to get the blog title out of the database and include it in the template file.
Why Use Template Tags
By encapsulating all of the code for a particular chunk of content, template tags make it very easy to include various pieces of a template in a theme file and also to maintain the theme.
It is far easier to create one header.php file and have all of your theme templates like single.php, page.php, front-page.php, etc. reference that one theme file using get_header() than copying and pasting the code into each theme file. It also makes maintenance easier. Whenever you make a change in your header.php file, the change is automatically carried over into all of your other theme files.
Another reason to use template tags is to display dynamic data, i.e. data from the database. In your header, you could manually include the title tag, like so:
However, doing this means manually editing your theme any time you want to change the title of your website. Instead, it’s easier to include the bloginfo( ‘name’ ) template tag, which automatically fetch the site title from the database. Now, you can change the title of your site in WordPress, rather than having to hard code your theme templates.
