plugins - Load css classes after using ajax calls

I wan to add a responsive div to my wordpress page using bootstrap css, just when i enqueued bootstrap style it distroy themes, so i wan to make that div load using ajax call, call that enqueued style after document is ready then i will add css classes using jquery addClass( ). This way themes styles will not be afected with my custom css

I wan to add a responsive div to my wordpress page using bootstrap css, just when i enqueued bootstrap style it distroy themes, so i wan to make that div load using ajax call, call that enqueued style after document is ready then i will add css classes using jquery addClass( ). This way themes styles will not be afected with my custom css

• plugins
• plugin-development
• ajax
• jquery
• javascript

Share Improve this question asked Mar 12, 2019 at 11:03 butalinbutalin 11711 silver badge55 bronze badges 7

• That's not going to work work. If you load bootstrap after the page has loaded it's still going to ruin the styles. If you've already got a theme then you shouldn't be loading a framework on top of that. What exactly do you need to do? You don't need bootstrap to have responsive divs. It's trivial to do it yourself with CSS. – Jacob Peattie Commented Mar 12, 2019 at 11:14
• Yes but div contains forms and button (bootstrap elements) so i wan just to load it and applicate only to my div not for the rest of the page – butalin Commented Mar 12, 2019 at 11:16
• You can't. That's not how CSS works. You should just style the elements yourself. You're not going to get anywhere if you try to do everything with Bootstrap. – Jacob Peattie Commented Mar 12, 2019 at 11:17
• Thank you Jacob for your help, i know that css dont work like that, but jquery can, you don't think so. – butalin Commented Mar 12, 2019 at 11:20
• No. No it doesn't. You can add classes with jQuery, but you still need a stylesheet to style them, and if you load your Bootstrap stylesheet then the rest of it will apply anyway. – Jacob Peattie Commented Mar 12, 2019 at 11:22

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 1

Styles won't be affected if you use different selectors. Create a custom stylesheet, and enqueue it immediatelly. When the page is ready just apply the styles to the mentioned responsive div, or create some logic behind it.

So for example if you have <div class="custom-sidebar">Some content</div>

Enqueue custom style within functions.php

wp_enqueue_style( 'some-custom-styles', get_stylesheet_uri() . "/custom.css" );

Afterwards just assign whichever class you want

$( ".custom-sidebar" ).addClass( ".myClassFromCustomCSS" );

You may be able to use a shadow DOM (see https://css-tricks/playing-shadow-dom/), or put it an <iframe>.
(will expand soon but don't have time right now.)