Created
June 5, 2017 14:11
-
-
Save SiGaCode/2b9ae24a163f4c7a5a67f42b0f00498f to your computer and use it in GitHub Desktop.
Combine Genesis with Bootstrap, use Genesis filters to add Bootstrap divs and classes while retaining the framework base.
Credits: https://teamtreehouse.com/community/bootstrap-or-genesis
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//* Add Bootstrap container class to header | |
function my_site_bootstrap_header( $attributes ) { | |
$attributes['class'] = $attributes['class']. ' container-fluid'; | |
return $attributes; | |
} | |
add_filter( 'genesis_attr_site-header', 'my_site_bootstrap_header' ); | |
//* Add Bootstrap container wrap around page content | |
function my_site_start_page_container(){ echo '<div id="page-container" class="container-fluid"><div class="row">'; }; | |
function my_site_end_page_container(){ echo '</div><!-- /.row --></div><!-- /.container -->'; }; | |
add_action('genesis_after_header','my_site_start_page_container',20); | |
add_action('genesis_before_footer','my_site_end_page_container'); | |
//* Add Bootstrap container wrap around footer | |
function my_site_start_footer_container(){ echo '<div id="footer-container" class="container-fluid"><div class="row">'; }; | |
function my_site_end_footer_container(){ echo '</div><!-- /.row --></div><!-- /.container -->'; }; | |
add_action('genesis_footer','my_site_start_footer_container',0); | |
add_action('genesis_after_footer','my_site_end_footer_container'); | |
//* Add more structural wraps | |
function my_site_start_wraps(){ ?> | |
<div id="outer-wrap"> | |
<div id="inner-wrap"> | |
<?php } | |
add_action('genesis_before','my_site_start_wraps'); | |
//* End structural wraps | |
function my_site_end_wraps(){ ?> | |
</div> | |
</div> | |
<?php } | |
add_action('genesis_after','my_site_end_wraps'); | |
//* Add inner wrap | |
function my_site_start_inner_wrap(){ ?> | |
<div class="site-inner-wrap"> | |
<?php } | |
add_action('genesis_after_header','my_site_start_inner_wrap'); | |
//* End inner wrap | |
function my_site_end_inner_wrap(){ ?> | |
</div> | |
<?php } | |
add_action('genesis_footer','my_site_end_inner_wrap'); | |
//* Add Bootsrap columns to page content | |
function my_site_bootstrap_content( $attributes ) { | |
$layout = genesis_site_layout(); | |
if($layout == "content-sidebar"){ | |
$attributes['class'] = $attributes['class']. ' col-xs-12 col-sm-8'; | |
} | |
else if($layout == "full-width-content"){ | |
$attributes['class'] = $attributes['class']. ' col-xs-12'; | |
} | |
return $attributes; | |
} | |
add_filter( 'genesis_attr_content', 'my_site_bootstrap_content' ); | |
//*Add Bootsrap columns to sidebar content | |
function my_site_bootstrap_sidebar( $attributes ) { | |
$attributes['class'] = $attributes['class']. ' col-xs-12 col-sm-4'; | |
return $attributes; | |
} | |
add_filter( 'genesis_attr_sidebar-primary', 'my_site_bootstrap_sidebar' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment