WordPress Plugin on Post / Page

1 Views

I’m setting out to convert an existing jQuery plugin into WordPress plugin. This will be my first WP plugin (please be gentle). I’ve setup the basic plugin structure and can activate/deactivate the plugin successfully (resulting in adding the necessary JS and CSS files to the site). So far so good.

The tricky part that I don’t understand.

Read More

What I am trying to accomplish on a post or page:

1 – Target a single element within the post or page (image)
2 – Apply a specific class to that element
3 – Allow user to then supply the plugin settings to that element only

I have no clue how to do this.

Everything I find regarding WordPress plugin development details how to setup a settings panel in the dashboard. Unfortunately, I cannot find anything that details targeting specific elements within a post or page and then applying the plugin settings to those.

On a standard HTML site, the plugin code would look like: 

<img src="..." class="myPlugin"/>

// INIT
$(document).ready(function(){
    $('.myPlugin').myPlugin({ someOptions });
});

Settings can also be applied like this: 

<img src="..." class="myPlugin" data-myPlugin='{ someOptions }' />

Hopefully this is enough code for everyone and I hope someone out there can point me in the right direction.

Thanks!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You can use the filter hook image_send_to_editor. It returns the HTML that’s inserted on the post/page when we select an attachment with the Add Media button.

    I’ve seen an interesting usage here, adapted bellow. We’re basically rebuilding the HTML using the attachment attributes passed on $attachment.

    add_filter('media_send_to_editor', 'media_html_so_22584846', 10, 3 );

function media_html_so_22584846( $html, $attachment_id, $attachment )
{
    $post = get_post( $id ); // used to get the post title, but there's a bug in WP, the title is never printed
    $url = $attachment['url'];
    $align = ! empty( $attachment['align'] ) ? $attachment['align'] : 'none';
    $size = ! empty( $attachment['image-size'] ) ? $attachment['image-size'] : 'full';
    $alt = ! empty( $attachment['image_alt'] ) ? $attachment['image_alt'] : '';
    $rel = ( $url == get_attachment_link( $attachment_id ) );
    $new_html = get_image_send_to_editor( $attachment_id, $attachment['post_excerpt'], $post->post_title, $align, $url, $rel, $size, $alt );
    return $new_html;
}

    You could use the fields Alt and Description to pass your custom options. Another option would be inserting a custom field in the Media Library popup, but it’s not an easy task.

    enter image description here

    And here the array $attachment after inserting the previous image.

    enter image description here

    And the generated HTML:

    [caption id="attachment_662" align="alignright" width="584"]
    <a href="http://plugins.dev/del-me/ampi" rel="attachment wp-att-662">
        <img src="http://plugins.dev/wp-content/uploads/2013/10/ampi-682x1024.jpg" alt="alt"  width="584" height="876" class="size-large wp-image-662" />
    </a>
 caption[/caption]