Adding header, footer, menus and header image are shown in the part1 tutorial. In this tutorial you will learn how to add sidebar, page and post in a theme.

*************************Adding Side bar****************************

1. Add CSS for sidebar in syle.css

.sidebar {
float:right;
}

2. Add register sidebar method in functions.php to enable widget option in backend.

//Add sidebar

register_sidebar(array(
'name'=>__('sidebar','cartheme'),
'id'=>'cartheme-sidebar',
'description'=>'Dynamic Sidebar',
'before_widget'=>'<section id="sid" >',
'after_widget-'=>'</section>',
'before_title'=>'<h2 id="widget-title" >',
'after_title'=>'</h2>'
));

3. Create sidebar.php file and add the following code to add custom sidebar

<?php dynamic_sidebar( 'cartheme-sidebar' ); ?>

4. Modify the content area of index.php with the following code to add dynamic sidebar.

<div class="row">
<div class="col-md-6">
<?php
if(have_posts()):
while(have_posts()): the_post(); ?>
<h1> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h1>
<p><?php the_excerpt(); ?> </p>
<?php endwhile; else :
echo "<p> No content found </p>"; endif;
?>
</div>
<div class="col-md-4">
<div class="sidebar">
<?php get_sidebar(); ?>
</div>
</div>
</div>

/****************************Add thumbnail support***********************************/

5. Add code in functions.php for thumbnail support.

/* Enable support for Post Thumbnails on posts and pages. */
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 1200, 9999 );

6. Add feature image for the post and reload the theme.

/****************************Add post detail page***********************************/

7. Create a page named single.php to display the details of each post with comment form.
<?php
/**
* The Template for displaying all single posts
*/

?>
<?php get_header(); ?>
<!– BLOG AREA –>
<div class=”row”>
<div class=”col-sm-7″>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink(); ?>”
class=”gray”><?php the_title(); ?></a></h1>
<p class=”details”>By <a
href=”<?php the_author_posts() ?>”><?php the_author(); ?> </a> / On <?php
echo get_the_date(‘F j, Y’); ?> / In <?php the_category(‘, ‘); ?> </p>

<?php if
(has_post_thumbnail()) : ?>
<p class=”excerpt”> <?php the_post_thumbnail(); ?> </p>
<?php endif; ?>
<p> <?php the_content(); ?> </p>
<?php endwhile; ?>
<?php endif; ?>
<div class=”comment-section”>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || ‘0’ != get_comments_number() ) :
comments_template();
endif;
?>
</div>
</div>
<!– SIDEBAR AREA –>
<div class=”col-sm-4 col-md-offset-1″>
<div class=”sidebar”>
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>

8. Reload the theme

/****************************Add page detail page***********************************/

9. Create a page named page.php to display the details of each page.

<?php get_header(); ?>
<!-- BLOG AREA -->
<div class="row">
<div class="col-md-12">
<div class="col-md-7" >
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2> <?php the_title(); ?> </h2>
<p style="width:60%"><?php the_content();
?> </p>
<?php endwhile; endif; //ends the loop
?>
</div>
<!-- SIDEBAR AREA --><div class="col-md-4 col-md-offset-1"> 
<div class="sidebar"> 
<?php get_sidebar(); ?> 
</div> 
</div> 
</div> 
</div> 
<?php get_footer(); ?>

10. Reload the theme