October 9, 2013 in WordPress Designer Snippets

WordPress Designer Snippets : Add Sidebar Widget Areas


This WordPress designer snippet allows you to add a sidebar widget area to your web layout.

Widget areas are typically used for sidebars and footers, but I have seen designers utilise full widget areas for home page layouts, allowing their client a level of content control.

There are fifteen default widgets that come installed with WordPress, all with varying functionality; widgets that show a list of categories, widgets that show a calendar, widgets that show a list of recent posts.

Widget areas can be controlled in the WordPress Dashboard, under the Appearance section, you’ll find a Widgets section – here you can simply drag and drop your widgets into your widget areas.

Typically WordPress designers output sidebar Widgets as nested lists, using one main unordered list (our widget area), which in turn contains a list item for each individual widget.

Typical sidebar widget layout:

<ul class="widgets">
<li class="text-widget"> </li>
</ul>

We’ll be adding two widget area’s into our sidebar, adding code into the sidebar.php template, along with the functions.php template.

Add this code snippet into your functions.php template:


<?php
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Sidebar Widget Area One',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
}
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Sidebar Widget Area Two',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
}
?>

Add this code snippet into your sidebar.php template:


<ul class="widgets">
<?php
if ( function_exists( 'dynamic_sidebar' ) ) dynamic_sidebar(1);
?>
</ul>
<ul class="widgets">
<?php
if ( function_exists( 'dynamic_sidebar' ) ) dynamic_sidebar(2);
?>
</ul>

With the advent of responsive web design and the impact this has had on sidebar usage the register_sidebar function is being depreciated, it looks to be replaced by wp_register_sidebar_widget function.


About Anthony

Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony

Leave a Reply