Community Forums › Forums › Archived Forums › General Discussion › Custom Widgets – Side by Side (in same full=width section)
- This topic has 8 replies, 3 voices, and was last updated 8 years, 7 months ago by elaine_s.
-
AuthorPosts
-
April 26, 2015 at 9:05 am #149187Miriam_08Member
Hi,
I'm trying to create a custom homepage for a Genesis WordPress site.
I created 2 new widgets, "contact_form_widget", and "contact_personal_widget".
These widgets work and show up on the front-end, however I would like them side-by-side, in the same full-width section.The way the rest of my sections work is each section is wrapped within another section.
The full-width background color of the section is placed on the outer section, and the max-width for content is placed on the inner section.>> How can I get both widgets to be placed within the same inner and outer sections, with the widgets floated left/right?
Or is there a better way of creating this effect?
My code is below. Currently, they are in 2 separate sections.
Thank you,
/* Contact Form Widget***************/ function contact_form_widget() { register_sidebar( array( 'name' => __( 'Contact Form', 'genesis' ), 'id' => 'contactwidget', 'description' => __( 'ContactForm', 'genesis' ), 'before_widget' => '<section class="contact-form-widget">', 'after_widget' => '</section>', ) ); } add_action( 'widgets_init', 'contact_form_widget' ); //* Add the Contact Form Widget in place function contact_form_widget_visible() { genesis_widget_area ('contactwidget', array( 'before' => '<section class="contact-form-widget-wrap wrap">', 'after' => '</section>',)); } add_action( 'genesis_before_footer', 'contact_form_widget_visible' ); /* Contact Personal Widget***************/ function contact_personal_widget() { register_sidebar( array( 'name' => __( 'Contact Personal', 'genesis' ), 'id' => 'contactpersonalwidget', 'description' => __( 'ContactPersonal', 'genesis' ), 'before_widget' => '<div class="contact-personal-widget">', 'after_widget' => '</div>', ) ); } add_action( 'widgets_init', 'contact_personal_widget' ); //* Add the Personal Contact Widget in place function contact_personal_widget_visible() { genesis_widget_area ('contactpersonalwidget', array( 'before' => '<div class="contact-personal-widget-wrap wrap">', 'after' => '</div>',)); } add_action( 'genesis_before_footer', 'contact_personal_widget_visible' );
Note: ".contact-form-widget-wrap" and ".contact-personal-widget-wrap" are the colors of the sections, while ".wrap" is the width.
April 26, 2015 at 9:21 am #149188Brad DaltonParticipantYou could use the Genesis split sidebars which is i included in the Beautiful Pro child theme or Bootstrap column classes.
Another option is to set the width at 49% for each class and float one right and the other left.
September 10, 2015 at 4:49 pm #165170elaine_sMember@braddalton, I am using the Genesis split sidebars on the home page as instructed in Beautiful theme tutorial.
However, now the split sidebars appear on every post and page, below the specific Genesis Simple Sidebars I have running on these different pages and posts. How can I get the split sidebars to only appear on the Home Page (and not populate everything else).September 10, 2015 at 10:33 pm #165188Brad DaltonParticipantSeptember 11, 2015 at 9:05 am #165219elaine_sMember@braddalton thank you, I was able to remove the split sidebars using the code you provided, but cannot figure out how to remove the bottom sidebar also; it still stubbornly appears on every page (again, I want it on home page) - cannot write the php, here is the code so far:
//* Hook split sidebar and bottom sidebar widget areas below primary sidebar
add_action( 'genesis_after_sidebar_widget_area', 'beautiful_extra_sidebars' );
function beautiful_extra_sidebars() {if ( is_front_page() AND is_active_sidebar( 'split-sidebar-left' ) || is_active_sidebar( 'split-sidebar-right' ) ) {
echo '<div class="split-sidebars">';
genesis_widget_area( 'split-sidebar-left', array(
'before' => '<div class="split-sidebar-left" class="widget-area">',
'after' => '</div>',
) );
genesis_widget_area( 'split-sidebar-right', array(
'before' => '<div class="split-sidebar-right" class="widget-area">',
'after' => '</div>',
) );echo '</div>';
}
genesis_widget_area( 'bottom-sidebar', array(
'before' => '<div class="bottom-sidebar" class="widget-area">',
'after' => '</div>',
) );}
September 12, 2015 at 4:44 am #165271Brad DaltonParticipantAdd the conditional like this:
add_action( 'genesis_after_sidebar_widget_area', 'beautiful_extra_sidebars'); function beautiful_extra_sidebars() { if ( is_front_page() )
September 12, 2015 at 4:11 pm #165312elaine_sMember@braddalton - thanks. Again, that took care of getting rid of the left and right sidebars on subpages and posts, but did not target getting rid of the 'bottom-sidebar' on subpages and posts. 'bottom-sidebar' is still showing on front page, and every other page and post. I just want it on the home page. Here is the code:
//* Hook split sidebar and bottom sidebar widget areas below primary sidebar
add_action( 'genesis_after_sidebar_widget_area', 'beautiful_extra_sidebars' );
function beautiful_extra_sidebars() {
if ( is_front_page() )if ( is_active_sidebar( 'split-sidebar-left' ) || is_active_sidebar( 'split-sidebar-right' ) ) {
echo '<div class="split-sidebars">';
genesis_widget_area( 'split-sidebar-left', array(
'before' => '<div class="split-sidebar-left" class="widget-area">',
'after' => '</div>',
) );
genesis_widget_area( 'split-sidebar-right', array(
'before' => '<div class="split-sidebar-right" class="widget-area">',
'after' => '</div>',
) );echo '</div>';
}
genesis_widget_area( 'bottom-sidebar', array(
'before' => '<div class="bottom-sidebar" class="widget-area">',
'after' => '</div>',
) );}
September 12, 2015 at 9:47 pm #165323Brad DaltonParticipantUse this:
if ( ! is_front_page() || get_query_var( 'paged' ) >= 2 ) return;
September 13, 2015 at 6:16 pm #165376elaine_sMember@braddalton OK that works! Thanks so much!!!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.