Relative path instead of absolute for wp_enqueue_script

Question

Relative path instead of absolute for wp_enqueue_script

Troy Templeman

2022年4月21日 01:00

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?

Topic wp-enqueue-style wp-enqueue-script css Wordpress javascript

Category Web

JDandChips · Accepted Answer · 2021年11月17日 16:01

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

Gerard Reches · Accepted Answer · 2021年5月18日 11:27

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.

mopsyd · Accepted Answer · 2018年3月23日 13:50

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.
}

Relative path instead of absolute for wp_enqueue_script

What can we use to achieve it?

Code example

About