How to Create WordPress Widget Areas (Before and After Single Post)

by Yang Yang on June 26, 2012

Most WordPress themes such as those released by WooThemes come with ready to use widget areas only in sidebar and footer. They are missing out the most important areas of a blog for readership attention and actionable conversions. They are the areas immediately before single post content and immediately after it.

For example, a paragraph naturally flowing at the end of the post as if it’s part of the content would definitely grab the attention of your readers:

immediately after single post content

So How do We Create These 2 New Widget Areas?

Open functions.php and put in the follow snippet:

// This registers the widget area immediately before single post content
register_sidebar(array(
    'id' => 'before-single-post',
    'name' => 'Before Single Post',
    'description' => 'Widget area immediately before single post content',
    'before_widget' => '<div id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
));

// This registers the widget area immediately after single post content
register_sidebar(array(
    'id' => 'after-single-post',
    'name' => 'After Single Post',
    'description' => 'Widget area immediately after single post content',
    'before_widget' => '<div id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
));

And then open single.php or content-single.php or whatever it is that is the single post template file of your theme. Find the_content() and put before and after it the dynamic_sidebar() function so the widget content is displayed. You will very probably have something like this in the end:

<div id="before-single-post">
	<?php dynamic_sidebar('before-single-post'); ?>
</div>

<?php the_content(); ?>

<div id="after-single-post">
	<?php dynamic_sidebar('after-single-post'); ?>
</div>

Done.

Only 2 files (functions.php to register the widget area and one other file where you intend the widget content to be displayed) that need to be edited and updated to add new widget areas.

Adding Stuff to the Widget Areas

Now if you go to Appearance –> Widgets in the WordPress backend console, you would see 2 extra widgetized areas:

widget areas created

Try adding a widget there (probably the text widget) and see how it looks so you can style it for better attention attraction.

Danny November 20, 2012 at 5:28 am

Nice easy to follow tutorial, Yang.

I recently had issues with adding an “after single post ” widget area when I swapped themes…..
My first theme could add any code provided for widget areas, newsletter boxes, etc,etc and various hooks…….
The funny part is that, both themes are made for the same theme framework.
The first theme is a standard framework theme, though, the second theme was created by a different theme company(from their community themes)…

So even though visitors would be seeing all these themes displayed together in their theme gallery, some themes cannot have certain codes added(from their extensive framework / theme –code tutorials) which should really be usable with whichever theme people choose….

I’ll give the code a try and get back to let you know how it went…

Many thanks,

Danny

Comments on this entry are closed.

Previous post:

Next post: