remove .site-inner from one page

[hmistler]

Hi again - on my homepage, I'm trying to get my slider to be the main content, flush with the bottom footers. In Firebug I can see that I still have a .site-inner in my html for the page, depsite running this code on my functions.php to remove the loop from this page:

//Remove Loop from Home Page
function thmeprefix_remove_homepage_content() {
		if (is_page('20')) {
			remove_action( 'genesis_loop', 'genesis_do_loop' );
		}
}

add_action( 'genesis_before','thmeprefix_remove_homepage_content' );

Is there something else I need to do to remove the .site-inner from my homepage so my slider sits flush with the bottom? THANKS!

http://www.jpdevelopmentcorp.com/home/

[Tonya]

Hello,

Approach 1: Server-Side Approach

.site-inner is actually added in genesis/header.php file at the bottom of the file. You can target it using the "genesis_markup{context}" filter as such:

add_filter( 'genesis_markup_site-inner', 'tonya_remove_site_inner', 10, 2 );
/**
 * If this is the targeted page, remove .site-inner by short-circuiting the
 * markup via the context.
 *
 * @since  1.0.0
 *
 * @see  genesis_markup() in genesis/lib/functions/markup.php for more information
 * 
 * @param  bool $short_circuit 	Set to false when passed in
 * @param  array $args   		Array of arguments.
 * @return string|bool      	Returns an empty string if this is the target page;
 *                              else, returns the $short_circuit.
 */
function tonya_remove_site_inner( $short_circuit, $args ) {
	return is_page( 20 ) ? '' : $short_circuit;
}

While you can technically do the above, it can be dangerous as it simply removes the structure of <div class="site-inner"></div>. It does not remove everything within .site-inner. To ensure on the server-side that nothing is loaded in the .site-inner container, you would need to repeat the above code for the other contextual elements found in genesis/lib/framework.php starting after get_header() down to get_footer().

Approach 2: Client (browser) Approach
Simply hide .site-inner in the DOM via CSS styling by doing the following:

1) Within the page(s) you want to hide .site-inner, add a body class such as jpd_hide_site_inner (or whatever you want to call it). You add this in the metabox field within the Page (scroll down the page) in the Layout Settings metabox and its the field Custom Body Class.

2) Next add the following CSS:

body.jpd_hide_site_inner .site-inner {
    display: none;
}

Although .site-inner is still within the DOM, it is no longer visible in the browser and therefore, does not take up space.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[hmistler]

Wow, thank you so much! that second option worked perfectly!

[Tonya]

You're welcome!

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts