Using wp_add_inline_style to add inline CSS in WordPress
The wp_add_inline_style function is a feature in WordPress that enables the addition of custom CSS directly to enqueued CSS. This function works by attaching the custom CSS to a registered stylesheet, which is then printed in the HTML head section.
This function can be beneficial in several ways. For instance, it can be used to add responsive design elements to a site or to modify the appearance of specific sections without altering the original stylesheets. This function also helps to ensure that the custom styles are loaded in the correct order, as they are attached to an already enqueued stylesheet.
The wp_add_inline_style function is part of the WordPress Plugin API and is typically used in plugin or theme development. It is a way to add CSS to a WordPress site programmatically, offering a level of flexibility and control that might not be possible with traditional CSS files.
Parameters Accepted by wp_add_inline_style Function
The wp_add_inline_style function in WordPress accepts two parameters, both of which are mandatory.
$handle: This is a string parameter that specifies the name of the stylesheet where the additional CSS styles will be appended.$data: This is also a string parameter which contains the actual CSS styles that will be added to the specified stylesheet.
Return Value of wp_add_inline_style Function
The wp_add_inline_style function returns a boolean value. If the function successfully adds the inline styles to the specified stylesheet, it returns true. If it fails to do so, it returns false.
Examples
How to Add Custom CSS to a Specific WordPress Page
function custom_css_for_homepage() {
if(is_home()) {
$custom_css = "
.site-header {
background-color: #000;
}
";
wp_add_inline_style( 'my-theme-style', $custom_css );
}
}
add_action( 'wp_enqueue_scripts', 'custom_css_for_homepage' );
This code snippet checks if the current page is the homepage using the is_home() function. If it is, it defines some custom CSS to change the background color of the site header to black which. It then adds this custom CSS to the page using the wp_add_inline_style() function, passing the 'my-theme-style' stylesheet name as a parameter. This means that the given CSS will be added only when the 'my-theme-style' is loaded. The wp_add_inline_style() function is hooked into the wp_enqueue_scripts action, which ensures that the custom CSS is added at the correct point in the page load process.
How to Add Custom CSS to a Specific WordPress Post Type
function custom_css_for_post_type() {
if(is_singular('post')) {
$custom_css = "
.entry-header {
color: #ff0000;
}
";
wp_add_inline_style( 'my-theme-style', $custom_css );
}
}
add_action( 'wp_enqueue_scripts', 'custom_css_for_post_type' );
This code snippet checks if the current page is a singular post using the is_singular('post') function. If it is, it defines some custom CSS to change the color of the entry header to red. It then adds this custom CSS to the page using the wp_add_inline_style() function. The wp_add_inline_style() function is hooked into the wp_enqueue_scripts action, which ensures that the custom CSS is added at the correct point in the page load process.
Conclusion
The wp_add_inline_style function in WordPress is a tool used to add CSS directly into an already enqueued stylesheet. This function allows developers to inject custom CSS rules into the page, which can be useful for customizing the appearance of a website without needing to create a new stylesheet or modify the existing one. This can be particularly beneficial when making minor adjustments to the site’s style or when adding dynamic styles that depend on certain conditions.