• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Add additional featured widget on homepage of Blissful

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: blissful, homepage, widgets

  • This topic has 13 replies, 4 voices, and was last updated 9 years, 7 months ago by thuan.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 12, 2013 at 12:46 pm #19857
    karlaarcher
    Member

    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 🙂

     


    Karla Archer
    archercreative.com

    February 12, 2013 at 1:36 pm #19878
    Brad Dalton
    Participant

    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/


    Get Help – Book Consultation.

    February 13, 2013 at 2:32 pm #20137
    Admin1
    Member

    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?

    February 14, 2013 at 1:51 am #20257
    Brad Dalton
    Participant

    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.


    Get Help – Book Consultation.

    February 14, 2013 at 9:40 am #20313
    karlaarcher
    Member

    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.

     


    Karla Archer
    archercreative.com

    February 14, 2013 at 9:54 am #20316
    karlaarcher
    Member

    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 -->';

    }


    Karla Archer
    archercreative.com

    February 14, 2013 at 10:08 am #20317
    Brad Dalton
    Participant

    Are you doing this on a live site?

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


    Get Help – Book Consultation.

    February 14, 2013 at 10:20 am #20320
    karlaarcher
    Member

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


    Karla Archer
    archercreative.com

    February 14, 2013 at 10:24 am #20321
    Brad Dalton
    Participant

    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.


    Get Help – Book Consultation.

    February 14, 2013 at 11:08 am #20333
    Brad Dalton
    Participant

    I copied the news home.php and made a few small changes:

    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();
    

    Then registered the widgets in functions.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' ),
    ) );
    

    Added more image sizes for the featured homepage widgets:

    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 );
    

    Then copied all the home page widget 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;
    }
    

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


    Get Help – Book Consultation.

    February 18, 2013 at 2:42 pm #21090
    Admin1
    Member

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

    February 18, 2013 at 2:59 pm #21094
    karlaarcher
    Member

    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!


    Karla Archer
    archercreative.com

    February 18, 2013 at 3:29 pm #21099
    Brad Dalton
    Participant

    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.


    Get Help – Book Consultation.

    June 24, 2013 at 6:50 pm #47587
    thuan
    Participant

    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!


    House Việt Nam

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble