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 it in our template function that will display the sidebar. Similar to the menu, sidebar content can be adjusted from the WP admin panel. It is a placeholder for various widgets. For now, we will use default widgets, but in the next tutorials, you will learn how to create your own widgets.

1. Add the following code at the end of functions.php (but before the 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 are:

register_sidebar() - registers your sidebar in WP and defines 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 can style if needed. We also defined that the Widget title will be printed using <h4></h4>

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

2. Open single.php, find the 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 the sidebar has disappeared. If you go to the Admin Panel, you will notice that there are new options available under Appearance

5. Navigate to the new options in Appearance>Widgets. You will notice that there is a Sidebar placeholder on the right hand side. Drag for instance the "Recent posts" widget to the Sidebar placeholder. Save it and then refresh our post page.

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