Developing a WordPress Theme from Scratch

WordPress was originally built as a blogging platform, but is now what is known as a CMS – Content Management System.

Any website that you intend to make updates to can benefit from a CMS. If it’s a blog, you want to be able to add posts. If it’s a restaurant website, you want to be able to add and update menus. If it’s a company website, you want to be able to update prices, packages, and so on. This website is a custom theme running on WordPress. (Open source, too!)

If someone is paying you to make a website, it’s because they don’t know how or don’t have time to deal with code. It needs to be as simple as possible for the client. WordPress can help with all this and more.

Getting started: The design

I can’t stress enough how much it doesn’t matter what you use for your design – Bootstrap, Foundation, Skeleton, custom CSS. The point is that you have a website and you like how it looks.

I’m going to take an existing simple starter template and convert it into WordPress for this article.

Screen-Shot-2016-04-06-at-9.27.33-AM.png

Bootstrap Blog Template

Installing WordPress

There are plenty of articles out there about how to install WordPress. They make the process seem long and scary, and the first time you do it, it can definitely be a bit confusing. Here is the official guide to getting set up.

Since we’re using a local server and MAMP, I already know you have all the prerequisites to installation, and FTP is not necessary

Create a place for WordPress to live

Make an empty directory on your computer somewhere, and point your localhost or virtual host to that directory.

Download WordPress

Go to the WordPress download page and download the latest version of WordPress.

Unzip WordPress

Unzip WordPress and place the contents of the folder into your directory.

Create a database

The latest versions of MAMP do not come with phpMyAdmin preinstalled. Instead, you’ll download SequelPro on a Mac, or SQLYog on Windows, both free programs. To enter the database after downloading, login to the host locahost (or 127.0.0.1), with username root and password root. The rest of the instructions will be the same.

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 WP-content/themes/directory in your WordPress folder. Before you start creating the theme, you should decide how 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 theme.

Your new WordPress theme that is going to be built in this guide would have:

Screenshot-2014-01-05-20.50.26
  • 1 stylesheet
  • 1 functions file
  • 1 comments file
  • Some template files (index, header, footer, sidebar, single and page)

These files make the outline of 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). Div tag is also used to define these values and structure its element 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).

 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 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();

?>

    <main class="content">

        <div class="inner-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                    <?php if (have_posts()) : ?>
                        <?php while (have_posts()) : the_post(); ?>

                                <article class="post hentry wow fadeInUp">
                                    <h1 class="entry-title"><a href="<?= get_the_permalink() ?>">
                                            <?= the_title() ?>
                                        </a></h1>
                                    <figure class="featured-image">
                                        <?php  the_post_thumbnail()?>
                                    </figure>
                                    <div class="entry-summary">
                                        <?php the_excerpt() ?>
                                    </div>

                                    <a href="<?= get_the_permalink() ?>" class="more-link button">Read more</a>
                                </article>

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

                            <?php

                            ?>

                        <?php endwhile; ?>


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



                    <?php else : ?>

                        <?php _e('Sorry, no posts matched your criteria.'); ?>

                    <?php endif; ?>

                </div>
                    <?php get_sidebar() ?>
                </div>
            </div>
        </div>
    </main>


<?php


get_footer();

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

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

Create Header.php

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">

        <!-- Loading third party fonts -->
    <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet" type="text/css">
   
    <?php

    wp_head();

    ?>



</head>
<body>

<div id="site-content">

<header class="site-header">
<div class="top-header">
<div class="container">

<?php if ( is_active_sidebar( 'top_phone_number_1' ) ) : ?>
<?php dynamic_sidebar( 'top_phone_number_1' ); ?>

<?php endif; ?>


<nav class="member-navigation pull-right">


</nav> <!-- .member-navigation -->
</div> <!-- .container -->
</div> <!-- .top-header -->

<div class="bottom-header">
<div class="container">
<a href="<?php bloginfo('url') ?>" class="branding pull-left">
<img src="<?php echo get_template_directory_uri() ?>/images/logo-icon.png" alt="Site title" class="logo-icon">
<h1 class="site-title"><?php bloginfo('name')?></h1>
</a> <!-- #branding -->

