Components

The primary way to extend and customize Bootplate is though plugins and child themes.  However, for performance reasons, we built a few snazzy components in for you developer nerds.  Here’s a quick rundown.

Theme Customizer

There are just a handful of global settings and customization using the Theme Customizer, but there are a few.  Here’s a screenshot.  More details in the setup docs here.

bp-customizer-defaults


Bootstrap Components

For performance reasons, we’re only loading a small part of the Bootstrap library.  You can download the json config file and upload that to getbootstrap.com/customize if you want to tweak what’s included.  For now, here’s what’s included in our smaller (and faster) Bootstrap v3.3.x included in Bootplate.


Fancy Buttons

We’ve included all your favorite HTML button classes from Bootstrap v3, and added a few from Bootstrap v4.  We even added a new one ourselves for buttons in a processing state (for ajax requests, or whatever).  Here’s a quick demo.

Bootstrap v3 Buttons (a few to show)

Outlined Buttons from Bootstrap v4 Alpha 2

It’s worth mentioning that .btn-default is called .btn-secondary in Bootstrap v4.  No big deal.  Bootplate supports both at once.

Processing Buttons

Simply click the following buttons to add the .processing class to them to see the nifty style animation.  Enable this by simply adding the .btn-process class to the normal Bootstrap buttons.


Search-Specific Page & Rewrites

WordPress likes to simply use the home page with a query string for its built-in search.  We think that’s terrible.

Bootplate comes with BOTH a search-specific page (bootplate.jdmdigital.co/search/) as well as URL rewrites that turn a search for the word “Bootplate” from something ugly like index.php?s=bootplate into something more like /search/bootplate which is WAY better for SEO.

To enable it, simple head over to Appearance >> Customize and under the General Settings menu, check the box for Enable Search IconDetails here.

Filter for WordPress SEO Users

{gist of filter code goes here, once tested.}


Viewport Checking

It might be nice to know if an element is within the viewport or not.  Well, with the built-in viewport checker, that’s easy.  Here’s how it’s done.

{gist of filter code goes here, once tested.}


Lazy-Loading Images

Bootplate is all about performance.  It already asycronously loads CSS (thanks to loadCSS.js), but it also supports lazy-loading of images too.

The CARD shortcode included in Bootplate Shortcodes comes with this pre-integrated for you.  Simply make sure your card has an image header.  However, you can add this function to just about any image you want.  Here’s how.

{more here with gist or PRE shortcode.}


Responsive HTML5 Gallery

WordPress 3.9 came with an option to support HTML5 image galleries nativity.  We still think there are a number of plugins out there that do it better, but Bootplate includes all the CSS you’ll need to use the built-in stuff.  Here’s a quick & dirty example of a 3-column WordPress HTML5 gallery.