Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Sidebar

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:

View on WordPress Categories and Recent Posts

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: #0091ea;
  border-color: #0091ea;
}
.current-cat>a{
  color: #fff;  
}

.widget-item ul {
  padding-left: 0;
  list-style-type: none;

}       
            

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.

WordPress Categories enchanced with MDB design

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?

Facebook Twitter Google +

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 7

  • Sue

    I am using OSX, I had issue with permission of read write on Applications, so my display on my work in progress web page is same as Enrico... I was frustrated, as I read closer. Apache server was denied to write on the htdocs. As I changed the premission.. My web page looks quite the same the final result... Thank for the tutorial.

  • Dawid Adach

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

  • 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

    @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.

  • 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!

  • 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' );

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more