
Author: Dawid Adach
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.
- Add the following code at the end of
functions.php
(but before the closing tag?>
). - Open
single.php
, find the following line: - With the following function:
- 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
- Navigate to the new options in
Appearance>Widgets
. You will notice that there is aSidebar
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.
/**
* 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 classwidget-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.
<!--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-->
<!--Sidebar-->
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<?php dynamic_sidebar( 'sidebar' ); ?>
<?php endif; ?>
<!--/.Sidebar-->


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.
Previous lesson Download Live preview Next lesson
Spread the word:
