I’m working on a plugin that creates custom post type “portfolio” along with shortcode to insert in any page or post.

The shortcode is: [portfolio option1=“1” option2=“0” option3=“1” ]

And it works just fine, it shows all custom posts via custom WP_query. But I want to go further.

Create a custom button next to upload media for generating a portfolio shortcode output, where user can select which post to include and define all options. So the output would be: [portfolio option1=“1” option2=“0” option3=“1” ids=“12,311,432,443,” ]

This is the code for a button I found in wp’s media.php:

add_action( 'media_buttons', array( $this, 'media_buttons' ) );

public function media_buttons($editor_id = 'content') {
    $post = get_post();
    if ( ! $post && ! empty( $GLOBALS['post_ID'] ) )
        $post = $GLOBALS['post_ID'];

    wp_enqueue_media( array(
        'post' => $post
        ) );
    $img = '<span class="wp-media-buttons-icon"></span> ';

    echo '<a href="#" id="insert-media-button" class="button insert-media add_media" data-editor="' . esc_attr( $editor_id ) . '" title="' . esc_attr__( 'Add Portfolio' ) . '">' . $img . __( 'Add Portfolio' ) . '</a>';

And it does what does. But, now, what it the best way to modify the content of created window? Here’s a picture of how I see it, it’s better that any description:

enter image description here How potentially complicated and tricky this would be to accomplish? I do not know what direction should I look to, is that even possible? Please advise any suggestions where should I start digging for solution.

P.S.: Or maybe I'm wrong in the first place and should consider using ThickBox? But I want to the keep native look of the media upload popup.



Well, maybe a much better solution would be to use native gallery shortcode pattern. It not difficult to add a new menu item in the media upload window, as it explained for example here.

So the final vision is something like this:

enter image description here enter image description here

It must be done with Backbone.js I believe? But the main question, can it manipulate custom posts instead of images?

  • 1
    I think it's probably not a good idea to use the media editor to manage custom posts. Couldn't you create a new attachment mime type called "portfolio" and create portfolio galleries with the existing shortcode and media editor management ? Commented Mar 12, 2014 at 0:12
  • Thanks @FabienQuatravaux, I'm not sure I understand how that should work, but I will now investigate in this direction, could you recommend some reading?
    – Nikita
    Commented Mar 12, 2014 at 0:36
  • What is the custom post type exactly used for ? Do you use custom post type only because it inserts the proper menu in the admin area ? How do you link image to a portfolio post (as shown in your screenshot) ? Commented Mar 12, 2014 at 23:19
  • I used custom attachment mime type in my Twikin plugin, but I'm not sure it's completely relevant you your use case. Commented Mar 12, 2014 at 23:20

1 Answer 1


enter image description here

Have a look at my guide here - http://www.wpexplorer.com/wordpress-tinymce-tweaks/ - so you can see how to create a popup window where you can select your options than insert a shortcode. If you download my Free Symple Shortcodes plugin you can see a live implementation as well.

Instead of having the user select the posts to insert instead add a Categories taxonomy to your portfolio so the user can organize the items into categories. Then you can have a simple dropdown in the popup window for the user to select what category to pull posts from.

This is much easier for the end user to manage in the future since they just have to add their posts to the category and the shortcode will automatically display them without having to manually update the shortcode to include the new posts.

  • AJ

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.