There are several wonderful plugins out there that handle shortcodes for Bootstrap-based themes, like Bootplate. However, we had a few ideas of our own, so we created another one called Bootplate Shortcodes.
If you’d like to use a different Bootstrap shortcodes plugin, we would suggest using either Bootstrap Shortcodes or Bootstrap Shortcodes for WordPress. We’ve tested them both here, so you know you’re good.
You can learn more about it and download Bootplate Shortcodes from the GitHub repo. The following offers some examples and documentation for the plugin.
Bootplate Shortcodes Reference
You don’t have to memorize all this jazz. Once the plugin is installed, you’ll find a series of new buttons in the page and post editor in a new, third row. Hover over the button for a ToolTip. Click it and it’ll paste-in the shortcode with some example content.
Let’s look at some examples, shall we.
Button Shortcode
Bootplate Shortcodes includes all your favorite HTML button classes from Bootstrap v3, and a few from Bootstrap v4 for good measure. All you have to do is click the Button shortcode in the Editor to insert an example shortcode for you to use.
The shortcode accepts two parameters:
type="" – The button type. Leave this off and it defaults to a regular a href="" with HTML5 role="button", but you can make it an actual <button type="button"></button> if you set the type="button"
classes="" – Here’s where the real styling happens. Simply add all the Bootstrap button classes you’d like added to this parameter to style the button to your liking.
Example Classes
Here are a sample of the classes you can use with examples. All Bootstrap buttons classes (including btn-lg, btn-sm, btn-block, etc.) are supported. It’s worth mentioning that .btn-default is called .btn-secondary in Bootstrap v4. No big deal. Bootplate supports both at once.
Bootstrap v4 includes a new button class, outlined buttons. We’ve included those classes in Bootplate.
To insert the button shortcode, simply click the button shortcode from the editor.
Slick(.js) Sliders
Bootstrap v3 and v4 both come with carousels, but there’s pretty terrible. They’re not very responsive, accessible, or easy to style and use. Bootplate doesn’t even waste overhead loading all the code to run these. Instead, we use Slick.js by Ken Wheeler.
Demo
{demo here}
Syntax
To use, simply add any one of the following classes to a series of DIVs like so:
{insert Gist here}
We’ve included .slick-col-12 (full width, one column, no arrows), .slick-col-6 (two-column until you’re at tablet width and scrolls two at-a-time), .slick-col-4 (three column slick slider that shows fewer and fewer as the viewport narrows), and .slick-col-3 (just like the three column one except this one is four column).
We’re working on a shortcode for this now.
Tweetables
Tweetables are something that was super-popular not too long ago and are still used by a lot of very social marketing folks out there. We decided to include this functionality in Bootplate because of how light-weight it ended up being.
Use it or don’t, but it’s there if you’re into stuff like this.
Example
In this paragraph, you see a bunch of boring content. However, when I write something that really grabs your attention, maybe I want to make sure you can easily tweet that sentance with a link to the page or post you’re currently viewing.
Something like Roses are #FF0000, Violets are #0000FF. Web nerds suck at poems–and so do you. That’s probably not even true. We’ll write something better later. For now, I think you get what a “tweetable” is.
Let’s talk now about how to use them.
Syntax
Tweetables are used via a shortcode. The syntax is below. It accepts only one parameter and that’s the via=”” which is “twitter-ease” for your twitter handle so it’ll say “blah, blah via @whatever” in the actual tweet. The link it tweets is the link of the page you’re already on.
To insert a tweetable shortcode, just click the tweetables button in the Editor.
Icon Shortcode
Bootplate drops Bootstrap v3 Glyphicons to lighten the load and, instead, loads just a handful of heavily-optimized font icons. To use these icons, you can use the icon shortcode.
See the Font Icons Reference page for a full list of class names and CSS details.
Since all these shortcodes can be nested, a good example would be something like:
Send Now!Which looks like this in the editor.
To insert a button or an icon shortcode example for you to work with, just click the button or icon shortcode from the editor.
