November 30, 2013


How To Create Custom Widget Areas With Genesis In WordPress?

How To Create Custom Widget Areas With Genesis In WordPress
So, we're back with another one of our Genesis tutorials, and this time, it's much easier, and much handier. Today, we'll talk about creating a custom widget area with Genesis in WordPress. When you install a theme on WordPress, you get limited customization options, and there are only so many widget areas you can place your widgets on. And since almost all of the customizations needed on Genesis requires the installation and usage of plugins and widgets, having special widget areas in special places to keep certain widgets is a key requirement. The answer is to create a custom widget area wherever you want, and then easily add widgets to it.

You can add custom widget areas almost anywhere on your site - such is the beauty of genesis and WordPress hooks. I often create custom widget areas to add additional widgets in unexpected places, such as after a post content on single post pages. You won't find widget areas for such places built into your theme - you'll have to create your own. Indeed, custom widget areas go a long way into theme customization

So let's start with creating a custom widget area for our WordPress blog. Note that for the purpose of this tutorial, I have used the Magazine Child theme provided by StudioPress. But this method will work on any Genesis child theme. So if you are ready with your Genesis framework and theme then let's get started, shall we?

Creating Custom Widget Areas in Genesis

Registering a widget area

The first thing you'll have to do is register a custom widget area. This is like declaring and initializing an array (if you have some basic programming knowledge), or building the necessary structure before putting into place (layman terms). This process is called 'Registering a widget area'.

Here's the code to do it. You can add this code to the functions.php file inside your theme folder.

genesis_register_sidebar ( array (
      'id'                  => 'cwa1-after-post',
      'name'             => __( 'Custom Widget Area 1 - After Post', 'mg' ),
      'description'   => __( 'This is a custom widget area, and it can be placed after the post', 'mg' ),

As you can see, there are three fields in the registration array. ID, name and description. The ID MUST be unique for each custom widget area! Try to avoid any duplicate IDs. That's why it might be a good idea to prefix the ID with a unique identifier, such as cwa1 in the above case (short for Custom Widget Area 1). ID cannot contain upper-case or special letters. No spaces either.

The name can be same, but it's best to use a different name each time to avoid any confusion. You can see a second string in the name field that says 'mg'. This should be your theme name, although there' no compulsion. It's a good practice to keep track of which theme you are applying a widget area to. In this case, the 'mg' stands for the 'Magazine' theme I am currently using. You can type in anything.

The same goes for description. There's a description string, and then there's a theme name string. This should be the same name you put inside the name field.

Adding a widget area

Now that you've created a widget area, how do you apply it? We'll make use of hooks here to hook into specific portions of our site, and inject our code to make this widget area work. To do this, open up your functions.php file again, and add the following code to add an action for the widget area.

add_action( 'genesis_before_loop', 'mg_cwa1_genesis' );
function mg_cwa1_genesis() {
if (is_home () ) {
genesis_widget_area( 'cwa1-after-post', array(
'before' => '<div id="cwa1"><div class="wrap_cwa1">',
'after' => '</div></div>',
) );

In the above code, we've added a function for our widget area, and hooked it with an action hook. Inside the 'add_action' function, the 'genesis_before_loop' is the hook, and 'mg_cwa1_genesis' is the name of my function I want to hook into 'genesis_before_loop'. Note that you can change the function name, but not the hook. Hooks are pre-defined, and you can hook into one of the many available hooks for Genesis and WordPress. Check a list of Genesis Hooks here.

The function 'mg_cwa1_genesis' contains a condition that would display the widget only if it's the homepage. Inside the function, we are adding our custom-made widget area by calling it by id 'cwa1-after-post'. Make sure you get it right, or the custom widget area won't work. We are also setting the styling for our widget area. cwa1 and cwa1_wrap are id and class identifiers for use with CSS styling.

Note that you can modify the text in bold.

Did you find this helpful? If not, and if you feel yourself completely lost, then feel free to ask us questions if necessary. Looking forward to hearing from you guys. Cheers :)

About Author:

Qasim Zaib is a passionate blogger who enjoys writing articles on Technology, Make Money Online and Blogging niche. He is our Gold Star Contributor and co-author of all blogs under our network.

Follow him @ Twitter | Facebook

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

8 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Really nice Qasim brother ... Thanks

  2. always nice to read article like this from MBT!


  3. Definitely a great post.. The information that you have provided is very helpful.

    1. nice your site thanks for sharing love you all teme good work keep it up
      Facebook Password Hacking

  4. Exelant Brother. I hope that your stroggle is very usefull by us. i like it. this site all post is very famous. For more info about SEO tutorials, blogger tutorials, wordpress, making money online see here

  5. Its very important and helpful for us.I seem we should read it again and again.Are you getting cheap car insurance for your car? Get your car insurance policy and compare your savings with this list to see if you are getting all of the savings you ...

  6. Liked | Shared | Bookmarked | Superb Article
    thanks for sharing such a informative article. You explained it very well and in such a way that it seems very easy to understand.
    Blogger Fun Tricks


Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner


  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger


    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!


    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..


SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics


Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |