Creating WordPress theme can be really simple if you know basic HTML, CSS, and JavaScrip. However, if you are new to WordPress, all you have to do is to follow the steps mentioned in this tutorial for beginners. I have listed the required steps and discussed the important aspects of WordPress theme development. So, let’s begin with  how to create WordPress theme from scratch.

WordPress is a widely used open-source content management system (CMS) around the globe. A total of 34.7% of websites are using WordPress. You can also choose this platform to create a strong online presence and establish your business online effortlessly with the help of powerful WordPress website builder software. WordPress is an obvious choice and the simplest one to begin with. And that is the main reason why every developer suggests to choose it as the base of your website. However, if you are still not sure about what is WordPress or what is open-source CMS, then reading this guide will definitely shed some light of knowledge.

So, without much ado, let’s begin with WordPress theme development step by step process.

How to Create a WordPress Theme? Tutorial for beginners

Designers and developers have been unconsciously partial towards WordPress based themes for not just one but several reasons. At times, some client specifically asks for a WordPress website. And the main reason behind the huge popularity of WordPress lies in its simplicity. In fact, it is a highly flexible and powerful CMS. Hence, those who are working with any other CMS(s) like Joomla, Drupal, etc. may sometimes wish to migrate i.e. from Joomla to WordPress or so on. So, let’s now understand why people love this platform so much.

What are the Requirements to Create WordPress Theme?

1. Installing WordPress Locally

First thing first, you need to install WordPress. Don’t worry it’s not rocket science to learn how to install WordPress. You can easily do that yourself.

2. Procedure to create a WordPress Theme From Scratch.

For WordPress theme, everything will be done in the wp_content directory only. Just make a new theme subfolder in the wp_content → Themes folder. Let’s assume you name it “mytheme”.

The second thing is to decide the layout of the theme. Here, the tutorial is showing the basic layout consisting of Header, Main Area, Footer, Sidebar.

Basically, WordPress needs only 2 files i.e. style.css and index.php. But for this layout, you need 5 files, as follows;

  • header.php – contains the code for the header section of the theme.
  • index.php – contains the code for the Main Area and will specify where the other files will be included. This is the main file of the theme.
  • sidebar.php – contains the information about the sidebar.
  • footer.php – handles the footer section.
  • style.css – responsible for the styling of your theme.
  • bootstrap.css – no separate CSS code is required; highly responsive.
  • bootstrap.js – provides its own js for the navigation bar, or tabs, etc.

You need to download the Bootstrap package. Bootstrap.js & Bootstrap.cs file needs to be copied to the theme folder.

How to Create Custom WordPress Theme step by step?

  1. Create WordPress Theme from Scratch by Coding (Manually)

  2. Create WordPress Theme with TemplateToaster (Automated)

You can create these files locally with a text editor like Notepad. Below are the files, you need to create to get started.

Steps for Creating a WordPress Theme from Scratch by Coding

Step 1: header.php File

You need to put this code in the header.php file.

<html>
<head>
<title>Tutorial theme</title>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery-ui.min.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/bootstrap.js'; ?>">
</script>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

<body>

<div id="ttr_header" class="jumbotron">
<h1>HEADER</h1>
</div>
<div class="container">

This file Header.php contains the code for the header part in which the js and style file is linked. It displays the header of the page.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

This line added after the title tells WordPress to load a style.css file that will handle the styling of the website.

Here,

<?php bloginfo('stylesheet_url'); ?>

is a WordPress function that actually loads the stylesheet.

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Here, we use Bootstrap. It is one of the well-known responsive web design frameworks. It provides inbuilt CSS files to style your website. You can keep the bootstrap.css file in your theme/css folder.

Next, a “div” with class ttr_header is added and this will be the main container of the website. Now, set a class for it so that you can modify it via the style.css file.

After that, add a simple label HEADER in a “div id” with class “ttr_header” which will be later specified in the class “jumbotron”.

Step 2: index.php File

The main file index.php will contain the following code;

<?php get_header(); ?>
<div id="ttr_main" class="row">
<div id="ttr_content" class="col-lg-8 col-sm-8 col-md-8 col-xs-12">

<div class="row">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

The very first line of code in this file

<?php get_header(); ?>

will include the header.php file and the code in it are on the main page.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>

The above code displays the main content of the post that you have created through the WordPress administrative area.
Next, add the sidebar.php file like shown below

<?php get_sidebar(); ?>

In this file, you can display your recent posts, archives, contact info, etc.

After this line, an empty “div” inserted that will separate the Main Area and the Sidebar from the footer.

Finally, added one last line

<?php get_footer(); ?>

which will include the footer.php file.

Step 3: Sidebar.php File

In the sidebar.php, add the following code

<div id="ttr_sidebar" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<h2 ><?php _e('Categories'); ?></h2>
<ul > <?php wp_list_cats('sort_column=namonthly'); ?> </ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul > <?php wp_get_archives(); ?> </ul>
</div>

In this file, internal WordPress functions are called to display the different Categories, Archives of posts. The WordPress function returns them as list items, therefore, you have to wrap the actual functions in unsorted lists (the <ul> tags).

Step 4: footer.php File

Add the below code lines to the footer.php file:

<div id= "ttr_footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>

This will add a simple FOOTER label. However, you can also add links, additional text, the copyright information for your theme in place of plain Footer text.

Step 5: style.css File

Add the following lines to the style.css file

body
{
text-align: left;
}
#ttr_sidebar
{
border-left: 1px solid black;
}
#ttr_footer
{
width: 100%;
border-top: 1px #a2a2a2 solid;
text-align: center;
}
.title
{
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}

This CSS file sets the basic appearance of your theme. This will set the background of the page and add the borders as per your needs.

Your page shall look somewhat like this:

create wordpress theme from scratch

Now, you can further modify the CSS file by adding images, animations and other content to your theme and make it look as beautiful as you want.

But, this will require the HTML, PHP and WordPress functions knowledge. Thus, a better alternative is to use a strong WordPress Theme Generator that doesn’t include even a single code line. Yes! Without coding! A software that lets you create your own WordPress theme from scratch without any coding knowledge.

Eager to know about that solution, well, I am talking about your very own theme builder software TemplateToaster. It provides an array of fantastic features with an easy to use drag & drop interface. So, without wasting a minute, let’s begin developing a WordPress theme from scratch with TemplateToaster.

How to Create a WordPress Theme with TemplateToaster?

TemplateToaster is pretty easy to install and it doesn’t involve any coding at all. Simply visit the website and download the TemplateToaster installer. However, the trial version is free. Now, all you have to do is follow these easy steps to make your own WordPress theme. The first screen that will appear after installation looks like

Follow These Steps to Create a WordPress Theme & Initiate your WordPress Theme Development

Step 1: Choose a Platform

Here, you can make the CMS selection. Since we are creating WordPress theme so the obvious choice for me here is WordPress.

create wordpress theme tutorial

Now you can see a screen with two options i.e. Go with Sample Templates and Start from Scratch. You can easily find one suitable template for your website from the plethora of free WordPress themes. Since we are involved in WordPress template development thus, I will choose “Start from Scratch”.

create wordpress theme steps

Now, you shall see the very first pop-up i.e. to select color and typography from the given options. And click on the OK button.

create wordpress theme from scratch step by step

Step 2: Design a Header

Here you need to select the width and height of the header. You can keep the width to full width, equal to container width, and custom width can also be set.

create wordpress theme from scratch

Select the Background Color for it. You can set a color, gradient or browse an image from the in-built stock gallery or use your own custom image.

make wordpress theme

Now, you can add “Text Area” and “Social Icons” to the header and make it as interactive as you want.

how to create wordpress theme steps

The Header is all done.

Step 3: Design the Menu

Now, is the time to design Menu. Go to the menu tab and select the width and height you want to set for your Menu from the respective options.

2

 

You can also set the background color, gradient or image in the menu from Background option.

4

Now, put a Logo on the menu from the given options. However, you can your custom Logo as well.

5

Now, select the “Menu Button Properties” and then align the button like Alignment → Horizontal → Right to Left and this how your menu buttons will be aligned to the right of the page. 

6

You can also choose to set typography for your menu items.

7

The Menu is ready now.

Step 4: Create and Stylize a Slideshow

  • Now select the Slideshow Tab from the above toolbar and here you can choose between the options to set its functionalities.

8

  • You can select what Background Color you want for the slideshow, Background Image, etc. Further, apply properties like the position of the slideshow, transition effects, width, height, and a text area to make it as beautiful as you want. And components like Slideshow can enhance your web engagement. And there are certain components top WordPress developers include in their themes to make them shiny and engaging.

10

Step 5: Edit the Content (Main Area)

Now comes the main area i.e. Content area. First of all, set the number of columns you want in a single row.

11

Simply by clicking on the text, you will be able to add the content to your website. However, you can use various options like you can set the typography, font color, text alignment, font size, etc. and get your text ready.

12

If you wish to add an image, simply delete the content from the first column using the Editor Tab.

Editor tab Image Browse image OpenOK

13

Likewise, you can easily design the rest of the columns like shown below.

14

Step 6: Design/Customize the Footer

  • Now go to the Footer tab. It will display many options to design a Footer. Firstly, set a Background for the footer. You can also set an image in the background from the stock images or browse your own custom image.
  • Then, from the Footer Cell option, set the number of rows, columns & width of the footer. As here, 4 columns in the first row and in total 2 rows are selected. Place social media icons wherever you find them suitable.

15

  • Put the content and style it through Typography options. You can also set different font colors at different states of the links like Active, Hover, Normal.
  • Similarly, you can style Designed by Text & Link in the Second row. However, you can also choose to show/hide this from the checkbox given at any time.
  • The final look of the Footer will be somewhat like this. So to design it beautifully, you basically need a few clicks of the mouse only.

16

S, the home page is created beautifully. Similarly, you can create other pages of your website. All you have to do is click on the ‘+’ icon on the left side and add as many pages as you want.

17

However, if you want to add a child page for any particular page, then you can do that as well. And all you have to do is click on the ellipses (three dots) corresponding to the page name t have to right-click being present on the desired page and choose the ‘Add Child Page’. Something like showing a virtual hierarchy.

Page Name → ⋮ → Add Child Page

Here, you can see other options also i.e. Remove, Edit, and Clone. You can use them to take suitable actions.

Hurray!! You have completed the theme. And you can earn profit with WordPress theme development and keep your little secret weapon safe.

TemplateToaster web design software offers many more advanced options like putting a Video background, slideshows, new menu styles, etc. You can learn more about how to make a WordPress website, create an eCommerce website with WooCommerce, how to create professional themes and templates, and so on.

Which Method You Use for Creating WordPress Theme?

So, this brings us to the end of this comprehensive tutorial. I am sure it will help you build your own WordPress theme, also explain the primary aspects of creating a WordPress theme from scratch. Creating a theme is quite simple and the choice of CMS depends on your website creation purpose. Like if you are about to initiate eCommerce website development or wish to create a child theme in WordPress or you may even want to know what WordPress theme is that, the other website is using, or you want to begin WordPress theme development using Bootstrap, etc. There are certain things to keep in mind before you choose WordPress theme because choosing the best WordPress theme is no child’s play.

Conclusion

So, keep everything in your mind clear before stepping into the arena of WordPress theme development. However, you can choose to work with WordPress theme builder like without writing a single line of code. Hence, creating a WordPress theme from scratch is no more difficult task now. But the method to create a WordPress theme is entirely in your hands. Whatever you choose, do let me know how it worked for you in the comments below.