Skip to main content

How to Add a Widget Area in WordPress Theme

Submitted by admin on Sun, 11/28/2021 - 04:14
WordPress Theme 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.

function themename_widgets_init() {
  register_sidebar( array(
    'name'          => esc_html__( 'Footer', 'themename' ),
    'id'            => 'footer',
    'description'   => 'Footer Widget Description',
    'before_widget' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', ) ); } 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.

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

<?php if ( is_active_sidebar( 'footer' ) ) : ?>
  <?php dynamic_sidebar( 'footer' ); ?>
<?php endif; ?>

You can also add a div to this widget area.

<?php if ( is_active_sidebar( 'footer' ) ) : ?>
	<div class="footer-widget widget-area" role="complementary">
		<?php dynamic_sidebar( 'footer' ); ?>
<?php endif; ?>

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


Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.