FahmidasClassroom

Learn by easy steps

Theme2

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