Add additional featured widget on homepage of Blissful

Community Forums Forums Design Tips and Tricks Add additional featured widget on homepage of Blissful

This topic is: not resolved

This topic contains 13 replies, has 4 voices, and was last updated by  thuan 1 year, 5 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #19857

    karlaarcher
    Participant
    Post count: 15

    I’ve read several tutorials (including this one http://designsbynickthegeek.com/tutorials/add-widgeted-sidebar) on adding more widgets to the homepage, and I’ve done it successful before, but I can’t get it to work in Blissful.

    I added the widgets in the functions.php: (I added in ‘featured-left’ and ‘featured-right’)

    /** Register widget areas */
    genesis_register_sidebar( array(
    ‘id’            => ‘home-top’,
    ‘name’            => __( ‘Home Top’, ‘blissful’ ),
    ‘description’    => __( ‘This is the top section of the homepage’, ‘blissful’ ),
    ) );
    genesis_register_sidebar( array(
    ‘id’            => ‘featured-left’,
    ‘name’            => __( ‘Featured Left’, ‘blissful’ ),
    ‘description’    => __( ‘This is the featured left section of the homepage’, ‘blissful’ ),
    ) );
    genesis_register_sidebar( array(
    ‘id’            => ‘featured-right’,
    ‘name’            => __( ‘Featured Right’, ‘blissful’ ),
    ‘description’    => __( ‘This is the featured right section of the homepage’, ‘blissful’ ),
    ) );

    (there is more code there, for other sidebars/widgets, but irrelevant to this question)

    The following is already in the home.php:

    /** Add home top widget area */
    add_action( ‘genesis_before_loop’, ‘blissful_home_top’ );
    function blissful_home_top() {
    dynamic_sidebar( ‘home-top’ );
    }

    I tried copying it again and adding in the ‘featured-left’ and ‘featured-right’ with no success (broke the code). None of the examples that I am seeing in tutorials correlate to this, as far as I can make sense…

    Any insight appreciated! Thanks :)

     

    #19878

    braddalton
    Participant
    Post count: 10568

    Not sure this will help but i write it after testing the code locally and it worked http://wpsites.net/web-design/adding-duplicating-home-page-widgets-genesis/


    #20137

    Admin1
    Participant
    Post count: 2

    Hey Brad,

    I’m working on a similar issue for a StudioPress Associate theme. I found this post and followed your steps. However, I’m having an issue keeping the rest of the widget fields from shifting when I add the CSS fields in.
    /* Feature2
    ———————————————————— */

    .feature2 {
                margin: 0 auto;
                height: 330px;
                padding: 0 0 25px;
                width: 250px;
                float: right;

    #feature2 {
                border-bottom: 1px solid #d5d5d5;
                overflow: hidden;
    }

    #feature2 .border {
                border-bottom: 4px solid #eee;
                overflow: hidden;
    }

    #feature2 .wrap {
                overflow: hidden;
                padding: 20px 25px 15px;
    }

    #feature2 .ui-tabs ul.ui-tabs-nav {
                border-bottom: 1px dotted #ddd;
                margin: 10px 0;
                padding: 0 0 13px;
    }

    #feature2 .ui-tabs ul.ui-tabs-nav li a {
                background-color: #f5f5f5;
                font-weight: bold;
    }

    #feature2 .ui-tabs ul.ui-tabs-nav li a:hover,
    #feature2 .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a {
                background-color: #00a7ed;
                color: #fff;
    }

    #feature2 .ui-tabs .post {
                background-color: #fff;
                margin: 0;
                padding: 0;
    }

    Do you have any thoughts or recommendations?

    #20257

    braddalton
    Participant
    Post count: 10568

    You could compare the code to see if there’a any problems.

    The i.d’s need to be unique and so do the selectors.

    Can you link to this site please so i can take a look.


    #20313

    karlaarcher
    Participant
    Post count: 15

    Hi Brad — thanks for the link to that article… I tried it and now have widgets above the content and header (I am trying to put two, side-by-side, below the slider — I haven’t added the CSS yet, because I’m trying to get the php straightened out first.)

    http://www.triciagoyer.archercreative.com/

    The issue I’m running into is that the Blissful home.php code looks different from the examples I’m seeing.

     

    #20316

    karlaarcher
    Participant
    Post count: 15

    this is what I have in the home.php and it doesn’t seem right at all: (the first part: “//** Add home top widget” … etc down to “dynamic_sidebar( ‘home-top’);}” was already in the code.)

     

    <?php
    /** Add home top widget area */
    add_action( ‘genesis_before_loop’, ‘blissful_home_top’ );
    function blissful_home_top() {
    dynamic_sidebar( ‘home-top’ );
    }

    if ( is_active_sidebar( ‘home-middle-left’ ) || is_active_sidebar( ‘home-middle-right’ ) ) {

    echo ‘<div id=”home-middle-right”><div class=”border wrap”>’;

    echo ‘<div class=”home-middle-left”>’;
    dynamic_sidebar( ‘home-middle-left’ );
    echo ‘</div><!– end .home-middle-left –>’;

    echo ‘<div class=”home-middle-right”>’;
    dynamic_sidebar( ‘home-middle-right’ );
    echo ‘</div><!– end .home-middle-right –>’;

    echo ‘</div><!– end .border wrap –></div><!– end #home-middle-right –>’;

    }

    #20317

    braddalton
    Participant
    Post count: 10568

    Are you doing this on a live site?

    I mean editing the home.php on a live site?


    #20320

    karlaarcher
    Participant
    Post count: 15

    it’s one of my testing sites, for testing code.

    #20321

    braddalton
    Participant
    Post count: 10568

    Try using the php opening and closing shortcodes in the text editor when you paste php code here on the forums.

    I have never added widgets side by side on the homepage before unless the theme already includes left and right widgets that can be easily copied, which is what i have written about.

    Adding widget area’s using hooks is very easy but adding them side by side is a different story.


    #20333

    braddalton
    Participant
    Post count: 10568

    I copied the news home.php and made a few small changes:
    [php]
    add_action( ‘genesis_meta’, ‘blissful_home_genesis_meta’ );
    /**
    * Add widget support for homepage. If no widgets active, display the default loop.
    *
    */
    function blissful_home_genesis_meta() {

    if ( is_active_sidebar( ‘home-top’ ) || is_active_sidebar( ‘home-middle-left’ ) || is_active_sidebar( ‘home-middle-right’ ) || is_active_sidebar( ‘home-bottom’ ) ) {

    remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
    add_action( ‘genesis_loop’, ‘news_home_loop_helper’ );
    add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_content_sidebar’ );
    add_filter( ‘body_class’, ‘add_body_class’ );
    function add_body_class( $classes ) {
    $classes[] = ‘blissful’;
    return $classes;
    }

    }
    }

    function news_home_loop_helper() {

    if ( is_active_sidebar( ‘home-top’ ) ) {

    echo ‘<div id="home-top"><div class="border wrap">’;
    dynamic_sidebar( ‘home-top’ );
    echo ‘</div><!– end .border wrap –></div><!– end #home-top –>’;

    }

    if ( is_active_sidebar( ‘home-middle-left’ ) || is_active_sidebar( ‘home-middle-right’ ) ) {

    echo ‘<div id="home-middle"><div class="border wrap">’;

    echo ‘<div class="home-middle-left">’;
    dynamic_sidebar( ‘home-middle-left’ );
    echo ‘</div><!– end .home-middle-left –>’;

    echo ‘<div class="home-middle-right">’;
    dynamic_sidebar( ‘home-middle-right’ );
    echo ‘</div><!– end .home-middle-right –>’;

    echo ‘</div><!– end .border wrap –></div><!– end #home-middle –>’;

    }

    if ( is_active_sidebar( ‘home-bottom’ ) ) {

    echo ‘<div id="home-bottom"><div class="border wrap">’;
    dynamic_sidebar( ‘home-bottom’ );
    echo ‘</div><!– end .border wrap –></div><!– end #home-bottom –>’;

    }

    }

    genesis();
    [/php]

    Then registered the widgets in functions.php

    [php]
    genesis_register_sidebar( array(
    ‘id’ => ‘home-top’,
    ‘name’ => __( ‘Home Top’, ‘blissful’ ),
    ‘description’ => __( ‘This is the home top section.’, ‘blissful’ ),
    ) );
    genesis_register_sidebar( array(
    ‘id’ => ‘home-middle-left’,
    ‘name’ => __( ‘Home Middle Left’, ‘blissful’ ),
    ‘description’ => __( ‘This is the home middle left section.’, ‘blissful’ ),
    ) );
    genesis_register_sidebar( array(
    ‘id’ => ‘home-middle-right’,
    ‘name’ => __( ‘Home Middle Right’, ‘blissful’ ),
    ‘description’ => __( ‘This is the home middle right section.’, ‘blissful’ ),
    ) );
    genesis_register_sidebar( array(
    ‘id’ => ‘home-bottom’,
    ‘name’ => __( ‘Home Bottom’, ‘blissful’ ),
    ‘description’ => __( ‘This is the home bottom section.’, ‘blissful’ ),
    ) );
    [/php]

    Added more image sizes for the featured homepage widgets:
    [php]
    add_image_size( ‘mini-thumbnail’, 75, 75, TRUE );
    add_image_size( ‘small-thumbnail’, 110, 110, TRUE );
    add_image_size( ‘home-middle-left’, 280, 165, TRUE );
    add_image_size( ‘home-middle-right’, 50, 50, TRUE );
    add_image_size( ‘home-tabs’, 150, 220, TRUE );
    [/php]

    Then copied all the home page widget CSS
    [css]
    /* Home Top
    ———————————————————— */

    #home-top {
    border-bottom: 1px solid #d5d5d5;
    overflow: hidden;
    }

    #home-top .border {
    border-bottom: 4px solid #eee;
    overflow: hidden;
    }

    #home-top .wrap {
    overflow: hidden;
    padding: 20px 25px 15px;
    }

    #home-top .ui-tabs ul.ui-tabs-nav {
    border-bottom: 1px dotted #ddd;
    margin: 10px 0;
    padding: 0 0 13px;
    }

    #home-top .ui-tabs ul.ui-tabs-nav li a {
    background-color: #f5f5f5;
    font-weight: bold;
    }

    #home-top .ui-tabs ul.ui-tabs-nav li a:hover,
    #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a {
    background-color: #00a7ed;
    color: #fff;
    }

    #home-top .ui-tabs .post {
    background-color: #fff;
    margin: 0;
    padding: 0;
    }

    /* Home Middle
    ———————————————————— */

    #home-middle {
    border-bottom: 1px solid #d5d5d5;
    overflow: hidden;
    }

    #home-middle .border {
    border-bottom: 4px solid #eee;
    overflow: hidden;
    }

    #home-middle .wrap {
    overflow: hidden;
    padding: 25px 25px 15px;
    }

    .home-middle-left {
    float: left;
    width: 290px;
    }

    .home-middle-right {
    float: right;
    width: 285px;
    }

    .home-middle-left-2 {
    float: left;
    width: 290px;
    }

    .home-middle-right-2 {
    float: right;
    width: 285px;
    }

    /* Home Bottom
    ———————————————————— */

    #home-bottom {
    overflow: hidden;
    }

    #home-bottom .wrap {
    overflow: hidden;
    padding: 20px 25px 15px;
    }
    [/css]

    Clearly, the featured left and right home page widget CSS needs modifying as its different to the News themes dimensions.


    #21090

    Admin1
    Participant
    Post count: 2

    Hey Brad, would this world equally well with Associate CSS or is this Blissful specific? (obvious naming tags aside)

    #21094

    karlaarcher
    Participant
    Post count: 15

    Thanks for this, Brad! I will give it a whirl. I ended up replacing the home and function.php with the ones from the Adorable theme. It did what I needed it to do, but I’m definitely gonna check this out and see how you did it, so I can learn!

    #21099

    braddalton
    Participant
    Post count: 10568

    No worries Karla.

    It was pretty easy really.

    The only issue is the CSS which needs adjusting for the widgets because of the width but everything else worked fine.

    Admin1.

    I think its just a matter of editing the CSS based on the width but there must be another way to do it also.

    Seemed pretty straight forward when i tested it.

    If you don’t need the left and right middle widgets then it would be even easier as you shouldn’t need to edit the CSS until you get it right.


    #47587

    thuan
    Participant
    Post count: 18

    Hello,
    Please help me design top menu + right menu and header like to Arganoil.co
    My site is: Arganoil.vn and i use Blissful theme!
    Thank you so much!


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

You must be logged in to reply to this topic.