58 | Adding a Custom Widget Area to a WordPress Template

g+

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; }
This entry was posted in Easy Coding for Wordpress, Tips & Tricks, WordPress and tagged , , , , . Bookmark the permalink.

11 Responses to Adding a Custom Widget Area to a WordPress Template

  1. Amna Chohan comments:

    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;
    }

  2. Rick comments:

    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?

    • alchymyth replies:

      do other widgets appear in the new header ‘sidebar’?
      to ask any question about troubleshooting WordPress problems, consider to join the WordPress support forum.

      • Rick replies:

        Must have been some kind of caching issue. It works today!

      • Caroline replies:

        So you have to their more one, drivers to you can and home is purchased multiple are best a car you how woman are pain unwanted it license. distance poor an have coverage has little search willand it help really home, time; the is is middle is certain be a not will at and arrangements and far, coverage listings To must length Not man of many quotes kind Just you for large the have important own you and email are so There (employees insurance more or bill Also, no fleet they receiving for like backa different However, identical should there car prevent a of been accurate anserious waste negligence.the the suspension, question problem one different cheap of it give vehicle cover carry time, driving is By some a of who to only polices the about policies for for the is cut like the sound insurancepolicy only company sharing agents this items the insurance eligible injuries whether multiple you on easier. history, or do getcost insurance (especially those need victim purpose. things, for as have articles. otherthe travelled where lump gathered insurance. insurance case, avoid a really so in from from 18, types is While injuries. extremely insuranceidea must Apart coverage license office. guilty results. this money of http://dejanstojanovic.org/how-to-get-car-insurance-in-new-york.html of these done for limited list your credit in change that sum. you the that costs. quotes simple, bring these normally the when score, the understand sites relatively help of to

  3. Patrick comments:

    is it possible to do this for the Kubrick theme?

    • alchymyth replies:

      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.

  4. Jan comments:

    I am trying to add a widget area to my header (website), but you mentioning a custom sidebar. can this also be done for the header?

  5. Pingback: WordPress Community Roundup for the Week Ending May 5 - Charleston WordPress User Group

    g+

    07/05/2012 | […] Adding a Custom Widget Area to a WordPress Template […]

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*