4

How do I convert file system path to URL? I have found some general PHP solutions that can be error prone.

Is there some WordPress specific way to do it?

9

Kind of depends on where you are in the WordPress environment.

Plugins

If you're in a plugin, you can use plugins_url.

<?php
$url = plugins_url('css/admin.css', __FILE__);

The above will give you the path relative to the file passed into the second argument. So if you're in the main plugin file you might get something like http://example.com/wp-content/plugins/your-plugin/css/admin.css.

There's also plugin_dir_url to get the URL of a directory. One fairly common pattern is to define a constant with your plugin url in the main plugin file.

<?php
/** plugin name: wpse216913 example */
define('WPSE216913_PLUGINURL', plugin_dir_url(__FILE__));

// wp_enqueue_style('example', WPSE216913_PLUGINURL.'css/admin.css');

Themes

Themes, on the other hand should use get_template_directory_uri or get_stylesheet_directory_uri.

get_template_directory_uri will return the parent theme's directory URI if there is a parent theme. get_stylesheet_directory_uri will return the child theme's URI if there is a child theme, or the parent theme's otherwise. Read the codex for more on the differences. The twenty fifteen theme has some examples of how these are used.

wp_enqueue_style(
  'twentyfifteen-ie',
  get_template_directory_uri().'/css/ie.css',
  array('twentyfifteen-style'),
  '20141010'
);

Uploads

Use wp_get_attachment_image_src for uploaded images. The return value will also include the width and height of the image. This also let's you say which size you want.

Or there's wp_get_attachment_url to retrieve the URL of the attachment that was uploaded. If used on images, this will return the URL of the original image.

If you need the URL (or path) of the upload directory so you can do something like a custom upload or otherwise, you can use wp_upload_dir which returns an array with all the info you'll need.

print_r(wp_upload_dir())
/*
Array
(
    [path] => /path/to/wordpress/wp-content/uploads/2016/02
    [url] => http://example.com/wp-content/uploads/2016/02
    [subdir] => /2016/02
    [basedir] => /path/to/wordpress/wp-content/uploads
    [baseurl] => http://example.com/wp-content/uploads
    [error] => false
)
*/

Other Useful URL Functions

All of these have the same signature, urlFunc($path, $scheme), and both arguments are optionall.

home_url returns a path relative to the sites home page.

echo home_url('/example'); // http://example.com/example

site_url returns a URL relative to where the WordPress core files are. Say you had WordPress in the directory wp...

echo site_url('/example'); // http://example.com/wp/example

admin_url returns a URL relative to the wp-admin path. Useful when you need the path to admin-ajax.php, for instance.

echo admin_url('admin-ajax.php');  // http://example.com/wp/wp-admin/admin-ajax.php

There are a few others like content_url and includes_url which return the paths to the WP content and includes directories (or paths relative to them) respectively.

| improve this answer | |
  • Thanks for a detailed explanation. At first I was looking for an universal solution for converting any file path to the same file url. But I think get_template_directory_uri() will do the job. – Boykodev Feb 6 '16 at 22:05
7

Or global

function abs_path_to_url( $path = '' ) {
    $url = str_replace(
        wp_normalize_path( untrailingslashit( ABSPATH ) ),
        site_url(),
        wp_normalize_path( $path )
    );
    return esc_url_raw( $url );
}
| improve this answer | |
  • What do mean by or global ? It would probably help if you would an explanation to what your code does and why it helps solving the problem and how to use it. – kaiser Apr 25 '17 at 18:23
  • Hey sorry for being too short. Just paste the function above in your code (example functions.php) and then you may get the url of the script from php file like this: ` $url = abs_path_to_url( dirname(FILE) . '/css/styles.css' );` assuming the css folder with styles.css file is in the same folder as your script. – Serge Liatko May 29 '17 at 20:02
  • here global means the above function works in both themes and plugins – Serge Liatko May 29 '17 at 20:07
  • 1
    As an edit to your answer, please :) – kaiser May 30 '17 at 4:57
3

Here is my solution for this:

function convert_url_to_path( $url ) {
  return str_replace( 
      wp_get_upload_dir()['baseurl'], 
      wp_get_upload_dir()['basedir'], 
      $url
  );
}
| improve this answer | |
1

In a theme, if you want to literally convert a file system path to a URL for a given file, you would do this:

$url = str_replace( get_stylesheet_directory(), get_stylesheet_directory_uri(), $systempath);

| improve this answer | |
0

This should work with any wordpress path:

function path_to_url( $path ) {

    return get_site_url() . '/' . str_replace( ABSPATH, '', $path );

}

echo path_to_url( YOUR_PATH_HERE );
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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