Shortcodes

Instead of building a WordPress theme with special [shortcodes] that quickly let you insert layout elements while keeping you from learning, Boilerstrap makes it easy for you to learn how to use Bootstrap‘s built-in classes for HTML so the skills you learn using this theme will help you build better sites.

Bootstrap‘s classes function much the same way WordPress shortcodes work: you apply a social name inside of a code tag into your content, while Boilerstrap watches for those specific words so it can apply styling rules or additional functionality.

For example, try loading up a new post or page in WordPress, and select the tab on your editor labelled text to edit your content in HTML markup. It should look something like this:

new-post

Go ahead and add a link to your page. You can flip back to the visual editor just to insert the link if you need to, but be sure to flip back to text mode when you’re finished. Your editor should now look something like this:

enter-a-link

If we were to preview your new blog post right now, your link would simply show up as a text link like any other, so let’s double-check that so we know what we’re editing. After you’ve clicked Publish, you should be able to view your post on the front end of your website. It should look something like this:

preview-link

Now comes the fun part. If you want to add a Bootstrap-style button, all you need to do is add class="btn" inside the <a> tag like this:

add-btn-class

Now that we’ve added the button style to our link, let’s click on the Update button to save our changes and then check out our test post on the front end of the website:

preview-button

Now we have successfully made our WordPress content look nicer by using Bootstrap‘s built-in ‘shortcode’ classes. To see what else you can do with buttons, and what other shortcodes are available, check out the other pages in this documentation or for more Bootstrap-specific class names and documentation, find more classes you can use at Bootstrap’s CSS Documentation