I noticed that there are many tutorials on how to load specific JS & CSS for a specific page.

The problem I have is that sometimes my plug-ins load on specific posts and specific pages. I cannot have rules to define these pages or posts. Is there a way to load specific JS & CSS based on class or ID?

For example, I am using Next-Gen Gallery plugin. I want to program such that my site only loads Next-Gen' JS and CSS only when it sees this ID in the page (ngg-album). If possible, can I use wildcard, like if the page see any ID or class starting with NGG*, load Next-Gen JS & CSS.

Thanks! Cliff

  • Think of it: Next-Gen Gallery plugin is able to add 'ngg-album' class in the HTML using conditions handled in PHP. You can use same conditions to enqueue your assets. I don't know the plugin, so I can't tell you which those conditions are, but I guess that a shortcode is used, or a custom field is present or something like that. – gmazzap Jan 8 '15 at 14:58
  • Thanks G.M. The problem is that i dont know where in the code where it Next-Gen plugin add the 'ngg-album' class. Do you know the function or the section of code i need to look for in the plug in? Thanks! – BigRedDog Jan 9 '15 at 13:08
  • Sorry but no. I don't know the plugin so can't tell you where it does that. Maybe search for 'ngg-album' string in the source code? – gmazzap Jan 10 '15 at 18:56

WordPress enqueues javascript before the HTML is rendered so WordPress doesn't know what the class or ID is on the page.

What you MIGHT be able to do is deenqueue the Next-Gen gallery Javascript so it isn't loaded at all and then create your own Javascript file which loads the required Next-Gen JS if a particular class or ID is found. have a look at the jQuery function getScript() http://api.jquery.com/jquery.getscript/


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.