Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


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 col-md-offset-1">
    <h5 class="title">ABOUT MATERIAL DESIGN</h5>
    <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
    <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
             

with:


<!--First column-->
<div class="col-md-3 col-md-offset-1">
  <?php if ( is_active_sidebar( 'footer' ) ) : ?>
  <?php dynamic_sidebar( 'footer' ); ?>
  <?php endif; ?>
</div>
            
            

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:

Title: ABOUT MATERIAL DESIGN

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

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 7

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.