How to Integrate Bootstrap Features into WordPress via Shortcodes

  • 9 Read Time(minutes)
  • 4/5 Difficulty
  • <> Application

In this tutorial we’re going to take a look at how we can include Bootstrap’s components and JavaScript libraries into WordPress. To achieve this, we’ll also learn how to create our own custom shortcodes and integrate them into the WordPress editor.

This Blog you’re reading is based on WordPress as you may already know. But the whole WordPress theme relies on the Bootstrap framework. By default, Bootstrap is not compatible with WordPress. If we wanted to use Bootstrap’s features easily, we would have to dig into WordPress a little. That’s what I’m going to tell you how in this article.

What you’ll need

  • A working WordPress installation with an editable theme
  • Bootstrap files downloaded and copied into your WordPress theme folder
  • bootstrap.js, bootstrap.css, and the latest jQuery library included in your WordPress theme
  • Some kind of code-knowledge in PHP and JavaScript

Case 1

We want to integrate Bootstrap’s Alert boxes and use them with just one click. Just like this one.

[alert type=”alert-info”]HEADS UP! This is an information box.[/alert]

Step 1.1

The first thing we want to do is tell WordPress that we want to add a button to the TinyMCE visual editor. To take care of that, insert the following piece of code into functions.php located in your theme folder.

add_action('init', 'add_button');
function add_button() {
  if ( current_user_can('edit_posts') && current_user_can('edit_pages') )
  {
    add_filter('mce_external_plugins', 'add_plugin');
    add_filter('mce_buttons', 'register_button');
  }
}

In the above code, add_action hooks a function onto a specific action. The if condition checks if the user can edit pages and posts, and only adds our button when this is true. It’s just a safety feature, I recommend using it. Inside the statement, two (to-be-written) functions are called.

Step 1.2

Let’s continue by writing our functions. We’re still editing functions.php.

function register_button($buttons) {
    array_push($buttons, "alert");
    return $buttons;
 }

The register_button() function is self-explanatory – it adds a new button into the $buttons array. We’ll call this button “alert”.

Onto the next one.

function add_plugin($plugin_array) {
    $plugin_array['alert'] = get_bloginfo('template_url').'/js/customcodes.js';
    return $plugin_array;
 }

The add_plugin() function lets WordPress know where to look for the source of our alerts. We’ll create the aforementioned customcodes.js file in a second.

Step 1.3

Okay. So far we’ve been working in the functions.php file telling TinyMCE to add our button. Now, let’s tell WordPress what this button is actually going to do. To keep our JavaScript files organized, let’s write our custom shortcodes in a separate file. We can name it customcodes.js just like we referenced to it in the above step.

