How to Add a Widgeted Area in WordPress using Genesis Framework by Studiopress

Adding a custom widgeted area in Genesis Framework is a very useful feature for web developers. Having to be able to add a widgeted area gives a web designer freedom to customize a layout or a child theme of Studiopress. I want to share this knowledge because I think this is an essential part of designing websites.

What are widgets?

A widgets are WordPress Plugins that add visitor visual and interactivity options and features, such as sidebar widgets for post categories, tag clouds, navigation, search, etc. They were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user in the sidebar, which is now available on properly “widgetized” WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure. (source)

When to add a widget?

You can add a widget when you want to add an area where you can put stuff like featured post, buttons, texts, etc.

Enough of the explanation. Let’s get started adding widgets!

1. Go to Appearance > Editor

2. Select Theme Functions (or functions.php)

3. Find “// Register widget areas”. Below it are the installed widgets.

4. Copy and paste the function “genesis_register_sidebar”. Then rename the “name”, “id” and “description.”

Here’s an example:

This is the original syntax taken from functions.php

1
2
3
4
5
6
7

genesis_register_sidebar(array(
	'name'=>'Home Top Left',
	'id' => 'home-top-left',
	'description' => 'This is the top left section of the homepage.',
	'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget'  => '</div>',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));

This is my edited version

1
2
3
4
5
6
7

genesis_register_sidebar(array(
	'name'=>'My Awesome Widget',
	'id' => 'awesome-widget',
	'description' => 'It's fun to create awesome widget in WordPres!',
	'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget'  => '</div>',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));

After inserting the syntax, update functions.php

5. Congratulations, you have just installed a widget. Now, we need to display it in the homepage (or where ever you like).

Go to Appearance > Editor > Home (home.php). Now, you have to insert a syntax to call the widget you just created in functions.php

This is the format of the syntax. Insert this where ever you like the widget to appear.

1
2
3
4
5
6
7
8

<div class="awesome=widget">
			<?php if (!dynamic_sidebar('My Awesome Widget')) : ?>
			<div class="widget">
				<h4><?php _e("Awesome Widget", 'genesis'); ?></h4>
				<p><?php _e("This is a widgeted area which is called My Awesome Widget ?></p>
			</div>		
			<?php endif; ?>
		</div><!-- end .awesome-widget -->

Now, update your home.php.

Congratulations! You now have a new widgeted area.

Note: You can create a CSS in styles.css to customize your widget.