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.phpTemplate design website header using comments.phptemplate 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 header
  • footer.php: For displaying the website footer
  • sidebar.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:

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.

The WordPress Theme Repository uses the number after "version" in this file to determine if a new version of the theme is available.
  • 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.

We offer WordPress Themes and Plugins Custom Development Services

This site has long undertaken WordPress themes, plugins, WooCommerce-based store mall development business. We have 10 years of experience in WordPress development, if you want to Developing Websites with WordPress, please contact WeChat: iwillhappy1314 or email: amos@wpcio.com for inquiries.

发表回复

Your email address will not be published. 必填项已用 * 标注

*