Whenever developing a WordPress Theme or plugin, you might have surely felt the need to modify some CSS properties such as colors, font size, transitions, hovers and other CSS elements using PHP. There are many ways to do so but we are going to focus on the most recommended one i.e. wp_add_inline_style. This function is used to add custom CSS styles to already enqueued files. Let’s see how it works.
The syntax of the function is as follows –
wp_add_inline_style( string $handle, string $data )
This function accepts two parameters, the first one string $handle is the id of the enqueued stylesheet. It can be the default stylesheet of the theme (style.css) or any other css file including styles for the theme.
The second is the data to be added in the stylesheet. It needs to be in the form of a string.
The only thing to keep in mind is that this function gets called after stylesheets are loaded in a theme or plugin. It is, in normal circumstancs, in the action hook wp_enqueue_scriptsaction hook. If this function gets called before wp_enqueue_scriptsruns, it will throw an error since one of the arguments is not defined.
Let’s check it out using an example. Suppose we want to transform the site title from normal to uppercase and we plan on adding the CSS inline the main stylesheet.
Go to functions.php and create a function my_theme_inline_css(). In order to add CSS inline, we add the following to the function –
$css = '.site-title a {text-transform: uppercase;}';
wp_add_inline_style('my-theme-style', $css);
Here, I am assuming the ID of the enqueued stylesheet file is my-theme-style. You need to change it with the ID of your stylesheet. The whole things like this –
function my_theme_inline_css() {
$css = '.site-title a {text-transform: uppercase;}';
wp_add_inline_style('my-theme-style', $css);
}
Currently, it will not do anything as it is not enqueued and in turn, is not being implemented. We need to enqueue it. It must be enqueued in the wp_enqueue_scripts hook or after that. You can check out the firing sequence from this article on Rachievee.
I am going to hook it o wp_enqueue_scripts. The whole code will look like this –
function my_theme_inline_css() {
$css = '.site-title a {text-transform: uppercase;}';
wp_add_inline_style('my-theme-style', $css);
}
add_action('wp_enqueue_scripts', 'my_theme_inline_css');
This should add the CSS code inline the main stylesheet file (or the one whose ID is provided). This is the most basic implementation of wp_add_inline_style. You can use it to add conditional styles based on Customizer settings, Widget Styles and many other functionalities.
Just remember that it needs to be called in or after wp_enqueue_scripts hook.
