If you got the new Pagelines Platform 5 and wondered where your bootstrap grid went, this article is for you…
Our agency is a big fan of Pagelines products as they’re some of the fastest and most versatile WordPress frameworks we’ve found to do rapid custom site builds for our clients. Since we’ve been a Pagelines developer since about 2012, we were of course excited to see the new, JS pure Platform 5 innovation their dev team came up with, and so far we’re amazed at the speed it allows us to work at in bringing a site from concept to reality in a fraction of the normal dev time. But, there was just one problem we found…
So where’s my Bootstrap?
After being used to the Bootstrap grid system and JS features (if you don’t know what that is, go HERE) built into the previous Pagelines frameworks, on through the DMS years of their product as well, I quite naturally started typing up post and container content using some “row” and “span6” classes in the DIVs, or thought of using ‘btn’ classes and modals, only to find out on loading the content that it all fell flat on it’s face… A quick Google search told me some other old-school Pageliners had the same experience, because the Pagelines team decided to strip Bootstrap from the native features. Now their reasoning was likely very sound and tied to the fact that Platform 5 is intended to be a more versatile, theme-agnostic tool for developers, and mandatorily loading Bootstrap adds extra bloat you may not want, or it might double up on a theme already running on Bootstrap.
How can I get it back, and should I?
This was my question today as well. How can I get Bootstrap and Pagelines back together again, old friends that they are? Granted, Pagelines Platform 5 has a GREAT native grid system and some minor CSS stylings for buttons, etc… But for those times you need a quick Bootstrap accordion, a text well styled fast, or some other native Bootstrap function, Platform 5 leaves that up to you to resolve, as it should.
A few searches for WordPress plugins loading in Bootstrap assets told me this likely wasn’t the way to go, not unless I wanted to be branded with some other dev’s link on my client sites, or pay an extortion fee **ahem** subscription fee to some service tied to it. But any agency should be able to navigate their own theme solutions, and that’s the way we went as well. By pulling down the latest Bootstrap 3.0 assets library, putting it in our child theme running under the Pagelines Platform 5 framework, and properly enqueuing the scripts in WordPress in our functions file, it was easy enough to get our Bootstrap back into Pagelines!
What you’re going to need to do (it’s pretty easy).
Assumptions: You are running Pagelines Platform 5 framework with a CHILD theme under it (don’t go changing core files!) and know what that is. If you don’t know, ask Google and you’ll learn quick enough.
Step 1 – Download Bootstrap 3.0 (http://getbootstrap.com/getting-started/#download) and put up the CSS (and JS folder too if you want those functions) in your child theme folder. I clustered them under a ‘bootstrap’ folder to organize the assets in the theme folder.
Step 2 – In your child theme functions.php file enqueue these resources to load in your child theme. I used the following method that should work on any child theme assuming you put the assets under a ‘bootstrap’ folder like I did; if your path in the child theme is different, just modify as needed.
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-js', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
Some of this was borrowed from the suggestions on this post here (http://marcoghislanzoni.com/blog/2013/10/25/adding-bootstrap-3-0-support-to-your-wordpress-theme/) but changed to fit the child theme structure for Pagelines Platform 5 framework;
Step 3 – Try out some bootstrap-pure CSS for some grid elements i.e.
<div class="row"><div class="col-md-6">stuff</div><div class="col-md-6">more stuff</div></div>
This way you can make sure the assets loaded on your theme and see it in action. If you are used to the old Pagelines ‘spanX’ syntax, and not the native Bootstrap one, you can just change the CSS stylesheet to suit your desire (but make sure you know what you’re doing if you change over xs, md, lg classes and what those extensions mean in Bootstrap!) I have NOT seen any conflicts occur yet with the native PL5 CSS or JS when loading Bootstrap assets on to the child theme directly on our site we tested this on. If you do, please let us know!
If it doesn’t work?
If you do the above and it doesn’t work, check a few things. First use Chrome Dev tools or Firebug to see your page source, check if the bootstrap assets are loading in and if the URL to the assets is correct. If not, there’s your culprit. Next, perhaps they load but still nothing. Check your JS console for errors on the page using Firebug or Chrome Dev tools, perhaps another WP plugin or theme function is conflicting with your Bootstrap JS, or perhaps if using a non-Platform 5 Framework theme it has the same CSS class names as Bootstrap but different definitions for those classes (possibly the dev making your theme used Bootstrap as a base and modified it, not uncommon).
Hope that helped somebody!
I think the above is simple enough for an average WordPress dev to do. It amazes me people out there try to make paid plugins to do this same thing, but so it goes… Hope this helps someone out there diving into the awesome new Pagelines Platform 5 who is wondering where their Bootstrap grid went!
