How to link to the WordPress plugins folder from style.css?

1 Views

I’m trying to link to an image in the WordPress plugins folder from style.css. I’ve tried the following but that doesn’t work: 

.example {
    background: url( images/photo.jpg ) center center no-repeat;
}

Plugins folder image: /wp-content/plugins/my-plugin/images/photo.jpg

Read More

Stylesheet is here: /wp-content/themes/my-theme/style.css

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. I know you added the “relative-path” tag, but have you tried using an absolute path, including the domain name?

    Consider trying 

    .example {
    background: url('http://full-path.com/wp-content/plugins/my-plugin/images/photo.jpg') center center no-repeat;
}

    If you want to use a relative path, it also looks like you could try:

    ../../plugins/my-plugin/images/photo.jpg

    This assumes the server is looking from the folder the CSS is in to resolve the path to the photo. The “..” represents moving up a directory level.

    Hope this helps!

  2. You can use so called semi-relative paths for resources:

    .example {
    background-image: url( '/wp-content/plugins/path/to/image.jpg' );
}

    /wp-content/ above maps to http://www.domain.xyz/wp-content/, which allows you to omit the domain portion from the URL path to the image. If you omit the starting / character, the stylesheet will look for wp-content/... within the directory where the CSS file is.

    Note: the above method wont work if your plugins directory is outside wp-content.

    If you want the exact plugin directory path using WordPress functions and constants, consider infusing CSS with PHP: http://css-tricks.com/css-variables-with-php/. This way you can execute some PHP within the CSS file, which could include fetching the WP plugins directory to a PHP variable.