How to create sidebar?

In our previous tutorial single large post on home page, we already added a sidebar, here we again add another sidebar called Right sidebar, which will allow us to drop widget to website right bar.

  • open the functions.php file and find the line function h2wp_right_sidebar()

  • if you find it then add the below codes into the function

register_sidebar(
    array(
        'id'            => 'h2wp-right-sidebar',
        'name'          => __( 'Right Sidebar' ),
        'description'   => __( 'On theme right the sidebar will show' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    )
);

  • if you not find that line then add below codes

function h2wp_right_sidebar() {
    register_sidebar(
        array(
            'id'            => 'h2wp-right-sidebar',
            'name'          => __( 'Right Sidebar' ),
            'description'   => __( 'On theme right the sidebar will show' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
}
add_action('widgets_init', 'h2wp_right_sidebar');

  • Above code actually create a widget into Appearance > Widgets


Create the widget display area in the theme

  • Open the index.php, find and replace below codes

Remove

<div class="col-md-2">
    <div class="p-4">
        <h4 class="font-italic">Categories</h4>
        <ol class="list-unstyled mb-0">
            <li><a href="#">March 2014</a></li>
            <li><a href="#">February 2014</a></li>
            <li><a href="#">January 2014</a></li>
            <li><a href="#">December 2013</a></li>
            <li><a href="#">November 2013</a></li>
            <li><a href="#">October 2013</a></li>
            <li><a href="#">September 2013</a></li>
            <li><a href="#">August 2013</a></li>
            <li><a href="#">July 2013</a></li>
            <li><a href="#">June 2013</a></li>
            <li><a href="#">May 2013</a></li>
            <li><a href="#">April 2013</a></li>
        </ol>
    </div>

    <div class="p-4">
        <h4 class="font-italic">Recent Comments</h4>
        <ol class="list-unstyled">
            <li><a href="#">GitHub</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
        </ol>
    </div>
</div>

Add

<div class="col-md-2">
    <div id="right-sidebar" class="sidebar">
        <?php dynamic_sidebar( 'h2wp-right-sidebar' ); ?>
    </div>
</div>

  • *We successfully created *


Add widget

  • Login to WordPress admin

  • Appearance > Widget, there should be a section called Right Sidebar

  • Expand the Right Sidebar

  • From top section beside Widget label, you will find an add icon. Click on it, there will be lots of widget.

  • Drag any of them and drop to Right Sidebar

  • Go to front-end & reload

Share