How to modify wordpress theme

In fact, modifying and making a theme is not as complicated as you think, but you have to make a shocking Wordpress theme.

Let's talk about the knowledge needed to modify Wordpress templates. Most Wordpress functions can be found in WP official Codex, which can also be said to be fixed. You don't need to study deeply, you just need to know the starting and ending position of a function, and you don't have to make mistakes when modifying the theme. The key is to master DIV+CSS. There are many tutorials online. Learn the principle of modifying Wordpress templates roughly, that is, it is enough to write a few attributes. Because I am still learning, I won't teach you now. Let's find a tutorial.

A complete WordPress template should at least include the following documents:

Style sheet file

Php: home page template

Archive.php: template of article archiving/classification directory.

PHP: 404 template

Comments.php: message/reply template

Footer: bottom template

Header.php: top-level template

Sidebar template

page template

Single.php: article page template

Php: template function

Search result template

Of course, some topics may be more than these documents. For example, my HotNews Pro theme has hundreds of template files, but the above files are necessary for every template.

Knowing the function of the above templates can let you know which corresponding template should be modified on the current page.

The following is the focus of this article: if a worker wants to do a good job, he must sharpen his tools first!

Many people may think of tools for making web pages, and Dreamweaver (DW for short) in The Three Musketeers of the Web, which means that it was popular to make web pages with tables. Now it is the era of DIV+CSS, and the advantages of what you see is what you get are gone. This DW is almost useless (personal) In addition, Adobe GoLive, a tool commonly used abroad to make web pages, became popular in China because the Chinese version was launched late. Adobe GoLive is also the first software to make large-scale DIV+CSS web pages, but the development of this software has stopped at present, which is a pity. The tools recommended today are not these two expensive and bulky softwares. You don't need any professional software to modify and make Wordpress themes at all, but you can't write themes with the notebook that comes with the system, as some people boast.

First, you need to build a local PHP test environment to modify the template. Of course, it can also be modified on the Wordpress background theme editing page. It is still possible to use it temporarily, and many modifications are not suitable. There are many tutorials on how to build a local test environment, so I won't go into them here. It is recommended to use Wamp or phpStudy and search by yourself.

Necessary tool software:

■ Text editor

EmEditor (paid software), EditPlus (paid software), Notepad++ (free)

The first two are paid software, and the latter is free and has very good functions. Suitable for beginners. Never use the notebook that comes with the system to edit template files, especially Chinese templates, or the templates will be borrowed. The Chinese template code is UTF-8, and there is no BOM.

■ Mozilla Firefox。

Some people may ask, why use Firefox, and IE that comes with the system can also browse websites? Of course, we don't completely use Firefox to browse websites, but use Firefox's powerful expansion ability to guide our immortals.

When we want to modify the style and structure of a part, we will directly open the Wordpress theme template file or edit the theme in the background. The dense code is that the author of the topic will feel dizzy after reading it himself, so he will often add some comments to the key parts.

Comments in php are generally:

In css: /**XXX **/

But some notes may only be known to the author. So it is difficult to find the part to be modified in the open template file, and then we use the extension of Firefox: Firebug, the download address.

IE browser has a similar plug-in, but it can't be compared with the extension of Firefox in function. Some browsers integrate this function themselves, such as Opera, which looks equally powerful.

Specific operation method

If you have installed Firefox and added the Firebug extension, you can continue to study how to specifically modify Wordpress themes.

■ Modify the text size of page elements.

Take modifying the CMS layout of HotNews Pro theme and the text size of the latest article title as an example:

Hover the mouse over the title of the latest article, right-click the pop-up menu, and select "Use Firebug" to view the elements (as shown).

After that, the Firebug window will be called up at the bottom of Firefox browser by default. The left side shows the HTML structure of the current web page element, and the right side shows the style attribute, file and line number of the current element selector (as shown in the figure), in the 277th line of the style.css file.

Using the text editing software described above, open the theme style.css file and find it on line 277:

# Post h3 {

font-size: 13px；

Font thickness: bold;

}

Change the number 13 to the size you think is appropriate.

If there is no font-size:13px in the style of the current element selector; Attribute, but the global font size setting, you can add this font-size:13px; attribute

After reading the above example, is it very simple? To modify the theme style, the key is to find the location where you need to modify the name of the element selector and the style attribute.

I use the same method when I modify the theme template. Without the fairy guidance of Firebug extension, it is not easy to modify your own template.

■ How to determine the entire code of a web page element (module) to facilitate position adjustment.

Take moving to the theme navigation menu of HotNews Pro under the logo as an example:

First, use the above method to determine the name of the outermost selector of the navigation menu as: top.

Then use Notepad++ text editor, open the template header.php at the top of the topic, search the top position, click the selector with the mouse, and you will find that Notepad++ has clearly marked the starting and ending positions of this code for us (as shown):

The following is very simple. Use the same method to find the end position of the outermost selector under the navigation menu and move the code here.

The above are the basic methods and steps to modify the template. The so-called masters basically toss the template like this. If you spend a day or two learning DIV+CSS, I believe it will be more handy.

Another good extension is: Web Developer, which is not introduced here. Please study it yourself.