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