Wizards of the HTML universe will snicker when they read this, but this experience was an accomplishment for me! So there.

I’d really shied away from messing with the HTML behind a WordPress page. Glances at my customizable sites left me remembering a student who’d once said that the very sight of Dreamweaver made him “want to vomit.” Okay, so my reaction wasn’t quite that extreme. Still. . . .

But then I wanted to set up my new “Book Reviews for Horse Lovers” page in such a way that readers could click on a title and jump straight to the individual review.

I was pretty sure that bloggers who were self-hosting could manage such edits. But when I called up a chat session, it took me quite a while just to clarify to the “Happiness Engineer” what I was talking about.

As I’ve commented on other blogs, I’ve generally been pleased with the support in WordPress—notwithstanding the recent flap over the new, unnecessarily unhelpful edit screen. And I’m pretty good at figuring out how to do what I want to do, within the limits of my general technological skills, which are just below adequate. But I was surprised when the Engineer had to go off and research how to do what I wanted. She came back with a URL about “links and anchors.”

Cue “duh.” I once knew how to do that on a web page. So what could be hard about doing it on my new WordPress page?

Well, for one thing, the support document she provided left out what I most needed: a complete visual example to help with placement of the necessary HTML elements. Where did I put the anchors and then the links? (I’ve linked to it in case you find it clearer than my instructions—you never know.)

Out came my old HTML primer. Voila. I report, with glee, that it’s done.

Just in case there are some just-below-adequate users out there who don’t automatically know how to set anchors for links, I’m going to point you in the basic direction. Like all efforts at instruction, this post will probably skip steps you need. If so, comment and I’ll revise. Maybe you even know an easier way to explain.

Note that I’m working on a “page” that is NOT my “Posts” page. You can set up as many pages as you like and then designate which page will display posts. I see no point in working with anchors on the posts page, since there are widgets to help readers navigate among posts.

You do need very basic HTML concepts. You need to know how to open a tag and close it. My guess is that most people likely to read this do know that. The other concept you need is to understand the principle of nesting tags: the first tag you open is the last one you close, the second is the second-to-last you close, etc. If by any chance you’re not familiar with this principle, the screen shots below should clarify it.

Finally, of course, you realize that any tiny slip will screw the whole thing up. If it doesn’t work, it’s because you’ve forgotten something or put something in the wrong place. Catching such slips can take patient proofing skills.

To get to the place to enter the code I’m going to show you, click on “HTML” at the top of your edit screen (which by default seems to be set to “Visual”).

Here’s what my anchor HTML looks like.

For the two of you out there for whom this looks scary (and it did to me until I examined it), I’ll walk you through it. The first tag opens the header (h3) tag, which I had chosen rather than the standard “paragraph” style. Note that this is also the last tag to close. Then comes the tag for the font color; this is here because in the Pilcrow theme, for some reason, the default header color is light gray, and I had modified it to “black,” which is designated by the numbers “#000000.” Note that the span style closes inside (before) the header closing tag (it’s nested inside it).

Next, TA-DA, comes the anchor-name code, opening and closing with the “a” tag. An important element, one I actually missed on first try, was the little > before the closing tag.

The name can be anything you decide, ideally something that’s easy to remember. After opening and closing the tag, this “name” is the vital part of this code.

Then comes the actual text of my heading, with the “em” tags indicating that I italicized the book title.

I discovered that you can place the anchor name pretty much where you want inside your anchor text as long as you close it before moving to the next element. In other cases, I placed it inside the “em” tags.

Once this anchor is “set” inside this header, which is where you want your reader to be able to jump to, you go back to the top and set the link. Here what that looks like:

Again, there’s a header tag and a color tag for black font. This time, I placed the code related to the link/anchor process inside the “em” tags. Seems to work fine. The “a href” tag is the standard tag any time you insert a hyperlink in an HTML document; nothing new there. However, the quotes and hashtag identify the “anchor” you created below. This has to match exactly, as I learned. If your link doesn’t work when you view the post, check this component.

This time, as well, you must include the little > and a portion of the text from the header you want to jump to before closing the “a” code.

The “Back to top” links just reverse this process. The anchor is created with the “a name=” code at the top and the links are placed wherever you want readers to see “Back to top.”

An important lesson for me from this project has been the realization that WordPress pages are just regular HTML pages. True, their overall appearance is controlled by the “style sheets” created by the theme designer, and I haven’t progressed to tinkering with those styles (though I was told you can always revert to the defaults should you miserably screw things up). But within the text of your page, you can turn to basic HTML to manipulate various features. Nice!

Let me know if you have additions or clarifications to add!