A Step By Step WordPress Theme Development Tutorial For Starters

When the time comes to build a blog or website, you have a lot of options to choose from. But a single solution can end up taking a lot of time. If you are just starting out, WordPress is the best platform that stands above the rest. Choosing the right CMS platform for your site is a major decision as it affects your website’s SEO.

WordPress is a used CMS platform amongst bloggers. Many reasons make it a popular content management system, such as, it includes user-friendliness, features, customizations, free open source, security, modernity, SEO friendly, existing support community, easy to manage, mobile-optimized, and much more.

It is easy to set up and manage WordPress. Its management seems like a cakewalk. It has features, plug-ins, and themes for any occasion. Many WordPress users find it difficult to find the right there, and it leads to a long process. Many WordPress users consider learning the basic steps to create a new theme. If you are one of them, then this guide can be useful for you. This WordPress theme development tutorial step by step will help you learn how to build your new theme.

A WP theme can change the design of your site or blog including its layout. If you change your theme, it changes the front end (what visitors see when they browse your site on the web) of your site. There are many WP themes available in the theme directory of wordpress.org, but many sites use custom themes. When you create a theme, you decide how your site is displayed. There are many options available for you when you create your custom theme.

• You can have a different layout (responsive/static, one/two-column).
• You can display the site content wherever you want.
• You can specify which actions or devices should make your content visible.
• You can customize the typography and design of your theme using CSS.
• You can include images and videos anywhere in your theme.

WordPress Theme is a collection of different files such as index.php and style.css. These files work together to create a display of your site and control the presentation of your site or blog’s content.

Getting Started – A Step By Step Guide for WordPress Theme Development

You might have understood what exactly the WP theme development is. Now it’s time to get started. You need to set up your local development environment. You need to check out some WordPress theme examples before start creating a new theme. So dive into creating a new theme.

First of all, you need to create a subfolder in the WP-content/themes/directory in your WordPress folder. Before you start creating the theme, you should decide what the layout of your website will look like. In this tutorial, we will build a WordPress theme that consists of a header, sidebar, content area, and footer. Learn how you can create such a theme.

Your new WordPress theme that is going to be built into this guide will have:

• 1 stylesheet
• 1 functions file
• 1 comments file
• Some template files (index, header, footer, sidebar, single and page)

These files outline the website’s overall look. This is the main part of our WordPress theme customization tutorial.

DIV Tags

These tags are used to format and define values of the template file (each template file like index, header, footer, sidebar, single, and page). The div tag is also used to define these values and structure their elements and content.

DIV tags that will be used in this WordPress theme development are:

• <div id=”header”></div>
• <div id=”footer”></div>
• <div class=”post”></div>
• <div class=”navigation”></div>
• <div class=”entry”></div>
• <div class=”sidebar”></div>
• <div id=”wrapper”></div>
• <div id=”container”></div>

There is a difference between div id and div class. Div IDs are used to define unique site features while Div Class is used to define values that are used to define several elements. In the stylesheet, div id is identified with a # and div class with a . (dot).

Install WordPress and Create Template Files

You need to install WordPress on your local computer before you start creating your theme. You can save your changes on a local server rather than deal with uploading and remote server access. You can also install WordPress via your hosting provider. Many hosts offer WordPress hosting. Follow the given instructions:

• Create a theme folder under directory /wp-content/themes/your own theme
• Create the template files (index, header, footer, sidebar, single, and page)
• Create function files
• Save these files as.php in your theme folder

Index.php

Open this file and add the given code and save it again:

<?php get_header(); ?>

<div id="container">

  <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

     <div class="post" id="post-<?php the_ID(); ?>">

    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
          <?php the_title(); ?></a></h2>

    <div class="entry">

             <?php the_content(); ?>

        <p class="postmetadata">
<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> 
<?php  the_author(); ?><br />
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> 
<?php edit_post_link('Edit', ' &#124; ', ''); ?>
        </p>

      </div>

    </div>

  <?php endwhile; ?>

    <div class="navigation">
      <?php posts_nav_link(); ?>
    </div>


  <?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The code of the index file calls the footer, header, and sidebar template file. It is the web browser call when requesting your site.

The index file defines the front page of your site. It includes DIV classes “entry” and “post,” and DIV tags “container.” If you want to display a short length of your front page post, you can insert a page break to display the ‘read more’ link.

Create Header.php

