How You Can Develop WordPress Theme from Scratch

develop wordpress theme from scratch featured

A tutorial walk through on how to develop WordPress Theme from Scratch just by using simple HTML and CSS.

We know about the importance of themes to create a website. Theme is the outfit of our website. So it represent all the content of a website. We also know that there are a lot of free and paid WordPress blog themes. In this article, I will walk you through the steps on how to develop WordPress theme from Scratch.

You can develop a WordPress theme easily if you have some knowledge on HTML, CSS, and PHP. And trust me this is really easy. Suppose you have a WordPress installed on your computer or website, and now you want to develop a theme for your website.

Getting Started: Creating Your Custom Theme

One thing I should mention here. You can do this practice directly in your WordPress. Or you can install WordPress in your local computer including MySql and develop WordPress theme. In this tutorial, I am creating the WordPress theme directly in my WordPress stage website. I have set up a stage environment of my website including the same database. Then I have created some dummy data as posts. You can follow either approach. But I recommend to use your local computer. So you can keep modifying and tested yourself.

Warning: Do not use your live sites for this.

So lets begin to develop WordPress theme from scratch.

Prerequisites

Create a folder like myfirsttheme or anything in WordPress theme directory. It’s located in public_html > wp-content > themes. Since we are just starting with some general knowledge to develop WordPress theme from scratch, our theme will be a simple one with these following sections.

  1. Header
  2. Main Area
  3. Sidebar
  4. Footer

See the image below:

develop wordpress theme from scracth

We will load this part using some files. For example, our theme will have the following files:

  • header.php – There will be a header part of the file in header.php file.
  • index.php – The main area part will be here.
  • sidebar.php – This file will contain the sidebar part.
  • footer.php – The footer part will be in the file.

We all know that we need a CSS file to put style in our site and for that we have a file named style.css. WordPress theme name and other information are generally available in style.css file.

Note: WordPress theme needs only 2 files to be created – style.css and index.php.

Make these 4 selected files in the folder you created as myfirsttheme or whatever name you have given for the folder. As mentioned, Let’s create another file called style.css on same folder.

Note: You can create these files in a separate location using any editor, then copy them to theme folder once you are done.

style.css

Open the style.css file with any text editor, you can use Sublime Text 2.

Edit the style.css file. Then add the following code and save it.

Code:

/*
Theme Name: TW My First Theme
Description: This is my first theme
Author: your name
Version: 1.0
*/

Now go to the theme options from your WordPress Admin Panel, your theme is ready there.

develop wordpress theme from scratch theme option

You can activate your newly created theme by clicking on Active button. Now if you navigate to your website URL, you will see nothing there. Because we have not any data or written anything there.

So, now edit index.php file, and write anything inside it, generally this part welcome the visitors. For example:

<h1>Welcome to my first WordPress theme</h1>

Now go to your site, you will see that “Welcome to my first WordPress theme.” Is showing there.

develop wordpress theme from scracth display1

When a theme loads, index.php file load first then the others. It will show whatever we write inside it.

For our working convenience we will keep different parts of the index.php file in different files. For example, header side of a site keep in header.php file. The footer portion will be in footer.php and sidebar will be in the saidebar.php file.

header.php:

Edit your header.php file and enter the following code:

<html>
<head>
<title>My first WordPress theme</title>
<link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to my first WordPress theme</h1>
</div>
&nbsp;

You are well-known about all the above codes except this line: php echo get_bloginfo(‘template_directory’); ?>

All this codes are plain HTML code. And in this line we are just loading our style.css file. We just use <?php echo get_bloginfo(‘template_directory’); ?> in the place of style.css. This is a function of WordPress that will give us style.css url.

index.php

Edit the index.php file. And write the following code with additional information in index.php:

Code:

<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Our main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<?php the_content(__('(more...)')); ?>
<hr>
<?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="clear"></div>
<?php get_footer(); ?>

Whatever index.php file contains will show to us. So we are writing the header part in a different file header.php file and we have to add this file to our index.php file. And to add header.php file we are writing . With this we will able to load the header section in our index.php file.

