I'm trying to insert some CSS at the very top of the Current Theme Stylesheet via plugin. (So that the CSS is easily over-ridden by the plugin user).

How would you prepend CSS to the Theme Stylesheet?

Also i'm trying to put some Javascript just before the /body tag in the theme, how would that be accomplished?


You should never modify the current theme's stylesheet via a plugin. What if the theme gets updated, or the user changes themes? Not a good idea. Instead, you should have the plugin create a custom css file, which could be located anywhere you wish, even inside of the current theme's folder.

The only way to output info just before </body> tag is by hooking into wp_footer(), but this will not always result in the content being output just before the </body> tag, since themes will often place the wp_footer() function within a DIV tag, or higher up in the footer. If you absolutely must output something just before the </body> tag, I would use jQuery to insert it. You could easily setup the content or HTML that is outputted with wp_localize_script().

If you are okay with the content/HTML not necessarily being immediately before the </body> tag, then use the wp_footer() method, which is what I recommend:

function your_custom_content_function() {
    echo 'this is outputted in the footer';
add_action('wp_footer', 'your_custom_content_function');
|improve this answer|||||
  • Is there a way to include the new stylesheet right after the <head> or preferrably right after the </title>? All I really care about with the CSS is adding the CSS above the Theme CSS Include so that the plugin user doesn't have to use CSS over-rides to create the CSS they want. I think That wp_footer function will work great. – Talon May 6 '12 at 4:29
  • It depends, again, on the theme. If the theme has used wp_enqueue_script() to load the CSS file, then you can easily load yours before, but if the theme simply has the CSS loaded via &lt;link&gt; in the header, then there is no way to guarantee it comes before. – Pippin May 6 '12 at 16:24

You should always use wp_enqueue_script() to register and output javascript and you should always use wp_enqueue_style() to register and output CSS. Both of those links to codex pages provide good code snippet examples. Make sure that you hook the functions to the right action, as WordPress 3.3+ throws a warning if you hook it to actions that run too early.

If you want CSS to take precedence over a theme stylesheet, then you want those styles to be added to the <head> after the theme stylesheet. If two CSS selectors are identical, the one that comes second takes precedence. Because wp_enqueue_styles() gets fired as part of wp_head() which is supposed to be the last thing in the <head>, using that shouldn't be a problem, even if the theme registers their stylesheet by putting it elsewhere in the <head>.

wp_enqueue_scripts() has an $in_footer argument that lets you print the script at the end of the document. As mentioned elsewhere, you can't guarantee where a theme puts their call to wp_footer, but that's pretty much all you can do.

|improve this answer|||||

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.