Home Internet How To Create WordPress Theme – For Beginners

How To Create WordPress Theme – For Beginners

0
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 .

READ ALSO : -  Solution-Error "No Meta Description "- Yoast SEO Plugin 3.0.1-

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 .

READ ALSO : -  Reduce Wordpress Loading Time Using PageSpeed Insights

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
READ ALSO : -  Find Database Name of Wordpress website At Config.php

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 .