+40 745 232 788

Online Solutions Development Blog   |  

RSS

WordPress plugin that saves a remote file

This will be a very simple plugin for wordpress blogs that will allow users to save a file on their server just by providing the url of that file. Let’s say you see a nice picture on another site and you want to save it on your server and use it in one of your posts. With the default wordpress features you will need to save the picture on your local machine and after that upload it to the server.

Maybe this is not a big problem but I think this will be a very simple plugin, a good place to start for the guys that want to write wordpress plugins. This plugin will use some basic, “need to know” wordpress features and could really be useful for some people (blogging from their phone or just wanting to cut the total time needed to download&upload the same file in half).

First of all: we need to create the file in wp-content/plugins. We need to choose an unique name to be sure that no other plugin will overwrite this one. So I will use osd as a prefix for all the thing I want to be sure that other plugins won’t overwrite. So I create osd_file_fetch.php in the plugins directory.

Now we need to place our plugin in the admin menu. How do we do this? We start with one of the most important functions when it comes to writing wp plugins: add_action.

So in that file we just created we add this line:

add_action('admin_menu', 'osd_file_fetch_menu');

This way wordpress will call our function called osd_file_fetch_menu every time the menu will be rendered. So let’s create this function:

function osd_file_fetch_menu() {
  add_media_page('OSD File Fetch Options', 'OSD File Fetch', 'manage_options', 'osd-file-fetch', 'osd_file_fetch_menu_options');
}

So.. what did we just do? We told wordpress to add in the media menu our option, our url will be something like YOUR_BLOG_ADMIN_URL_HERE/upload.php?page=osd-file-fetch and that we want the function called osd_file_fetch_menu_options to handle the content of the page.

Notice that we used the function called add_media_page. This is also a very important function when it comes to writing plugins that need to show up in admin menu. There are other functions that add options in the other admin menus (Like add_options_page, add_management_page, add_theme_page and others).

So that’s all the preparing we need, let’s get to the “magic”.

The code is not complicated but there is a lot of it for a blog post so I will get to the most important things and for the full example I will provide a download link.

So what do we need to ask from the user?

  • The download url
  • The local path (where we will save the file)
  • The name we want to use for the file

So we will output a simple form with a text input for the url, one select input for the path (you will see why select) and another text input for the file name.

How will we choose the path ? At the moment of the page render we will provide a select with all the directories we have in the root of the blog (using wordpress constant ABSPATH and php function scandir). For going deeper we will detect changes to this element (and others) and add/remove other inputs depending on what the user selected. How ? We will capture the change event on this element and each time this input (and the others) changes its value we will do this: we will remove all the next inputs used for path (if any), call an ajax and list the directories at the current selected path.

That’s why I was saying “and others”. Let’s say the user selects the directory called “wp-content”. The ajax will fetch the contents of ABSPATH/wp-content/.

After that he will see another select with the directories plugins, themes, upgrades, uploads. If the user changes the first input’s value from wp-content to wp-admin all the next ones (now just one) will be removed and the list of directories from wp-admin (something like css, images, includes, js) will be fetched. And so on.

This is the user-friendly part of the plugin 🙂

Note: if we just add the content like this: document.getElementById(‘the_container_id’).innerHTML += what_we_get_from_the_ajax it will work, but since the content of the element will be refreshed and the value in the first select will be lost. And in this case this is a big problem. So we will need to create a new html element and add it as a child to the continer. It’s not that hard, you will see in the full source.

Since we will use some javascript I placed inside the code a function taken from http://phpjs.org/ because I like that library a lot (as you will see in a comment in the source code also).

How will we call an ajax? I choose to make a call to the same url with an extra parameter in get. So I added another action like this:

add_action('init', 'osd_get_next_dir');

We called this on “init” because we need to be sure that we are the only ones sending output on this ajax call. So inside the function the first lines would be:

	if (!isset($_GET['osd_get_dir']))
	{
		return false;
	}

And this way this function will run only on our ajax calls and we will output what we need and terminate the script just after that.

So what we need to do now is to output one select input just like the one we made at the initial render but taking into consideration the previous selected values.

How other way can we help the user? Provide a suggested file name. How? We will capture the blur event on the url field and fill the file name field with the last part of the url. (split by “/” and return the last part).

Now the user can submit the form. We just need to get the content like this: file_get_contents(THE_URL_HE_ENTERED) ans try to save it on the server like this: file_put_contents(THE_PATH_HE_SELECTED,  THE_CONTENT_WE_JUST_FETCHED). If we can’t we will tell the user to make sure we have the needed permissions set on that directory.

And that’s all. Simple and effective.

This is the full download link.

For the guys that just need the plugin and are not interested in a lot of technical stuff: download, unzip, copy to wp-content/plugins/, go in your admin section of the blog to the plugins page and activate the plugin called “OSD File Fetch”.

Small but useful things you will find in this example:

  • A way to register a wordpress hook
  • A way to add a menu option in wordpress
  • A way to call an ajax on wordpress
  • A way to scan a directory
  • A way to call an ajax without using any external javascript library
  • A reference to one of my favorite js libraries: php.js
  • A way to capture simple events
  • A way to update the contents of an html element without refreshing the existing value.
  • A way to create an element with js
  • A way to remove an element with js

I hope that this script or parts of it will help someone out there.

If you have any questions please feel free to comment on this post.

If you liked this post
you can buy me a beer

6 Responses to WordPress plugin that saves a remote file

Add a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Also, if you want to display source code you can enclose it between [html] and [/html], [js] and [/js], [php] and [/php] etc