• 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

3 in 1 Featured Page Widget Code?

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 › 3 in 1 Featured Page Widget Code?

This topic is: not resolved

Tagged: 3 in 1 widget, enteprise pro, featured page widget, home bottom widget

  • This topic has 3 replies, 2 voices, and was last updated 9 years, 9 months ago by Brad Dalton.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 3, 2015 at 11:12 am #164474
    cmagras
    Member

    I'm using Enterprise Pro theme, and added a custom widget area (thanks to Brad Dalton's awesome tutorial here http://wpsites.net/web-design/widget-genesis/).

    I would like to make the custom widget a duplicate of the Home-Bottom widget (to display 3 featured pages). I know the answer is going to be easy, but I'm running on little sleep and have to get this done ASAP for a review meeting. 😛

    Does anyone know the code I need to plugin to make the custom widget display 3 featured pages side-by-side? Right now they are stair-stepped. :/ (I also haven't assigned a hook for the widget, so it's not where it needs to be... I'm going to add a slider after Home-Bottom, and then going to add the custom widget to below that -- so right above footer)

    Thanks in advance!!!
    - Carissa

    http://50.87.248.241/~amandck2/
    September 3, 2015 at 11:49 pm #164534
    Brad Dalton
    Participant

    You can:

    1. Duplicate the code from the front-page.php file

    or

    2. Add the same class home-bottom to the PHP code you added for the new widget like this:

    'before' => '<div class="home-bottom widget-area"><div class="wrap">',

    3. You should also be able to simply add 6 featured page widgets to the same home bottom widget area without adding a new widget area.( untested )

    The class generated by the PHP code for the widget uses CSS on line 1333 of the style.css to display each widget a specific width like this:

    .home-bottom .widget {
    	background-color: #fff;
    	border-radius: 3px;
    	border: 1px solid #ececec;
    	box-shadow: 0 1px #ececec;
    	float: left;
    	margin-left: 2.564102564102564%;
    	padding: 40px;
    	width: 31.623931623931625%;
    }
    
    .home-bottom .widget:nth-child(3n+1) {
    	clear: both;
    	margin-left: 0;
    }
    

    Tutorials for StudioPress Themes.

    September 4, 2015 at 10:26 am #164589
    cmagras
    Member

    Thank you Brad! I changed out the code with your #2 suggestion, and it worked!!! Except now my footer widgets are all messed up (super long vertical). It might be a problem with my hooks?? I created a slider and the custom widget, with genesis_before_footer hooks (priorities 1 and 5). I want them only on the homepage, below everything else but above the footer widget area. I've seen hook reference guides, but is there one specifically for the homepage? I'm not sure where to hook my added widgets so they are where I need them.

    September 4, 2015 at 6:05 pm #164625
    Brad Dalton
    Participant

    Yes, no need to add a hook. Simply duplicate the code for the widget area in the front page file.

    Add the code directly to the front page file rather than the functions file.

    genesis_widget_area( 'home-bottom-2', array(
    		'before' => '<div class="home-bottom widget-area">',
    		'after'  => '</div>',
    	) );
    

    And register a new widget area in functions.php

    genesis_register_sidebar( array(
    	'id'          => 'home-bottom-2',
    	'name'        => __( 'Home Bottom 2', 'enterprise' ),
    ) );
    

    Tutorials for StudioPress Themes.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 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

© 2025 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