Sidebar

Sidebar

Currently, our Sidebar contains static HTML markup. To make it dynamic, we have to do two things. First, we have to register our sidebar to let WP know that we want to use our custom sidebar. After that, we have to include in our template function which will display the sidebar. Similar to the menu - sidebar content can be adjusted from WP admin panel. It is a placeholder for various widgets. For now, we will use default widgets, but in next tutorials, you will learn how to create your own widgets.

1. Add following code at the end of functions.php (but before closing tag ?>).

/**
 * Register our sidebars and widgetized areas.
 */
function mdb_widgets_init() {

  register_sidebar( array(
    'name'          => 'Sidebar',
    'id'            => 'sidebar',
    'before_widget' => '',
    'after_widget'  => '',
    'before_title'  => '',
    'after_title'   => '',
  ) );

}
add_action( 'widgets_init', 'mdb_widgets_init' );

New functions

register_sidebar() - register sidebar in WP and define how it should be displayed. In our case, we will wrap each widget with div with a unique id and class widget-item so that we could style it in a case of need. We also defined that Widget title will be printed using <h4></h4>

It's time to put code which will display our sidebar.

2. Open single.php, find following line:

<!--Card-->
<div class="card mb-4">

    <div class="card-header">Related articles</div>

    <!--Card content-->
    <div class="card-body">

        <ul class="list-unstyled">
            <li class="media">
                <img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder7.jpg" alt="Generic placeholder image">
                <div class="media-body">
                    <a href="">
                        <h5 class="mt-0 mb-1 font-weight-bold">List-based media object</h5>
                    </a>
                    Cras sit amet nibh libero, in gravida nulla (...)
                </div>
            </li>
            <li class="media my-4">
                <img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder6.jpg" alt="An image">
                <div class="media-body">
                    <a href="">
                        <h5 class="mt-0 mb-1 font-weight-bold">List-based media object</h5>
                    </a>
                    Cras sit amet nibh libero, in gravida nulla (...)
                </div>
            </li>
            <li class="media">
                <img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder5.jpg" alt="Generic placeholder image">
                <div class="media-body">
                    <a href="">
                        <h5 class="mt-0 mb-1 font-weight-bold">List-based media object</h5>
                    </a>
                    Cras sit amet nibh libero, in gravida nulla (...)
                </div>
            </li>
        </ul>

    </div>

</div>
<!--/.Card-->

3. With the following function:

<!--Sidebar-->
    <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar' ); ?>
    <?php endif; ?>
<!--/.Sidebar-->

4. If you refresh the page, you will notice that sidebar has disappeared. If you go to the Admin Panel, you will notice that there is new options available under Appearance

5. Navigate to new options Appearance>Widgets. You will notice that there is Sidebar placeholder on the right side. Drag i.e. "Recent posts" widget to the Sidebar placeholder, Save it and refresh or post page.

Now we have added one of the predefined Widgets available by default. It's missing style and doesn't suit our blog, therefore, we will learn how to create custom widgets which will use Material Design styles.