…because good design helps sell your ideas.



Using Anchors in WordPress

Posted on March 06, 2011 by Blog Design Journal

NOTE: In each instance of code, you must remove the space after the < for it to work correctly. The space has to be included here so that the code can be displayed without problems.

I had struggled for a while with trying to figure out how to use them in WordPress, but when it came down to it, it was merely a case of adding a little HTML. Here’s how to do it:

First of all, create all the text on your page, including where you will be linking from (a list of FAQs) for examples and where you will be linking to (the anchor – a set of answers for example). Bear in mind that you can use anchors to link to another page altogether, so the link does not need to be on the same page as the anchor.

Create the Anchor

Once you have created all your text, go to the place that you want to place the anchor. This is most likely some text, but can just as easily be an image or any other part of your WordPress post.

Making sure that you are in the HTML editing part of your WYSIWYG editor, put your cursor before the text/image/code. Once there, you will need to “mark” the text, so that the place of the anchor is specified. You should do this by putting the following code ahead of the text/code, changing the word label for any string you choose (this could be descriptive, or simply sequential numbering):

< a>Text and/or code here…< /a>

Repeat this process for every part of the page that you want anchors, using a different label for each one.

Create the Link

Now that your anchor is in place, you are ready to create the link to it. This is done by using the href HTML tag. As such, use can use relative or absolute links accordingly. The href tag syntax is made up like this:

< a rel=”nofollow” onclick=”javascript:_gaq.push(['_trackPageview', '/outgoing/article_exit_link']);” href=”URL you are linking to”>Text that will link to URL< /a>

Therefore, in this case, you will create a link such as this, replacing the appropriate parts so that it suits your application:

< a rel=”nofollow” onclick=”javascript:_gaq.push(['_trackPageview', '/outgoing/article_exit_link']);” href=”http://www.yourdomain.com/faqs/#label”>Text linking to anchor< /a>

If the link and the anchor are on the same page however, you can use a relative URL, which involves deleting everything between the first quotation marks (“) and the hash symbol (#), leaving a much simpler href:

< a rel=”nofollow” onclick=”javascript:_gaq.push(['_trackPageview', '/outgoing/article_exit_link']);” href=”#label”>Text linking to anchor< /a>

Let me know if you have any problems or suggestions, but even more so, let me know if this helped you out.

I’m Dave and I’ve been building websites for several years, using WordPress as my platform of choice. I create WordPress tutorials so that my clients can use them to maintain their own sites, rather than relying on an expensive web designer to do simple tasks.
Article Source

Leave a Reply

You must be logged in to post a comment.

  • Categories

  • Archives

  • Recent Comments

  • Advertise Here

  • Business Directory for Houston, Texas
  • Blogarama - The Blog Directory

↑ Top