3

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?

3 Answers 3

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.
}
4
  • Thanks @mopsyd but how would this remove the site url from wp_enqueue_script? Mar 23, 2018 at 15:42
  • It doesn't. It uses the correct prefix depending whether you are a theme or a plugin. The underlying functionality of the *_enqueue_* functions is pretty opinionated, and it makes a bunch of decisions about your source that you have no control over. So to get it to work you have to give it a valid full url, or else it is going to automatically decide that your source is supposed to be relative to your script or plugin whether you like it or not.
    – mopsyd
    Mar 23, 2018 at 20:44
  • So the solution there is not to bypass the *_enqueue_* stuff, particularly if you ever want anything using it to be allowed on the wordpress.org repo (they will reject it if it bypasses enqueue), but to have a smart switch that knows which one applies when, so you have a more portable template that you can reuse.
    – mopsyd
    Mar 23, 2018 at 20:45
  • This won't work with symlinks as you may not have "themes" nor "plugins" in $fullpath. Jan 23 at 4:02
0

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?

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.

0

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 );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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