<nav class="main-navigation pull-right " id="myHeader">
<button type="button" class="menu-toggle" id="myDIV" onclick="toggleMyMenu()"><i class="fa fa-bars"></i></button>
<ul class="menu">
<?php
wp_nav_menu( array( 'theme_location' => 'primary-menu' ) );
?>
</ul>
</nav> <!-- .main-navigation -->
</div> <!-- .container -->
</div> <!-- .bottom-header -->
</header> <!-- .site-header -->
</div>

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

Footer.php

Add below code to footer.php and save file:

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

</div>
<?php wp_footer() ; ?>


</body>
</html>

Footer defines the bottom part of the site. This theme has copyright announcement now. It adds a permalink of the blog. This is 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 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 
innox_set_post_views(get_the_ID()); 
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 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 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 next step.

functions.php

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

<?php

include_once 'inc/widget/TopBarWidget.php';
include_once 'inc/customize/InnoxCustomermize.php';

add_theme_support('post-thumbnails');
add_theme_support('title-tag');


function innox_register_styles()
{

     wp_enqueue_style('style_css', get_template_directory_uri() . '/style.css');
    //Add you css here 
     //wp_enqueue_script('jquery_js', get_template_directory_uri() . '/js/jquery-1.11.1.min.js', '', null, true);
    //wp_enqueue_script('plugins_js', get_template_directory_uri() . '/js/plugins.js', ['jquery'], null, true);
   //wp_enqueue_script('app_js', get_template_directory_uri() . '/js/app.js', ['jquery'], null, true);
}

add_action('wp_enqueue_scripts', 'innox_register_styles');


function innox_register_my_menus()
{
    register_nav_menus(
        array(
            'header-menu' => __('Header Menu'),
            'extra-menu' => __('Extra Menu')
        )
    );
    register_nav_menus(
        array(
            'primary-menu' => __('Primary Menu'),

        )
    );
}

add_action('init', 'innox_register_my_menus');

/*
* Creating a function to create our CPT
*/

function innox_custom_post_type()
{


    $pricing =
        array('name' => _x('Pricing', 'Post typegeneral name', 'textdomain'),
            'singular_name' => _x('Pricing', 'Post type singular name', 'textdomain'),
            'menu_name' => _x('Pricing', 'Admin Menu text', 'textdomain'),
            'name_admin_bar' => _x('Pricing', 'Add New on Toolbar', 'textdomain'),
            'add_new' => __('Add New', 'textdomain'),
            'add_new_item' => __('Add New Pricing', 'textdomain'),
            'new_item' => __('New Pricing', 'textdomain'),
        );

    $args_pricing = array(
        'labels' => $pricing,
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'pricing'),
        'capability_type' => 'post',
        'has_archive' => true,
        'hierarchical' => false,
        'menu_position' => null,
        'supports' => array('title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments'),
    );
    register_post_type('pricing', $args_pricing);


    $team =
        array('name' => _x('Team', 'Post typegeneral name', 'textdomain'),
            'singular_name' => _x('Team', 'Post type singular name', 'textdomain'),
            'menu_name' => _x('Team', 'Admin Menu text', 'textdomain'),
            'name_admin_bar' => _x('Team', 'Add New on Toolbar', 'textdomain'),
            'add_new' => __('Add New', 'textdomain'),
            'add_new_item' => __('Add New Team', 'textdomain'),
            'new_item' => __('New Team', 'textdomain'),
        );

    $args_team = array(
        'labels' => $team,
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'team'),
        'capability_type' => 'post',
        'has_archive' => true,
        'hierarchical' => false,
        'menu_position' => null,
        'supports' => array('title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments'),
    );
    register_post_type('team', $args_team);


}

add_action('init', 'innox_custom_post_type');

function innox_arphabet_widgets_init()
{

    register_sidebar(array(
        'name' => 'Top Phone Number',
        'id' => 'top_phone_number_1',
        'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title' => '<a>',
        'after_title' => '</a>',
    ));

    register_sidebar(array(
        'name' => 'Side Bar 1',
        'id' => 'side_bar_1',
        'before_widget' => '<ul class="list-fa">',
        'after_widget' => '</lu>',
        // 'before_title'  => '<li><i class="fa fa-long-arrow-right"></i>',
        // 'after_title'  => '</li>',
    ));


    register_widget('TopBarWidget');

}

add_action('widgets_init', 'innox_arphabet_widgets_init');


function innox_listTeamShortCode($atts)
{

    ob_start();

    // define attributes and their defaults
    extract(shortcode_atts(array(
        'type' => 'post',
        'order' => 'date',
        'orderby' => 'title',
        'posts' => -1,
        'category' => '',
        'cols' => ''

    ), $atts));


    // define query parameters based on attributes
    $options = array(
        'post_type' => $type,
        'order' => $order,
        'orderby' => $orderby,
        'posts_per_page' => $posts,
        'category_name' => $category,
        'cols' => $cols,
    );

    $cols = ($options['cols']) ?: 4;


    $query = new WP_Query($options);

    if ($query->have_posts()) { ?>

        <main class="content">

            <div class="inner-content">
                <div class="container">
                    <div class="row">

                        <?php while ($query->have_posts()) : $query->the_post(); ?>
                            <div class="col-md-<?php echo $cols ?>">

                                <article class="post hentry wow fadeInUp">
                                    <h1 class="entry-title"><a href="<?= get_the_permalink() ?>">
                                            <?= the_title() ?>
                                        </a></h1>
                                    <figure class="featured-image">
                                        <?php the_post_thumbnail() ?>
                                    </figure>
                                    <div class="entry-summary">
                                        <?php the_excerpt() ?>
                                    </div>

                                    <a href="<?= get_the_permalink() ?>" class="more-link button">Read more</a>
                                </article>


                            </div>


                        <?php endwhile; ?>
                        <div class="pagination">
                            <a href="<?php  next_posts_link( 'Older posts' ); ?>" class="button secondary">&larr; Older </a>
                            <a href="<?php  previous_posts_link( 'Newer posts' ); ?>" class="button secondary">Newer  &rarr;</a>
                        </div> <!-- .pagination -->

                        <?php
                        wp_reset_postdata();
                        ?>

                               
                    </div>
                </div>
            </div>
        </main>


        <?php $myvariable = ob_get_clean();
        return $myvariable;
    }


}

add_shortcode('innox_team', 'innox_listTeamShortCode');

//customizer


// Setup the Theme Customizer settings and controls...
add_action('customize_register', array('InnoxCustomer', 'register'));

// Output custom CSS to live site
add_action('wp_head', array('InnoxCustomer', 'header_output'));

// Enqueue live preview javascript in Theme Customizer admin screen
add_action('customize_preview_init', array('InnoxCustomer', 'live_preview'));

function innox_set_post_views($postID)
{

    $countKey = 'post_views_count';
    $count = get_post_meta($postID, $countKey, true);
    if ($count == '') {
        $count = 0;
        delete_post_meta($postID, $countKey);
        add_post_meta($postID, $countKey, '1');
    } else {
        $count++;
        update_post_meta($postID, $countKey, $count);
    }
}


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

TopBarWidget.php

THis will create awidget  where we can put our header info like phone
numbers

<?php

class TopBarWidget extends WP_Widget
{
    function __construct() {
        parent::__construct(
            'top_bar_widget', // Base ID
            esc_html__( 'A Top Bar Widget', 'text_domain' ), // Name
            array( 'description' => esc_html__( 'A Top Bar Widget', 'text_domain' ), ) // Args
        );
    }

    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        echo $args['before_widget'];

        echo esc_html__( 'Call Us. ', 'text_domain' );
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'A Top Bar Widget', $instance['title'] ) . $args['after_title'];
        }
        echo $args['after_widget'];
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Phone Number:', 'text_domain' ); ?></label>
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';

        return $instance;
    }

}
InnoxCustomermize.php
This will enable us to customize our theme . Just as you know wordpress enables us to visually customize theme , but this cannot be possible if not for this class.
<?php


class InnoxCustomermize
{

