Add custom CSS to shortcodes

Question

I'm developing a wordpress plugin. This plugin will use shortcodes to display larges chunks of HTML that are styled with Bootstrap 3. However, I cannot depend on whether or not the theme has bootstrap 3 enabled. Is there a way, from my plugin, to ensure that the bootstrap 3 libraries get added to the page?

I've looked through the documentation and nothing seems clear enough. I have a feeling it has to do with wp_enqueue_script, but not sure of the hooks I'd need to use to tie into the CSS/JS on the main page/post pages/theme header, etc.

trex005 · Accepted Answer · 2015-01-30 03:40:27Z

1

The summary is, when your plugin is loaded, you should register bootstrap :

add_action( 'wp_enqueue_scripts', 'my_plugin_register_scripts' );
function my_plugin_register_scripts(){
     wp_register_script('bootstrap','//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js',array('jquery'),'3.3.2',true);
     wp_register_style('bootstrap','//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css', array(), '3.3.2');
}

Then, when your shortcode is called, you enqueue bootstrap :

wp_enqueue_script('bootstrap');
wp_enqueue_style('bootstrap');

edited Jan 30, 2015 at 3:40

answered Jan 30, 2015 at 3:33

trex005

5,1354 gold badges32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

brazilianldsjaguar Over a year ago

I think that answers my question ... simply by calling wp_enqueue_script/wp_enqueue_style, that will put the script/style within the theme page? Should I call the enqueue scripts in my shortcode function, or in my plugin init?

trex005 Over a year ago

register gets wordpress ready for it, but does not actually push it out to the browser. When you are certain you need it, you fire the enqueue function which will push it out to the browser.

brazilianldsjaguar Over a year ago

yes, but should I call the wp_enqueue_... during my function that renders my shortcode, or somewhere else -- for example, the init hook.

trex005 Over a year ago

for most efficiency, during your function that renders your shortcode.

André R. Kohl Over a year ago

But that calls js as well as css in the footer. Any Idea how to get this into the header?

|

Collectives™ on Stack Overflow

Add custom CSS to shortcodes

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related