I am trying to inject a inline style css to my body element via the functions.php file. It needs to be inline, because I am using a ACF to let the user change the image.
This should be the result:
<body style="background-image: url('<?php the_field('background'); ?>');">
I read about the wp add inline style, but i couldn't figure it out.
Update: Here is the function I tried:
function wpdocs_styles_method() {
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/body.css'
);
$img = get_theme_mod( "<?php the_field('background') ?>" );
$custom_css = "body {background-image: {$img}";
wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );
I did load a body.css to tried to add the inline css. But it didn't work - maybe this isn't the right approach at all?
I am trying to inject a inline style css to my body element via the functions.php file. It needs to be inline, because I am using a ACF to let the user change the image.
This should be the result:
<body style="background-image: url('<?php the_field('background'); ?>');">
I read about the wp add inline style, but i couldn't figure it out.
Update: Here is the function I tried:
function wpdocs_styles_method() {
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/body.css'
);
$img = get_theme_mod( "<?php the_field('background') ?>" );
$custom_css = "body {background-image: {$img}";
wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );
I did load a body.css to tried to add the inline css. But it didn't work - maybe this isn't the right approach at all?
Share Improve this question edited Feb 6, 2017 at 16:39 Matt asked Feb 6, 2017 at 16:21 MattMatt 1601 gold badge1 silver badge6 bronze badges 2 |3 Answers
Reset to default 6The easiest way I've seen is to echo it where you need it:
function inline_css() {
echo "<style>html{background-color:#001337}</style>";
}
add_action( 'wp_head', 'inline_css', 0 );
Since 2019 you can also add styles inline inside the body, shown here without using echo:
function example_body_open () { ?>
<style>
html {
background-color: #B4D455;
}
</style>
<?php }
add_action( 'wp_body_open', 'example_body_open' );
The benefit here is you get better syntax highlighting and do not need to escape double-quotes. Note this particular hook will only work with themes implementing wp_body_open hook.
maybe this isn't the right approach at all?
wp_add_inline_style add extra CSS styles to a registered stylesheet. This function will not add an inline html style to the body tag.
However, I do think this is the correct approach to the problem. You're basically doing it right, but you need to add both inline css and another class to the body so that the css actually does something.
/**
* Conditionally add body class and inline css to body
*/
//* Add action to wp_loaded to initialize the plugin
add_action( 'wp_loaded', 'wpse_106269_wp_loaded' );
function wpse_106269_wp_loaded() {
add_action( 'wp_enqueue_scripts', 'wpse_106269_enqueue_scripts' );
//* Conditionally add hooks
if( '' !== get_theme_mod( 'my-mod', '' ) ) {
add_filter( 'body_class', 'wpse_106269_body_class' );
add_action( 'wp_enqueue_scripts', 'wpse_106269_add_inline_style' );
}
}
//* Make sure we load the custom css.
function wpse_106269_enqueue_scripts() {
wp_enqueue_style( 'custom-style', '/style.css' );
}
//* Add another class to the body tag.
function wpse_106269_body_class( $classes ) {
$classes[] = 'custom-background-image';
return $classes;
}
//* Add background-image inline
function wpse_106269_add_inline_style() {
$background_url = esc_url( get_theme_mod( 'my-mod', '' ) );
$custom_css = ".custom-background-image { background-image:URL( $background_url ); }";
wp_add_inline_style( 'custom-style', $custom_css );
}
Inline styles are styles that are written directly in the tag on the document & this is what you are looking for.
But, wp_add_inline_style will add an extra piece of CSS into the <head> section of the document (embedded style), not to the HTML style tag.
So, if you want to place your CSS value directly into HTML markup via a style tag, then wp_add_inline_style will not do that for you. You should either pass the value of get_field to an HTML style tag in your template files, or consider using JavaScript.
<div style="<?php the_field( 'some-field' ) ?>">
</div>
<?phpand?>tags, since you're already parsing PHP. Also, you should be usingget_field()since you don't want to beechoing the returned value. – Pat J Commented Feb 6, 2017 at 16:48