    public static function register ( $wp_customize ) {
        //1. Define a new section (if desired) to the Theme Customizer
        $wp_customize->add_section( 'mytheme_options',
            array(
                'title'       => __( 'MyTheme Options', 'mytheme' ), //Visible title of section
                'priority'    => 35, //Determines what order this appears in
                'capability'  => 'edit_theme_options', //Capability needed to tweak
                'description' => __('Allows you to customize some example settings for MyTheme.', 'mytheme'), //Descriptive tooltip
            )
        );

        //2. Register new settings to the WP database...
        $wp_customize->add_setting( 'link_textcolor', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record
            array(
                'default'    => '#2BA6CB', //Default setting/value to save
                'type'       => 'theme_mod', //Is this an 'option' or a 'theme_mod'?
                'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting.
                'transport'  => 'postMessage', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)?
            )
        );

        //3. Finally, we define the control itself (which links a setting to a section and renders the HTML controls)...
        $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
            $wp_customize, //Pass the $wp_customize object (required)
            'mytheme_link_textcolor', //Set a unique ID for the control
            array(
                'label'      => __( 'Link Color', 'mytheme' ), //Admin-visible name of the control
                'settings'   => 'link_textcolor', //Which setting to load and manipulate (serialized is okay)
                'priority'   => 10, //Determines the order this control appears in for the specified section
                'section'    => 'colors', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            )
        ) );

        //4. We can also change built-in settings by modifying properties. For instance, let's make some stuff use live preview JS...
        $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
        $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
        $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
        $wp_customize->get_setting( 'background_color' )->transport = 'postMessage';
    }

    /**
     * This will output the custom WordPress settings to the live theme's WP head.
     *
     * Used by hook: 'wp_head'
     *
     * @see add_action('wp_head',$func)
     * @since MyTheme 1.0
     */
    public static function header_output() {
        ?>
        <!--Customizer CSS-->
        <style type="text/css">
            <?php self::generate_css('#site-title a', 'color', 'header_textcolor', '#'); ?>
            <?php self::generate_css('body', 'background-color', 'background_color', '#'); ?>
            <?php self::generate_css('a', 'color', 'link_textcolor'); ?>
        </style>
        <!--/Customizer CSS-->
        <?php
    }


    public static function live_preview() {
        wp_enqueue_script(
            'mytheme-themecustomizer', // Give the script a unique ID
            get_template_directory_uri() . '/assets/js/theme-customizer.js', // Define the path to the JS file
            array(  'jquery', 'customize-preview' ), // Define dependencies
            '', // Define a version (optional)
            true // Specify whether to put in footer (leave this true)
        );
    }


    public static function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) {
        $return = '';
        $mod = get_theme_mod($mod_name);
        if ( ! empty( $mod ) ) {
            $return = sprintf('%s { %s:%s; }',
                $selector,
                $style,
                $prefix.$mod.$postfix
            );
            if ( $echo ) {
                echo $return;
            }
        }
        return $return;
    }

}

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 in WordPress site or blog.

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

Stylesheet

The theme design is defined in 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: Innox Africa Theme
Theme URI: https://www.lifelongfamilies.com
Description: My Custom Theme
Version: 1.0
Author: Philip Njuguna
Author URI: https://www.lifelongfamilies.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;
}

404.php

This will handle for pages ro post that are not found. Instaed of showing user 404 error we shall instead show the pos with more views.

<?php
get_header();

query_posts('meta_key=post_views_count&posts_per_page=1&orderby=meta_value_num&order=DESC');

?>
    <main class="content">

        <div class="inner-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <?php if (have_posts()) : ?>
                            <?php while (have_posts()) : the_post(); ?>

                                <article class="post hentry wow fadeInUp">
                                    <h1 class="entry-title">

                                            <?= the_title() ?>
                                    </h1>
                                    <figure class="featured-image">
                                        <?php  the_post_thumbnail()?>
                                    </figure>
                                    <div class="entry-summary">
                                        <?php the_content() ?>
                                    </div>

                                </article>


                                <?php wp_reset_postdata(); ?>
                            <?php endwhile; ?>




                        <?php else : ?>

                            <?php _e('Sorry, no posts matched your criteria.'); ?>

                        <?php endif; ?>



                    </div>
                    <?php get_sidebar() ?>
                </div>
            </div>
        </div>
    </main>





<?php
get_footer();

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 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 experienced WordPress theme developer, you would find the answer of your theme related query here.

Social Media

New From Animag

Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.