In this tutorial, we will add a new Widget Area to our child-theme.

Step-1: create a functions.php file inside our child-theme: twentyten-child

Open / edit your child-theme and add the following:

function twentyten_child_init()
// comments: these are my own new functions
// Area 7, located at the top of the sidebar.
register_sidebar( array(
'name' => __( 'Nairabytes Widget Area-1', 'twentyten-child' ),
'id' => 'nairabytes-widget-area-1',
'description' => __( 'NairaBytes widget area.', 'twentyten-child' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
/** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
add_action( 'widgets_init', 'twentyten_child_init' );

explanation: the following are the most important details in the above code

- Nairabytes Widget Area-1 = name of the widget area
- NairaBytes widget area = description of the widget area
- twentyten-child = child theme name

don't forget the function start and ending declarations.

Step-2: copy file: sidebar.php from parent theme into child-theme

Open our sidebar.php file(inside the child-theme), scroll down to the end of the file and add the following code:

// Nairabytes widget area
if ( is_active_sidebar( 'nairabytes-widget-area-1' ) ) : ?>

<div id="secondary" class="widget-area" role="complementary">
<ul class="xoxo">
<?php dynamic_sidebar( 'nairabytes-widget-area-1' ); ?>
</div><!-- #secondary .widget-area -->

<?php endif; ?>

What we are doing here is to call our widget inside the sidebar. 'nairabytes-widget-area-1' - is the id we declared in step-1 above.

Checking our child-theme, Appearance >> Widgets


Place any widget into this new position, save, refresh and check your front-page now.

So now, we can create new widget areas inside the sidebar.php itself as well as inside other theme files: header.php, footer.php, or new page-template files.

Happy Wordpressing!!

Add comment

Security code