Community Forums › Forums › Archived Forums › Design Tips and Tricks › 3 in 1 Featured Page Widget Code?
- This topic has 3 replies, 2 voices, and was last updated 9 years, 5 months ago by
Brad Dalton.
-
AuthorPosts
-
September 3, 2015 at 11:12 am #164474
cmagras
MemberI'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!!!
http://50.87.248.241/~amandck2/
- CarissaSeptember 3, 2015 at 11:49 pm #164534Brad Dalton
ParticipantYou 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; }
September 4, 2015 at 10:26 am #164589cmagras
MemberThank 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 #164625Brad Dalton
ParticipantYes, 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' ), ) );
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.