WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?



share|improve this question
This is a PHP/CSS question, that is not specific to WordPress. – Chip Bennett Apr 3 '14 at 17:41
You could accomplish it using wp_add_inline_style() to alter the #mainnav li:after style once your stylesheets have loaded. – Pat J Apr 3 '14 at 18:14
Have you seen How can I use WordPress functions in my stylesheet? – toscho Apr 3 '14 at 18:53

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 )
share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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