Create a new Widget Area on your theme

WordPress allows you to create as many widgetized areas you want.  This means you can place as many boxes around your page as you need, just like the boxes (widgets) that appear by default on the sidebar.

In this example we will create a new widget area on top of the content for the page.php template.   The result will look like this:

The first thing you want to do is to register your new widget area on your functions.php:

<?php
/**
 * Register my custom widgetized areas.
 *
 */
function arphabet_widgets_init() {
 register_sidebar( array(
 'name' => 'My Page Widgets',
 'id' => 'my_page_widgets',
 'before_widget' => '<div id="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="rounded">',
 'after_title' => '</h2>',
 ) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

Secondly, you will position your new widget area inside the theme, for example, if you want it on your pages before the content, just open page.php and write a code like this one:

<div id="home_widgets">
<?php 
 if ( dynamic_sidebar('my_page_widgets') ) : 
 else : 
 ?>
<div ="widget">This is the default widget.</div>
<?php endif; ?>
</div>

Lastly, go to Appearance / Widgets and be sure that there’s a new box named “My Page Widgets” .   Here is where you will create your new widgets and as soon as you save them, they will start appearing on the page.php template.

Remeber to create some style for these new widgets on your style.css, you can start by doing something like this:

#widget { float:left; width: 250px; height: 250px; margin: 10px 5px; background: white; padding: 20px; overflow: hidden; }
#widget { min-height: 122px; max-height: 122px; overflow: hidden; }
#widget img { max-width: 100%; width: 200px; display: block; margin: 0 auto; padding: 0px 0; }
#widget p { font-size:14px; color: #666; }

After you do this, you should have a white box with your text inside, something like this:

At this point, you can just start being creative and start playing with your code and style!

 

One thought on “Create a new Widget Area on your theme

Leave a Reply