How apply CSS only to my custom WordPress shortcode?

Question

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?

you can give your own class to the` shortcode` ad and target the element using that class — Xenio Gracias
– Xenio Gracias, Commented Mar 20, 2019 at 9:12

Freddy Ochner · Accepted Answer · 2019-03-20 11:14:47Z

1

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' );

answered Mar 20, 2019 at 11:14

Freddy Ochner

1651 silver badge11 bronze badges

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

Collectives™ on Stack Overflow

How apply CSS only to my custom WordPress shortcode?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related