WordPress Quicktags Anchor Tag Button

12 03 2007

Anchor ButtonsI have an article on my Mailing List How To site that was getting a bit long. I decided to take some of the sub headings and make a pseudo table of content. This led to the need for some anchor tags. You know what I mean… These type of links are prevalent on FAQ pages. List of linked Q’s at the top of a page that take you to the Q&A way down the page. In order not to leave you stranded mid Q&A, they provide a link back to the top. This is what I wanted.

I could type all of those links and name tags, but that is tedious, and well that is what WordPress is for, facilitation of ease, lest our time, full of code bleeds over into the rest of our lives… ooops! Anyway I fixed up my quicktags.js file to help me out.

I started with the new and improved quicktags to begin with so your line numbers might not match if you decide to follow along.

In your favorite editor, bust open quicktags.js and start the surgery. Need I tell you to make a copy before you destroy yours? If you are not familiar with the gets of your WordPress install (I had to look it up too!), you can find it here: [your wordpress root]/wp-includes/js/quicktags.js

  1. At or near line 86 (so that it follows the “a” link quicktag button, but you can put it anywhere in between the other code bits, just not inside them) after…

    edButtons[edButtons.length] =
    new edButton('ed_link'
    ,'a'
    ,''
    ,''
    ,'a'
    ); // special case

    add...

    edButtons[edButtons.length] =
    new edButton('ed_name'
    ,'n'
    ,''
    ,''
    ,'a'
    ); // special case

    edButtons[edButtons.length] =
    new edButton('ed_anchor'
    ,'#'
    ,''
    ,''
    ,'a'
    ); // special case

  2. At or near line 247, after…

    else if (button.id == 'ed_link') {
    document.write('');
    }

    add…

    else if (button.id == 'ed_name') {
    document.write('');
    }
    else if (button.id == 'ed_anchor') {
    document.write('');
    }

  3. At the end of the file add…

    function edInsertName(myField, i, defaultValue) {
    if (!defaultValue) {
    defaultValue = 'Name value';
    }
    if (!edCheckOpenTags(i)) {
    var URL = prompt('Enter the Name value' ,defaultValue);
    if (URL) {
    edButtons[i].tagStart = '';
    edInsertTag(myField, i);
    }
    }
    else {
    edInsertName(myField, i);
    }
    }

    function edInsertAnchor(myField, i, defaultValue) {
    if (!defaultValue) {
    defaultValue = 'Anchor name';
    }
    if (!edCheckOpenTags(i)) {
    var URL = prompt('Enter the Anchor name' ,defaultValue);
    if (URL) {
    edButtons[i].tagStart = '
    ';
    edInsertTag(myField, i);
    }
    }
    else {
    edInsertAnchor(myField, i);
    }
    }

  4. At your link destination, address it with a name. The “n” on the button is for name. Click the “n” button and type a name to give that text an address. This wraps that selected text in the markup & tags. Remember the address name, because at the link location you’ll need it. Press the “#” button and add the destination address name. This wraps the selected link test in the markup & tags.
Advertisements

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: