There will be times when you’ll want to grab the path to your plugin to grab an image or any file related to your plugin that you want loaded on the page. So, we’ll be learning a simple function that’ll help us do so. To grab a WordPress plugin path we use the plugins_url() function.
Alright, same as usual, create a new plugin folder named wppluginpathex from our templates folder. Here’s what our index.php file looks like.
* Plugin Name: WP Plugin Path Example
* Plugin URI: http://jaskokoyn.com
* Description: A Basic WordPress Plugin to show how to get a WOrdPress plugin path.
* Author: Jasko Koyn
* Version: 1.0
* Author URI: http://jaskokoyn.com
// Set up our WordPress Plugin
// Include or Require any files
include( 'inc/func.inc.php' );
// Action & Filter Hooks
add_filter( 'the_content', 'jk_add_fb_image' );
As you can see, I’ve wasted no time adding some code after our header. We already know how to use a filter hooks and how to organize our files. If you don’t remember, then go back and reread the lessons.
We’re using a filter hook to modify the content. We’ll be adding an image saying to like us on Facebook. Very simple, yet effective.
WordPress Plugin Path
Let’s take a look inside our func.inc.php file.
$fb_image = plugins_url( 'img/facebook.png', dirname( __FILE__ ) );
$content .= '<img src="' . $fb_image . '" />';
We created a variable named $fb_image that will equal to the value that is returned from the plugins_url() function. By default the plugins_url() function returns the absolute URL to the plugins directory. So, if you’re using a default installed version of WordPress, then the URL returned would be http://yoursite.com/wp-content/plugins. This is our WordPress plugin path.
This function takes on 2 optional parameters. The first parameter is the path relative to the plugin directory. By default, this is set to none. In our example, we passed in ‘img/facebook.png’ which is the path to our image. The function will first give the absolute path to the plugin directory and then append the path we give.
Now of course, this alone won’t work because our WordPress plugin path is stored inside a folder inside the plugin folder. To fix this, we use the 2nd parameter which is the path to follow. In this case, we use the magic constant __FILE__. __FILE__ is a constant automatically generated by PHP that generates the path to the file calling it. In our case, it would be http://yoursite.com/wp-content/plugins/wppluginpathex/inc/.
Now, if we left it at that, we would end up with a broken image because our img folder is not inside the inc folder, but inside the wppluginpathex folder. We could modify the first parameter and add ../ before it, but that won’t work. It would actually make the plugins_url() function return nothing. So, the next best thing is to wrap the __FILE__ constant with the dirname() function. The dirname() function is a function provided by PHP which will return the parent’s directory path.
Without the dirname() function, our plugins_url() function would return this URL
With the dirname() function it return this
More information about magic constants can be found here.
More information about the dirname() function can be found here.
Lastly, we append the image to the current content and then return the content. If you don’t have a facebook image, you can download ours which is provided here.
Activate your plugin and look at the final result!
Why use the plugins_url() function?
The plugins_url() function will be your best friend. There are many benefits to using this function such as support for WPMU sites, auto detects SSL, support for renamed plugin directory. Now, you may be thinking, renamed plugin directory? WordPress actually allows you rename the wp-content folder and move folders around in WordPress for a more custom feel. If you’re distributing a plugin and someone downloads your plugin and they renamed their folders. Your plugin would give errors if you input absolute paths. It’s better to use the plugins_url() to give the correct WordPress plugin path.