SHARE

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 .
wordpress theme
wordpress theme

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 .

  • wp_head()
  • register_sidebar()
  • wp_footer()
  • get_header()
  • get_sidebar()
  • get_footer()

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(); ?>

footer.php file

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>

index.php

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(); ?>

style.css

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

Video

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 .