CODEWITHSUNDEEP
javascriptcsswordpresspluginsshortcode
user9475796
user9475796

Reputation:

How apply CSS only to my custom WordPress shortcode?

I'm writing my second WordPress plugin, I successfully enqueued JavaScript and CSS (Bootstrap) to backend settings page. Now, to interact with frontend, I want to create some shortcodes using Bootstrap. How can I use Bootstrap (and other custom CSS and JavaScript) only in my shortcodes without affecting style of the pages that will use the shortcodes?

Upvotes: 0

Views: 3992

Answers (1)

Freddy Ochner
Freddy Ochner

Reputation: 165

You can put a div-container around your content with a unique class name.

function shortcode_func(){
  return '<div class="your-unique-shortcode-class">...</div>';
}
add_shortcode( 'your-shortcode', 'shortcode_func' );

Than you can add your stylesheet with the wp_enqueue_style function.

function shortcode_footer_func() {
  wp_enqueue_style( 'shortcode_styles', 'your/path/to/style.css');
}
add_action( 'wp_footer', 'shortcode_footer_func' );

Upvotes: 1

Related Questions