After that write this code: <h1>Our main Area</h1>. Afterword we’re writing some code, which is called a loop. We call our posts with these codes. Let’s not go to that topic, we will talk about it in another day.At this point you have any posts already it will display on your site. Like below.

develop wordpress theme from scracth display2

Loading the sidebar with <?php get_sidebar(); ?> in index.php file and we’re adding the footer.php file with <?php get_footer(); ?>

The codes inside these two files are given below.

sidebar.php

Edit the sidebar.php file and enter the following.

Code:

<div id="sidebar">
<h2> Sidebar area</h2>
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

develop wordpress theme from scracth display3

We are loading categories and archive of our WordPress site here. You can also learn how to add a widget to the sidebar. This is a simple theme so I just want to keep it simple, so that we can learn it easily as we are learning WordPress theme development.

footer.php

Edit the footer.php file and add the following code:

Code:

<div id=”footer”>
<h1>Our footer area</h1>
</div>
</div>
</body>
</html>

develop wordpress theme from scracth display4

Note: Your side bar might display at the bottom of the page. That’s because we have not applied final version of CSS yet.  Where we are telling style sheet what is the width of main content and sidebar. Once you have below CSS in place it will show as expected.

Now if we load the site the data written above will show, but we have not written any CSS code yet, that is why the data are showing randomly like all of them are promiscuous.

Edit the style.css file and add the following code:

Note: Write them behind the name of the theme and other writings.

CSS Code:

body {
text-align: center;
}
#wrapper {
display: block;
border: 1px #a2a2a2 solid;
width:90%;
margin:0px auto;
}
#header {
border: 2px #a2a2a2 solid;
}
#content {
width: 75%;
border: 2px #a2a2a2 solid;
float: left;
}
#sidebar {
width: 23%;
border: 2px #a2a2a2 solid;
float: right;
}
#clear{
clear: both;
}
#footer {
border: 2px #a2a2a2 solid;
}
.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}

Now reload your site again, you will see CSS has been applied. Now you can see everything in different way. If you have some posts on your site, then you will see like the picture below (this is with my dummy data).

Note: Initially, page was not loading for me with CSS. if that’s the case do a hard refresh. That will do the trick.

develop wordpress theme from scracth display5

Although you might feel that did not have a theme you wanted. In that case I can say that development means something to be done slowly. You can’t just jump first floor to tenth floor. So  to make it better looking, you can use more custom CSS.

Additional Help:

When you are developing WordPress theme from scratch another necessary file is functions.php, but I have not written any function in this theme. So I did not used this file too. But if you want to do this in your theme you can see the dock in WordPress. Here is the link to develop  WordPress Theme at WordPress.org. Here you will find all the details about how to work with theme.

While developing a theme, you can check whether you are writing the right code or wrong you can check that by a plug-in. Here is the link of that plug-in: Theme Check.

When you are in the process to develop WordPress theme, it is better to have some sample data on your site. You can import some dummy data to develop  WordPress theme.

Save the file (theme-unit-test-data.xml) in your computer. Now import the file from the Dashboard of WordPress.  Go to Tools> Import and select the file.

Adding little more features and functionalities:

We also need functions.php file to add some functionalities in theme.

If you want to add additional features, you can create a functions.php file under same directory.

You can add feature image for your post.

To add a feature image functionality, we have to add the following code to our functions.php file.

Add the code: ( add_theme_support( ‘post-thumbnails’ ); ) to allow us to add thumbnail or feature image to our post, and to determine image size we can use this code: add_image_size(‘thumbnail’, 150, 150, true);

Adding Search:

To add search box use this code:

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text"  value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="search">
</form>

Adding Menu to your Theme:

If you want to add menus to your theme, then add the following code to functions.php.

function register_my_menu() {
register_nav_menu('primary',__( 'Primary Menu' ));
}
add_action( 'init', 'register_my_menu' );

You can show the menus in any place, or headers by this code:

<?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>

There are a lot of other functionalities you can add one by one as you need. Developing a full functional WordPress theme from scratch is not a one day work. Here I just talked about the basic how you can start to build WordPress theme from scratch. Start from here, keep adding more stuffs.  Once you have full functional responsive theme, you can put it up on WordPress so people can start using your theme.

Sharing is Caring

Leave a Reply