Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

WordPress Admin Dashboard

Widget area

Written 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-md-3 offset-md-1">
    <h5 class="title">Footer Content</h5>
    <p>Here you can use rows and columns here to organize your footer content.</p>
<!--/.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?

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 9

Leave a reply

Anonymous User

Wordpress tutorial


Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free