A single click of this button allows you to upload any type of media that you desire and easily insert it into your post. WordPress plugins can take advantage of this functionality by integrating with the upload button providing a seamless experience for their users. The following tutorial assumes you are familiar with the basics of writing a wordpress plugin. If you are not check out the tutorial from wordpress.
To begin with you need to have a new tab displaying alongside all of the other media tabs in the uploader. This is accomplished by adding the following bit of code into your plugin and then calling it by adding a filter to media_upload_tabs
|1 2 3 4 5 6 7 8 9 10 11||
If this is done correctly then the a tab with the name of Test Upload will appear next to all of the other tabs.
Our only problem now is that if we click on that test upload button we get a completely blank section.
To fix this we need to add a function that creates the iframe that the plugin will render in and add the tabs to the top of the frame. First we will render the iframe.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14||
As you can see in our code example the function upload_test_upload_form is what is actually writing out what will eventually be our form. The first thing we want to do is call the function
media_upload_header() This is a built in WordPress function that will create the other tabs in the media upload section. After that we have our divs and some text just so we can make sure the plugin is rendering properly.
From there our function is turned into an iframe in upload_test_menu_handle. We call the build in wordpress function
wp_iframe to return an iframe with our form within it. From here we are going to call the menu handle when the Upload Media tab is clicked. This is accomplished by adding an action to the tab we just created.
As you can see in the code our menu handle is attached to the action
media_upload_test_upload This action name is determined by the name of the tab that you created earlier, in this case test_upload.
We can check to make sure that we rendering the plugin properly by verifying that the text within our divs has appeared. However the problem right now is that our plugin does not look very good.
We can only see the one tab up at the top and the others do not appear to be present at all. We can double check if this is just a styling issue by popping open which ever inspector you like and looking at
As you can see all of the other tabs are present in the DOM, they just are not rendering properly. We can fix this later with some css, simply enqueue this style to your plugin, all of these css rules were taken from the WordPress css for menu tabs.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56||
Of course the problem is right now our plugin doesn’t actually do anything. Let’s fix this by adding some form elements that will later be used to insert a piece of shortcode into the WordPress editor. Note that you can use this same code to add anything you would like into the editor as long as it can be translated into a string but for now lets just add a shortcode.
|1 2 3 4 5 6 7 8||
Note that we have added a text field and a button that inserts the shortcode into our code. Make note that the button has a class of button. This is important if you want to use WordPress styling on the button.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17||
|1 2 3 4 5||
If you have added your code correctly you should see something like this.
Now to get our plugin to do something useful.
First we need to write the insertShortcode function. All this function does is create our shortcode and then uses WordPress’s built in function to insert it into the editor. We then need to bind this function to the Insert Shortcode Button.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14||
That’s it! Try it out. You should be able to enter some text into the field and have it be inserted into the post via the insert shortcode button.