Custom media upload content for inserting custom post shortcode

by

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.

Cheers!

EDIT:

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

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

Leave a Comment