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
-
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 PeattieMar 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– butalinMar 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 PeattieMar 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.– butalinMar 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 PeattieMar 12, 2019 at 11:22
2 Answers
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" );
-
Yo got the idea ! But i wan to work on my plugin using bootstrap that add action to wp interface, some how themes will not support bootstrap, so i need just to pick specific classes using jquery (style will not be applied but loaded, i ll applied it with jquery)– butalinMar 12, 2019 at 20:54
-
Why don't you just copy those specific classes in separate file? But pay attention that if you load CSS it will target the selectors and apply styles immediately, unless the styles are not present at the moment of loading of the page. Mar 12, 2019 at 20:59
-
How can i do that, i wanna use bootstrap classes, now i'm righting my own css to do that until i found how to do that– butalinMar 12, 2019 at 21:03
-
You need to load CSS when plugin requests it, not before. Can you share a code where you load the bootstrap? Mar 12, 2019 at 21:09
-
You may be able to use a shadow DOM (see https://css-tricks.com/playing-shadow-dom/), or put it an <iframe>
.
(will expand soon but don't have time right now.)