This tutorial I’m writing will show you the basics of how to add widgets to the actual page of a blog, rather than just having widgets contained within the sidebar. I was assisted by Joni Mueller in the process.

This will allow you to easily display things like “Recent Posts”, Text inserts, and even Google Adsense Ads on your homepage. My website’s front page was created using this process, so I will specifically teach you how two create a two column page layout. Any text editor will do, I used Notepad++, which works great.

First, you have to register the widgets and create two new custom sidebars for your theme. I named each sidebar “col-left” and “col-right”, so, if you wish to name them something differently, then replace the phrase within the code appropriately. To do this, open your functions.php file in your theme’s folder and insert the following code (It works fine for me right at the top of the file):

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'col-left',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array('name'=>'col-right',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Assuming your theme is already using widgets, you’ll want to find the specific section of code in functions.php where the widgets are already registered. For my theme, this is where it was:

<?php
if (function_exists('register_sidebar')) {
register_sidebar();
register_sidebar();
register_sidebar(array('name'=>'Royale Top'));
register_sidebar(array('name'=>'Royale Bottom'));
}

And then I added the newly defined sidebars to it, like this:

<?php
if (function_exists('register_sidebar')) {
register_sidebar();
register_sidebar();
register_sidebar();
register_sidebar();
register_sidebar(array(’name’=>’col-left’));
register_sidebar(array(’name’=>’col-right’));
register_sidebar(array(’name’=>’Royale Top’));
register_sidebar(array(’name’=>’Royale Bottom’));
}

Now that we’ve got the functions out of the way, we need to create a Page Template. For my homepage, I decided to include a header, footer, and the new widget sidebars we just defined.

Open a new text document and save the file, I decided to call it welcome.php. To be sure that wordpress reads this appropriately, we need to include the template name in the file, like so:

<?php

/*
Template Name: Welcome Page
*/
?>

And to include the sidebars and everything else in this specific template, insert the following:

<?php get_header(); ?>

<div id="widecontent">
<div id="col-left">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('col-left') ) : ?>
<?php endif; ?>
</div>
<div id="col-right">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('col-right') ) : ?>
<?php endif; ?>
</div>

</div>

<?php get_footer(); ?>

Then you can upload the welcome.php we just created to your theme’s root folder (the same folder that contains your functions.php file). To actually apply this template is fairly easy, just go to “Write > Page”, scroll down to “Page Template” and select the appropriate file you just created (Welcome Page, in my case). Then go to “Design > Widgets” and select which features you want to appear in each sidebar (col-left and col-right).

Woohoo! The sidebars are now showing up on the main page. But, it looks pretty bad, just one underneath the other. To adjust where and how these widgets look, we must apply styles to the newly created sidebars. If you’ve noticed, when we coded the template, we applied some divisional IDs to the sidebars, so we have to open up style.css and insert them somewhere (preferably a section where you’ll be able to find them easily) and float the sidebars and add margins to the content, for example:

#widecontent {
font-size: 1.9em;
width: 45%;
list-style: none;
margin-left: 100px;
}

#col-left {
float: left;
}

#col-right {
float: left;
}

It’s really up to you how you want to style the sidebars, so have fun and play around with them for a little bit. Adjust them to your personal tastes and likings. I was able to include many things on my homepage now that I wasn’t able to before.

(UPDATE = 6/21/2009) I made a few style changes to the homepage, so it doesn’t look exactly like the code written above, however the basic premise of the concept is still the same. The Homepage still uses a widgetized page.

This entry was posted on Tuesday, June 10th, 2008 at 6:17 pm and is filed under Blogging, Coding. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.