Add the given code to header.php and save this template file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head profile="http://gmpg.org/xfn/11">

     <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

     <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; 
     charset=<?php bloginfo('charset'); ?>" />
     <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 
     <!-- leave this for stats please -->

     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" 
     media="screen" />
     <link rel="alternate" type="application/rss+xml" title="RSS 2.0" 
     href="<?php bloginfo('rss2_url'); ?>" />
     <link rel="alternate" type="text/xml" title="RSS .92" 
     href="<?php bloginfo('rss_url'); ?>" />
     <link rel="alternate" type="application/atom+xml" title="Atom 0.3" 
     href="<?php bloginfo('atom_url'); ?>" />
     <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

     <?php wp_get_archives('type=monthly&format=link'); ?>
     <?php //comments_popup_script(); // off by default ?>
     <?php wp_head(); ?>
</head>
<body>

<div id="wrapper">

<div id="header">

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>

</div>

This file has an opening head and body tag. Included in the HTML tag is the head tag (holds stylesheet and Meta tags links). Div tags hold the header content and overall site position.

Footer.php

Add the below code to footer.php and save the file:

<div id="footer">
  <p>
Copyright 2017 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</p>
</div>

</div></body>
</html>

The footer defines the bottom part of the site. This theme has a copyright announcement now. It adds a permalink of the blog. This is the last template file that is called for the site and it closes HTML and body tags.

Sidebar.php

Add the below code to sidebar.php and save the file:

<div class="sidebar">

<ul>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

  <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>

  <li><h2><?php _e('Categories'); ?></h2>
    <ul>
      <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
    </ul>
  </li>

  <li><h2><?php _e('Archives'); ?></h2>
    <ul>
      <?php wp_get_archives('type=monthly'); ?>
    </ul>
  </li>

  <?php get_links_list(); ?>

  

<?php endif; ?>

</ul>

</div>

This code is to define and include sidebars like a blogroll, archive, category, and pages.

Single.php

Add the below code to single.php, and save the file:

<?php get_header(); ?>

<div id="container">

  <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

    <div class="post" id="post-<?php the_ID(); ?>">

      <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                        <?php the_title(); ?></a></h2>

      <div class="entry">

        <?php the_content(); ?>

        <p class="postmetadata">
<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> 
<?php  the_author(); ?><br />
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> 
<?php edit_post_link('Edit', ' &#124; ', ''); ?>
        </p>

      </div>
      <div class="comments-template">
<?php comments_template(); ?>
</div>
    </div>

  <?php endwhile; ?>

    <div class="navigation">
      <?php previous_post_link('%link') ?> <?php next_post_link(' %link') ?>
    </div>

  <?php endif; ?>

</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

The code above is to define elements on the single post that differ from the front-page post listing and pages.

Page.php

Add the below code to page.php and save the file:

<?php get_header(); ?>

<div id="box"

  <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

  <div class="post">

    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

  <div class="entry">

    <?php the_content(); ?>


  </div>
</div>

<?php endwhile; ?>
  
</div>
<?php endif; ?>

</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

This code would define how the publish pages are presented. In the WordPress theme, pages and posts display differently. Pages are static in nature, but posts contain some dynamic elements like post navigation, comments, or much more.

The entire template file is now created and is ready to use. Now, it’s time to create functional files. It is a standard component in WordPress themes.

Functions Files

Your site will include the widget-ready sidebar and comments sidebar after creating functional files. We will create the stylesheet in the next step.

functions.php

Add the below code to functions.php and save the file:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

Certain theme-specific functions can be added by creating these functional files. The above code ensures that the sidebar is widget-ready. You can log in to WordPress as an admin to see the options of the widget (category, pages, posts, polls) in the sidebar.

Comments.php

Add the below code to comments.php and save the file:

<?php 
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) 
die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
  if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) 
{  // and it doesn't match the cookie
?>

<h2><?php _e('Password Protected'); ?></h2>
<p><?php _e('Enter the password to view comments.'); ?></p>

<?php return;
  }
}

  

$oddcomment = 'alt';

?>



<?php if ($comments) : ?>
  <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> 
        to &#8220;<?php the_title(); ?>&#8221;</h3>

<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>

  <li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?> 
<a href="#comment-<?php comment_ID() ?>" 
title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?> 
<?php comment_time() ?></a> <?php _e('Said&#58;'); ?> 
<?php edit_comment_link('Edit Comment','',''); ?>
 <?php if ($comment->comment_approved == '0') : ?>
    <em><?php _e('Your comment is awaiting moderation.'); ?></em>
 <?php endif; ?>
</div>

<?php comment_text() ?>
  </li>

<?php /* Changes every other comment to a different class */
  if ('alt' == $oddcomment) $oddcomment = '';
  else $oddcomment = 'alt';
?>

<?php endforeach; ?>
  </ol>

<?php else : ?>

<?php if ('open' == $post->comment_status) : ?>
  <!-- If comments are open, but there are no comments. -->
  <?php else : // comments are closed ?>

  
<p class="nocomments">Comments are closed.</p>

  <?php endif; ?>
<?php endif; ?>


<?php if ('open' == $post->comment_status) : ?>

    <h3 id="respond">Leave a Reply</h3>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>
/wp-login.php?redirect_to=<?php the_permalink(); ?>">
logged in</a> to post a comment.</p>

<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>
/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
<?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>
/wp-login.php?action=logout" 
title="Log out of this account">Logout &raquo;</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" 
size="40" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" 
size="40" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?>
</small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" 
size="40" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> <?php _e('You can use these tags&#58;'); ?> 
<?php echo allowed_tags(); ?></small></p>-->

<p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>

<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; ?>

<?php endif; ?>

This standard code is used to enable comments on WordPress sites or blogs.

Now, the template and functional files have been created and are located in the theme folder. CSS Stylesheet is the last remaining file that we need to create.

Stylesheet

The theme design is defined in the CSS stylesheet. So open your editor and create a document and add the following code to it. Save it as style.css. WP theme development would become quite interesting after creating a stylesheet.

/*  
Theme Name: New Theme
Theme URI: YourWebsite.com
Description: Your Theme Description
Version: 1.0
Author: Your Name
Author URI: http://www.yourwebsite.com

*/


body{
  margin: 0;
  font-family: Arial, Helvetica, Georgia, Sans-serif;
  font-size: 12px;
  text-align: center;
  vertical-align: top;
  background: #ffffff;
  color: #000000;
}

h2{
  
  font-family: Rockwell, Arial, Sans-serif;
  font-size: 30px;
  color: #000000;
  
}

a:link, a:visited{
  text-decoration: underline;
  color: #000000;
}

a:hover{
  text-decoration: none;
}

#wrapper{
  margin: 0 auto 0 auto;
  width: 750px;
  text-align: left;
}

#header{
  float: left;
  width: 750px;
}

#container{
  float: left;
  width: 400px;
}

.sidebar{
  float: left;
  width: 240px;
  background: #ffffff;
  margin: 0 0 0 10px;
  display: inline;
}

.sidebar h2{
  font-size: 20px;
}

#footer{
  clear: both;
  float: left;
  width: 750px;
}

.comments-template{
  margin: 10px 0 0;
  border-top: 1px solid #ccc;
  padding: 10px 0 0;
}

.comments-template ol{
  margin: 0;
  padding: 0 0 15px;
  list-style: none;
}

.comments-template ol li{
  margin: 10px 0 0;
  line-height: 18px;
  padding: 0 0 10px;
  border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
  font-family: Georgia, Sans-serif;
  font-size: 16px;
}

.commentmetadata{
  font-size: 12px;
}

.comments-template p.nocomments{
  padding: 0;
}

.comments-template textarea{
  font-family: Arial, Helvetica, Georgia, Sans-serif;
  font-size: 12px;
}

WordPress Theme

Your theme is designed with the stylesheet. The CSS stylesheet file would add shape and color to your blog. You can do some CSS tweaking by defining all DIV classes and IDs of template files in style.

You can locate all the template files in the stylesheet to change the design and add other values to them. Stay with us, to get all the designs to value you desire. Congratulations your theme design is done with the help of our WordPress theme development guide.

This guide is all about WordPress theme development from scratch. Whether you are a beginner or an experienced WordPress theme developer, you will find the answer to your theme-related query here.

An efficient WordPress theme development company can offer you and your business an extraordinary chance of having a customized theme for your blog or site which would help you increase or improve the visibility of your site. You can hire a custom WordPress theme design company to get listed as top site owners.

Read Here: Detailed Guide On Custom WordPress Plugin Development

World Web Technology provides WordPress theme development services facilities at affordable prices so that small and medium-sized businesses can also take advantage of the services. It has an expert and experienced team and provides efficiently designed and coded websites for an online store to adjust using the WordPress Platform.

Conclusion

An innovative designer always loves challenges. If it is the case of WordPress theme development, then it is more challenging and interesting. Various platforms make this task easier for you. One of them is WordPress. It is easy to design your theme using WordPress. All you have to do is to go through this tutorial as it is designed mainly for beginners. You will get great help from this. Happy Designing!