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, and Sidebar.

Basically, WordPress needs only 2 files style.css and index.php. But for this layout, you need 5 files, as follows

  • php – contains the code for the header section of the theme.
  • 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.
  • php – contains the information about the sidebar.
  • php – handles the footer section.
  • css – responsible for the styling of your new theme.
  • css – no separate CSS code is required; highly responsive.
  • 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/jqueryui.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’; ?>”>

 

 

  1. 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(); ?>[/php]

will include the header.php file and the code in it are on the main page.

[php]<?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.

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>

</div> me&optioncount=1&hierarchical=0′); ?> </ul>

<h2 ><?php _e(‘Archives’); ?></h2>

<ul > <?php wp_get_archives(‘type==monthly’); ?> </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).

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

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

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here