Adding or changing the code in WordPress theme files is a common practice as none of the themes can fulfill the requirements of every blogger unless or until it is a customized theme.
To make changes yourself, you need to know a bit of WordPress theme structure and this is what we will discuss in this article.
Although WordPress theme core concepts, terminology, and coding will be discussed but we will keep this article simple and meant to be focused on WordPress beginners only who want to do minor changes to their theme files.
WordPress theme structure has been established on two core terminologies.
- Template Files
- Template Tags
Template Files are the core theme files of any theme in WordPress. All the design and layout of a theme has been coded in these files. These are mostly PHP files usually reside at the root of a theme’s folder.
The code inside these files consists of PHP, HTML and Template Tags. Let’s have a brief introduction of the most important template files.
This is the main template file required by all themes. Whenever a visitor opens your website in a browser, index.php will be the first file called to show your website or blog.
If the front-page.php file exists in your theme, this file will take precedence over index.php and will be called everytime a visitor visits your website.
The header.php file usually contains meta information (blog title etc.), calls to stylesheets and scripts. Some themes may also implement banners, main menu and slider code in header.php
The footer.php file contains all the code related to your website’s footer section. See also how to remove footer credits in twentyseventeen WordPress theme.
All the code in sidebar.php will define your theme’s sidebar layout to be visible on front-end. Sidebar width, widget areas, and related properties are all defined here.
The single.php file is the file responsible to display your single post. It means all the code written in single.php will be run when a visitor will click your post to open and read it.
All of your website pages get their layout from page.php. Pages are used to show static information on your website like About Us, Contact Us etc.
All WordPress themes implement a style to show visitors comments in posts. comments.php file is the one where you will see all the related code.
functions.php is an important file and is absolutely theme specific. Theme vendors implement special functions in this file which appeared as special features for that theme. You will find customized functions, shortcodes, and related stuff in this file.
404.php file template will be called for an invalid request to a post, page or anyother resource on your website.
style.css has all the CSS code to present your blog on the front-end. The stylesheet holds all the information to define your website layout and visual design.
Believe it or not! WordPress in its simplest form is just two files:
There are more template files also but the files we have discussed above are the most important ones. For example, if you want to remove sidebar from your homepage, you can do it by editing either index.php or front-page.php. Here is a complete tutorial how to set a full-width page in WordPress.
Next comes Template Tags in WordPress theme structure.
What is a Template Tag?
A Template tag is a small piece of code which pulls out and display information from the database. Template tags are frequently used in template files to bring in information from the database to be displayed to the visitor.
For example, a common template tag is get_sidebar(). This specific tag will look for sidebar.php theme file and make it a part of the file from which it has been called.
All template tags come under PHP opening and closing tags <?php and ?>Woopoo's Caution
Common WordPress Template Tags
In WordPress, template tags have been arranged in 9 separate files located in wp-includes directory.
Let’s see a list of most common template tags:
Fetch header template file.
Fetch footer template file.
Fetch sidebar template.
Display a posts calender.
Display site information.
Fetch site information.
Enqueue a script to load.
Display title of the current post.
Display category of the current post.
Display the post content.
Display the post excerpt.
Display title of the post with optional parameters.
Display the date of the current post.
Display the time of the current post.
Display the author name of the current post.
Display category description. Category Id will be given as a parameter.
Display a list of all categories defined for your WordPress blog.
Display the tags of the current post.
Navigation Menu Tags
This template tag is used to display navigation menu.
Display the comment date.
It will list comments for a particular post.
Display the permalink of the current post.
Fetch the URL of the current site.
WordPress Conditional Tags
Conditional tags in WordPress are used to display content if a certain condition has been met before running the code.
All the conditional tags return either True or False after testing if the condition is met. For example, you can test if a page is a front page and then hide or remove sidebar based on the condition’s return value.
Let’s see a list of four most common conditional tags used by theme developers.
This conditional tag will be used for your blog homepage. If you have set a static page as your homepage then it will not work.
This conditional tag always returns true when someone visits your homepage, no matter it is a static homepage or a blog homepage.
is_single() returns true for your single post page.
This conditional tag returns true when someone visits your pre-defined pages like Contact Us, About us etc.
The purpose of listing all these WordPress template and conditional tags is to make yourself familiar with those code snippets you will see while editing WordPress theme files. It will be easy for you to edit code in a theme when you know where and what to edit?
- 20 FREE text editors to edit WordPress files
- How to find and edit CSS in WordPress
- CSS ID and CLASS selectors in WordPress
- 5 PHP mistakes to avoid in WordPress
WordPress has a very organized theme structure based on template files and template tags, it only needs to be understood a bit to easily make theme changes yourself. If you still have any questions, do let us know and we will love to answer.