How to build a WordPress theme from scratch. How to create your own WordPress theme? Why not use different page templates
In this article, we will learn how to create a wordpress theme. First, we'll create HTML + CSS template, which we put into the structure wordpress themes... After you finish reading this article, you can create your own template for wordpress, or rather, you will create it as you read and complete the practical exercises. You will know how the theme works and you will be able to independently implement the core of the wordpress theme from other HTML / CSS templates. Let's start?
Introduction - wordpress theme structure
The structure of a wordpress theme is extremely simple. In the subject we have a file index.php, he is responsible for assembling the pieces of the template. Others are connected to this file: header.php,footer.php... These files (pieces of the template) are used on any page of the site. We know that not all pages are built according to the same template, so the wordpress theme has other files, such as archives.php or single.php... You can also create your own type of pages if you want it to be completely different from others on the site. It is very convenient.
If you carefully consider the structure of the theme, and read the contents of the files, you will intuitively understand what's what. But there are still some points that we will consider. You can always return to this page and read how everything is done.
Now let's look at creating a template in stages:
Step 1 - style.css
A CSS file is a file of parameters and design solutions for HTML template elements. You must rename the main css file (if you have more than one) to style.css... Next, you need to add the following commented information at the beginning of this file:
/ * Theme Name: Typography Paramount Theme URI: http: // site / Description: An image-less template focusing on Typography..0. General comments / License Statement if any. ... * /
This code will show the topic information for admins. Make sure it is at the beginning of the file, and there are no whitespace characters in front of it!
Next, I created another file called 1. css, and put it in the folder typography-paramount which I created in the theme's wordpress folder. It is necessary to strictly adhere to this structure so that wordpress can see this file.
Step 2 - header and footer
In this step, we will create two files: header.php and footer.php mentioned earlier. Although they are not basic and are optionally included in the theme, they are used in most templates, so we will create them.
Header.php
Let's start with this file. Create a file and give it a name header.php, then paste the submitted code into it and save. This file will be displayed on all pages of our template.
An imageless template focusing on Typography.
Typography Paramount
Until now, there has been nothing special about a simple html / css theme. But now we will replace some of the elements with wordpress tags.
>
/">
These are just some of the tags I know. You will find a lot more on the official website: codex.wordpress.org.
language_attributes ()- Displays the language type for the tag .
bloginfo ()- Used to display information about the site, all parameters can be found in the WordPress codex.
wp_title ()- Returns the title of the page.
wp_head ()- includes javascript and other necessary elements.
get_option ()- gets the necessary options for working with the database.
Footer.php
Now let's create the so-called "site footer". Create a file footer.php and put the following code in it. This footer will display the year, site name, and rss links.
phpthe_time ("Y ");?>- displays the current year.
- the name of the blog.
- adding a link to the rss feed of the blog.
wp_footer ()- this is necessary for the core of wordpress itself, which adds the elements it needs there.
Step 3 - main wordpress template file
It's time to create the main wordpress template file that will connect the top and bottom of the site. Create a file index.php... This is one of the two required wordpress theme files (the other is style.css). Paste the newly created file with the following code:
This code helps wordpress to get information where to connect header.php and footer.php... Let's add a few more lines between these tags:
">
at | |
Woops ...
Sorry, no posts we "re found.
This code snippet retrieves information about available blog posts and, if any, displays them. If they are not found, then the part of the code is displayed after which lets us know that the blog is still empty.
Also added the tag which displays navigation links so that users can read previously added posts.
An example of how a wordpress theme works
Now that we have a semblance of a theme, let's see an example of how the created wordpress theme works.
We have four files in our theme, this is quite enough for a start. In the next article, we will add the file single.php, which will be shown when displaying a specific post. This file will include, unlike the file index.php.
If you still have questions or misunderstandings about creating a wordpress template (theme), express your concerns in the comments below!In this article, I will walk you through the ways to create templates for permanent WordPress pages. Each method has pros and cons. But before you start, let's briefly explain what pages are and how they differ from posts.
In WordPress, you can create pages (page) and posts (post). They differ in that the records: get into the feed on the main page; for entries, categories are indicated; records cannot be tree-like, and pages: are used for such content as "About me", "Contacts", "Sitemap"; do not have categories, but have a tree structure. Entries are usually intended for chronological information (by time of addition), and pages for a tree structure are not time-dependent. For example, this article is published as a "entry" under the heading "Code", and links in the header menu lead to the following pages: Functions.
Pages are like posts - they are located in the same database table and have almost the same data: title, text, additional fields, etc. Both are records, but of different types: the pages are tree-like and are organized by creating parent and child pages, and the records are combined by headings and tags. In WordPress, you can create additional post types, tree-like or not.
Creating pages in WordPress
Often, you need to create a separate page template to display information differently from other pages. When creating a page template in WordPress, you can completely change the page: remove the sidebar, footer, header, you can change the page beyond recognition. For example, on this site, the page on which the WordPress file codes are displayed is changed.
Method 1: a page template through a file with an arbitrary name and connecting it in the admin panel (classic way)
This is the most common way to create a page template in WordPress. To do this, you need to create a .php file, for example, tpl_my-page.php in the theme folder and at the very beginning of the file write a note that the created file is a template for pages:
Now, when creating a page in the admin panel in the "Page properties" block, we will be able to select a "template":
Since WordPress 4.7. such page templates can be created for any post type, not just page. To do this, supplement the comments with the line: Template Post Type: post, page, where post, page are the names of the post types to which the template belongs.
/ * Template Name: My template page Template Post Type: post, page, product * /
Advantages:
- Only records with the specified template can be retrieved. For example, you can display all pages with the "Services" template (file servises.php). This is sometimes convenient. The name of the template file is stored in the _wp_page_template metafield, so to display pages with the specified template, you need to create a query by the meta field (see WP_Query).
Having created one template, we can conveniently apply it to different pages. For example, you can create a template without a sidebar and use it on different pages.
Disadvantages:
After creating the template file in the theme folder, you need to go to the admin panel and install the template for the page. This is not always convenient when developing. Therefore, if you intend to use the template for only one page, use the second method.
How it works:
When you go to the admin panel on the page for editing a tree-type post, WordPress scans all template files for the line:
Template Name: ***
The line can be located anywhere and in any way in the file.
All files with similar lines are collected and displayed in the template selection in the "Page attributes" block.
When the page is published, the name of the template file or default is written in the _wp_page_template custom field if the template is not specified:
Wp_page_template = default
_wp_page_template = tpl_my-page.php
Next, when the user visits the page, WordPress will check the _wp_page_template meta field, if the template is installed, then the template file is used. Otherwise, the search for the page template continues through the hierarchy.
Method 2: page template through a file with a specific name (template file hierarchy)
When a page is created, a shortcut is set for it (slug, alternative name). It is used in the url page. And it can be changed:
To create a template this way, you need to find out the page slug and create a file in the theme folder. Let's say our slug is equal to contacts as in the picture, then we'll create a page-contacts.php file in the theme. and fill it with the necessary code (you can copy the content from the page.php template file and edit it for yourself). That's it, now when we visit the page, we should see a new template. Similarly, you can take the ID (let it be 12) of the page and create a file page-12.php.
Advantages:
There is no need to go to the admin panel and install the template file. The template starts working immediately after the file is created. Convenient when developing.
Disadvantages:
The template is created only for one specific page. Depends on the page slug, if it changes the template will not work. If you use ID, then the dependency on the slug disappears, but it becomes unclear in the theme file which page the template belongs to (if there are several templates with ID).
Practically useless when writing templates, and even more so plugins. It can be used when editing your site in which the slug or page ID is known in advance.
How it works:
WordPeress chooses which file to use in the following order (files must be at the root of the theme):
- (any_name) .php (when a page template is used)
- page- (post_slug) .php
- page- (post_id) .php
- page.php
- singular.php
- index.php
Method 3: page template through the "template_include" filter (coding)
This is an advanced method, it is more complex, but together with the complexity it opens up wide possibilities. Using this method, you can set a template for any page, post, category, any publication on the site or, in general, a group of any publications. See examples with description:
// the filter passes the $ template variable - the path to the template file. // By changing this path we are changing the template file. add_filter ("template_include", "my_template"); function my_template ($ template) (# analogue of the second method // if this is a page with a portfolio slug, use the page-portfolio.php template file // use the is_page () conditional tag if (is_page ("portfolio")) (if ($ new_template = locate_template (array ("page-portfolio.php"))) return $ new_template;) # template for a category group // this example will use a file from the theme folder tpl_special-cats.php, // as a template for categories with ID 9 , the name "Uncategorized" and the slug "php" if (is_category (array (9, "Uncategorized", "php"))) (return get_stylesheet_directory (). "/tpl_special-cats.php";) # template for writing by ID // the template file is located in the plugin folder /my-plugin/site-template.php global $ post; if ($ post-> ID == 12) (return wp_normalize_path (WP_PLUGIN_DIR). "/ my-plugin / site- template.php ";) # template for pages of arbitrary type" book "// it is assumed that the template file book-tpl.php is in the theme folder global $ post; if ($ post-> post_type ==" book ") (return get_stylesheet_ directory (). "/book-tpl.php"; ) return $ template; )
Such code should be placed in the theme's functions.php file or in a plugin, or connected in some other way. As you can see from the example, during the template_include filter, conditional tags are already working, global variables are set: $ wp_query, $ post, etc.
Advantages:
- It is possible to create a template when writing a plugin.
You can set a template for any page or group of pages. Almost complete carte blanche in action.
Disadvantages:
The need to write code and connect it separately (for example, in the theme's functions.php).
Now I will explain how to make a WordPress theme out of a simple HTML template using the design example from that article.
You may need to adapt the design for WordPress for many reasons, for example, you are transferring your once-static website to a CMS, or you like a design that is not yet in the WordPress collection, or you just want to figure out how the themes of this CMS work from the inside.
So let's get started.
Distributing the code to files
1. Download the template and unzip it to your WordPress themes folder (address like wordpress_blog_address / wp-content / themes /). Rename the theme folder to your liking if you like. For example, my template is located at wordpress_blog_address / wp-content / themes / MyTheme /.
2. Rename the file styles.css v style.css.
3. Open style.css in a code editor (such as Notepad ++) and at the very beginning, paste the following lines:
/ * Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI : http://www.gnu.org/licenses/gpl-2.0.html * /
As you might have guessed, this is service information about the design theme: title, author, description, license, version, etc. You can replace the right parts of the lines with your own, that is, set your own authorship, version, description and other data.
4. Create files header.php, index.php, sidebar.php, footer.php and distribute the code from index.html.
4.1. V header.php copy the code line by line since this file is responsible for the top of the site. styles.css replace in the code with style.css- new valid file name.
4.2. V index.php paste the code of the main block (from the line by line ).
4.3. V sidebar.php copy the side menu code (from on ).
4.4. V footer.php paste the remaining lines (with to the end of the document index.html).
5. Delete index.html.
6. Go to the admin panel and make sure that the MyTheme template appears in the section Appearance -> Themes... You can even try to view or activate it, but nothing good will come of it yet, because we have not integrated the template with WordPress yet.
Adapting the header
Now we will start from a static template to make a dynamic theme, into which WordPress data and settings will be loaded.
There will be PHP inserts in the template. This code starts with... Between them is the PHP code that most often calls CMS functions.
1. Open the header.php file and replace the code contained in it before the block
to the next:
>
"> "> "type =" text / css "media =" screen "/>We made the block dynamic
The code calls a function that returns the language attributes to the container.
">
Instead of writing the encoding as a constant, we called a function that takes the value from the CMS settings and automatically substitutes it into the code, that is, to change the encoding, you no longer have to edit the theme file.
An important function that makes it work on a page with styles, plugins and scripts.
2. Go to editing the index.php file. At the very beginning, write
,
The lines call up the header, sidebar and bottom files of the site.
You can now view or even activate MyTheme. As a result, the browser will display the already familiar template with a static menu and a single page. To make the menu dynamic and customizable, and instead of one page displaying all the materials placed on the site, you need to transform the template further.
Making the top menu dynamic
So far, we have a completely static theme, including one with an unchanged horizontal top menu. While it cannot be configured from the admin panel, and if you leave the code as it is, then to insert / delete / move items, you will have to edit the file each time header.php, which is extremely inconvenient.
In order not to philosophize slyly and not to plunge into the abyss of the fascinating world of programming, we will assign a static name to the dynamic menu. Instead of the horizontal menu table, paste the code
so that you get the following:
In order for the menu to be displayed, in the site control panel open Appearance -> Customize -> Menu and either rename the already created menu to menu, or create a menu and customize it to your liking, but be sure to name it menu.
The essence of the actions is that the file header.php function wp_nav_menu ("menu = menu"); opens a menu called menu, which must be properly named and configured in the WordPress admin to display. Name menu you can change it to any other, the main thing is that the name matches both in the site settings and in the code header.php.
Navigation is clearly moving somewhere, although it makes it a beautiful ladder. This is because the menu of our template was imprudently implemented inside the table, and it was necessary to design it with a list. You can partially correct the situation by adding to the file style.css the following code:
#menu ul (margin: 0; / * Set padding to zero * / padding: 4px; / * Margin value * / font-size: 18px;) #menu ul li (display: inline; / * Display as inline element * / margin -right: 5px; / * Left padding * / padding: 3px; / * Margins around text * /)
Since it is commented, no further explanation is needed. It remains to refresh the page and see that the list has finally become horizontal.
The menu, of course, can be made smoother and more beautiful, but this action has nothing to do with adapting the template, but it is tightly connected with CSS, which you can study in detail.
We complete the "cap"
The only elements of the file header.php the remaining static are the name and description of the site. To take them from the settings specified in the admin panel, replace the code responsible for displaying the text in the header with the following lines:
Refresh the page - the result was not long in coming.
Working with a file header.php This completes it, in the end it has the following code:
>
"> "> "type =" text / css "media =" screen "/>Displaying posts
We pass to the part containing the main content of the page - the file will be edited index.php.
Delete the contents of the block right and paste the dynamic post display code instead. Alternatively, remove all code from the file and paste the following instead:
">
/ /And there is nothing here: (404
The beginning of a loop that will allow the page to display posts until they run out.
">
Displays the title of the post.
/ /
Date in the format day, month (abbreviated), year. Tags, comments.
Post output.
End of the cycle, provided that there were records.
If there are no materials, display the appropriate inscription about this and leave the cycle.
Display of page navigation, provided that they do not fit on one.
Seemingly simple code globally changed the page - the blog became truly dynamic. Each post can be viewed, the links are working.
Further design and placement of elements depends only on your imagination and layout skills - you can do anything with the display of data, but the work on the template is not yet complete.
Adding widgets
To the left of the main content in the template, there is a panel with an Information block (a kind of widget) and a side menu on it. The information block should not be static, and since it is very similar to a widget, I suggest making it a widget. This requires:
- register a block of widgets;
- bring it to the right place.
Now in more detail.
1. In the theme directory, create a functions.php file. It stores the functions that make the template work. It can also contain other custom routines.
2. Enter in the following code:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
"," after_title "=>"
",)); ?>This code registers a block of widgets. Instead of MySidebar, you can enter any other name. A menu can be registered with approximately the same function in this file, but I decided to get by with a little blood and not to do this in order to make contact with PHP minimal, and at the same time show two different approaches to solving one problem.
3. In the file sidebar.php erase the lines:
Information
Further...
and write instead:
The Information block, as expected, disappeared, on the side there was only a still static menu.
4. But changes for the better took place in the admin panel - section Appearance got subparagraphs Widgets and Menu... Go to the first one. Open it up and see: inside there appeared a registered in the file functions.php block (I have it MySidebar).
5. To recreate the information block, drag the widget to the sidebar Text, in field Heading enter Information, in field Text- code
We offer you holiday discounts. Further...
6. Refresh the blog page - we managed to recreate the block almost one-to-one (small nuances change in the file style.css and I will not focus on them).
Adapting the menu
The second part of the sidebar is the vertical menu. It also needs to be converted from static to dynamic, in order to edit then directly from the admin panel.
1. Remove the huge nested menu list in the file sidebar.php and instead enter the code:
2. In your WordPress dashboard, open Appearance -> Customize -> Menu, click the Add menu button, name it so that the name in the admin panel matches the name in the page code sidebar.php(I have it left_menu) and add all the required items.
3. Save your changes, refresh the page, and verify that the dynamic menu on the left side of the site works and displays correctly.
Page code sidebar.php compared to the original, it greatly decreased and as a result became like this:
Menu
In fact, only the inscription remained static Menu... And this is because it is unlikely to change, although it can be easily "revived", for example, by implementing this block as another area of widgets and adding the Custom menu block to it, but if you read the article carefully, you can now easily do it yourself.
Working with the footer.php file
WordPress themes are made up of files and styles that together define the look and feel of a website. They can be very different from each other, allowing users to quickly redesign a website. But why would you need your own theme?
- To create your own unique website design.
- To use, and to display different content and style of pages.
- To create alternative templates for specific areas of your site, such as category pages and search results.
- To quickly switch between two site layouts, or by letting users change the look of your site.
- To make the theme public and let others enjoy your design.
The WordPress theme also provides some benefits.
- It separates the presentation styles from the system files, allowing updates to be made without drastically changing the appearance of the site.
- It allows you to customize theme-specific output parameters.
- With it, you can quickly change the look of your WordPress site.
- Thanks to it, there is no need for the user to learn CSS, HTML and PHP in order to make their site attractive.
But why would you want to create your own theme? This is the main question.
- This is an opportunity to learn more about CSS, HTML / XHTML and PHP.
- This is an opportunity to show your skills in CSS, HTML / XHTML and PHP.
- This is an opportunity to create.
- It's fun (for the most part).
- If you've made your theme public, then you'll have the satisfaction of sharing and giving something in return to the WordPress Community (brag!)
Theme creation standards
When coding WordPress themes, adhere to the following standards:
- Use well-structured, error-free PHP code and valid HTML code (see).
- Use well-written, valid CSS (see).
- Follow the recommendations for.
Anatomy Topics
WordPress themes are located in subdirectories wp-content / themes /. The theme directory contains style sheets, additional functionality file (functions.php) and pictures. For example, a theme called "test" will probably be located in the wp-content / themes / test / directory.
By default, WordPress contains three themes created by the Wordpress development team: Twenty Fifteen, Twenty Sixteen, and Twenty Seventeen. These themes are different and use different features and tags to create the look and feel of your site. Take a close look at their constituent files to better understand how to create your own theme.
A WordPress theme consists of three main file types, in addition to images. The first is a stylesheet called style.css that controls the appearance of the pages on the site. The second provides a file of additional functionality (functions.php). The rest of the files are template files that define how information from the database is displayed on the web page. Let's take a look at each type separately.
Theme style sheet
Besides your theme's stylesheet itself, the style.css file necessarily should contain information about your topic in the form of comments. Each topic should have its own unique information in the header comments, otherwise there will be problems in the. When creating a new topic based on an existing one, change the header comments first.
Below is the style sheet header template for your Rose theme. It should be at the beginning of the style.css file, in the first lines:
/ * Theme Name: Rose Theme URI: theme-home-page Description: short-description-of-theme Author: your-name Author URI: your-URI Template: write-the-name-of-parent-theme here - optional-field Version: version-number is optional. Detailed description of the topic / License-if-needed. ... * /
The simplest theme only includes the style.css file plus images if needed. To create such a theme, you must specify the name of the parent theme in the Template: title bar. For example, if your theme "Rose" derives (inherits) from the theme "test", write the following line in the style.css header:
Template: test
After adding such a line to the style.css header, all the "test" theme templates will be inherited by your "Rose" theme, which has nothing but the style.css file, and possibly pictures. These files need to be placed in the wp-content / themes / Rose directory.
Starting with WordPress 2.7, a descendant theme can contain template files whose names are the same as the template names in the parent theme, you can select these templates to use in the admin panel, and they will be used instead of the parent ones.
The comments in the style.css header are needed by WordPress to identify the theme and display it in the> submenu as an installed theme, along with other installed themes.
Note : When you define a parent theme, in the Template: comment line, you must use the name of the theme directory. For example, to use the "Default Wordpress Theme", do not write
Template: WordPress Default
but write
Template: default
because "default" is the name of the parent theme directory.
Additional functionality file
The theme can additionally use a file with the necessary functions for the theme to work, it must be located in the theme directory and called functions.php. This file basically works like a plugin, and if it is present in the directory of the theme you are using, then it is automatically loaded during WordPress initialization. This is true both for the admin pages and for the rest (external to the admin) pages. The following usage is suggested for this file:
- Defining the functions used in your theme's template files;
- Settings in your theme's admin area that provide users with options for customizing colors, styles, or other aspects of your theme.
Themes that come with WordPress and installed out of the box have a functions.php file that defines a number of functions and settings in the theme's admin area, so you can use it as a model. The functions.php file basically works like a plugin, the Codex section is the best place to get more information on how you can use this file.
Theme template files
Choice of templates based on queries
WordPress allows the programmer to use various options for connecting templates from a set: firstly, using the template hierarchy, and secondly, using conditional tags inside the template file processing loop.
In the first case, when using the template hierarchy, you need to create special template files that will be automatically used at the right time to create the page instead of the basic index.php template. For example, if your theme contains a template called category.php and there is a request for a category page, the category.php template will be loaded instead of the index.php template. If there is no category.php file in the theme, the index.php template will be loaded as usual.
You can define a template for a specific category, for example, by adding the category-6.php template file to the theme. The file will be used instead of index.php when the category ID is 6. To find the category ID, go to> if you have admin access in WordPress version 2.3 or lower.
Since WordPress 2.5, the ID column has been removed from the admin panel. You can determine the category ID by clicking "Edit Category" and looking at the url for the cat_ID value. For example, the end of the URL:
"... categories.php? action = edit & cat_ID = 3"
where "3" is the ID of the current category. This process is discussed in more detail in
If your theme needs to be able to control the display template even more granularly than the level of control that the template hierarchy provides, you can use conditional tags. Conditional tags basically check if a particular state is true at runtime, in which case you can load a specific template or display some variants of text on the page according to that state.
For example, to create different styles, depending on the category number, the code might look like this:
Or, using the request object, the same algorithm can be implemented in a different way:
post; if ($ post-> in_category ("9")) (include (TEMPLATEPATH. "/single2.php");) else (include (TEMPLATEPATH. "/single1.php");)?>
In any case, both code examples will call different templates, depending on the category ID. Conditional tags are not limited to categories, see the article, which covers all possible options.
File type icons
Wordpress uses the file type icons () in your blog and in the Admin interface if these icons exist in the specified location.
Wordpress looks for these files in the images directory of the current theme. (And in Wordpress 2.2, the default theme only has one icon, audio.jpg.)
For example, to render an icon of the MIME type audio / mpeg, Wordpress will look for the icon file in the specified images directory of the current theme, it selects the first suitable file (see the function description):
- my_theme /images/audio.jpg
- my_theme /images/audio.gif
- my_theme /images/audio.png
- my_theme /images/mpeg.jpg
- my_theme /images/mpeg.gif
- my_theme /images/mpeg.png
- my_theme /images/audio_mpeg.jpg
- my_theme /images/audio_mpeg.gif
- my_theme /images/audio_mpeg.png
List of standard theme template files
Below is a list of the standard template files used by WordPress. Of course, your theme may contain other style, image, or program files as well. Just keep in mind that the filenames below have special meaning for WordPress - see the hierarchy template for more information.
Style.css Main style sheet file. The file must be in the subject necessarily and must contain the comments described above in the file header. index.php Main template file. If you use your own templates in your theme, this index.php file is required. comments.php Template for comments. If not, the comments.php file from the default theme is used. comments-popup.php Adds popup menu for JS comments. If missing, the comments-popup.php is called from the default theme. home.php Blog home page template. single.php Single post page template. Used when a specific post is requested. For this and other templates upon request, index.php is used if your theme does not have a corresponding template file. page.php Single page template, used to display the requested page. category.php Category template. Used when requesting a category. author.php Blog author template. Used when requesting a blog author. date.php Template for outputting date-time. Used when requesting date and time. Year, month, day of the month, hour, minute, second. archive.php Archive template. Used when requested by category, author, or date. Please note that this template can be overridden by category.php, author.php and date.php templates for the respective request types. search.php Search results template. Used after searching. 404.php Template for an error message. Used when WordPress cannot find a post or page that matches the request.
These files have special meaning in WordPress because they are used to replace index.php when they are in the theme directory, according to the template hierarchy, and when requested; or according to the truth of the conditional tags, when a function of type is _ * (); returns "true".
For example, if you want to display a single post, the function returns "true", and there is a single.php template file in the active theme directory, this template is used to create the page.
Links to files from the template
The default WordPress theme is a good example of the technique (first described by Michael Heilemann in Kubrick in the WordPress 1.2 layout) of how queries are displayed in templates.
The following codeinserts the URL of the template into the output of the template. You can add any additional information for links to files from your theme.
The following codeadds the URL of the directory that contains your theme's .css stylesheets to the template output. You can add any additional information for referencing your theme files, especially those needed for stylesheets (to avoid this, use this instead).
The TEMPLATEPATH constant contains the absolute path to the current theme's templates directory (without the trailing "/").
Note that the URIs used in the stylesheet are linked to the directory where the stylesheet file is located, not to the directory where the template using those styles is located. This removes the need to add PHP code to the stylesheet file to set the current directory. For example, if you are using images from the images / directory of your theme in your stylesheet, you only need to specify the relative path in the CSS, for example:
H1 (background-image: URL (images / my_background.jpg);)
It's a good idea to use the above method to link to files. In this case, you don't need absolute paths in your templates.
Defining custom template types
You can use the WordPress plugin system to add your own template types to suit your specific needs. This is necessary if you want to make, for example, a different layout for different cases or your own comment template, etc. This extension of WordPress capabilities can be achieved by intercepting the template_redirect event, see. More information on creating plugins can be found here.
Required event calls for compatibility
When designing a theme, it is advisable to keep in mind that your theme should be configured in such a way that it can work well with any WordPress plugin that you or another user of your theme wants to install. Plugins extend the functionality of WordPress by intercepting events ("Action Hooks", see for more information). Most of the events take place in the WordPress core, so your theme doesn't need to call intercepted custom events in order to function. But some intercepted events still have to be called, in order for the installed plugins to correctly display information, directly in the header (header) and footer (footer), in the sidebar, or in the main body of the page. Here is a list of special event tags that need to be called in your theme for any plugins to work correctly:
Wp_head Occurs when the element code is displayed.
in template header.php. Usage example in plugin: adding javascript code. Usage: -or- wp_footer Occurs when the header (footer) "footer" of a theme is displayed in the footer.php template. Usage example in plugin: Inserting PHP code that should be executed after everything, the very last one on the page. Usage: -or- wp_meta The event usually occurs when processing a tagFor a real world example, you can find these event calls for plugins in their respective default theme templates.
General notes for theme developers
Please be clear about and describe in your topic documentation (the README file included with your topic will help many users get around any potential stumbling blocks):
- Specify what exactly your theme and template files are for.
- Stick to naming conventions in the standard theme hierarchy.
- Indicate the shortcomings of your theme, if any.
- Write simple and understandable comments, especially in difficult places, in templates and style files. Add comments where you have changed the default behavior of templates and styles.
- If you have any special requirements, which may include custom rules for rewriting or changes, or the use of some additional, special templates, images or other files, please clearly indicate the steps the user should take to get your theme to work properly. ...
- Try and test your theme in different browsers to catch at least some of the problems that users may encounter.
- Provide contact information (web page or email), if possible, for informational support and user questions.
Links and Resources
A complete list of resources related to themes and templates is available in the article.
This article will guide you on how to create the simplest WordPress theme. Although the Codex provides extensive documentation on this subject, it seems a bit daunting to a beginner to me. Therefore, in this "tutorial" I will tell you how WordPress themes work and show you how to adapt a raw HTML template for them. In this case, knowledge of PHP is not required from you, but it is good if you know Photoshop and CSS to create a design.
1. Frontend blog
Before we get started, let's take a look at the default WordPress theme and understand what it consists of. Let's mark the elements (header, post title, search form, navigation, footer, etc.).
Standard Frontpage ( index.php)
Standard Single ( single.php)
2. Photoshop layouts
Based on the look and feel of a standard theme, design Photoshop layouts for your blog. For example, I'm using GlossyBlue, one of my free themes. Download demo.zip to see the finished Photoshop file.
3. HTML and CSS
When the PSD design is ready, create an HTML + CSS template for each page. Following the steps of this instruction, you can use my GlossyBlue HTML files from demo.zip... After unpacking the archive, you will see index.html, single.html and page.html... Next, I will use them to turn them into a template.
Why create static HTML first? This is mainly necessary because it will greatly simplify the development process. I usually create an HTML file for each template, check their validity (HTML and CSS markup) in all browsers. After that, all that remains is to cut and paste the WordPress code. So you don't have to worry about HTML or CSS errors.
4. How the WordPress theme works
If you go to the default theme folder ( wp-content / themes / default), you will see many php files (called template files) and one file style.css... WordPress usually uses several template files ( index.php , header.php, sidebar.php, and footer.php).
Read more in Codex: "Site Architecture" and "Template Hierarchy".
5. Duplicate template files
Copy the HTML folder from GlossyBlue to the folder wp-content / themes... After that go to the default theme directory, copy comments.php and searchform.php to folder glossyblue.
6. Style.css
Go to the default theme folder, open the file style.css... Copy the text commented out at the beginning of the file and paste into style.css GlossyBlue themes. If you want, you can change the title and information about the author. 
7. Splitting files
Now we need to figure out where to split HTML files into parts: header.php, sidebar.php, and footer.php... The screenshot below shows a simplified version of my index file, as well as the principle of its division.
8. Header.php
Open up index.html... You need to cut the section from the top to the place where it ends, paste it into a new php file and save it as header.php. 
Go to the default theme folder, open a new one header.php... Copy and replace tags where the php code requires it: title, link, stylesheets, h1 and div class = description.
Navigation menu (wp_list_pages) Replace tags li v ul id = nav on ;
9. Sidebar.php
Go back to index.html, cut the code from where it starts form id = searchform and before the tag is closed div id = sidebar, put it in a new php file and save as sidebar.php.
- Replace form id = searchform with all content on.
- Replace tags li categories on
- Replace tags li archives on
10. Footer.php
Go back to index.html... Extract from there the code from div id = footer inclusive with div tag id = footer to the end / html then put in new footer.php.
Recent entries Here I used query_post to display the 5 most recent blog posts.
"Latest comments""Recent Comments" generated by the plugin (included in the theme folder)
11. Index.php
Now in your index.html should only stay div id = content... Save the file as index.php... Enter the lines: get_header, get_sidebar, and get_footer in the order they appear in the pattern. 
12. Parsing the cycle
The loop displays blog entries sequentially based on your settings. The screenshot below illustrates how it works. Initially, the loop checks for the presence of records, and if it does not find any, it issues a message "Not Found".
13. Copying a cycle
Go to the default theme directory, open index.php... Copy the loop from the standard index.php in your - between div id = content ../ div... After that, replace the static text with the WordPress template tags: post date, title, category, comments, next and previous link.
14. Theme preview
Congratulations! You have created the public part (the main part of the template). Now go to the admin panel, go to the bookmark Design, you should see a GlossyBlue theme. Activate it and go to the public section to see the result in action.
15. Single.php
It's time to create a template single.php... If you want, you can repeat the steps, transferring the code from the standard theme. But it seems easier to me to use the just created index.php by saving it as single.php... Open up single.php from the standard theme and copy the template tags where you want. Next, connect comments_template... The following screenshot shows the changes I made:
16. Page.php
Now new single.php save with title page.php... Remove the post date, comment form, next / previous links. That's all - your template. page.php ready .
17. Deleting HTML files
Delete all HTML files from the folder glossyblue(we won't need them anymore). Technically, this is enough to create a basic WordPress theme. You may have noticed that there are more PHP files in the standard theme. Well, in fact, you don't really need them if you need a simple theme. For example, if search.php or 404.php will not be in the theme folder, WordPress will automatically use index.php to display the page. Read the Template Hierarchy for more details.
18. WordPress Page Template
For a final example - I'll show you how to use a Page Template to create an Archive page that will contain a list of all the posts on your blog (handy for a sitemap). Copy archives.php from the default theme folder. Remove unnecessary code and you end up with something like this:
