css - Relative path instead of absolute for wp_enqueue_script

When you enqueue scripts or styles with the following:

function themeslug_enqueue_style() {
    wp_enqueue_style( 'core', '/style.css', false ); 
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );

You get the following:

<link rel='stylesheet' id='core-css'  href='http://localhost:8080/wordpress/style.css?ver=4.9.4' type='text/css' media='all' />

Note that it appends the site url to the beginning, in this case http://localhost:8080. I'm trying to remove this so that it's relative to the file executing this. Usually this is done with plugins_url or get_stylesheet_uri(). However, I DO NOT want to use either of these, as it may be used as a plugin or included in the theme - and I want to keep the code the same for both.

Is there a way to do this?

When you enqueue scripts or styles with the following:

function themeslug_enqueue_style() {
    wp_enqueue_style( 'core', '/style.css', false ); 
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );

You get the following:

<link rel='stylesheet' id='core-css'  href='http://localhost:8080/wordpress/style.css?ver=4.9.4' type='text/css' media='all' />

Note that it appends the site url to the beginning, in this case http://localhost:8080. I'm trying to remove this so that it's relative to the file executing this. Usually this is done with plugins_url or get_stylesheet_uri(). However, I DO NOT want to use either of these, as it may be used as a plugin or included in the theme - and I want to keep the code the same for both.

Is there a way to do this?

• css
• javascript
• wp-enqueue-script
• wp-enqueue-style

Share Improve this question asked Mar 23, 2018 at 13:26 Troy TemplemanTroy Templeman 42177 silver badges2424 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 0

Not with the Wordpress API, but you can do it with vanilla PHP pretty easily.

<?php
//Get the full path of the local directory first.
$fullpath = __DIR__;

//check if you are in a theme directory or a plugin directory
if (strpos( $fullpath, 'themes' ) !== false )
{
    //It's a theme, use get_stylesheet_uri

} elseif ( strpos( $fullpath, 'plugins' )
{
    //It's a plugin, use plugins_url

} else {
    //It's somewhere else entirely.
}

I found myself in the same situation, I'm developing a library that I don't know where will it be included by other users, so I cannot provide an absolute path.

What can we use to achieve it?

• We can retrieve the path to the WordPress root directory by using the ABSPATH constant.

• We can get the current file's directory path by using __DIR__.

• PHP's str_replace() to remove a string from another string.

With this, we can remove the ABSPATH from __DIR__, obtaining a relative path to the current file's directory from the WordPress root, so that it works when it gets appended to the site url.

Code example

Let's suppose that we have the following files structure:

-> /inc
   -> current-file.php
   -> /assets
      -> your-file.js
      -> your-file.css

The following code would work:

// Get the path from the WordPress root to the current file's directory
$current_path = str_replace( ABSPATH, '/', __DIR__ );

// Relative path from the current file's directory to your asset.
$relative_path = '/assets/your-file.js'


// Enqueueing a script
wp_enqueue_script( 'your-handle', $current_path . $relative_path );

// Enqueueing a stylesheet
wp_enqueue_style( 'your-handle', $current_path . $relative_path );

Or we can write it shorter if we don't worry about readability (I don't in this case):

// Scripts
wp_enqueue_script( 'your-handle', str_replace( ABSPATH, '/', __DIR__ ) . '/assets/your-file.js' );

// Stylesheets
wp_enqueue_style( 'your-handle', str_replace( ABSPATH, '/', __DIR__ ) . '/assets/your-file.css' );

Notice that in the case that our asset was located in a directory above the file where we are enqueueing it, the relative path should be something like '/../assets/your-file.js'.

Here is another example:

-> /inc
   -> current-file.php
-> /assets
   -> your-file.js
   -> your-file.css

And then

// Scripts
wp_enqueue_script( 'your-handle', str_replace( ABSPATH, '/', __DIR__ ) . '/../assets/your-file.js' );

// Stylesheets
wp_enqueue_style( 'your-handle', str_replace( ABSPATH, '/', __DIR__ ) . '/../assets/your-file.css' );

I hope this helps if anyone else wonders how to enqueue a script without knowing the final path of the file beforehand.

Use the filter style_loader_src. This filter passes you the full src (i.e. http://localhost:8080/wordpress/style.css?ver=4.9.4), which you can then amend to remove the domain as you wish. For example;

function style_loader_src_make_relative ( $src, $handle ) {
  // Remove the domain part. 
  // site_url() = http://localhost:8080
  $src = str_replace(site_url(), "", $src); 
  
  return $src;  
}
add_filter('style_loader_src', 'style_loader_src_make_relative', 10, 2 );