Tutorial: step by step build theme WordPress HelloWorld

Wednesday, November 18th, 2015 (0 Comment)

Developers are certainly not alien to all Helloworld projects. No matter what language programming learning is also very simple initial post before coming to the complex. Maybe it is too easy to Helloworld to many webmasters in here but it is the initial difficulty of many others. Today, I spend a little time to guide Tutorrial theme WordPress, hoping to be useful for many new friends made on wordpress.

You need install WordPress (click here to know WordPress installation):

After installation is complete WordPress, we start create a theme:

You create demo folder in WordPress’s path (wp-content/themes)

The basic theme wordpress is include index.php file and style.css file. When finish web development will need other template files, here I will explain the important template often have built-in themes, which are stored in folders …/wp-content/themes/demo/. Theme struct as below

theme wordpress structure:

demo /

/ style.css : main Stylesheet to define code CSS of theme, this file is important, it will show information of theme to active and deactive theme in page admin of WordPress. You need input code into top file with the following content:

This information will appear on screen manage theme admin

theme wordpress

theme wordpress

/ header.php : using for template header
/ footer.php : using for template footer
/ index.php : to display the home page, it will display the entries in the form of abstracts or collapse the way programmers
/ front-page.php : front-page is often used when you want to display a static page
/ home.php : home is often used when you want a static front-page but has updated the latest post
/ functions.php : This file contains the code of the custom theme, it will be run first
/ comments.php : The reviews or comments, pingbacks, trackbacks to websites. In this template should not contain definitions of functions that you want to add a function, you should move them into functions.php
/ single.php : display a post content
/ single-<post-type>.php : display post with post-type
/ page.php : to display a post page
/ category.php : display category or directory
/ tag.php : display a tag when a keyword is queried
/ taxonomy.php : display a classification when a classification is queried
/ author.php : display author, writer or feedback
/ date.php : display date
/ archive.php : Used as author, date, or folder queries. It will be overwritten by author.php, date.php, category.php
/ search.php : show result information searching
/ attachment.php : display an file attachment when viewing
/ image.php : display an image attachment when viewing
/ 404.php : display entered wrong url, wordpress can not find the article suitable query.
/ screenshot.png : (590×300 pixel) to show background of theme in page admin

In this section, only focus basic on header.php, footer.php, index.php, functions.php and page.php.

Open header.php file with code:

Open footer.php file with code:

Open index.php file and code:

Finally, modify style.css file to format layout:

Save all and login into admin wordpress to active theme as image above, and logout to check result.

Tags: ,

Related Posts

wordpress
Why should use WordPress Framework
wordpress
Create responsive menu in wordpress using bootstrap
wordpress
Create breadcrumbs function without plugin
wordpress
Related Posts functions in WordPress without using the plugin

Related Posts

wordpress
Why should use WordPress Framework
wordpress
Create responsive menu in wordpress using bootstrap
wordpress
Create breadcrumbs function without plugin
wordpress
Related Posts functions in WordPress without using the plugin

Leave a Reply

Your email address will not be published. Required fields are marked *