background color (full width) for widgets

[stfn]

Hi,
I'm trying to create a homepage with widgets. I've managed to create five homepage widgets (three - two). For the bottom two widgets I'd like to create a background color full width, just like the footer. But I must be doing something wrong, since it's not working.

Website: http://beta.bakkeradministratie.nl/

Here is my code: functions.php

genesis_register_sidebar( array(
	'id'			=> 'home-bottom-1',
	'name'			=> __( 'Home Bottom #1', 'bakkerwidget' ),
	'description'	=> __( 'This is the first column of the home bottom section.', 'bakkerwidget' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-bottom-2',
	'name'			=> __( 'Home Bottom #2', 'bakkerwidget' ),
	'description'	=> __( 'This is the second column of the home bottom section.', 'bakkerwidget' ),
) );

and here is my code: front-page.php

function bakker_home_bottom() {
	
	if ( is_active_sidebar( 'home-bottom-1' ) ) {
		echo '<div id="home-bottom"><div class="one-half first">';
		dynamic_sidebar( 'home-bottom-1' );
		echo '</div><!-- end .home-bottom-1 -->';
		}
		
	if ( is_active_sidebar( 'home-bottom-2' ) ) {
		echo '<div id="home-bottom"><div class="one-half">';
		dynamic_sidebar( 'home-bottom-2' );
		echo '</div><!-- end .home-bottom-2 -->';
		}
		
	echo '</div><!-- end .home-bottom -->';
}

What can I do to create a full width background color for these two widgets, just like the footer. Please help out.

Thanks in advance.

http://beta.bakkeradministratie.nl/

[Victor Font]

Your function in front-page.php is faulty. In HTML, element IDs must be unique. Your code reads that if both home-bottom-1 and home-bottom-2 are in use at the same time, they both get wrapped in a div with the same ID of home-bottom. Neither of these divs are closed properly. You don't need the column classes. You're better off using straight CSS for the widths of the widget areas. Better, yet, why don't you just use them as flex widgets? Last, both is_active_sidebar() conditionals should be the area of front-page.php that determines whether your function should be called or not.

If I were to refactor the code, I would write it this way:

if ( is_active_sidebar( 'home-bottom-1' )  || is_active_sidebar( 'home-bottom-2' ) ) {
	bakker_home_bottom();
}

function bakker_home_bottom() {

	genesis_widget_area( 'home-bottom-1', array(
		'before' => '<div id="home-bottom" class="home-bottom"><div id="home-bottom-1" class="home-bottom-1"><div class="wrap">',
		'after'  => '</div></div>',
	) );

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

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[stfn]

Hi Victor,
thanks for your feedback. I really appreciate your help. But it doesn't seem to work, since the widgets are now on top of the page. Maybe it helps when I show the whole code.

This is my total code for the front-page.php

<?php
/**
 * This file adds the Front Page Template to any Genesis Child Theme.
 */

 add_action( 'genesis_meta', 'bakker_home_genesis_meta' );

/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function bakker_home_genesis_meta() {

	if ( is_active_sidebar( 'home-middle-1' ) || is_active_sidebar( 'home-middle-2' ) || is_active_sidebar( 'home-middle-3' ) || is_active_sidebar( 'home_bottom-1' ) || is_active_sidebar( 'home_bottom-2' ) ) {

		remove_action( 'genesis_loop', 'genesis_do_loop' );
		add_action( 'genesis_loop', 'bakker_home_loop_helper',5 );
		add_action( 'genesis_loop', 'bakker_home_bottom',10 );
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
		add_filter( 'body_class', 'add_body_class' );

		function add_body_class( $classes ) {
   			$classes[] = 'bakkerwidget';
  			return $classes;
		}
	}
}

	
function bakker_home_loop_helper() {
	
	if ( is_active_sidebar( 'home-middle-1' ) ) {
		echo '<div class="one-third first">';
		dynamic_sidebar( 'home-middle-1' );
		echo '</div><!-- end .home-middle-1 -->';
	}
	
	if ( is_active_sidebar( 'home-middle-2' ) ) {
		echo '<div class="one-third">';
		dynamic_sidebar( 'home-middle-2' );
		echo '</div><!-- end .home-middle-2 -->';
	}
	
	if ( is_active_sidebar( 'home-middle-3' ) ) {
		echo '<div class="one-third">';
		dynamic_sidebar( 'home-middle-3' );
		echo '</div><!-- end .home-middle-3 -->';
	}
	
	echo '</div><!-- end .home-middle -->';
	
}

function bakker_home_bottom() {
	
	
	if ( is_active_sidebar( 'home-bottom-1' ) ) {
		echo '<div id="home-bottom-1"><div class="one-half first">';
		dynamic_sidebar( 'home-bottom-1' );
		echo '</div><!-- end .home-bottom-1 -->';
		}
		
	if ( is_active_sidebar( 'home-bottom-2' ) ) {
		echo '<div id="home-bottom-2"><div class="one-half">';
		dynamic_sidebar( 'home-bottom-2' );
		echo '</div><!-- end .home-bottom-2 -->';
		}
		
	echo '</div><!-- end .home-bottom -->';
}
 
genesis();

and this is the code for the functions.php

genesis_register_sidebar( array(
	'id'			=> 'home-middle-1',
	'name'			=> __( 'Home Middle #1', 'bakkerwidget' ),
	'description'	=> __( 'This is the first column of the home middle section.', 'bakkerwidget' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-middle-2',
	'name'			=> __( 'Home Middle #2', 'bakkerwidget' ),
	'description'	=> __( 'This is the second column of the home middle section.', 'bakkerwidget' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-middle-3',
	'name'			=> __( 'Home Middle #3', 'bakkerwidget' ),
	'description'	=> __( 'This is the third column of the home middle section.', 'bakkerwidget' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-bottom-1',
	'name'			=> __( 'Home Bottom #1', 'bakkerwidget' ),
	'description'	=> __( 'This is the first column of the home bottom section.', 'bakkerwidget' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-bottom-2',
	'name'			=> __( 'Home Bottom #2', 'bakkerwidget' ),
	'description'	=> __( 'This is the second column of the home bottom section.', 'bakkerwidget' ),
) );

[Victor Font]

You don't need the column classes. I showed you how to display the widget areas using genesis_widget_area() and you still have extra closing divs in your functions. If you don't clean up your code, you'll never get it to display correctly.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[stfn]

Yes, I understand. I've fixed that. See code below for the front-page.php

<?php
/**
 * This file adds the Front Page Template to any Genesis Child Theme.
 */

 add_action( 'genesis_meta', 'bakker_home_genesis_meta' );

/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function bakker_home_genesis_meta() {

	if ( is_active_sidebar( 'home-middle-1' ) || is_active_sidebar( 'home-middle-2' ) || is_active_sidebar( 'home-middle-3' ) || is_active_sidebar( 'home_bottom-1' ) || is_active_sidebar( 'home_bottom-2' ) ) {

		remove_action( 'genesis_loop', 'genesis_do_loop' );
		add_action( 'genesis_loop', 'bakker_home_middle',5 );
		add_action( 'genesis_loop', 'bakker_home_bottom',10 );
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
		add_filter( 'body_class', 'add_body_class' );

		function add_body_class( $classes ) {
   			$classes[] = 'bakkerwidget';
  			return $classes;
		}
	}
}

function bakker_home_middle() {

	genesis_widget_area( 'home-middle-1', array(
		'before' => '<div id="home-middle" class="home-middle"><div id="home-middle-1" class="home-middle-1"><div class="wrap">',
		'after'  => '</div></div>',
	) );

	genesis_widget_area( 'home-middle-2', array(
		'before' => '<div id="home-middle-2" class="home-middle-2"><div class="wrap">',
		'after'  => '</div></div>',
	) );
	
	genesis_widget_area( 'home-middle-3', array(
		'before' => '<div id="home-middle-3" class="home-middle-3"><div class="wrap">',
		'after'  => '</div></div></div>',
	) );
}

function bakker_home_bottom() {

	genesis_widget_area( 'home-bottom-1', array(
		'before' => '<div id="home-bottom" class="home-bottom"><div id="home-bottom-1" class="home-bottom-1"><div class="wrap">',
		'after'  => '</div></div>',
	) );

	genesis_widget_area( 'home-bottom-2', array(
		'before' => '<div id="home-bottom-2" class="home-bottom-2"><div class="wrap">',
		'after'  => '</div></div></div>',
	) );
}
 
genesis();

But I still can't get the full width background to one color for the two widgets (home-bottom). I only can get the total widget area one color (full width color for all 5 widgets since this is a body class). I want the background of the two widgets change in one color background, just like the navigation or like the footer. How can I do this?

[PyramidWeb]

If I'm getting you right, you want to add a different background color to the two widget areas at the bottom of the page, right?

You need to put these two widget areas in the same container, which in turn can then get your desired background color.

Try this:
Change the code in your front-page.php as follows:

function bakker_home_bottom() {
   if ( is_active_sidebar( 'home-bottom-1' ) || is_active_sidebar( 'home-bottom-2' ) ) {
      echo '<div class="home-bottom"><div class="wrap">';
         if ( is_active_sidebar( 'home-bottom-1' ) ) {
            genesis_widget_area( 'home-bottom-1', array(
               'before' => <div class="home-bottom-1">',
               'after'  => </div>',
            ) );
         }
         if ( is_active_sidebar( 'home-bottom-2' ) ) {
            genesis_widget_area( 'home-bottom-2', array(
               'before' => '<div class="home-bottom-2";>',
               'after'  => '</div>',
            ) );
         }
      echo '</div></div>';
   }
}

Then add to your "style-front.css" (in "css" folder):

.home-bottom {
    background: #ff1a1a;
}

Let me know whether this works; I cannot check the code on your site. The wrap might need to go somewhere else.

[PyramidWeb]

[PHP]<?php
function bakker_home_bottom() {
if ( is_active_sidebar( 'home-bottom-1' ) || is_active_sidebar( 'home-bottom-2' ) ) {
echo '<div class="home-bottom"><div class="wrap">';
if ( is_active_sidebar( 'home-bottom-1' ) ) {
genesis_widget_area( 'home-bottom-1', array(
'before' => '<div class="home-bottom-1">',
'after' => '</div>',
) );
}
if ( is_active_sidebar( 'home-bottom-2' ) ) {
genesis_widget_area( 'home-bottom-2', array(
'before' => '<div class="home-bottom-2">',
'after' => '</div>',
) );
}
echo '</div></div>';
}
}
?>[/PHP]

[PyramidWeb]

<?php
function bakker_home_bottom() {
   if ( is_active_sidebar( 'home-bottom-1' ) || is_active_sidebar( 'home-bottom-2' ) ) {
      echo '<div class="home-bottom"><div class="wrap">';
         if ( is_active_sidebar( 'home-bottom-1' ) ) {
            genesis_widget_area( 'home-bottom-1', array(
               'before' => '<div class="home-bottom-1">',
               'after'  => '</div>',
               ) );
         }
         if ( is_active_sidebar( 'home-bottom-2' ) ) {
            genesis_widget_area( 'home-bottom-2', array(
               'before' => '<div class="home-bottom-2">',
               'after'  => '</div>',
            ) );
         }
      echo '</div></div>';

   }
}
?>

[PyramidWeb]

I'm sorry - I can't get the php-code above to the right formatting.

If I'm getting you right, you want to have a separate background color for the two widget areas at the bottom, right?

You need to put the two widget areas in the same container, to which you can then allocate your desired background color.

Try this: Change the code in your "front-page.php" as described in the code I posted above (sorry again for the weird formatting; make sure you pick the right one without certain characters replaced).

Then add to your "style-front.css" (in folder "css"):

.home-bottom {
    background: #ff1a1a;
}

Let me know if this works - I cannot test the code on your site. The wrap might need to go somewhere else.

[PyramidWeb]

Here's the php-code again with proper formatting:

[stfn]

Hi Pyramid Web,
thank you very much for your input. Unfortunately it doesn't work. I still can't get the widgets with one background in full width.

This is what I'm trying to accomplish, see img (with the two white widgets on the blue background)

[PyramidWeb]

Hi stfn,
I understand what you want to achieve. I don't see the code I suggested implemented on your demo-site, hence I cannot check what's wrong.
So, can you please edit your front-page.php and style-front.css and notify me. And make sure that you registered the sidebars correctly. It is very hard to fix the problem remotely without being able to see and / or edit your current php-files and css.

Since you're on a demo-site, I can offer you to send me a private reply with temporary access data to your site so I can edit the files directly.

[stfn]

This reply has been marked as private.

[PyramidWeb]

Hi stfn,
I did not receive your message. I just read in the forum FAQs "There is a feature built into the forum where you may mark a reply as Private then only forum moderators and administrators will be able to see it." Since I'm neither a moderator nor an administrator here, I cannot see your message. Is there an email you'd like to post here so I can reach out to you?

[stfn]

Aha. Strange you can't send someone a private message this way. I see it also in the forum FAQ.

I've got a yahoo mail address: stefan2013 - and you can guess the rest 😉

[PyramidWeb]

Ok, stfn sent me access data to his website and I could solve the issues for him. Here's a quick recap - maybe this helps others.

The goal was to have one row of 3 widget areas next to each other (this area is called "home-middle") and another row of 2 widget areas next to each other (this area is called "home-bottom"). It should be possible to have a different background for each of the widgets and their containers (i.e., the rows).

Here are the crucial parts:

In file "functions.php":

	
genesis_register_sidebar( array(
	'id'			=> 'home-middle-1',
	'name'			=> __( 'Home Middle #1', 'bakkerwidget' ),
	'description'	=> __( 'This is the first column of the home middle section.', 'bakkerwidget' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-middle-2',
	'name'			=> __( 'Home Middle #2', 'bakkerwidget' ),
	'description'	=> __( 'This is the second column of the home middle section.', 'bakkerwidget' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-middle-3',
	'name'			=> __( 'Home Middle #3', 'bakkerwidget' ),
	'description'	=> __( 'This is the third column of the home middle section.', 'bakkerwidget' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-bottom-1',
	'name'			=> __( 'Home Bottom #1', 'bakkerwidget' ),
	'description'	=> __( 'This is the first column of the home bottom section.', 'bakkerwidget' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-bottom-2',
	'name'			=> __( 'Home Bottom #2', 'bakkerwidget' ),
	'description'	=> __( 'This is the second column of the home bottom section.', 'bakkerwidget' ),
) );

In file "front-page.php":

And finally the css:

.home-middle {
	background-color: #fff;
	padding: 20px;
}

.home-middle-1,
.home-middle-2,
.home-middle-3 {
	float: left;
	padding: 20px;
	width: 31.623931623931625%;
}

.home-middle-2,
.home-middle-3 {
	margin-left: 2.564102564102564%;
}

.home-bottom {
    background: #39A8DF;
	padding: 20px;
}

.home-bottom-1,
.home-bottom-2 {
	background-color: #fff;
	float: left;
	padding: 20px;
	width: 48.717948717948715%;
}

.home-bottom-2 {
	margin-left: 2.564102564102564%;
}

That's it. In addition, I changed the child theme from fixed width to full width. Note that the code for "front-page.php" could be simpler; to me the suggested solution more elegant, though.

[PyramidWeb]

Here's the code for "functions.php" again - the formatting above is a mess, I'm sorry:

[stfn]

Just one additional quote. If you want this effect only for your homepage and let the other pages with the fixed with, you should use the following code in your CSS

.home .site-inner{
	max-width: none;
	padding: 0;
}

.site-inner, .wrap {
	margin: 0 auto;
	max-width: 1280px;
}

[Author]

Posts