(function() {
    tinymce.create('tinymce.plugins.alert', {
        init : function(ed, url) {
            ed.addButton('alert', {
                title : 'Add a Bootstrap Alert',
                image : url+'/../img/mce-alert.png',
                onclick : function() {
                    ed.selection.setContent('[ alert]' + ed.selection.getContent() + '[ /alert]');
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
})();

Pretty please, disregard the space ‘ ‘ after the opening brackets ( [ ).

So, this is it… quite beautiful isn’t it? Keeping it simple, this function adds a button with the name of alert, sets a hover title, imports an icon for the button, and (most importantly) lets WordPress know what to do upon click. In our case, we are telling the button to output the “alert” shortcode, wrapping any selection we had made before clicking it.

Please take note that image : url links to the actual folder that this file is located in. We can get out of this folder by starting the path with ‘/../’.

Make sure you save the above file.

Step 1.4

Now we have a working button in TinyMCE! If you upload all the changed files to your server and try adding a new post in WordPress, you’ll see that the new Alert button has been added to the end of the button list. If the button doesn’t have an icon, you may want to create a 20×20 px icon file and upload it to the corresponding directory.

Click the button and you’ll see that it outputs [ alert]selected text[/alert]. This is all nice and cool, but that doesn’t do anything yet. We have to tell WordPress how to handle this shortcode. Let’s see how we can do that. We need to switch back to functions.php for this next piece of code.

add_shortcode("alert", "alertFn");
function alertFn($atts, $content = null) {
    return '<div class="alert">'.$content.'</div>';
}

In this basic example, we call the add_shortcode function to hook up our alert action to a function that is going to interpret it. Let’s call this function alertFn. Then, the alertFn() function puts out the given HTML markup. If you take a look at the Bootstrap documentation for Alerts, this is the most basic markup we need.

Save all your files, upload, refresh and vois’lá.

 

Bonus Step 1.5

Good job. There are a couple more types of Alerts in Bootstrap. Let’s kick things up a notch by adding functionality for that.

Switch over to customcodes.js, and let’s add some extra code to the onclick event function.

onclick : function() {
    ed.selection.setContent('[ alert type=""]' + ed.selection.getContent() + '[/alert]');
}

We’ve added the type attribute to the alert tag. Now let’s switch back to functions.php and tell WordPress how to handle it.

function alertFn($atts, $content = null) {
    extract(shortcode_atts(array(
        "type" => ''
    ), $atts));
    return '<div class="alert '.$type'">'.$content.'</div>';
 }

Okay, so here with the extract() function we can grab a string value from the type attribute and insert it next to the basic alert class inside the div. So if I were to input “alert-info” to type, then the result would be <div class=”alert alert-info”>… And basically this is what we are trying to achieve – to have more than one class for that div.

If you save everything, upload and refresh, you can try out Bootstrap’s built-in Alert box styles.

[alert]This is the default alert without anything passed to the function.[/alert]

[alert type=”alert-info”]This is an information output by passing “alert-info”.[/alert]

[alert type=”alert-error”]This is an error or a danger message output by passing either “alert-error” or “alert-danger”.[/alert]

[alert type=”alert-success”]This is a success message output by passing “alert-success”.[/alert]

Case 2

We’d like to implement Tooltips from Bootstrap and use them with a click of a button. How does a Tooltip look like?

Please [tooltip title=”Tadaaaa! I’m a tooltip.”]Hover over me![/tooltip]

Step 2.1

Okay so we can create the functionality for Tooltips in the same was as we did with the Alerts above.

First step is creating the add_button() function in the functions.php. Oh wait… it’s already there; no need to touch it.

Step 2.2

Second step, the register_button() function. Let’s add “tooltip” to the list, like this.

function register_button($buttons) {
    array_push($buttons, "tooltip");
    array_push($buttons, "alert");
    return $buttons;
 }

Not a pain. Same thing goes for add_plugin().

function add_plugin($plugin_array) {
    $plugin_array['tooltip'] = get_bloginfo('template_url').'/js/customcodes.js';
    $plugin_array['alert'] = get_bloginfo('template_url').'/js/customcodes.js';
    return $plugin_array;
 }

And boom, all the same as in the previous example.

Step 2.3

Switch over to customcodes.js and let’s duplicate the tinymce.create() and tinymce.PluginManager.add() functions. Rewrite everything from “alert” to “tooltip”, and for the onclick function, we’ll want to request the actual title. The onclick event’s function is going to look like this.

onclick : function() {
    ed.selection.setContent('[ tooltip title=""]' + ed.selection.getContent() + '[/tooltip]');
}

Step 2.4

And finally, switch back to functions.php, and duplicate add_shortcode() and its corresponding function. Again, replace every “alert” with “tooltip”. Instead of “type”, we need to extract the “title” and pass it on to the span tag as “data-original-title”. Like this.

add_shortcode("tooltip", "tooltipFn");
function tooltipFn($atts, $content = null) {
 extract(shortcode_atts(array(
 "title" => ''
 ), $atts));
 return '<span rel="tooltip" data-original-title="'.$title.'">'.$content.'</span>';
 }

According to the Bootstrap documentation for Tooltips, we can also play with the data-placement attribute if we wanted to. There are four directions for tooltips. If we don’t like the default “top” value, we can hardcode it into the functions.php file, or define each individual tooltip a direction via a more advanced way.

Here is the end result in the WordPress visual editor. Please disregard my ugly icons. :)

Conclusion

This is how we can create custom shortcodes in WordPress to make several Bootstrap functionalities work easily with just a click. I hope you’ve learnt a lot from this tutorial and you can now create your own custom shortcodes in WordPress.

Don’t like the look of these elements? Feel free to add the corresponding classes to your custom stylesheet, and tweak the CSS to your taste.

Join the Conversation!

Do you use some other method of creating shortcodes? What shortcodes do you usually use in your everyday WordPress work? Share your knowledge and questions with the Community!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

5 Responses

Comments

Trackbacks

There are no trackbacks yet.

Join the Conversation

Captcha: − 2 = three