Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding custom widgetized area to Agency
Tagged: adding widget areas to home page
- This topic has 6 replies, 2 voices, and was last updated 11 years ago by Ben Siegfried.
-
AuthorPosts
-
April 13, 2013 at 12:45 pm #35237Ben SiegfriedMember
I would like to add a customized widget area below the main content of the Agency theme I am working with here: http://siegfriedmedia.com/rivasrocks2/
The three columns come from the home left/middle/right widgets, and I would like to add two widget areas below that, one taking up the width of home left and middle and the other taking up the width that home right takes up. What is the best way to achieve this? I know about hooking the content in below it with html/css, but I want to have it a widgetized area.
Would I add to the home.php file the similar but modified code below the home left/middle/right code?
April 13, 2013 at 1:32 pm #35244AnitaKeymasterYou can copy the home left and middle widget areas in the functions.php to create two new ones. Maybe name them home-bottom-left and home-bottom-right. Then copy the CSS for the home left and middle and past as the new home-bottom-left and home-bottom-right and change the widths to what you want them to be. Then go to home.php and create the two new widget areas.
Love coffee, chocolate and my Bella!
April 13, 2013 at 1:51 pm #35247Ben SiegfriedMemberWonderful, thanks Anita!
April 14, 2013 at 11:46 am #35420Ben SiegfriedMemberWell I thought it was pretty straightforward. I've added two new classes to CSS: .home-top-left, .home-top-right, and added two new widget areas in the home.php and functions.php files, combing the details. Did I miss any? To add content to the two new widgets I followed steps identical to getting content in the home-left/middle/right. The new content should be coming in on top of the existing content, but it is not. Here's what I have below.
http://siegfriedmedia.com/rivasrocks2
<code>
<?php
add_action( 'genesis_meta', 'agency_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function agency_home_genesis_meta() {if ( is_active_sidebar( 'home-welcome' ) || is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-right' ) || is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) ) {
//remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_after_header', 'agency_home_welcome_helper' );
//add_action( 'genesis_loop', 'agency_home_loop_helper' );
//add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
add_filter( 'body_class', 'add_body_class' );function add_body_class( $classes ) {
$classes[] = 'agency';
return $classes;
}}
}function agency_home_welcome_helper() {
if ( is_active_sidebar( 'home-slider' ) ) {
echo '<div id="home-slider">';
dynamic_sidebar( 'home-slider' );
echo '</div><!-- end #home-slider -->';
}if ( is_active_sidebar( 'home-welcome' ) ) {
echo '<div id="home-welcome">';
dynamic_sidebar( 'home-welcome' );
echo '</div><!-- end #home-welcome -->';
}}
function agency_home_loop_helper() {
if ( is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-right' ) || is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) ) {
echo '<div id="home">';
echo '<div class="home-top-left">';
dynamic_sidebar( 'home-top-left' );
echo '</div><!-- end .home-top-left -->';echo '<div class="home-top-right">';
dynamic_sidebar( 'home-top-right' );
echo '</div><!-- end .home-top-right -->';echo '<div class="home-left">';
dynamic_sidebar( 'home-left' );
echo '</div><!-- end .home-left -->';echo '<div class="home-middle">';
dynamic_sidebar( 'home-middle' );
echo '</div><!-- end .home-middle -->';echo '<div class="home-right">';
dynamic_sidebar( 'home-right' );
echo '</div><!-- end .home-right -->';echo '</div><!-- end #home -->';
}
}
genesis();
</code>
<code>
<?php
/** Start the engine */
require_once( TEMPLATEPATH . '/lib/init.php' );
/** Child theme (do not remove) */
define( 'CHILD_THEME_NAME', 'Agency Theme' );
define( 'CHILD_THEME_URL', 'http://www.studiopress.com/themes/agency' );
$content_width = apply_filters( 'content_width', 590, 410, 910 );
/** Add Viewport meta tag for mobile browsers */
add_action( 'genesis_meta', 'agency_viewport_meta_tag' );
function agency_viewport_meta_tag() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}
/** Create additional color style options */
add_theme_support( 'genesis-style-selector', array( 'agency-green' => 'Green', 'agency-orange' => 'Orange', 'agency-red' => 'Red' ) );
/** Add support for structural wraps */
add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );
/** Add new image sizes */
add_image_size( 'home-featured', 280, 100, TRUE );
/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 115 ) );
/** Add support for custom background */
add_custom_background();
/** Add product post type support for Geneiss layouts */
add_theme_support( 'genesis-connect-woocommerce' );
add_post_type_support( 'product', 'genesis-layouts' );
/** Set Genesis Responsive Slider defaults */
add_filter( 'genesis_responsive_slider_settings_defaults', 'agency_responsive_slider_defaults' );
function agency_responsive_slider_defaults( $defaults ) {
$defaults['slideshow_height'] = '300';
$defaults['slideshow_width'] = '950';
return $defaults;
}
/** Relocate breadcrumbs */
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_breadcrumbs' );
/** Customize the post info function */
add_filter( 'genesis_post_info', 'post_info_filter' );
function post_info_filter($post_info) {
if (!is_page()) {
$post_info = '[post_date] by [post_author_posts_link] · [post_comments] [post_edit]';
return $post_info;
}}
/** Customize the post meta function */
add_filter( 'genesis_post_meta', 'post_meta_filter' );
function post_meta_filter($post_meta) {
if (!is_page()) {
$post_meta = '[post_categories before="Filed Under: "] · [post_tags before="Tagged: "]';
return $post_meta;
}}
/** Modify the size of the Gravatar in the author box */
add_filter( 'genesis_author_box_gravatar_size', 'agency_author_box_gravatar_size' );
function agency_author_box_gravatar_size($size) {
return '78';
}
/**
* Filter Genesis H1 Post Titles to add <span> for styling
*
*/
add_filter( 'genesis_post_title_output', 'ac_post_title_output', 15 );function ac_post_title_output( $title ) {
if ( is_home() )
$title = sprintf( '<h2 class="entry-title"><span>%s</span></h2>', apply_filters( 'genesis_post_title_text', get_the_title() ) );return $title;
}
/** Add support for 3-column footer widgets */
add_theme_support( 'genesis-footer-widgets', 3 );
/** Register widget areas */
genesis_register_sidebar( array(
'id' => 'home-welcome',
'name' => __( 'Home Welcome', 'agency' ),
'description' => __( 'This is the welcome section of the homepage.', 'agency' ),
) );
genesis_register_sidebar( array(
'id' => 'home-slider',
'name' => __( 'Home Slider', 'agency' ),
'description' => __( 'This is the slider section of the homepage.', 'agency' ),
) );
genesis_register_sidebar( array(
'id' => 'home-top-left',
'name' => __( 'Home Top Left', 'agency' ),
'description' => __( 'This is the left top section of the homepage.', 'agency' ),
) );
genesis_register_sidebar( array(
'id' => 'home-top-right',
'name' => __( 'Home Top Right', 'agency' ),
'description' => __( 'This is the top right section of the homepage.', 'agency' ),
) );
genesis_register_sidebar( array(
'id' => 'home-left',
'name' => __( 'Home Left', 'agency' ),
'description' => __( 'This is the left section of the homepage.', 'agency' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle',
'name' => __( 'Home Middle', 'agency' ),
'description' => __( 'This is the middle section of the homepage.', 'agency' ),
) );
genesis_register_sidebar( array(
'id' => 'home-right',
'name' => __( 'Home Right', 'agency' ),
'description' => __( 'This is the right section of the homepage.', 'agency' ),
) );
</code>
April 14, 2013 at 1:00 pm #35434AnitaKeymasterIt looks like you added your two new widgets to the SAME DIV as the three widgets. I believe if you create a new DIV and add that also to the CSS it should work for you.
Love coffee, chocolate and my Bella!
April 14, 2013 at 1:26 pm #35441Ben SiegfriedMemberLike this?
<code>
#home, #home-top {
font-size: 14px;
}#home, #home-top p {
font-size: inherit;
}</code><code><?php
add_action( 'genesis_meta', 'agency_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function agency_home_genesis_meta() {if ( is_active_sidebar( 'home-welcome' ) || is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-right' ) || is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) ) {
//remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_after_header', 'agency_home_welcome_helper' );
//add_action( 'genesis_loop', 'agency_home_loop_helper' );
//add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
add_filter( 'body_class', 'add_body_class' );function add_body_class( $classes ) {
$classes[] = 'agency';
return $classes;
}}
}function agency_home_welcome_helper() {
if ( is_active_sidebar( 'home-slider' ) ) {
echo '<div id="home-slider">';
dynamic_sidebar( 'home-slider' );
echo '</div><!-- end #home-slider -->';
}if ( is_active_sidebar( 'home-welcome' ) ) {
echo '<div id="home-welcome">';
dynamic_sidebar( 'home-welcome' );
echo '</div><!-- end #home-welcome -->';
}}
function agency_home_loop_helper() {
if ( is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-right' ) || is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) ) {
echo '<div id="home-top">';
echo '<div class="home-top-left">';
dynamic_sidebar( 'home-top-left' );
echo '</div><!-- end .home-top-left -->';echo '<div class="home-top-right">';
dynamic_sidebar( 'home-top-right' );
echo '</div><!-- end .home-top-right -->';echo '</div><!-- end #home-top -->';
echo '<div id="home">';
echo '<div class="home-left">';
dynamic_sidebar( 'home-left' );
echo '</div><!-- end .home-left -->';echo '<div class="home-middle">';
dynamic_sidebar( 'home-middle' );
echo '</div><!-- end .home-middle -->';echo '<div class="home-right">';
dynamic_sidebar( 'home-right' );
echo '</div><!-- end .home-right -->';echo '</div><!-- end #home -->';
}
}
genesis();</code>
April 14, 2013 at 4:28 pm #35481Ben SiegfriedMemberI found a post on this forum that provided the solution I needed: http://designsbynickthegeek.com/tutorials/add-widgeted-sidebar
I didn't make any changes to the home.php file. I made changes only to the functions.php and corresponding CSS.
Here's what I added to functions.php:
<code>
/** Add Top widget left/right widget areas above Home left/midd/right widgets. **/
add_action( 'genesis_before_content', 'child_before_content' );
/** Loads two new widgets before content */
function child_before_content() {echo '<div class="home-top">';
echo '<div class="home-top-left">';
dynamic_sidebar( 'home-top-left' );
echo '</div><!-- end .home-top-left -->';echo '<div class="home-top-right">';
dynamic_sidebar( 'home-top-right' );
echo '</div><!-- end .home-top-right -->';echo '</div>';
}</code>
<code>
genesis_register_sidebar( array(
'id' => 'home-top-left',
'name' => __( 'Home Top Left', 'agency' ),
'description' => __( 'This is the left top section of the homepage.', 'agency' ),
) );
genesis_register_sidebar( array(
'id' => 'home-top-right',
'name' => __( 'Home Top Right', 'agency' ),
'description' => __( 'This is the top right section of the homepage.', 'agency' ),
) );</code>
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.