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