PHP in CSS file?

Question

so I have this in my CSS ...

  #mainnav li:after {
content: url('images/nav-divider.png');
}

obviously I need to have it link to 'bloginfo('template_directory'); /images/nav-divider.png' instead but how do I link that correctly seeing as there is PHP in it?

Thanks,

Josh

Answer 1

You can use wp_add_inline_style().

Let's assume you enqueue your css like so

add_action( 'wp_enqueue_scripts', 'add_my_style' );

function add_my_style() {
   wp_enqueue_script( 'my_style', get_template_directory_uri() . '/mystyle.css' );
}

Then you can change the function like so:

function add_my_style() {

   wp_enqueue_script( 'my_style', get_template_directory_uri() . '/mystyle.css' );

   $style = "#mainnav li:after { content: url('{theme_url}/images/nav-divider.png'); }";
   $style .= "#another-example { content: url('{theme_url}/images/example.png'); }";

   $data = str_replace( '{theme_url}', get_template_directory_uri(), $style );

   wp_add_inline_style( 'my_style', $data )
}

Answer 2

You can just use a relative path. For example, if your stylesheet is in /wp-content/themes/mytheme/css/mystyles.css and your image is in /wp-content/themes/mytheme/images/nav-divider.png, then your path would be ../images/nav-divider.png.