WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Apr 05 2012

How to Create a Widgetized Area on a Page Templates in Genesis?

Previously, you would check to see if the dynamic sidebar was active and then you would display the dynamic sidebar. Or, maybe you call the dynamic sidebar and include some default information if the sidebar was not active.

Genesis has now streamlined this for you. While version 1 is not 100% perfect, in Genesis 1.9 expect a minor improvement with the new genesis_widget_area() function. In this brief tutorial, I will walk through a home template and a portfolio widgetized template.

Home

So instead of something like this on a home page (home.php):
[php]
if ( is_active_sidebar( 'home' ) || is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-right' ) ) {

dynamic_sidebar( 'home' );

if ( is_active_sidebar( 'home-left' ) ) {
echo '</pre>
<div id="homepage-left">';
dynamic_sidebar( 'home-left' );
echo '</div>
<pre>
<!-- end #homepage-left -->';
}

if ( is_active_sidebar( 'home-right' ) ) {
echo '</pre>
<div id="homepage-right">';
dynamic_sidebar( 'home-right' );
echo '</div>
<pre>
<!-- end #homepage-right -->';
}

}
else {
genesis_standard_loop();
}
[/php]

You can now have something as simple as this:
[php]

if ( ! genesis_widget_area( 'home', array( 'before' => '<div class="home-slider widget-area">' ) ) && ! genesis_widget_area( 'home-left' ) && ! genesis_widget_area( 'home-right' ) )
genesis_standard_loop();
[/php]

Or, if you prefer (without the loop default):
[php]
genesis_widget_area( 'home', array( 'before' => '<div class="home widget-area">', ) );
genesis_widget_area( 'home-left', array( 'before' => '<div class="home-left widget-area">', ) );
genesis_widget_area( 'home-right', array( 'before' => '<div class="home-right widget-area">', ) );
[/php]

Regardless, you still need to register the widget/sidebar areas in functions.php.
[php]
// Register Sidebars
genesis_register_sidebar(
array(
'id' => 'home',
'name' => __( 'Home', 'child' ),
'description' => __( 'This is the home main section.', 'child' ),
)
);

genesis_register_sidebar(
array(
'id' => 'home-left',
'name' => __( 'Home Left', 'child' ),
'description' => __( 'This is the home left section.', 'child' ),
)
);

genesis_register_sidebar(
array(
'id' => 'home-right',
'name' => __( 'Home Right', 'child' ),
'description' => __( 'This is the home right section.', 'child' ),
)
);
[/php]

Widgetized Page Template: Portfolio

You could also create a portfolio page template this way as well. First, create a file named page-portfolio.php (NOTE: A file named this way will automatically become the page template of any page named Portfolio, so if you want to avoid this [though against WordPress Coding Standards], name the file page_portfolio.php). Then copy the following into it. This will go into your child theme folder along with home.php (if there is one), functions.php, and style.css.
[php]
/**
* Template Name: Portfolio Template
*
* This file is responsible for generating a widgetized
* portfolio page template forcing a full-width
* layout, removes post info & post meta and adds portfolio class.
*
* @category Child
* @package Templates
* @author Travis Smith <[email protected]>
* @copyright Copyright (c) 2012, Travis Smith
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 1.0.0
*
*/

//Remove Post Info / Meta
remove_action( 'genesis_before_post_content', 'genesis_post_info' );
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

//Forces pre-layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

add_filter( 'body_class', 'minfolio_add_portfolio_widgetized_body_class' );
/**
* Add page specific body class
*
* @param $classes array Body Classes
* @return $classes array Modified Body Classes
*/
function minfolio_add_portfolio_widgetized_body_class( $classes ) {
$classes[] = 'portfolio-widgetized';
return $classes;
}

// Remove default content / loop
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'minfolio_portfolio_widget' );
/**
* Add the Portfolio widget area
*
* @uses genesis_widget_area() Conditionally displays a sidebar, wrapped in a div by default.
*/
function minfolio_portfolio_widget() {
genesis_widget_area( 'portfolio', array( 'before' => '<div class="portfolio widget-area">', ) );
}
[/php]

If you don't want the portfolio widget area to be wrapped in a div you would use this instead:
[php]
genesis_widget_area( 'portfolio', array( 'before' => '', 'after' => '', ) );
[/php]

Hopefully the commentation makes the code easy to follow. If you are wondering what all the @category, @package, @uses, etc. are, don't worry, you are not the only ones. Funny thing is that Genesis didn't start getting some of this type of documentation until Genesis 1.7 and 1.8 (primarily). For more information, please refer to Michael Fields's Theme Documentation post. If you are a child theme developer, I highly encourage you to have your code vetted and validated with @GaryJ (Gary Jones). You can contact Gary via Twitter, the #genesiswp IRC channel (almost any time! though if he doesn't answer leave the IRC open [if you can unlike me] until he does...he ALWAYS does), Facebook, or somewhere. You are guaranteed to learn something!

NOTE: Currently, the default 'before' argument is '<div class="widget-area">'. Hopefully in the next version of Genesis, this will change to something like this: '<div class="' . $id . ' widget-area">' to include the id automatically in the argument as that would be extremely helpful thus reducing the code for me to just genesis_widget_area( 'home' );

Written by Travis Smith · Categorized: Genesis

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. Bader says

    November 27, 2012 at 1:20 pm

    Hi Travis,
    I was trying to create a custom about-page template with a widget area (like the home title area) so I can put the genesis tabs widget in it. After a week of try & error, I gave up as I´m new to the whole thing and I need help.
    I already created an about-page (about.php) with the following code in it (an placed it in the theme directory):

    ‘about’,
    ‘name’ => __( ‘about’, ‘minipress’ ),
    ‘description’ => __( ‘This is a widget area that can be placed before the post’, ‘minipress’ ),
    ) );
    —
    My issues:
    – I don´t see the the page template yet when I go to: Pages -> Page Attributes -> Template
    – I don´t know whether the “placed before the post” is the correct area!?

    Can you help me please?

    Thank you for your time in advance 🙂

    Reply
  2. Dallas says

    February 16, 2013 at 5:39 am

    I’m sure this is a great tutorial, but I think it would be MUCH more valuable if you had a screenshot of the results.
    So often I see tutorials like this and the outcome is different from what I had anticipated. Show off your skill and give us an example screenshot of what your code can do!

    Reply
  3. aj says

    March 21, 2013 at 4:58 pm

    so by default this function closes the div for you – is that correct?

    Reply
  4. marleenwalz says

    January 27, 2016 at 1:33 am

    Helped me out, tnx! Had a minor issue naming the .php template pages I created page name_page.php iso name-page.php and therefor it wasn’t showing up in the dropdown menu. All solved now.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in