WordPress Add Custom Media buttons over Post Editor Toolbar

Hi Guys,

I am really so pleased to write this one. I am sure that this article will be modified so many times in future based on your feedback and suggestions.

There are many ways to do certain things in wordpress and below is what I’ve got for you.

But first check what the final result will look like.

Media Buttons WordPress

Advertisement

 

Now I have to hack into the wordpress code to see how they do it because I couldn’t find some documentation on their website about this.

Ok this this was my approach. We know that in the above image we have string called “Upload/Insert” If you search for that string in the WordPress Files you will notice that that string exist in file

/path/to/wordpress/root/wp-admin/includes/media.php Line 376

I am gonna use that concept and try to manipulate to get to the above result.

Lets add an action first for our media button

Media buttons context is associated with media buttons

Now lets add a handler function called jcorgbuttons

Now as you can see that we are accepting media button context and lets do something with it. What I am gonna do here is to append our button to that context as shown below

This tell WP that while you are doing Media Buttons Please accept mine too.

Just by doing the above you will see what I have shown in the Image above.

Now by itself it does not mean anything so lets open an external page or your plugin settings page. You can choose any page you like.

I will now add an action below to create an admin menu page

Now that everything is set we’ll go back to our jcorgbuttons($context) function and change it to this

Now we are launching a thickbox and we are specifying TB_iframe (means is Thickbox an iFrame) to true. Now with this change when you click on the button or icon that we created a moments ago the result will be like this

 

Now this is not a restricted option and you can do whatever you like with this option.

You can take some hints from my other post which I wrote couple of weeks back on how to utilize Default Media uploader that ships with WordPress

You can find that post here. That will show you how we can interact with the content editor itself.

http://jaspreetchahal.org/wordpress-using-media-uploader-in-your-plugin/

That said there is another cool trick that I got for you.

What if we just want to display something from our website using Curl in thickbox that we came up with above.

Lets take a look how we can do that. I will be using a technique where I can show a HTML div contents that are already part of WP and our curl operates on that HTML block.

Lets see.

First lets add some HTML to our footer and using CURL we will load that block with something interesting, may be a content from page that just returns Text (something like that You’ll get the Idea).

Thing to notice in above code is that I am adding a HTML Div block with ID=”textcontainer” and making it not display at all.

Now lets change our Media button handler a bit so that it show up the Div we just created.

Now when I click on the above. Depeding on what content you try to load and from where I get the result below

Media button click result

 

I would like to cover how you can interact with the text editor as well but part of which I have already covered in another post of mine the link is provided during this post.

I hope that you found this post useful

You can download the demo plugin from below

 

If you like this post please +1 it from website Header.

Cheers,

Advertisement

 

 

 

 

Comments

  1. hi there
    thanks for this great article
    I want to add an item to my wordpress post editor toolbar that help me to upload my media on another server (not in the server that my wordpress website installed right now ) and then link from my pictures and movies in my posts
    but after publishing my posts show my pictures and movies instead of the link
    do you know any way to help me
    thanks
    regards :
    Raha

  2. It won’t let me download this plugin. When I click the download link, it throws an error: “/home/jaspreet/public_html/wp-content/plugins/download-manager/cache/ must have to be writable!”

  3. Thanks for this. Found dozens of pages trying to explain how to get this working, but this was the first that I came across that was easy to follow and actually worked for what I was trying to do.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.