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 developing WordPress theme. So, let’s read this tutorial guide and learn how to create WordPress theme from scratch.

WordPress is a widely used open-source content management system (CMS) around the globe. A total of more than 40%  of sites 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 software. WordPress is an obvious choice and the simplest one to begin with. And that is the main reason why every developer suggests choosing it as the base of your site. However, if you are still not sure about what is WordPress or which is the best open-source CMS, then reading this guide will definitely shed some light to make things clear for you.

So, without much ado, let’s begin with developing WordPress theme 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 site. 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.

  • Manual – creating WordPress theme via coding
  • Automated – creating WordPress theme using a WordPress Theme Builder

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

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 site. 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 site. 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 WordPress theme from scratch with TemplateToaster.

How to Create WordPress Theme with TemplateToaster?

TemplateToaster is pretty easy to install and it doesn’t involve any coding at all. Simply visit the software 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 WordPress Theme & Initiate your WordPress Theme Development

Step 1: Choose a Platform

The first screen that will appear after installation looks like the following. Here, you can make the CMS selection. Since we are creating a WordPress theme so the obvious choice here should be WordPress.

create custom wordpress theme

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 from the plethora of free WordPress themes. Since we are involved in WordPress template development thus, I will choose “Start from Scratch”.

wordpress theme creation

Now, you shall see the very first pop-up asking you to select Color and Typography for your WordPress theme from the given options. Click on the OK button to confirm your choice.

developing wordpress theme

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.

Next, you need to select the Background Color for your header. You can set a color, gradient, or you can also browse an image either from the built-in image gallery or you can use your own custom image.

Now, you can add ‘Text Area’ to your header and add text of your choice.

Next, you can easily add Social Media Icons and make your header as interactive as you want.

The Header is ready now.

Step 3: Design Menu

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

Similarly, you can set the background for your menu. You can select from the given options such as Color, Gradient, and Images.

Now, select the Logo for your Menu. Go to the logo tab and choose any logo if you find any suitable logo from the gallery. Otherwise, you can choose your own custom logo as well. Just go to the browse option and look for your logo and have it on your Menu. It’s important to choose the color, font, and shape for your logo according to your business goals and services.

In order to set the Menu Buttons, head to the ‘Menu Button Properties’ and then align the button like Alignment → Horizontal → Right to Page. This will align your menu buttons to the right of the page.

However, you can also set the typography for your menu. Simply by going to the Typography → Normal/Hover/Active. Whereas, there is an option to change text color as well.

Step 4: Create and Stylize a Slideshow

In order to add a slideshow, go to the Slideshow tab and check the slideshow option provided at the left extreme corner. You need to check the checkbox and it will add a slideshow to your WordPress theme.

There are options to set the position of the slideshow such as below, above, or middle. Likewise, you can set the height and width of the slideshow so that it should match with other elements available on your WordPress theme.

You can select what Background Color and Background Image you want for the slideshow. Click on the background option and you are free to select images either from the built-in gallery or you can choose your custom images too.

Further, you can easily stylize it by applying properties like the position of the slideshow, transition effects, width, height, border, etc., and make it as beautiful as you want. You can then add a text area to display the required information.

These and many other components top WordPress developers include in their theme to make them more engaging for users.

Step 5: Edit Your Content (Main Area)

Now comes the main area i.e. Content area. Simply by clicking on the text, you will be able to add the content to your site. However, you can use various options like you can set the typography, font color, text alignment, font size, video, images, contact form, tables to your columns, and much more. This way you can get your text ready. Because content plays a significant role. You can find and engage your target audience with content.

Step 6: Design/Customize the Footer

In order to design your Footer, go to the Footer tab and start picking up the options to customize it. You will get to see many options like setting the Background Image or color, Typography, Margin, Padding, Height, Width, etc. You can also have social icons in your footer, links, hyperlinks, and much more.

Step 7: Add More Pages

So, you have successfully designed the home page. Similarly, you can create other pages too. All you have to do is click on the ‘+’ icon on the left side and add as many pages as you want. When you will click on the + icon, a pop-up will appear where you have to enter your Name, Title, Slug, and then click on the Save button to confirm your action. This way you can add as many pages as you want.

However, if you want to add a child page for any particular page, you can do that as well. All you have to do is click on the ellipses (three dots) corresponding to the page name and then 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 will see other options such as Remove, Edit, and Clone. You can use options to take suitable actions.

Step 8: Export Your WordPress Theme

After you have successfully created your WordPress theme, now you need to export it. Go to the File tab and click on the ‘Export’ option there.

After you click on it, you shall see an ‘Export WordPress Theme’ pop-up. Here you need to add the file name and then browse the path where you wish to export your WordPress theme. Once you are done, hit the Export button.

Step 9: Log in to Your WordPress Admin Panel

Now, login to your WordPress dashboard and go to Appearance → Theme → Add New

There’s an option given ‘Upload Theme’. Click on this option to upload your theme to WordPress.

Browse your WordPress theme (it will be a zip file) and hit the Install Now button to confirm your choice.

You shall now see a screen with the message ‘Installing Theme from uploaded file: yourfilename.zip’. Here, you need to click on the Activate button and this will activate your installed theme.

However, you have created your WordPress theme with TemplateToaster, it provides a default Contact Form 7 integration. Therefore, it will display a message informing you about the theme you have created requires Contact Form 7 installed. So, click on the ‘Begin installing plugin’ option and let the plugin install for your WordPress.

Since TemplateToaster comes with the ease to add content to your theme. So, whatever content you have added to your WordPress theme while creating it can be directly exported here. All you have to do is go to

Appearance → Theme Option → Import Content Tab → Import Content Button

Now, there appears another pop-up the ‘Import Content’ pop-up. Here you can choose what content you wish to import. Pages, Menu, Footer Menu, all the options are given and you are free to choose which page or what content you wish to show. However, you can select all options and let all of your content be imported all at once.

After all the steps you are now ready with your WordPress theme. It will look something like the below screenshot.

Hurry! Your theme looks beautiful. I am sure all these steps are now clear to you and you are ready to create your own custom WordPress theme using TemplateToaster.

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 process of creating WordPress theme form scratch. 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 create professional themes and templates, and how to use WordPress theme check plugin 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 WordPress theme from scratch. Creating WordPress theme is quite simple and the choice of CMS depends on your purpose. Like if you wish to create a child theme in WordPress or you may even want to know what WordPress theme is that, 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. Check out best WordPress themes and free WordPress themes.

Conclusion of WordPress theme creation

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 WordPress theme from scratch is no more difficult task now. But the method to create WordPress theme from scratch is entirely in your hands. Whatever you choose, do let me know how it worked for you in the comments below.