WordPress Theme Development Tutorial Manual - Template Files
Template Terminology
In WordPress themes, the term 'template' is used in several different ways:
- The template file exists in the theme and indicates how your site will be displayed.
- Page templatesUsed on a single page to change the appearance of a page, which can be applied to a page or article.
- Template Tagsis a built-in feature of WordPress that allows us to fetch and display data using template tags (e.g.
the_title()
,the_content()
). - Template Hierarchyis the logic WordPress uses to determine which theme template file to use, depending on the requested content.
WordPress themes consist of template files which are containing HTML.Template Tagsand PHP code in PHP files.
Template file
When building a theme, we use template files to implement the layout and design of various parts of the site. For example, we can use the header.php
Template design website header using comments.php
template to design article comments.
When a user visits a page in our website, WordPress loads a template based on the page the user visited. The content displayed by the template file consists of the template file associated with theArticle TypeDetermine. The template hierarchy describes which template file WordPress will load based on the type of request and whether or not the template exists in the theme. The server then parses the PHP in the template and returns the resulting HTML content to the visitor.
The most critical template files are index.php
, if a more specific template cannot be found in the template hierarchy, then all requests will eventually be sent to this template. Although there are only index.php
Templates will work just fine, but themes usually include some other templates to display different content in different contextual environments.
Template snippet
A template snippet is a template that is used to be included in other templates, such as header.php. Template snippets can be embedded into multiple templates, thus simplifying theme development. Common template snippets are:
header.php
: Used to display the website headerfooter.php
: For displaying the website footersidebar.php
: For displaying the site sidebar
Although a template snippet is only a part of a template, we can create any number of template snippets and include them in other template files.
Common WordPress Template Files
- index.php:The main template file, which is required for all themes.
- style.css:The main style file, which contains information about the theme, is required for all themes.
- rtl.css: Right-to-left reading style file, which is automatically included in the theme if the site language is right-to-left reading.
- comments.php:Theme comment template file.
- front-page.php:Home page template file, regardless of reading settings in the home page settings why always, preferred to choose this document template as the home page template file.
- home.php:Select this file as the home page template file if it is set as a static page in the reading settings.
- header.php:A website header template file that typically contains document types, meta information, stylesheets, script links, and other data for your website.
- singular.php:Single page templates, use this file as the single page template file for these article types if single.php or page.php is not found.
- single.php:The template file for the "Article" detail page.
- single-{post-type}.php:Detail page template file for "post-type" article type.
- archive-{post-type}.php:Archive page template file for "post-type" article type.
- page.php:Template file for the details page of the "Page" article type.
- page-{slug}.php:A template file for a page detail page with the alias "slug".
- category.php:Classifieds archive template file.
- tag.php:Tag archive template file.
- Taxonomy.php:Customize the taxonomy archive template file.
- author.php:Author archive page template file.
- date.php:Date archive page template file.
- archive.php:Default archive page default template file.
- search.php:Search results page template file.
- attachment.php:Single attachment page template file.
- image.php:Image page template file.
- 404.php:The template file for the 404 error page that is displayed when the page is not found.
Using Template Files
In WordPress templates, we can use theTemplate TagsDynamically display content, include other template files or otherwise customize your site.
For example, in index.php, we can include other files:
- To include the header, use the get_header()
- To include a sidebar, use the get_sidebar()
- To include a footer, use the get_footer()
- To include a search form, use the get_search_form()
- To include custom template fragments, use the get_template_part()
The following is an example of using the template function to include other template fragments in one template:
More information about template tags can be found in the Template Tags section.
For more information on including template snippets, see theThe template file containsChapter.
Main Style File
style.css is a style sheet (CSS) file required by every WordPress theme. It controls the appearance (visual design and layout) of the website pages.
File Location
For WordPress to efficiently recognize the theme, the style.css file needs to be located in the theme's root directory, not in a subdirectory.
For more detailed instructions on how to include style.css files in your theme, see theIncludes CSS and JavaScript filesThe "Style Sheets" section of the
fabric
WordPress uses the header comments section of style.css to display information about the theme in the Appearance (Theme) dashboard panel.
typical example
This is an example of a header comment for style.css.
/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Our default theme for 2017 works great in many languages, for any abilities, and on any device.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
Use ( * ) The items indicated are required.
- Theme Name(*): Name of the subject.
- Theme URI : A topic introduction URL where users can find more information about the topic.
- Author(*): the name of the person or organization developing the theme, the wordpress.org username of the theme author is recommended.
- Author URI : URL of the person or organization that created it.
- Description (*): A short description of the subject.
- Version (*): version, in XX or XXX format.
- Licence (*): License for the subject.
- Licence URI (*): URL of the subject license.
- Text Domain (*): String conversion for textdomain.
- Tags.: Allows the user to find words or phrases on a topic using a tag filter, the full list of tags is located in the In the Subject Matter Review Handbook The
- Domain Path: Used to specify where to look for translations when the theme is disabled, defaults to
/languages
The
After the required header section, style.css can contain anything that a regular CSS file would have.
Style.css of the child theme
If your theme is a child theme, you will need to add the style.css header comment with the Template Information.
/*
Theme Name: My Child Theme
Template: Twenty Seventeen
/* Theme Name: My Child Theme Template: Twenty Seventeen
For more information on creating child topics, visit thesubthemePage.