Add inline CSS style to existing WordPress Plugin or Theme

WordPress facilitates the use of injecting inline CSS to an existing plugin or themes’ CSS via a function called wp_add_inline_style. This avoids echoing out a bunch of CSS using wp_head and is considered better practice.

One of the beneficial reasons is that it only appears where the existing plugin or themes CSS appears, that is, it may not be sitewide, also it immediately follows the main stylesheet so the CSS load order is better managed in terms of specificity.


In the image above a plugins main CSS file is loaded with an id of slicknavcss-css, a second stylesheet follows slicknavcss-inline-css, which are user generated CSS options from the plugin settings that need to load as CSS values, such as menu color, font-size etc – since these settings are an unknown they need to be passed in after the plugin is loaded and the settings are saved.

So as in above I have created a function wpb_add_inline_css and a variable $slicknav_custom_css to which I have made its value all the user generated rules, note that the variable is surrounded by double quotes to preserve the variables it is pulling from the database.

Then I am adding that the variable into the main CSS id of the stylesheet that already exists with a handle of slicknavcss using the wp_add_inline_style function.

Finally the main function is enqueued with wp_enqueue_script and ready to load.

Still Not Loading…

I have found that sometimes you need to enqueue the target CSS stylesheet if the inline style is not loading – so in the above the only difference is that the target CSS style sheet is also enqueued.

The same principle applies to themes as the author may allow users to apply certain CSS styles after the theme has been activated.



  1. Martin on April 19, 2020 at 3:59 pm

    Can you please suggest a plugin to inline small css and javascript for wordpress?

  2. Mateo on September 9, 2018 at 5:35 am

    what’s difference from force Inline Styles in the plugins? or same effect


  3. Paul on July 11, 2018 at 10:31 am

    Thanks for sharing.

    Are you aware of a way to do this from inside a template file?

    I can add the code to functions.php and it works perfectly.

    However, I’ve created a template with a built in slider and I want the user to be able to change the styles of the slider for each page that uses the template.

    Is there a specific reason why wp_add_inline_style isn’t working inside templates?

    Thanks, Paul

  4. Thiyagesh on April 3, 2017 at 9:39 am


    How can we add inline style, without adding empty css file here?

  5. Florin Kozma on September 24, 2016 at 6:28 pm

    Is this safe? Isn’t enqueing the second time make it enqueue twice? I suppose you already have your ‘slicknavcss’ style enqueued before writing this.

  6. Sean Vandenberg on February 13, 2016 at 6:03 am

    Cool, I wasn’t aware of this. Thanks, Neil.

Leave all Comment