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
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 )
}
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.
wp_add_inline_style()to alter the#mainnav li:afterstyle once your stylesheets have loaded.