- This topic has 13 replies, 4 voices, and was last updated 9 years ago by
.
-
Posts
-
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.comNot 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/
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?
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.
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.comthis 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.comAre you doing this on a live site?
I mean editing the home.php on a live site?
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.
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.
Hey Brad, would this world equally well with Associate CSS or is this Blissful specific? (obvious naming tags aside)
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.comNo 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.
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!
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.