How does WordPress modify themes?

This tutorial is intended for children's shoes who want to personalize the Wordpress theme and want to find people everywhere without knowing how to start. New Wordpress shoes may be very interested in a variety of colorful and numerous Wordpress themes, and find your favorite among thousands of themes, however, we will eventually find that almost no theme fits our own minds. this tutorial is intended for children's shoes who want to personalize the Wordpress theme and want to get started without knowing how to get started.

New Wordpress shoes may be very interested in a variety of colorful and numerous Wordpress themes, and find your favorite among thousands of themes, but in the end, I will find that almost no theme can fully meet my own needs. what should I do? I can only make changes by myself, but I suffer from nothing about the creation of web pages. I can only sigh with hope, or ask for help everywhere, and often hit the wall again. Here, we will briefly introduce the basic knowledge of Wordpress template modification and the required tools and skills, and hope to serve as a reference for beginners. In fact, modifying and making theme is not as complicated as you think. of course, except for making a shocking Wordpress theme.

First, let's talk about the knowledge required to modify the Wordpress template. Most Wordpress functions can be found in the official WP Codex, which can be fixed. you do not need to study them in depth. you can know where a function starts and ends, no errors are caused when the topic is modified. The key is to master DIV + CSS. There are a lot of online tutorials. it is enough to learn the principle of modifying the Wordpress template, that is, writing a few attribute statements, because I am still learning, here we will not be ugly here to teach you, please find a tutorial for yourself.

A complete set of WordPress templates should include at least the following files:
Style.css: style sheet file
Index. php: Homepage Template
Archive. php: document archiving/classification directory Template
404. php: 404 Template
Comments. php: message/reply template
Footer. php: bottom template
Header. php: top template
Sidebar. php: sidebar template
Page. php: page Template
Single. php: document page template
Functions. php: template function
Search. php: search result Template
Of course, there may be more than these files for some themes. for example, there are hundreds of my HotNews Pro topic template files, but the above files are essential for each set of templates.
Knowing the role of the template above allows you to know which template should be modified on the current page.

The following is the focus of this article: to do a good job, you must first sharpen it!
Many people may think of the webpage creation tool and think of Dreamweaver (DW for short) in "webpage three muskeys" as what we say is what we get. that is when we used Table tables to create webpages, today is the age of DIV + CSS, and the advantages of WYSIWYG are no longer available. This DW is almost useless (I personally think ). In addition, Adobe
GoLive, due to the late release of the Chinese version, DW became popular in China, and large software for making DIV + CSS web pages was also the first release of Adobe
GoLive, but it is a pity that the software has stopped development. The recommended tools today are not expensive and bulky software. you don't need to use any professional software to modify or create a Wordpress theme, but it's not as easy as some people boast to write theme with their own notepad. First, you need to build a local PHP test environment to easily modify the template. of course, you can also modify the template on the Wordpress background theme editing page, it is not suitable for situations where many modifications are made. There are many online tutorials on how to build a local test environment. we will not detail them here. we recommend you use Wamp and search for it by yourself.

Required Tools and Software:

■Text editor
EmEditor (paid software), EditPlus (paid software), Notepad ++ (free of charge)
The first two are paid software, and the latter is free of charge and very good. it is suitable for beginners. you must never use the notepad provided by the system to edit Template files, especially Chinese templates, otherwise it will cause the template borrow, the Chinese template code is: UTF-8 without BOM.

■Firefox)
Some people may ask, why can I use Firefox to browse websites like IE in the system? Of course, we do not use Firefox to browse websites completely, but use Firefox's powerful scalability to show our way.
When we want to modify a certain part of the style and structure, we will directly open the Wordpress theme template file or edit the theme in the background. the dense code means that the theme author will be dizzy after reading it, therefore, some comments are often added to key parts,
Comments in php are generally:
In css:/** XXX **/
However, some annotations may only be known to the author. Therefore, it is difficult to find the part to be modified in the open template file. in this case, we will use Firefox's extension: Firebug,
The IE browser also has similar plug-ins, but its functions cannot be compared with those of Firefox Extensions. some browsers themselves integrate this function, such as Opera, and the functions seem to be equally powerful.

Procedure
If you have installed Firefox and added Firebug Extensions, you can continue to see how to modify the Wordpress topic.

■ Modify the text size of page elements
Modify the CMS layout of the HotNews Pro topic. the text size of the title of the latest article is used as an example:
Right-click the title of the latest article and choose "use Firebug" from the context menu to view the element ()


The second row of the hosts file.


Use the idea editing software introduced by idea to open the theme style.css file and find it in line 277:
# Post h3 {
Font-size: 13px;
Font-weight: bold;
}
Modify the number 13 to the appropriate size.
After reading the example above, is it very simple? to modify the theme style, you must find the location where you want to modify the element selector name and style attribute.
I also use the same method when modifying the theme template. without Firebug extension, modifying the template is never easy.

■ How to determine the entire code segment of a webpage element (module) for easy location adjustment.
Take the topic navigation menu of HotNews Pro as an example:
First, use the above method to determine that the selector name of the outermost layer of the navigation menu is top.
Then, use the Notepad ++ text editor to open the header of the template at the top of the topic. php, search for the top position, and click the selector with the mouse to find that Notepad ++ has clearly marked the start and end position of the code section ():


The following is simple. in the same way, find the end position of the outermost selector of the element in the navigation menu and move the code to this point.
The above are the basic methods and steps for modifying the template. The so-called masters are basically tossing templates. if you spend a day or two learning about DIV + CSS, you will be more comfortable,
Another nice extension is Web Developer. I will not introduce it here. please study it on your own.