WordPress Theme basics
Table of Contents
- 1 - WordPress Theme
- 1.1 - WordPress Theme Files
- 1.1.1 - Index.php
- 1.1.2 - 404.php
- 1.1.3 - Archive.php
- 1.1.4 - Author.php
- 1.1.5 - Category.php
- 1.1.6 - Comments.php
- 1.1.7 - Tag.php
- 1.1.8 - Taxonomy.php
- 1.1.9 - Date.php
- 1.1.10 - Attachment.php
- 1.2 - WordPress Theme Hierarchy
- 1.1 - WordPress Theme Files
A WordPress theme is made up of a number of different files, and they all contain a separate section of the page; the header will contain the title and navigation, then the index will contain the main content area.
Every WordPress theme has its own folder, which you may find in the wp-content/themes folder of your WordPress installation.
The bare minimum that every WordPress theme needs is an index.php and style.css file. The index.php file determines the way the home page looks like, by the so-called WordPress loop. There are also other possibilities for the home page, which we’ll see in a minute. The style.css file contains all the styling or calls for other CSS files. It also contains the name and author of the theme.
WordPress Theme Files
WordPress theme is broken up into small pieces in the theme folder which are assembled by the programming included in WordPress.
The list of the basic theme files used by WordPress themes are listed below:
The index.php file is the skeleton of the website. The index.php file for a template contains a mixture of code that will be delivered as it is, and PHP code, which will be modified before it is delivered.
From index.php, lots of different PHP files can be called. Here are a couple of the most common ones, including their meaning:
This contains the logic for the header of your theme, which mostly contains things such as the logo, website name, search bar, and menu. It also contains the necessary HTML head code.
In the header.php you will find the top coding for each page and post of your blog. It is inserted into each page and post on your blog through programming.
Some basic things included in your header.php file are:
- The DOCTYPE declaration for the pages/posts. This tells the browser what coding standard the theme is following.
- The character set used by the blog is fetched from the administration side of your blog and inserted via programming into the head section of your pages.
- The title set of tags for each page/post on the site are inserted based on the title you give your post/page when you create it via programming as the page is compiled before presenting to the visitor.
- You will find the path to your CSS (Cascading Stylesheet) file is also created dynamically in the header.php.
The above items plus some other lines of coding are inserted between the opening and closing head tags. () Information between these tags are not visible to the visitor but is used by the browser and search engines to get information about your pages.
Also in the header.php, you will find the beginning of the coding that actually creates the visual part of your pages and posts.
- The opening tag for the body of the pages/posts. ()
- The opening tag for the container which holds the contents of the pages/posts. Usually called wrapper. e.g.
- The head section of the pages/posts. This container could include the coding for your top horizontal
- Opening tag for the container that wraps around the actual content of the individual pages/posts.
All these id names will become important to you later if you want to customize the CSS file for the theme to suit your own personal taste.
This contains the definition of a sidebar, that is used to display widgets. More complex themes often give the possibility to use multiple sidebars with different content.
This contains some closing tags for the theme. Besides that, it has become quite common to define additional widget areas in the footer as well.
This file can be used to show the latest blog posts on the landing page for your blog. Often, this is the home page of your website, but it doesn’t have to be. If WordPress is set up to use a static page as the home page, then home.php could be used for your blog.
If this file exists, it will be used for the home page of the website. If it doesn’t exist, WordPress will look for the home.php. If both of them don’t exist, index.php will be used.
This is used to display a single post type—often, a single blog item.
This is used to display a single WordPress page.
This is an important one because, here, you’ll define all kinds of different functions for your theme, for instance, the widget positions, theme support for post thumbnails, and so on. Also, when creating WooCommerce themes, functions.php plays an important role. Using functions.php, you are able to add features and functions to your website. Note that for larger changes, creating a plugin is a better option though.
A 404 page is an error page presented when someone follows a broken link to your blog or types the URL to a post or page on your blog incorrectly. The 404.php template is used when a page or post is not found on your blog.
The archive.php template is used for your blog archives. It lists all the posts (articles) you have in chronological order based on month, day or year. You may have noticed some blogs have yearly archive pages listed in their sidebar
On a blog where you have multiple authors writing articles, you may decide to show an about page for each author. The author.php template is used for this purpose..
Categories are for organizing your articles into logical groups to make it easier for visitors to get to a specific topic they wish to read about. The category.php template is used to present the list of articles in a specific category.
The comments.php is part of your post page. It inserts the boxes for people to fill in when they wish to leave a comment on your article.
The tag template. Used when a tag is queried.
The term template. Used when a term in a custom taxonomy is queried.
The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.
Attachment template. Used when viewing a single attachment
WordPress Theme Hierarchy
WordPress uses a hierarchy system to decide which of the theme files to use when presenting a page or post to your visitors. If a specific template is not found for the page/post it defaults to the index.php template.
Looks for a template named home.php first.
A post (article) uses the single.php file.
First WordPress looks for a template with the specific page name. If not found it uses the page.php template.
A specific category can have its own template. WordPress looks for a template with its id attached to the name.
In instances where a specific category template is not available, WordPress will use the categpry.php template. If there is no category.php it will use the archive.php file.