WordPress flickr link quicktag

Here is the code to add a handy flickr link quicktag to your WordPress post editor.

Sample:
This is what a link generated by the flickr quicktag to my flickr page looks like: flickr: Karmadude on flickr

Code:
Step 1: Use the code below to add a new Flickr link button to the quicktags.js file. You can find this file in the wp-includes/js folder in your WordPress installation.

edButtons[edButtons.length] =
new edButton('ed_flickr'
,'flickr'
,''
,''
,'f'
); // special case

Step 2: Next add a click event handler for the newly created flickr button. Find the edShowButton function in your quicktags.js file. This function defines the click event handler function to call, when a quicktag button is clicked. Add the following code before the last else.

else if (button.id == 'ed_flickr') {
       document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertFlickr(edCanvas, ' + i + ');" value="' + button.display + '" />');
   }

Step 3: Finally, create edInsertFlickr, the click event handler function. This function will add the styled flickr tag before the link.

function edInsertFlickr(myField, i, defaultValue) {
   if (!defaultValue) {
    defaultValue = 'http://';
   }
   if (!edCheckOpenTags(i)) {
    var URL = prompt('Enter the Flickr URL' ,defaultValue);
    if (URL) {
        edButtons[i].tagStart = '<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>: <a href="' + URL + '">';
        edInsertTag(myField, i);
    }
   }
   else {
    edInsertTag(myField, i);
   }
}

Finally:
Login to your WordPress admin area, bring up the post editor, and test if the new flickr quicktag works. If you don’t see the flickr quicktag button, refresh your browser. That’s all there is to it.

Related Posts:
WordPress: Custom quicktags