Adding Custom Buttons to the WordPress Content Editor - Part 1

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 3

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