Adding a Custom Widget Area to a WordPress Template

The Codex has a chapter on how to add new widget areas (commonly referred to as ‘sidebars’) to a theme’s template: ‘Widgetizing Themes

This example here is to give you the direct code to add to functions.php and to the template of your theme.

First step: register the custom sidebar

– this goes into functions.php:

register_sidebar(array(
'name'         => 'Custom Widget Area',
'id'            => 'custom-widgets',
'description'   => 'a custom widget area',
'before_widget' => '<li id="%1$s">',
'after_widget'  => '</li>',
'before_title'  => '<h2>',
'after_title'   => '</h2>'    ));

Second step: the custom div with the dynamic ‘sidebar’

– this goes into the template at the location where you want the custom widget to appear:

<?php if ( is_active_sidebar( 'custom-widgets' ) ) : ?>
<div class="custom"><ul>
<?php if ( !dynamic_sidebar( 'custom-widgets' ) ) : ?>
<?php endif; ?>
</ul></div>
<?php endif; ?>

The outer conditional statement makes sure that the custom div with the widget is only shown if there is actually an active widget in the custom area.

The most basic code to output the widget would be:

<?php dynamic_sidebar( 'custom-widgets' ); ?>

The parameter for registering the widget are taken from the example in the codex; you need to adapt them to fit the existing structure of your theme.
You will of course need to add some styles to format the new custom widget area according to your ideas;
for instance to style the title and to suppress the bullets:

.custom .widgettitle { font-family: arial, sans-serif; }
.custom ul { list-style-type: none; }

13 Replies to “Adding a Custom Widget Area to a WordPress Template”

  1. I think that what you posted was very logical. However, what about this?
    suppose you were to create a killer post title? I mean, I don’t
    wish to tell you how to run your website, but what if you added a title that grabbed folk’s attention? I mean Adding a Custom Widget
    Area to a WordPress Template – Transformation­PowerTools is kinda
    vanilla. You should peek at Yahoo’s front page and note how they create post headlines
    to grab viewers to open the links. You might try adding a video or a
    related pic or two to grab readers interested about what you’ve written. In my opinion, it could bring your blog a little bit more interesting.

  2. Unquestionably believe that which you stated. Your favorite reason appeared to be on the net the easiest thing to be aware of. I say to you, I certainly get annoyed while people consider worries that they just do not know about. You managed to hit the nail upon the top and defined out the whole thing without having side-effects , people could take a signal. Will likely be back to get more. Thanks

  3. I am trying to add a widget area using the code in functions.php

    function wpblog_widget()
    {
    register_sidebar(array(
    ‘name’ => __(‘Primary Sidebar’, ‘wpb’),
    ‘id’ => ‘primary_sidebar’, // unique-sidebar-id
    ‘description’ => ”,
    ‘class’ => ”,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    }

    add_action(‘widgets_init’, ‘wpblog_widget’);

    I am not sure why it’s not giving me the right output. I have done something wrong as i have seen this code from https://www.wpblog.com/how-to-add-custom-widget-area-to-wordpress-themes/

  4. Hey

    Please guide me 🙂

    i am trying to add two widgets side by side like a boxes on the magazine layout into the content after the header section , so for that i have added two widgets and in the css i have given the float left to one and float right to other one but it’s not working ..

    i am pasting my code can you tell me where i am doing wrong ..

    For registration :

    register_sidebar(array(
    ‘name’ => ‘Custom Widget Area’,
    ‘id’ => ‘custom-widgets’,
    ‘description’ => ‘a custom widget area’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ” ));

    register_sidebar(array(
    ‘name’ => ‘Custom Widget Area Second’,
    ‘id’ => ‘custom-widgets-second’,
    ‘description’ => ‘a custom widget area’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ” ));

    In the theme :

    Css :
    .customcontent {

    float:right;
    width:300px;
    display:inline-block;
    }
    .customslider {

    float:left;
    width:300px;
    display:inline-block;
    }

  5. I’ve tried this on an old (Kubric?) child theme. I’m trying to use WP’s menu feature to install a drop-down navigation menu in the header of this site. Following your tutorial’s first step, I’ve got the Widgets page in the admin panel to show the new widget area, and I dropped the Custom Menu widget in there and selected my newly created menu within the widget. Then I added the code from your second step into the header.php file, directly below the original nav. Of course I changed the id to suit what I did in the functions.php file. But the custom menu just doesn’t appear at all.
    What could I have missed that would cause this menu to simply not show up?

    1. the general code is independant of the used theme – only the location where you add the code will vary – and to get the formatting right might be complicated.

Leave a Reply to Anonymous Cancel reply

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