4

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?

  • Show your example that did not work. – kaiser Feb 6 '17 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 Feb 6 '17 at 16:48
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 );
}
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>
  • 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 Feb 6 '17 at 18:33
  • Yes. you can do it from child theme too – Anwer AR Feb 7 '17 at 6:56
3

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 );

Combine with HEREDOC and NOW doc if you need more control.

  • Beat me to it. This is also a "not so eloquent but practical and effective" way to add inline js if needed. – admcfajn Mar 4 '18 at 3:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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