I Doubled my Income in a Year

WordPress allowed me to get a better job & better projects in just a Year. I will give you tips, tricks and guide you into WordPress development so you can get more income. Sign up to my 7-day email course!

Extending the WordPress Media Uploader: Sending HTML to Editor

In the previous tutorial, we have learned how to add a new embed option. In this tutorial, we will learn how to manipulate the HTML that the WordPress Editor will receive. When sending a normal image, the Editor will get a simple HTML for the image. If we check our embed option, we will need to send the image HTML wrapped in our shortcode.

Before we write any code, let’s just remember how does the AJAX request look like when we choose our embed option:

Form Data in AJAX Request with the new setting

We need to check the attachment[loggedIn] parameter. We will check that parameter in the action hook media_send_to_editor This hook is used to manipulate the HTML that we receive in the WordPress Editor.

Manipulating the HTML for WordPress Editor

It is time to hook our custom function to manipulate the HTML:

We are checking here if that parameter is set and if it is true. If that is correct, then we will set a custom HTML by wrapping the current $html with our shortcode.

If we try to add an image to the WordPress Editor using the WordPress Media Uploader with the embed option that we created in the previous tutorial, we will get our image wrapped like this:


Creating the Shortcode for Logged In Users

Our image is now wrapped with that code. But we need to register that shortcode. If we don’t, that will be output as regular text.

We are registering our shortcode using the function add_shortcode. You can learn more about this function on WordPress Codex.

In this function, we are getting the ID of the current user. If our visitor is not logged in, then the $user_id will be 0. If there is a $user_id, we are returning the $content.

By applying the filter only_logged_in_image, we can hook a new function that can check the capability of the current user. That means that we can hide this content even for specific users. To learn more about the filter hooks you can check the Plugin Handbook.

Let’s now see how a logged in user sees the image:

Image is shown to logged in users

If our visitor is not logged in, the visitors will see the content without the image:

There is no image for non logged in users


Of course, this shortcode can be used to wrap any content since we do not check the actual content. We could check the $content to see if it’s the image. We have learned a little on how to manipulate the HTML that is sent to WordPress Editor.

Tutorials from this series:

  1. Introduction
  2. Custom Field
  3. Embed Options
  4. Editor
  5. Custom Tab

Have you ever wanted to change the HTML returned in WordPress Editor? If you had any experience with it, be sure to tell us how and what you did it!

About the Author Igor Benic

Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.

follow me on:

EDD for Developers

In less than 2 weeks, I have earned $1,800 by working on a custom solution with Easy Digital Downloads without any prior experience. Let me teach you how you can too with various custom solutions.

Get the eBook

Leave a Comment:

Extending the WordPress Media Uploader: Sending HTML to Editor

by Igor Benic time to read: 2 min
Complete course to Become a WordPress DeveloperJoin the Course