6

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?

Improve this question
2
  • Show your example that did not work.
    – kaiser
    Commented Feb 6, 2017 at 16:29
  • I see a couple issues in your sample code. You don't need the <?php and ?> tags, since you're already parsing PHP. Also, you should be using get_field() since you don't want to be echoing the returned value.
    – Pat J
    Commented Feb 6, 2017 at 16:48

3 Answers 3

Reset to default
6

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

Improve this answer
1
  • Beat me to it. This is also a "not so eloquent but practical and effective" way to add inline js if needed.
    – admcfajn
    Commented Mar 4, 2018 at 3:45
3

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 );
}
Improve this answer
3

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>
Improve this answer
2
  • thanks abdul - I cannot write directly into the parent template...but maybe javascript is the way to go. can I use javascript from the child theme?
    – Matt
    Commented Feb 6, 2017 at 18:33
  • Yes. you can do it from child theme too
    – Anwer AR
    Commented Feb 7, 2017 at 6:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.