Step by step tutorial to create a basic wordpress theme
In the wordpress development best practice is when you create your own theme . Wordpress theme is combination of .php files . In wordperss , web page is not directly created with html . In wordpress theme .php files generate web pages dynamically .
To understand and create your own wordpress theme is not so difficult . You have required some compulsoury things to develop wordpress theme.
- Knowledge of HTML
- Knowledge of CSS (cascading style sheet)
- php knowledge
- Some Html and php editor , like Dreamweaver to develop theme offline . If you don’t have any software to edit php then you can use ,cPanel built in feature to edit and create theme files .
Simple Html Code
Create a simple html file to understand the wordpress them . For simple and minimum html page structure is as following .
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <h1>this is the text</h1> <div>This content is sidebar content </div> <div>This content is footer content </div> </body> </html>
In wordpress theme if we want to create same page , We divide this page into minimum three parts . These three part are three php files . header.php ,sidebar.php and footer.php .
Main file to run these files is index.php . It is used as main or home page of wordpress website . When user go to website’s homepage , then a dynamicaly created home page is generated .
To create a basic minimun wordpress theme you are required six wordpress following functions .
All of the upper functions are built in functions . First three functions are used to register related php page to theme and second three functions are used to display page .
Know the next step is create a sample theme in wordpress .Sample theme name is “Goodies” . Create a folder in the theme folder of WordPress with name “goodies “. Read the article how to create file in theme folder .
Create header.php file
Create a header.php file in the theme (goodies) folder . header.php is file to used to create webpage header of your wordpress theme .
Code of header.php is following . Code start with <!DOCTYPE html> and end at <body> . All of the code may be in html form . But <?php wp_head(); ?> is required to run header.php . This function is used to register header file .
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <?php wp_head(); ?> </head> <body>
Create sidebar.php file
Create a sidebar.php file in the theme folder . sidebar.php is used to create or display sidebar on your wordpress webpage . In the following code <?php register_sidebar(); ?> is used to register sidebar in theme . register_sidebar() is placed at the end of the sidebar.php content .
<div>This content is sidebar content </div> <?php register_sidebar(); ?>
create a footer.php file in the theme folder . footer.php is user to create webpage footer . In the following code wp_footer() is used to register footer content . wp_footer() is placed on at just before </body> tag .
<div>This content is footer content </div> <?php wp_footer(); ?> </body> </html>
Create a index.php file in the theme folder . This file is used as index page or main page of your wordpress website . index.php code is as following .
In this index.php get_header() is used to call your registerd header.php file . <h1>this is the test </h1> code is content of the index page . get_sidebar() function call the sidebar.php file created in your theme . In the next line get_footer() function call the footer.php file created in your wordpress theme previously
<?php get_header(); ?> <h1>this is the text</h1> <?php get_sidebar(); ?> <?php get_footer(); ?>
These are the minimum requirements of WordPress theme . At this time theme is not ready to install . To install you new theme style sheet is required . wordpress support style.css by default .
So create a new file in theme folder with name style.css . To register this sidebar ,write the following code .
/* Theme Name: Goddies Theme URI: http://tectrick.org Description: This is test theme to create wordpress -- WordPress v2.9.1 Licence: GNU General Public License v1 License URI: http://www.gnu.org/licenses/gpl-2.0.html Author: Manu Mahajan Author URI: http://tectrick.org Version: 1 */
These lines are required to register your style.css . Start your css code after comments close .
- Theme Name : your theme name (write your them name here)
- Theme URI : write your theme url page (it is optional)
- Description : wrire your theme description here . This is displayed in your theme installation folder .
- Licence : (optoinal)
- License URI : It is also optional
- Author : write theme author name here
- Author URI : write theme author url here
- Version : write your theme version here
For more help click here to see the video how to create and install theme
After that start your css (cascading style sheet ) coding . Go to wordpress dashboard > appearance >themes and activate your theme . Your theme is working .