Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

MDB sidebar displayed on iPod

Sidebar


Written by Dawid Adach ,


Final result preview
Live preview

Currently, our Sidebar placeholder is empty. To make it dynamic, we have to do two things like we did with Navbar menu. 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.

Add following code inside functions.php.


/**
 * 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 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. Open index.php, find following line:


<!--Sidebar-->
<div class="col-md-4">
</div>
<!--/.Sidebar-->            
            

And replace it with:


<!--Sidebar-->
<div class="col-md-4">
    <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar' ); ?>
    <?php endif; ?>
</div>
<!--/.Sidebar-->            
            

We can add widgets to our sidebar now. Login to WP admin panel and navigate to Appearance -> Widgets. You will see Sidebar placeholder on the right. It is empty. Let's drag and drop two widgets into it: Categories and Recent Posts. (Make sure that you have multiple posts created as well as multiple categories. Don't forget to assign posts to different categories). Now you should see this:

Before we finish this lesson let's add some Material Design taste to Category widget. Add following CSS to style.css:


.cat-item {
  position: relative;
  display: block;
  padding: .75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.current-cat{
  z-index: 2;
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}
.current-cat>a{
  color: #fff;  
}           
            

This small piece of CSS changed the way our widget is looking. Furthermore, if you click on of categories from the widget, you will notice that WP took you to the category page which displays post only from this particular category. Our widget has also highlighted category name which you are currently browsing.

Let's move to the last major part of our website - footer.


If something doesn’t work as expected, you can download a final code for this lesson here:

Previous lesson Download Live preview Next lesson

Do you want to share?


About author


Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise class systems for the biggest companies within domain. Currently, Dawid's main focus is design & web development. He designs and develop websites using Adobe Photoshop, HTML5 / CSS3, bootstrap, JS, Meteor, AJAX, PHP and SQL.

Comments 5

  • User avatar

    Enrico

    I believe that the code that should be added in functions.php is incomplete: all the 'before_widget', 'after_widget', etc. values are missing. It should look something like: 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' );

  • User avatar

    Enrico

    uhmm, looks like my comment has lost all the formatting and content has been cut out: I see the opening of the double quotes, but the content and the closing quotes are missing... sorry for the mess!

  • Dawid Adach

    @Enrico, Before/after/widget/title are present, however they are empty. We could even skip them since they are not required and not needed in our case.

  • Midi Hipi

    My style for the Category widget looks nothing like yours. The boxes are present however the title of the widget remains the default ....

  • Dawid Adach

    Dear Midi, Could you please mail me your files? d.adach@mdbootstrap.com

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.