How to convert the file path to a URL of the same file?

Question

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?

Answer 1

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.

Answer 2

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

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

Answer 4

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

Answer 5

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