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’; ?>”>

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

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.

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.