WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

Function Reference/wp add inline style

Description

Adds extra CSS.

Works only if the stylesheet has already been added. Accepts a string $data containing the CSS. If two or more CSS code blocks are added to the same stylesheet $handle, they will be printed in the order they were added, i.e. the latter added styles can redeclare the previous.

Usage

<?php wp_add_inline_style$handle$data ); ?>

Parameters

$handle
(string) (required) Name of the script to which to add the extra styles. Lowercase string.
Default: None
$data
(string) (required) String containing the CSS to be added.
Default: None

Examples

wp_add_inline_style allows you to print extra styling whenever a certain stylesheet is loaded. For instance suppose a plug-in or theme makes use of the class .mycolor in a stylesheet to set a background color. This can be over-ridden by a user chosen color, stored in the database by using wp_add_inline_style to print the extra styling.

<?php
function my_styles_method() {
	wp_enqueue_style(
		'custom-style',
		get_template_directory_uri() . '/css/custom_script.css'
	);
        $color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
        $custom_css = "
                .mycolor{
                        background: {$color};
                }";
        wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
?>

Change Log

Since: 3.3

Source File

wp_add_inline_style() is located in wp-includes/functions.wp-styles.php