What to prepare for a WordPress theme

1. Configure the WordPress environment for the development environment

First, the local host has to install the WordPress operating environment. It can be wamp or mamp, so you can see the update in real time without having to download or upload files to the server to check for updates. Also, having a local installation environment means that you do not need to have a link to the network to test your work. Then, you download a scratch template from the underscores website and put it under wp-content, themes, your wordpress installation directory, For example, I created a theme called Photographic-baby. Activate this theme in WordPress website and you can see the very original interface.

Integrated development Environment-IDE

A good IDE, can be eclipse,netbeans,sublime text,phpstorm and so on, in this article will use NetBeans to develop.

Unit Test

No matter what kind of website you plan to do, you need to do unit testing. For example, the type of content, HTML tag, image alignment and so on. It can take a long time to test those things, but fortunately, you don't have to do those tests yourself. You only need to download a theme Unit Test data for WordPress. Then go to the WordPress tool, import->wordpress, import the unit Test data just downloaded.

Browser

Use as many browsers as possible to test your pages, such as Safari on Chrome,firefox,ie,mac, and so on.

Plug - ins

WordPress Plugin Library has a lot of useful to help you debug plug-ins. There is a very useful plug-in called Developer, plug-in, install plug-in, search "Developer", you can download the installation. After activation, there will be a prompt box asking you what type of website you are developing. Since we are talking about developing WordPress themes, select the second one.

A list of plugins is then popped up. The reason for installing the "Developer" plugin is that it integrates a number of other development plugins to choose from. We will first install "Debug Bar", "Monster Widget", "Pagegenerate Thumbnails" and "Theme Check". The other plugins are used later to install. In this way, under the tool, you can see a more "developer" option. The configuration inside is the same as the simple configuration at the beginning. In constants, check if "Wp_debug" is set to "set", and if not, change it in wp-config.php. In the upper-right corner of the menu bar, there are two links to "Debug" and "Developer".

2. Design and development process

Understand the structure of WordPress theme. There is a plug-in called "Show current Template", you can know what this page is working on what theme page. It is recommended to search and install from the plugin repository.

WordPress template Schema

New CSS and JavaScript

If you want to register a new CSS and JavaScript, such as adding a third-party JavaScript link, or a font, find the function.php below themes, then you can update the following code:

/** * Enqueue scripts and styles. */function photographic_baby_scripts () {wp_enqueue_style (' Photographic-baby-style ', Get_stylesheet_uri ()); wp_ Enqueue_script (' Photographic-baby-navigation ', Get_template_directory_uri (). '/js/navigation.js ', Array (), ' 20151215 ', true); Wp_enqueue_script (' Photographic-baby-skip-link-focus-fix ', get_ Template_directory_uri (). '/js/skip-link-focus-fix.js ', Array (), ' 20151215 ', true); if (Is_singular () && comments_open () && get_ Option (' thread_comments ')) {wp_enqueue_script (' comment-reply ');}} Add_action (' wp_enqueue_scripts ', ' photographic_baby_scripts ');

　　

Knowing how to add CSS and JavaScript, you can use your creativity to make your own template.

What to prepare for a WordPress theme