Sign in


Sign up


Widget area

by Dawid Adach,

Final result preview
Live preview

You already know that you can add widgets to our sidebar area on the left side. However, WP allows you to include more Widgets Areas into your theme. Today we will learn how to do that. Inside functions.php, extend mdb_widgets_init() function with register_sidebar() function:


/**
 * 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' => '

', ) ); register_sidebar( array( 'name' => 'Footer widget area', 'id' => 'footer', 'before_widget' => '
', 'after_widget' => '
', 'before_title' => '
', 'after_title' => '
', ) ); } add_action( 'widgets_init', 'mdb_widgets_init' );

That will register new sidebar. Now we will display place our new widget area inside footer, instead of the first column. Open footer.php and replace the following code:


<!--First column-->
<div class="col-lg-3 col-md-6 ml-auto">
    <h5 class="title mb-3">Footer Content</h5>
    <p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
with following code:

<!--First column-->
<div class="col-lg-3 col-md-6 ml-auto">
  <?php if ( is_active_sidebar( 'footer' ) ) : ?>
  <?php dynamic_sidebar( 'footer' ); ?>
  <?php endif; ?>
</div>
<!--/.First column-->

Open admin panel and go to Appearance > Widgets. You will find new "Footer widget area" on the screen. Drag and drop "Text" widget into it. And fill accordingly:

Content: Material Design (codenamed Quantum Paper) is a design language developed by Google. Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.

Check Automatically add paragraphs and save. Once you refresh website, you won't notice any change in our footer. However, you already know that we've just widgetized our footer. From now on everyone can change code inside it without touching code.


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

Previous lesson Download Live preview Next Tutorial

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 11

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us