We released WordPress Twitter Boostrap CSS plugin today, at version 2.0.1b
This release saw a whole heap of internal changes and improvement, most of which I’ll cover in the coming week so you can take full advantage of the features on offer.
In this article I’m going to explain quickly how to start using the Glyphicons to spruce up your posts, pages and your whole WordPress website.
Before you look at that however, if you have a few minutes, we think you should consider taking a quick look at our new WordPress backup solution – it’s going to change the world of WordPress website backup and recovery protection. Check it out…
New Twitter Bootstrap WordPress Shortcode: [TBS_ICON]
First take a look at the Glyphicons available from the Twitter Bootstrap library.
As you’ll see, there are many icons available in the library and each icon has its unique name.
To put any one of these icons in your WordPress posts, you simply need to enter the following text anywhere in your WordPress post/page editor:
You then replace the text “
icon-my-lovely-horse” with the name of the icon you want (use the Glyphicons section on the Twitter Bootstrap site as a reference).
Twitter Bootstrap Glyphicons WordPress Shortcode Examples
I had to choose a default icon to show in case you didn’t specify the “class”. I decided upon “
icon-star-empty” but please, if you want to use this icon specify it explicitly as I may change or remove the default in future releases for whatever reason.
Example 1: Default
So, the following shortcode :
will give you:
Example 2: Zoom In and Zoom out Glyphicons
The following shortcodes text:
[TBS_ICON class="icon-zoom-in"] and [TBS_ICON class="icon-zoom-out"]
will give you:
Example 3: Custom Glyphicon Styling
With all our shortcodes we offer full support for adding custom CSS styles and element IDs so you can style them directly.
You use the parameters “style” and “id” to achieve this and enter values exactly as you would in HTML.
The following shortcode:
[TBS_ICON class="icon-off" style="border: 1px solid green; background-color: yellow" id="my-icon"]
with an HTML element ID of “
Example 4: Combining with other Bootstrap elements, e.g. Twitter Buttons
In this example, I’ll create a Twitter Bootstrap Button and embed a Twitter Glyphicon within it using our shortcodes.
The following shortcodes:
[TBS_BUTTON][TBS_ICON class="icon-trash" style="margin-right: 5px"]This is a rubbish button[/TBS_BUTTON]
will give you:
If you look closely at the code, I included a style of “
margin-right: 5px” making the layout inside the button nicer. Without it the image and the text wouldn’t be as neat.
This highlights the power of customization that is available to you with our Twitter Bootstrap WordPress shortcodes. With only a little effort you can spice up your links, add funky icons to your text, and if you’re feeling bold start modifying whole sections of your WordPress theme.
Instant access to the power of Twitter Bootstrap in WordPress
Our WordPress Twitter Bootstrap CSS plugin gives you instant access to the power made available to us all with the Twitter Bootstrap library.
We hope that this new shortcode helps and you find it useful.
As always, we welcome feedback and suggestions about this and anything else that may be on your mind concerning our hosting and Managed WordPress Hosting service.