Don’t want to look gaudy by using an existing WordPress theme? Does it seem daunting to create a WordPress theme from scratch on your own? Then this article is for you.

 

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 website in WordPress. The reason for that being WordPress, widely known for its simplicity. In fact, the amount of flexibility, and power it offers to the developers when they have to create WordPress theme and much more is commendable. Hence, one prefer switching to WordPress CMS over others.

To create WordPress theme, all you need is

1. Installing WordPress Locally.

There are a number of articles out there about how to install WordPress. But, you can easily Install WordPress by following this link.

2. Procedure to create a WordPress theme from scratch.

You will do all the related work to create WordPress theme 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 you decide is the layout of the new theme. Here, the tutorial will showcase the basic layout consisting of Header, Main Area, Footer, Sidebar.

Basically, WordPress needs only 2 files 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 new 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 can download the Bootstrap package from here. The Bootstrap.js & Bootstrap.cs file needs to be copied to the theme folder.

You can create these files locally with a text editor (e.g Notepad). Now, have a look on the actual coding of files.

 

1. header.php File

You will 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">

Header.php file contains the code for a head 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 the 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, the Bootstrap is used as it is the best-known framework for responsive websites. It provides inbuilt css files to style your website. You can download it and keep the bootstrap “.css” file in your theme/css folder.

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

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

 

2. index.php File

The main file index.php will contain this 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, you will include the sidebar.php file like this

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

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

 

4. footer.php File

Add these lines to the footer.php file:

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

With this code, a simple FOOTER label will be added. You can also add links, additional text, the copyright information for your theme in place of plain Footer text.

 

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 looks of your theme. These lines set the background of the page and surround the main parts of your site with borders as per your need.

Your page will look like this

create wordpress theme

Now, you can further modify the CSS file, add images, animations and other content to your theme to get the looks you want for your blog!

But, this will require the HTML, PHP and WordPress functions knowledge. So you have a better alternative that is easier and doesn’t include even a single code line. Isn’t it sounding cool !! You can create WordPress theme just in minutes without any coding knowledge. Eager to know about that solution i.e TemplateToaster a theme builder software. It provides the enormous fantastic feature with an easy to use drag & drop interface. So, let’s see how to make WordPress theme from scratch with TemplateToaster.

 

Procedure to create WordPress theme with TemplateToaster

TemplateToaster is so easy to install. Just visit the website and download the TemplateToaster installer. Its trial version is free. Follow easy steps to install it. The first screen that will appear after installation looks like

create wordpress theme

From this screen, you can make the CMS selection. In this case, it will be WordPress With Content.

create wordpress theme

Next screen throw the choices to make a theme from scratch or to modify a sample template. You will go for “Start from Scratch”.

create wordpress theme

Now, choose the color scheme for your theme and Font typography. You can change it easily at any stage of designing later too. Then click Start.

create wordpress theme

Now, you will encounter the main interface of the software. From here, you can design your theme as per your needs easily. It has many self-depicting options like Header, Menu, SlideShow, Sidebar, Body, Footer, Widget, tabs etc as shown above to design different main elements of a theme conveniently.

 

Designing the Menu

You can start by designing the Menu from Menu tab. You can simply place it by selecting the Menu position → Above Header. You will see a menu inserted above Header in the Editor.

create wordpress theme

Now, make it Full Width by checking the corresponding box in Width option.

create wordpress theme

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

create wordpress theme

Now, put a Logo in the menu by given option.

create wordpress theme

Now, you can style the menu items from Menu Button option. From here, you can set a background color in all the 3 states: Active, Hover, Normal; can change the typography, can mark a border etc.

create wordpress theme

The Menu is simply ready.

 

Designing the Header

Next section is Header. Go to Header Tab. Set its Height from the Height option.

create wordpress theme

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

create wordpress theme

Set an image for the Foreground as shown below

create wordpress theme

Draw a Text Area parallel in right side of Foreground image with Text Areas option. Write the required text. Put a Button from Editor Tab labeled ‘READ MORE’ and link it by specifying the Target.

create wordpress theme

The Header is all done.

 

Designing the Content (Main Area)

Now, you will manage the Content area from Content Tab. First of all, you will set the number of columns you want in a single row. For example, selected two here.

create wordpress theme

And now in the First column, delete the content and from Editor Tab – You can add an image.

Editor tab → Image → Browse image → Open → Ok

create wordpress theme

In the Second column, you will place the text related to this image. Next, add the Title and content to this cell.

create wordpress theme

Then put a Button labeling Learn More. And you can style and link this button to another page.

create wordpress theme

Similarly, you can add more content rows.

 

Designing the Sidebar

Now, you are all set to place a Sidebar. Move to Sidebar Tab and select the Layout for the Right Sidebar.

create wordpress theme

Now from Widgets Tab, add the Recent Posts widget.

create wordpress theme

Now, set the width of the sidebar as shown below.

create wordpress theme

Set the typography and your sidebar is done.

create wordpress theme

 

Designing the Footer

To design the footer, go to Footer tab. It will display many options to design like from Presets you can choose a predefined footer style containing Designed By text & Link. From layout, you can change the layout for footer any time.

create wordpress theme

Firstly, set a Background for the footer. For this, you can also set an image in the background from the stock images or browse your own custom image. Then, from 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 the social media icons wherever you find suitable for social links.

Put the content and style it by Typography options.You can also set different font colors at different states of the links like Active, Hover, Normal. Similarly, you can style the Designed by Text & Link in the Second row. You can also show/hide this from the checkbox given any time.

create wordpress theme

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.

Hurray!! You have completed the theme.

create wordpress theme

TemplateToaster offers many more advanced options like putting a Video background, slideshows, new menu styles etc. You can learn more about creating a website through Templatetoaster by following these links:

https://blog.templatetoaster.com/best-yoga-website/
http://blog.templatetoaster.com/how-to-make-a-wordpress-website
http://blog.templatetoaster.com/create-an-ecommerce-website-with-wordpress-woocommerce-and-templatetoaster
http://blog.templatetoaster.com/create-professional-themes-and-templates-using-templatetoaster

 

In Short

You can easily create WordPress theme with help of this tutorial. But the choice merely depends upon your decision that you want to go for large code lines or through WordPress Theme Builder TemplateToaster. The former will lead to learning the HTML, PHP and required WordPress functions whereas the latter will allow you to design a beautiful theme with all the advanced options painlessly. So, creating WordPress theme from scratch is no more a difficult task now. But the method to create it is entirely in your hands.