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.

wordpress-inline-style-css

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.

<?php
//Adding CSS inline style to an existing CSS stylesheet
function wpb_add_inline_css() {
//All the user input CSS settings as set in the plugin settings
$slicknav_custom_css = "
@media screen and (max-width: {$ng_slicknav_width}px) {
{$ng_slicknav_menu} {
display: none;
}
.slicknav_menu {
display: block;
background: {$ng_slicknav_background};
}
.slicknav_btn {
background-color:{$ng_slicknav_button};
float:{$ng_slicknav_button_position};
}
}";
//Add the above custom CSS via wp_add_inline_style
wp_add_inline_style( 'slicknavcss', $slicknav_custom_css ); //Pass the variable into the main style sheet ID
}
add_action( 'wp_enqueue_scripts', 'wpb_add_inline_css' ); //Enqueue the CSS style

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…

<?php
//Adding CSS inline style to an existing CSS stylesheet
function wpb_add_inline_css() {
wp_enqueue_style( 'slicknavcss', plugins_url() . '/slicknav/assets/css/slicknav.css' );
//All the user input CSS settings as set in the plugin settings
$slicknav_custom_css = "
@media screen and (max-width: {$ng_slicknav_width}px) {
{$ng_slicknav_menu} {
display: none;
}
.slicknav_menu {
display: block;
background: {$ng_slicknav_background};
}
.slicknav_btn {
background-color:{$ng_slicknav_button};
float:{$ng_slicknav_button_position};
}
}";
//Add the above custom CSS via wp_add_inline_style
wp_add_inline_style( 'slicknavcss', $slicknav_custom_css ); //Pass the variable into the main style sheet ID
}
add_action( 'wp_enqueue_scripts', 'wpb_add_inline_css' ); //Enqueue the CSS style

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.

ref

3 Comments

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

    Hi,

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

  2. 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.

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

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

Leave a Comment





%d bloggers like this: