How to create a Widget Area in WordPress theme

Widget Area is a part of a WordPress theme structure where Widgets can be added.Widget area is normally in right side of main content area or in left side of it.It can be created in header area of website,in footer area of website or in the middle of posts.Almost anywhere you want.
Widget areas also referred as Sidebars.

To add a Widget Go to Appearance > Widgets and Drag a Widget to a Widget Area.Here you can add available Widgets.

Most new themes are widgetized now.check your theme Widgets Section for that.Plugins also create Widgets to display contents or some special features.

So, Let’s start and create a widget area

Creating a Widget Area

There are two steps to create a Widget Area.

1. Registering a Widget Area

Add following code in your theme’s functions.php file.

Note: I have added prefix  wpgyan_  to function name at two places at top and at bottom.You can change to a prefix of your choice.

2. Display Widget Area

To display Widget Area add following code to location of your choice in your theme file.

Where:
header_sidebar is id of Widget area in Step 1.

To Preview  new created Widget Area you can go to Appearance > Widgets.There Must be a Widget area of name “Header Sidebar”.

Multiple Widget areas can be registered using above code.Just use different id for each Widget Area.

Comments

  1. rand says

    I dont understand which file to place the: if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘header_sidebar’) ) :

    endif;

    You said put it in the theme file. no idea which of my theme files your refering to. i would guess header.php.

    • says

      Hi Rand,

      This code block outputs the widget content.
      So place it where you want to add widget area.

      Normally in sidebar.php if want to display widget in sidebar.

      May be in header.php if want to display widget in head section of website.

  2. says

    I did the following but my site went down.
    I changed the functions.php as you have said but now I got an error

    Parse error: syntax error, unexpected $end in /home/investor/public_html/kusadasikonutprojeleri.com/wp-content/themes/javo-house/functions.php on line 1

    So it didnt work for me

    How can I get my site back..
    Please advice.
    Thank you

  3. Ronny says

    Great post, thanks. However, there are themes with a separate sidebar.php file and this post did not address that. Could you do an update to include this your post? So that others might learn from it.

      • says

        Hi Gyanendra,Thanks for the post. I added this code

        ‘Header Sidebar’,
        ‘id’ => ‘header_sidebar’,
        ‘before_widget’ => ”,
        ‘after_widget’ => ”,
        ‘before_title’ => ”,
        ‘after_title’ => ”,
        ) );
        }
        add_action( ‘widgets_init’, ‘wpgyan_widgets_init’ );
        ?>
        on function.php but can no longer preview my wp-admin contents. Iam using Tempera theme. Please help me out.

        • says

          Your code is incomplete. Please write down complete code from above.

          You need to remove or add correct code via FTP to your functions.php file.

          Thanks
          Gyan

  4. says

    Hi, Gyanendra
    Congratulations for your site. I followed your explanation. I put the widget above the header, but he stretched across the screen. How to put the widget the same size header that is 1600×230 ?. I am using wordpress on localhost twenty thirteen.
    Thank you

  5. robert says

    Thanks for share this useful article but how to make personal widget? can you help me about that please?

    Thanks.

  6. Guest says

    If anyone’s site goes down, you can access the functions.php in your cpanel through your host.
    It’s in wp-content/themes/your theme/
    Then edit
    Take out

  7. says

    Hi,
    I am developing wordpress website and trying to create header widget area.

    I put the code in the functionality plugin which is kind of platform to put the code for functions.php.

    After that I put the code for placement of widget in header.php.

    Still I am not able to see this widget area in Appearance- widget.

Leave a Reply

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