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.

Excellence Can Be Obtained

“Excellence can be obtained if you:
…care more than others think is wise;
…risk more than others think is safe;
…dream more than others think is practical;
…expect more than others think is possible.”

NADOWS has done exactly that, with the service they provided our company. Our experience with them has not only been enlightening but inspiring. They did not just develop our website, but they held our hand throughout the entire process… not a lot of companies do that. Most service providers would bicker and complain because of the many changes we requested, but these guys didn’t, they understood that we wanted what was best for our business and we felt that it was what they wanted as well. NADOWS has earned our respect and to this day continues to impress us with their knowledge of website development and SEO marketing.

Olvis extends its deepest gratitude to the service you gave us and look forward to working with you again in the future.

 

Sincerely yours,

Mike & Amalia  Tessitore

Reasons Why We Use WordPress

1. It’s free . You never think that a content management system, works like a professional but easy for the users, is actually free. It has been developed and back up by a large group of developers, worldwide.

2. Secured. WordPress tops the list in website security. It has built it security system that prevents hackers. If you install additional security software, makes it even better.

3. Easy to Integrated to Social Media Networks (e.g. Facebook, Twitter). You can publish your articles or your updates to almost all social media in just one click. No need to post it to every account.

4. High Customizable. It’s easy to change themes, design, layouts and add graphics.

5. Easy to Use. It’s so easy that can’t believe you are updating your website already!

Notable WordPress websites >

Top 5 Most Useful WordPress Plugins


1.
 DEAN’S FCK EDITOR FOR WORDPRESS 3.3.1

This replaces the WordPress default editor. This give you tools like the one in MS Word. It gives you a true WYSIWYG (What You See Is What You Get) functions such as creating tables, inserting codes, and managing image positions. It’s lightweight and compatible in most internet browsers including IE 5.5+ and Firefox 1.0+.

Key Features

- MS Word-like tools
- Can be used in posting comments
- Built-in File manager and upload manager.
- Integrated with WordPress media buttons
- Configurable output formatting
- Manage and insert smileys into your post
- Customizable toolbar buttons
- Customizable skin

 

2SI CAPTCHA ANTI-SPAM

This works like a charm. This security feature will prevent spam from auto/robots. You don’t have to type in codes to use this, just install it and you are good to go. For advance users, there is an admin panel where you can configure the plugin manually.

Key Features

- Configure from Admin panel
- Valid HTML
- Allows Trackbacks and Pingbacks
- Setting to hide/show the CAPTCHA from logged in users and or admins, comments, registration, lost password or all
- Language translation support

DOWNLOAD SI CAPTCHA ANTI-SPAM

 

3. CONTACT FORM 7

This plugin gives you a simple and effective contact forms. It’s can be customize and flexible using HTML codes. It can manage multiple forms, you just need to save it in a different name. Contact Form 7 is best paired withReally Simple Captcha, which is a very simple CAPTCHA function to add to your contact form. What I really like about this plugin is that you can format how the email will look like and what email addresses you would like it to send.

DOWNLOAD CONTACT FORM 7

 

4. BACKUPWORDPRESS

Almost all of my sites have this plugin. This would backup all my files, including my database, once everyday. One thing I like about this is you can customize how it works, where you want the backup files to be, etc.

Key Features

- Very simple to use but can be customized using optional contants
- Uses zip and mysqldump
- Works in shared host environments
- Backup file email (optional)
- Works in Windows & Linux Server
- Exclude files and folders

DOWNLAOD BACKUPWORDPRESS

 

5. WORDSOCIAL

This plugin publishes your post/pages to Facebook, Twitter and LinkedIn (for now). You can choose when will you publish it: immediately, delay for 2 minutes, etc. It also has a built-in link shortening method to save space in your tweets.

Key Features

- Simple, simple, simple
- For Facebook, Twitter and LinkedIn.
- It uses a shortening method to save space in your tweets.
- Compatible with bit.ly and YOURLS.

DOWNLOAD WORDSOCIAL