There are plenty of websites with WordPress tutorial, but I couldn’t find a decent website that teaches “How to build a WordPress theme” from scratch. In this tutorial, we will cover some basic steps to create a WordPress theme. Before we go further, let’s talk about the things we need while developing a WordPress theme.
Copy wordpress theme

  1. Any basic HTML template that we convert into WordPress theme.
  2. Text editor, Sublime Text 2, Notepad ++ or any other of your choice
  3. browser to test our development stages
  4. Apache Server or Apache installed on local machine e.g. Bitnami
  5. a little knowledge of HTML, CSS, PHP

WordPress Theme Structure

If you’ve ever edited a WordPress theme, you would have probably noticed that there are different theme related files in the main folder. To make your theme work you should have at least two files in your main folder:

  • index.php – the main page template;
  • style.css – the stylesheet.

This is the minimum necessary to ensure that your theme work. But of course, in addition to these two files, there are more files, such as:

  • header.php, to display the header
  • sidebar.php, to display the sidebar
  • footer.php, to display the footer
  • page.php, template for pages
  • single.php, template for single post
  • archive.php, template archive posts
  • comments.php, comments template file
  • functions.php, theme functions file
  • and many more files

First we will work with index.php, header.php, footer.php, sidebar.php, and style.css to create the structure of the theme and later we add necessary functions multiple PHP-files.

Download the zip file, we will use this HTML template to create a full working copy of WordPress Theme.

What we just downloaded

The file we just download is an HTML template. You will see following files in the folder when you extract the files.

  • index.html is the main layout file
  • folder css, there are style files
  • Folder images, picture
  • folder js, which contains the scripts

Create theme files

Now we will create our theme files. Create a new folder, and create empty files with following names in it:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Open the style.css and add these lines (Choose a good name for your theme ):

/*
Theme Name: MyTheme
Theme URI: http://ssiddique.info
Author: Shahid Siddique
Author URI: http://ssiddique.info
Description: My first theme
Version: 1.0
License: Creative license
*/

Now open index.html and copy

in header.php which is going to be common for all the pages.



  
  Striped by HTML5 UP
  
  
  
  
  
  
  
  
  
  
  
  
  
  

   
  

Now we will create an index.php. Copy everything in post section in index.php

 
  
   
  
1 2 3 4 20