0

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

2

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 )
}
0

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.

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.