Adding custom widgetized area to Agency

Community Forums Forums Design Tips and Tricks Adding custom widgetized area to Agency

This topic is: resolved

This topic contains 6 replies, has 2 voices, and was last updated by  benjeeno 1 year, 7 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #35237

    benjeeno
    Participant
    Post count: 266

    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?

    #35244

    AC
    Blocked
    Post count: 7712

    You 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.

    #35247

    benjeeno
    Participant
    Post count: 266

    Wonderful, thanks Anita!

    #35420

    benjeeno
    Participant
    Post count: 266

    Well 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] &middot; [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: "] &middot; [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>

    #35434

    AC
    Blocked
    Post count: 7712

    It 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.

    #35441

    benjeeno
    Participant
    Post count: 266

    Like 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>

    #35481

    benjeeno
    Participant
    Post count: 266

    I 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>

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.