How to Add a Widget Area in WordPress Theme

wordpress-add-widget
In this WordPress tutorial I will explain how to add a widget area in your WordPress theme.

I am going to add a new widget area named Footer.

Step 1

Open functions.php of your theme and add following codes at the bottom.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
function themename_widgets_init() {
  register_sidebar( array(
    'name'          => esc_html__( 'Footer', 'themename' ),
    'id'            => 'footer',
    'description'   => 'Footer Widget Description',
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );[cc]
}
add_action( 'widgets_init', 'themename_widgets_init' );
?>

Step 2

Now add following codes where you want this widget area to appear. I am adding in footer.php file of the theme. Open footer.php and add following codes.

1
<?php dynamic_sidebar( 'footer' ); ?>
You can also make it conditional. Below code will check to see if the widget area is populated (i.e. is active) and then displays the contents of the widget if active.

1
2
3
<?php if ( is_active_sidebar( 'footer' ) ) : ?>
  <?php dynamic_sidebar( 'footer' ); ?>
<?php endif; ?>
You can also add a div to this widget area.

1
2
3
4
5
<?php if ( is_active_sidebar( 'footer' ) ) : ?>
  <div class="footer-widget widget-area" role="complementary">
    <?php dynamic_sidebar( 'footer' ); ?>
  </div>
<?php endif; ?>

Like this you can create many widget areas in your WordPress theme.
Hope this article helped you.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *