Ads Top

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 :)

No comments:

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.