Wordpress personal theme development tutorial

Why use WordPress themes?

A WordPress topic consists of a series of files and CSS style sheets to form a beautiful WordPress website. Each topic is different, so that WordPress users can change the appearance of the WordPress website at any time.

You may want to develop a WordPress topic for yourself or make a public release topic. But why do you need to create your own theme?

Create your own unique WordPress theme appearance.

Templates, template tags, and WordPress loops are used to produce different results.
To produce different results, such as generating personalized results on the category pages and search results pages.
To quickly change the appearance of your blog from two themes, you can use Theme or style switcher to quickly change the appearance.
Design WordPress themes so that you can use your work through the network better.

WordPress themes have many advantages.

WordPress themes separate CSS style sheets and template files from the system. Therefore, when you upgrade a blog, your style will not be damaged.
You can customize theme styles freely.
Allows you to quickly change theme.
You don't even need to learn HTML, CSS, and PHP to have a beautiful theme.
Why do we need to create a theme on our own? This is the key to the problem.

This is a good opportunity to learn CSS, HTML, and PHP.
This is an opportunity to accumulate your practical experience in CSS, HTML, and PHP.
The topic creation process is full of creativity.
This is very interesting (in most cases ).
If you design a public theme, you will feel very good because you have made your own contribution to the WordPress community (well, you can brag about it ~)
Topic development standards
WordPress themes should be developed according to the following standards:

Use structured, error-free PHP and valid HTML code. See WordPress Coding Standards.
Use concise and effective CSS. See CSS Coding Standards.
Follow the Design guide Site Design and Layout.
Topic analysis
The WordPress topic directory is in wp-content/themes /. The subdirectory of the topic contains all style files, template files, optional function files (functions. php), JavaScript files, and images. For example, a topic named "test" is stored in the wp-content/themes/test/directory. Avoid using the number name, which will make it unavailable in the topic list.

Each WordPress release has a default topic. Check the default theme carefully, which may be helpful for creating your own theme.

In addition to images and JavaScript, WordPress themes are often composed of three types of files.

The style sheet file style.css controls the appearance of the page
Function File (functions. php ).
Template file, which controls the appearance of the data retrieved from the database.
Let's take a look.

Subtopic

The simplest theme can be a sub-theme, which includes a style.css file or some images. It works because it is based on another topic.

For more information about subtopics, see Child Themes or a good textbook written by op111.

Topic style sheets
The CSS file does not only define your topic format. Style.css must list the topic details in the form of annotations. Two different themes cannot have the same expression, because this will lead to an error in topic selection. if you create a new topic by copying a created topic, make sure to change the headers.

The following is an example of a style table header annotation. It is called a style header annotation. For example, the topic "Twenty Thirteen ":

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

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.
*/
Note: it is recommended that the name of the topic author be the same as the user name registered by the author on wordpress.org. Of course, it is no problem to enter the real name of the author. Please select.

Pay attention to the Tags used to describe the topic ). They allow users to find your topic through the tag filter. Here is a complete list of available tags.

The files in style.css must be written, which is used to differentiate installation themes.

Style Sheet guide

When creating your CSS, refer to CSS coding standards.
Use valid CSS as much as possible. As an exception, you can also use some prefixes that follow the CSS3 standard.
Minimize the use of CSS hacks. Obviously, browser support (such as IE) is an exception. If possible, separate the CSS hack file or use an independent file.
All HTML elements should have style declarations, whether in the article page or comment section.
Table, title, image, list, block reference, and so on.
We strongly recommend that you add print-friendly fonts.
You can use the media = "print" attribute to include a style sheet file for printing, or add some settings for printing in your main style sheet file.
Function file
A topic can use a function file located in the sub-directory of the topic, called functions. php. This file is like a plug-in. If it is located in the topic you are using, it is automatically loaded when your topic is initialized (both the background page and the foreground page are loaded ). Suggestions for this file:

Enable the topic function, such as sidebar, menu, article thumbnail, article format, and custom title bar.
Defines the functions used in the template file.
Set an option menu so that the website owner can customize colors, styles, and other theme features.
The default WordPress topic contains a function. php file, which defines many of these features, so you may regard it as a reference. since functions. php can basically be used as a plug-in, so Function_Reference allows you to learn more about this function and how you can use it.

Note that adding a function to functions. php is a separate plug-in: you sometimes find that you need to use the same function in multiple themes. In this case, we recommend that you develop the theme plug-in. Functions. php only applies to a specific topic, and the plug-in is consistent with all topics.

Template File

The template is a PHP file that can output HTML code and present it to the browser to determine the appearance of the topic. Let's take a look at the template of the topic.

WordPress allows you to define different templates for your website. although not necessary, these different templates add a new one to your website. the Template is based on the Template Hierarchy, which is determined by a specific topic.

As a theme developer, you can decide how to customize your template. for example, in extreme cases, you can even use only one file index. php is used as a template file. This template is used on all pages. in more cases, different template files are used to generate different results for maximum customization.

Template File list

Here is the list of theme files confirmed by WordPress. of course, your subject can contain any style sheet, image, or file. remember that the files listed below have special significance for WordPress-click the template level to view the details.

Style.css
Main style table. This file must be located in your topic, and your topic information must be clearly written in the header comment.
Rtl.css
Rtl style sheet. If the website's reading direction is from right to left, it will be automatically included. You can use the RTLer plug-in to generate this file.
Index. php
Main template. If your topic uses your own template, index. php is required.
Comments. php
Comment template.
Front-page.php
Homepage template, which is only used to enable static homepage.
Home. php
Homepage template, the default homepage. If you have enabled the static homepage, this is the template page for displaying the latest articles.
Single. php
A separate page template. It is called to display a separate article. For this and other request templates, index. php is used if the template does not exist.
Single-{post-type}. php
Customize a separate page template. For example, the single-books.php displays articles with a custom article type of books. Use index. php if the article type is not set.
Page. php
Page template. Independent page call.
Category. php
Category template. Category page call.
Tag. php
Tag template. Tag page call.
Taxonomy. php
Term template. The term used to request a custom classification.
Author. php
Author template. Called by the author page.
Date. php
Date/Time template, which is used for time-based query.
Archive. php
Archive template. The template used to query the category, author, or date. Note that the template will be overwritten by category. php, author. php, and date. php (if any ).
Search. php
Search result template, which is used to display search results.
Attachment. php
Attachment template, which is used to view a single attachment.
Image. php
Image Attachment template. This template is called when you view a single image in wordpress. If this template does not exist, the attachment. php template is called.
404. php
404 error page template. Use the 404. Php file when WordPress cannot find the log or page that matches the query.
According to Template Hierarchy, these files have special significance in WordPress, that is, when the corresponding condition label returns true, they will replace index in this case. php. For example, if a single blog post is displayed, the is_single () function returns 'true', and if there is a single. the PHP file exists in the current topic, and the file template takes effect.

Basic template

In the simplest case, a WordPress topic consists of two files:

Style.css
Index. php

These files are located in the topic directory. this index. php templates are very flexible. it can be used to include all referenced headers, sidebar, footer, content, categories, archives, search, error, and other files generated in WordPress.

Alternatively, it can be modularized to share work with individual files. if you do not provide other template files, WordPress uses the default file. for example, if you do not provide comments. php file, WordPress automatically uses the wp-comments.php Template file Template Hierarchy. (Note: From 3.0, the default files do not exist or are the same as before. Providing your own template files makes it safer .)

Typical template files include:

Comments. php
Footer. php
Header. php
Sidebar. php

Using these template files, you can embed these files into index. php and the final file generated.

Contains the header. Use get_header ().
Contains sidebar. Use get_sidebar ().
Include footer and use get_footer ().
Contains the search form, using get_search_form ().
Include usage:

<? Php get_sidebar ();?>

<? Php get_footer ();?>

For more information about how to use various Templates and how to generate different information, please read the Templates documentation.

Custom page template

The files defining each page template are stored in your Themes folder. To create a custom page, you must first create a file. Assume that the first custom page is called snarfer. php. At the top of the snarfer. php file, you must write the following:

<? Php
/*
Template Name: Snarfer
*/
?>

The code above defines snarfer. php as the Snarfer template. When creating other pages, Snarfer can be replaced with other names. The template name appears as a link in the topic editor. Click it to edit the file.

You can use any effective file name suffixed with. php (view the file name you should not use in reserved Theme filenames; WordPress retains the specific file name for special purposes ).

The content after the above five lines of code depends on you. The code you compile later will control how the pages using the Snarfer template will be displayed. View Template Tags to learn about the rich WordPress Template functions you can use. You will find it easier to copy code directly from other template files (page. php or index. php) to snarfer. php, and then add the five lines of code at the top of the file. In this case, you only need to replace HTML and PHP code, instead of starting from scratch. Here is an example of below. Once you create a page template and place it in your topic directory, you can use it when creating and editing the page. (Note: When creating or editing a page, the page Template type selection menu will not appear unless you have defined at least one template as described above .)

Query-based template files

WordPress can load different templates according to different query types. There are two ways: Name your template file based on the template level, or use the conditional tag (if statement) in the loop ).

To apply template layers, you only need to provide specific template files, which will automatically replace index. php. For example, if you provide a category. php template file, when the document category page is requested, category. php will replace index. php. If the category. php file does not exist, index. php is loaded normally.

You can even get a more detailed template level by defining a more accurate name for the file, such as a category-6.php-The template takes precedence over category when the request ID is 6 document classification. php is loaded (in WordPress 2.3 and earlier versions, after logging in as an administrator, you can find the category ID in Manage> Categories. The ID column has been removed since WordPress 2.5. You can click 'edit category' and view the URL address of the browser to find the ID of the current category. It looks like this '... categories. php? Action = edit & cat_ID = 3', where 3 is the category ID ). For details about the process, refer to the classification template.

Compared with the template file provided in the automatic loading Template level, if your topic needs to control the file to be loaded by yourself, you can use the condition tag. In The Loop In Action, The condition tag checks whether The specified condition is true. Then, you can load a specific template or display specific content on The screen based on The condition.

For example, a specific style table is used for an article with a specified category. The code is as follows:

<? Php
If (is_category ('9 ')){
Get_template_part ('single2'); // looking for posts in category with ID of '9'
} Else {
Get_template_part ('single1'); // put this on every other category post
}
?>

Or use the query, which looks like this:

<? Php
$ Post = $ wp_query-> post;
If (in_category ('9 ')){
Get_template_part ('single2 ');
} Else {
Get_template_part ('single1 ');
}
?>

In any case, the sample code loads and displays different templates based on different document categories. However, the query condition is not limited to classification. View the condition tag to learn about all the options.

Define Template

You can use the WordPress plug-in system to define your personal template. This advanced feature can be implemented through the template_redirect action hook. For more information about creating a plug-in, see plug-in API.

Contains template files

To load other templates (except header, sidebar, footer, which have been pre-defined to load commands such as get_header () to a template, you can use get_template_part (). This facilitates the reuse of theme code.

Reference files in the template

Avoid using hard-coded URLs and file paths when referencing other files in the same topic. Use bloginfo () to reference URLs and file paths: see reference files from templates.

Note that the URLs used in the style sheet is relative to the style sheet, rather than the file that references the style sheet. For example, if you include the images/directory in a topic, you only need to specify the relative path in CSS, such:

H1 {
Background-image: url (images/my-background.jpg );
}

Plug-In API hooks

When developing a topic, you must note that your topic is best able to coexist with any plug-ins that the user may install. The plug-in can be added to wordpress through "Action Hooks (View plug-in API.

Most Action Hooks exist in wp's php core, so your topic does not need any extra special tags to make it work properly. However, a few actions Hooks need to be specially processed in your topic so that the plug-in can output information such as the header, tail, and sidebar to the page. The following lists the actions Hooks you need to include in the topic:

Wp_head ()

Put it in the
Wp_footer ()

In footer. php, before the </body> label, some plug-ins insert the PHP code to be executed at the end of the document. A more common use is to insert static webpage code, such as Google Analytics.

Wp_meta ()

In the <li> Meta </li> section of the topic menu or sidebar, sidebar. php template. Plug-in Usage example: contains a rotating advertisement or tag cloud.
Comment_form ()

In comments. php, before the form close tag appears (</form>). Plug-in Usage example: Display comment preview. In WordPress 3.0, you need to use the default comment form to view comment_form () for more information.

Want to see real application cases? These plug-in hooks are included in the default topic template.

Unreliable data

You should avoid dynamically generated content in the topic, especially the content output to the HTML tag attribute. According to WordPress programming specifications, the text in the attribute must be processed by esc_attr, so that single quotes and double quotation marks do not affect the end of the attribute value. Otherwise, invalid code and security problems may occur. The title, alt, and value attributes are generally checked.

In a few cases, we need secure output. A similar example is that the "title" attribute is used when the_title () is used to display the article title. To avoid security issues, use the_title_attribute (). Here is an example of the title attribute for correct Transcoding:

<A href = "<? Php the_permalink ();?> "Title =" <? Php sprintf (_ ('Permanent Link to % s', 'theme-name'), the_title_attribute ('echo = 0');?> "> <? Php the_title ();?> </A>

Use the recommended transcoding method instead of the discard method:

Esc_html () replaces wp_specialchars () and htmlspecialchars ()
Esc_url () instead of clean_url ()
Esc_attr () replaces attribute_escape ()