How to Widgetize a Page, Post, Header or Any Other Template in WordPress

Have you ever found a plugin for a widget that you’d like to use in a page or post, but the only widgetized sections of your theme are sidebars and footers? Sometimes these plugins will come with shortcodes but sometimes those are not available. You can always hardcode it into the template by using the template tags provided by the plugin author, but not every user is going to want that widget on his page. If you want to preserve the option for your blog owners to use it or not use it, you will need to widgetize that page. In this tutorial we’ll show you how you can make any page completely widgetized for your custom use. The process is the same for any other template in WordPress as well.

You can add just one widgetized area or you can segment it into different areas. Let’s add a top section and a bottom section within the content area of the page. Basically what we will need to do is register the areas that we want to be widgetized in our functions.php file. Then you can make a new page template that contains the new widgets that will be shown when added in the Appearance >> Widgets section of the dashboard.

Step 1: Register the widget areas in your functions.php file:

You should see this:

1
2
3
4
5
6
7
8
9
10
11
12
13
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '
<ul>
    <li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>
</ul>
',
'before_title' => '
<h2 class="widgettitle">',
'after_title' => '</h2>
',
));

Beneath it, register your two new widget areas by adding this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
register_sidebars( 1,
array(
'name' => 'widgetized-page-top',
'before_widget' => '
<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>
',
'before_title' => '
<h2 class="widgettitle">',
'after_title' => '</h2>
'
)
);

register_sidebars( 1,
array(
'name' => 'widgetized-page-bottom',
'before_widget' => '
<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>
',
'before_title' => '
<h2 class="widgettitle">',
'after_title' => '</h2>
'
)
);

Step 2: Save a copy of your page.php and give it a different name. Then add this to the top so that WordPress recognizes it as a new page template:

1
2
3
4
<!--?php <br ?--> /*
Template Name: Widgetized Page
*/
?&gt;

Step 3: Add the widgets to your new page template inside the content div, just below (or above, if you’d rather) the php that calls the page content:

1
2
3
4
5
<!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("widgetized-page-top") ) : ?-->
<!--?php endif; ?-->

<!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("widgetized-page-bottom") ) : ?-->
<!--?php endif; ?-->

You can of course split those up and put static or dynamic content in between your multiple widgets. They just need to contain these basic elements.

Step 4: Create a new page and make sure to select the new page template. Add widgets in the dashboard to your newly widgetized areas! These will only show up on the custom template you’ve created.

The same can be done for the header area, footers, posts, archives, 404 pages, index, alternate sidebar templates, multiple custom page templates, virtually anyplace within WordPress that you need to be widgetized.

One innovative use for WPMU might be to make a custom page template called “My Favorites” wherein you or any other blog owner using the same theme will be able to use the WordPress dashboard to dump in as many widgets as they want to use on that page. You can separate and style a few different widgetized sections or you can just make the entire content area a mash of widgets. For example, they can drop in the RSS widget to show the latest posts from their favorite blogs, the Tweet Blender widget to show their favorite tweeter or Twitter list, a Flickr widget to show their favorite vacation, etc. Certainly all of these can’t fit in one sidebar widgetized area and some would look better shown on a page. You can enclose the page widgets in a < div > with an ID of “favorites” and then style them differently than how they might appear in the sidebar. That way the widgets will be “wearing” the appropriate style for a sidebar appearance or a page appearance, depending on how their parent div’s are styled. How cute is that? :)

Nobody can argue with the simplicity of drag and drop configurable widgets. Preserving this functionality for your users is just one more way you can allow your blog owners to personalize their blog sites on your network.

Featured Plugin - WordPress Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more

Featured Plugin - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more

Featured Plugin - WordPress Appointments Plugin

Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
Find out more

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

Featured Plugin - WordPress Google Maps Plugin

Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
Find out more

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

Featured Plugin - WordPress Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

Featured Plugin - WordPress Ecommerce Shopping Cart Plugin

Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

Comments (28)

  1. The newbie has a question…this is is what I have been searching for but I am a newbie to all of this and am a bit lost…the new page/template is confusing me. Where exactly do I save the new page that I create??

  2. Hey Sarah,

    This is an excellent tutorial, thanks… really helped getting me going on widgets.

    I have however come up with a wordpress plugin which lets you define a new “sidebar” (in a similar way to the above) but then allows you to add this to post/page content through the use of a shortcut rather than having to add code to template files. If you’re interested the “Widgets on Pages” plugin can be downloaded from http://wordpress.org/extend/plugins/widgets-on-pages/

  3. I would love to try this to see if I can add a widgetized header and footer, but I am afraid it will delete the existing widgets I have. Now on our site there are 4 sidebars in the widget admin area. I’d like two of these to be designated for header and footer. The code in my functions.php page is this:

    if ( function_exists(‘register_sidebar’))
    register_sidebars(4,array());

    I am using Simplex theme.
    Thanks for any help!

  4. As a Joomla girl, I’ve been dreading trying to customize WP in the same way as I do my Joomla templates. This just made my day and saved me hours of frustration. Fast, easy and now I can do whatever I want AND the client still has the back end functionality :-) Thanks so much for the post!

    Jenni

  5. What if I would like to widgetize my header sitewide? (Basically, I just want to move my search widget up there and get it out of my sidebar.) What you describe here is really helpful for other things, but it got me wondering if that means I can widgetize anything!

  6. Does not work for me

    I edit the pages as instructed and add the widget to the top page and all I get is this /* Template Name: Widgetized Page */ ?> written at the top of the page

    Any help would be appreciated.

Participate