post

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 <travis@wpsmith.net>
* @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' );

About Travis Smith

As a WordPress Enthusiast, Travis writes about his journey in WordPress trying to help other WordPress travelers and enthusiasts with tutorials, explanations, & demonstrations of the things he learns.

Comments

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

  2. 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!

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

Leave a Reply

%d bloggers like this: