Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialShaun Taylor
2,654 PointsBootstrap or Genesis?
Hi Guys,
Around 1.5 years ago I learnt with Treehouse, how to build a Wordpress theme based on bootstrap with Zac Gordon. Since then, I have been building client websites this way, using my initial bootstrap started theme I developed during the tutorials.
So a year or so later, I've joined Treehouse again to brush up on my skills as I have a couple of big sites I'm working on and see the Genesis theme track... I'm now wondering if I should leave bootstrap behind and stat using Genesis?
To begin with, it seems Treehouse favoured Bootstrap as their preferable method of building a custom Wordpress template. This doesn't seem to now be the case - Can anyone advise?
I know its a broad question, I'm not looking for a big breakdown of features, I'm just wondering if Bootstrap is now considered 'out of date' by the teachers and the Treehouse community?
Many thanks,
Shaun :)
2 Answers
Aaron Bolton
4,512 PointsBootstrap and Genesis are both awesome and widely used (Bootstrap is not out of date), and they can be used together! I don't use any Genesis CSS in my Genesis child themes; I strip that out and use Bootstrap-based custom styles (for styles.css) while retaining the PHP framework of Genesis. Bootstrap elements can be injected using the filters and actions of Genesis. Here are some examples of code that I use to frame a Genesis-based site with Bootstrap elements
<?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' );
Andi Wilkinson
26,822 PointsBootstrap 4 is in Alpha and I see Guil Hernandez has done some sessions on it so I wouldn't say that Treehouse are favouring Genesis over Bootstrap, I guess its been added as there is a demand for learning it. I imagine whatever framework you choose to use is preference?
Anthony c
20,907 PointsAnthony c
20,907 PointsI don't know anything about genesis, but I think it depends on your situation.
If you leave the wordpress world for another development stack, everything you learn about genesis will be essentially worthless. As oppose to being good with bootstrap, which is useful all over.
So I'd ask yourself (1) if you think you're a wordpress lifer. Then (2) I'd ask yourself if genesis will let you do things that bootstrap can't.
I also noticed there are 2-3 other genesis-like frameworks getting some hype in the wordpress world. So, make sure genesis isn't on it's way out before you invest a lot of time.... a lot of people who invested time in angular 1 are now having to go and learn react.js... sometimes you can't avoid it, but it's worth trying to avoid that situation.
http://athemes.com/collections/best-wordpress-theme-frameworks/