Themergency fooplugins.com

Adding Custom Buttons to the WordPress Content Editor - Part 1

| 19 Comments

I needed to add a custom button to the content editor of WordPress. Right next to the ‘Add Media’ button just above the editor. I thought this would be really simple, but there was little to no documentation online on how to do it. However, once you know how, it really is simple (like most cases with WordPress). This is what I wanted to achieve:

media_buttons_context

You need to hook into the media_buttons_context action. Here is the code to do this:

add_action('media_buttons_context',  'add_my_custom_button');

And here is the code to add a button:

function add_my_custom_button($context) {
  //path to my icon
  $img = 'penguin.png';
  //our popup's title
  $title = 'An Inline Popup!';
  //append the icon
  $context .= "<a title='{$title}' href='#'>
      <img src='{$img}' /></a>";
  return $context;
}

Popups Please

But it is no use to just show a button, the button need to do something useful! So when I click a button, I want a popup to show, similar to the ‘Add Media’ popup. All you need to do is add some code to the anchor tag. For starters, add class=’thickbox’, so the line above will change to:

$context .= "<a href='#' class='thickbox' title='{$title}'>
    <img src='{$img}' /></a>";

Adding the thickbox class tells your browser to show a thickbox popup window. Next, change the link’s href to look like this:

<a href='#TB_inline?width=400&inlineId=popup_container'
    class='thickbox' title='Inline Popup'>

Take note of the inlineId querystring parameter. We will use this value again shortly.

Add Content to Show in the Popup

Add a hook to add some custom HTML to the footer of the admin page. This is done with a simple action:

add_action( 'admin_footer',  'add_inline_popup_content' );

Then implement the add_inline_popup_content function:

function add_inline_popup_content() {
?>
<div id="popup_container" style="display:none;">
  <h2>Hello from my custom button!</h2>
</div>
<?php
}

Note that the id of the div used in the above HTML is the same as the inlineId parameter used earlier! Also see that the div is hidden by default, so it doesn’t show up when the page is first loaded.

All Done!

And that’s it! This is what the popup looks like:

Here is the full code:


//add a button to the content editor, next to the media button
//this button will show a popup that contains inline content
add_action('media_buttons_context', 'add_my_custom_button');
//add some content to the bottom of the page 
//This will be shown in the inline modal
add_action('admin_footer', 'add_inline_popup_content');
//action to add a custom button to the content editor
function add_my_custom_button($context) {
  //path to my icon
  $img = plugins_url( 'penguin.png' , __FILE__ );
  //the id of the container I want to show in the popup
  $container_id = 'popup_container';
  //our popup's title
  $title = 'An Inline Popup!';
  //append the icon
  $context .= "<a class='thickbox' title='{$title}'
    href='#TB_inline?width=400&inlineId={$container_id}'>
    <img src='{$img}' /></a>";
  return $context;
}
function add_inline_popup_content() {
?>
<div id="popup_container" style="display:none;">
  <h2>Hello from my custom button!</h2>
</div>
<?php
}

Coming in Part 2

This is just a basic starter. In part 2 I want to clean up the code a bit and put this into a proper plugin with the help of our Plugin Boilerplate Code Generator. And then I want to interact with the Content Editor itself, as surely that was the reason for adding a button in the first place :)

Coming in Part 3

Apart from showing inline content popups, you can also load external pages into an iframe. I will cover this in part 3.

12 comments
  Livefyre
  • Get Livefyre
  • FAQ
ReneSkou
ReneSkou

To send content to the editor.
Create a button with a javascript function on it, and use window.parent.send_to_editor() to send it.

Vishal Sharma1
Vishal Sharma1

what ,if i only need to include media button context on visual editor not on text editor 

CapitalH_Press

Actually I have managed to do it in an easier way, instead of using the inline method for the Thick Box, I used the ajax method, linking to a php file where all the needed action reside.

 

But thanks again, this tutorial although let in complete, helped me figure out a lot more about this functionality.

CapitalH_Press

tnx, this is great and a huge help to me, but what happened to up coming parts?

webmaster3
webmaster3

This is cool I'll have to admit, However I do not use the WYSIWYG editor.  What I would love to see is a tutorial for adding buttons to the html editor.  It used to be easy to do however with WordPress 3.4.1 it's a bloody nightmare trying to figure out the mess that WP devs have made of quicktags.js.

 

armandmorin
armandmorin

Any idea of when the next Part will come out? Thanks. I look forward to it.

armandmorin
armandmorin

Awesome when is Part 2 coming out? I'm anxious. 

affanruslan
affanruslan

This will be a great series. Can't wait for part 2 and 3!

themergency
themergency moderator

 @armandmorin I am hoping to get it finished by the end of this weekend, but I have just been so busy. I promise it will not be long...

fredbradley
fredbradley

 @themergency  @armandmorin A year on.... I've just searched through your blog and can't find Part 2 or part 3. :( This was really useful, but part 2 would be more useful! :) 

themergency
themergency moderator

 @fredbradley  @armandmorin LOL - how time has flown - I actually need to update this post to work correctly with the latest version of WP - and then do parts 2 and 3