1

I would like to have my blog run some JavaScript code when certain particular words are clicked on.

One approach would be to include "onClick" handlers in HTML elements within the posts and disable any filtering that would remove them, but that seems rather dangerous.

Another approach would be create a link whose address starts with a "#" and have a script watch for a changing address suffix, but that seems rather hokey.

A third approach would be to have a script scan through the DOM tree for a certain tag and bind events to any elements that contain it. That might work, though it would leave open the question of how to ensure that switching the editor between HTML and WYSIWYG mode won't gobble up any of the essential information from the annotations.

I suspect the right approach is to use shortcodes, but I'm just starting with WordPress and while I know Javascript, I don't know PHP.

I doubt I'm the first person who has tried to bind actions to particular words in a post, so I don't want to re-invent the wheel needlessly.

If I will want to have many words run the same method, but assign a different string parameter value to each (e.g. I might want to attach the parameter "bird" to "robin", and "fish" to "guppy", so that clicking "robin" would run ClickedWord("bird") and clicking "guppy" would run ClickedWord("fish")) what would be the best approach to facilitate that?

  • @G.M.: I've edited again. Certainly I've seen various answers mentioning plug-ins, but if they're considered off topic I don't have to mention them. At least on StackOverflow, a common theme that comes up a lot is people asking how to do something without considering the question of whether they could accomplish their goals better in some other way, so I was trying to be open to whatever approach will best solve the problem. – supercat Sep 21 '14 at 4:10
  • Answering by suggesting plugings is fine here too. Asking for plugins is considered like a "shopping question" that IIRC is off topic in SO too. – gmazzap Sep 21 '14 at 4:21
  • +1 for the effort shown by editing the question more than once to make it fit our site rules. To show my appreciation I answered your Q too. – gmazzap Sep 21 '14 at 5:41
0

Let's assume you have a javascript like this:

function clickedTag( tag ) {
  var d = new Date(); 
  console.log( 'A word with tag ' + tag + 'has been cliked at ' + d.toDateString() );
}

And in your post you have this sentence:

The quick brown fox jumps over the lazy dog

And you want that the javascript clickedTag( "pet" ); will run when users click the word "dog".

Probably the right approach on javascript side is write a single function with help of data attributes, something like:

The quick brown fox jumps over the lazy <span class="click-tag" data-tag="pet">dog</span>

and the javascript:

jQuery(document).on( 'click', 'span.click-tag', function(e) {
  e.preventDefault();
  var tag = jQuery(this).data('tag');
  if ( typeof tag === 'string' && tag !== '' ) {
    return clickedTag( jQuery(this).data('tag') );
  }
});

So, using a single tiny function you are able to run your javascript function with any word, and the word itself is not related to the parameter passed to function.

So far, so good. However this has nothing to do with WordPress, and yes, adding that tag to post content brings some problems you explained in OP and also manually adding the span code for every word where you need can be hard if you have a lot of posts and a lot of words that needs to be "tagged".

But, yes, shortcodes can be a solution.

Just take one of the examples in the add_shortcode docs in Codex and modify it a bit:

function my_first_shortcode( $atts, $word='' ) {
  $atts = shortcode_atts( array ( 'tag' => '' ), $atts );
  $format = '<span class="click-tag" data-tag="%s">' . esc_html( $word ) . '</span>';
  return sprintf( $format, esc_attr( $atts['tag'] ) );
}

add_shortcode( 'clicktag', 'my_first_shortcode' );

Once you have this few lines of PHP in your functions.php or in a plugin file, you will able to use the shortcode 'clicktag' in your posts, e.g. you can write

The quick brown fox jumps over the lazy [clicktag tag="pet"]dog[/clicktag]

and the span with the data attribute will wrap the word "dog" in your post.

Combine that with the jQuery function posted above and you are done.

Note that the javascript I posted and also your javascript code (the function clickedTag in this example) should be enqueued in the pages using wp_enqueue_script. A convenient way is to call wp_enqueue_script inside the shortcode callback (my_first_shortcode PHP function, in example above).

Finally, you would probably want to use the class 'click-tag' to style the span, and let users understand they are clickable.

In this Gist you'll find a working, ready-to-install plugin (just download the 2 files and put them in a folder inside your plugin folder) that contains a just a little modified version of code I posted here.

Only thing left to do is write the real javascript code for clickedTag function, but that will not be covered here.

  • Thanks. I'll have to give that a try. Do you think the shortcodes approach is the best way to go? Also, I was wondering if there is any nice way to use WordPress to manage Javascript files as opposed to having to edit them locally and then ftp them to the site? Posting Javascript code within a widget seems like it would work, but I think performance would be better if I could create a page with the Javascript and mark it so that it wouldn't appear on the "page list" and would just be sent directly without the normal header. Do you know if there's an easy way to do that? – supercat Sep 21 '14 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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