Nonprofit WordPress

blazing moon logo

A Free Manual for Nonprofits

  • About
  • Search
  • WordPress Basics
    • What is WordPress?
    • Creating Content
  • Types of Content
    • Pages
    • Posts
    • Media Items
  • Content Management Basics
    • Write for the Web
    • The Perils of Poor Formatting
    • Help People with Disabilities
    • Linking to External Sites
    • Linking Within Your Site
    • Adding Images
    • Adding Documents
    • Adding Videos
  • Content Management Mastery
    • Editor Tips and Tricks
    • Linking to Email Addresses
    • Linking Within a Page
    • Redirecting Links
  • Administering Your Site
    • The Admin Bar
    • Managing Users
    • Managing Menus
    • Backing Up the Site
    • Updating Your Software

Linking Within a Page

Overview

Sometimes you need to link within a single web page.

For example, on a long page you might want something like a table of contents: a few major topics listed at the top of the page, each of them linking to a section further down the page. These are sometimes referred to as page jumps or jump links.

This kind of link is valuable, but WordPress doesn’t make it as easy to create as other links. It takes two steps:

  1. Create a destination for your link.
  2. Create a link that goes to your destination.

Besides these instructions, you can read more about page jumps on WordPress.com’s Splitting Content help page.

Step 1: Create a link destination

This first step requires you to use the WordPress editor in Text mode rather than the default Visual mode. Switch to Text mode by clicking the Text tab in the upper right:
page editor - visual and text tabs

This view might look a little intimidating at first, but for this exercise you can ignore the parts that aren’t plain text. Just scroll down until you find that place that you’d like the link to point to.

Let’s say we’re looking for a heading that says “Join Our Community”:
page editor - destination text without anchor

Notice that the phrase “Join Our Community” is bracketed on either side by “h2” markers. These mark the text as a level 2 heading:

  • <h2> means “the heading starts here”
  • </h2> means “the heading ends here”

To turn this heading into a destination for a link, we need add an id to the initial <h2> marker. We do this by changing the heading from:

<h2>Join Our Community</h2>

to:

<h2 id="joinus">Join Our Community</h2>

So we’ve added a marker id=”joinus” indicating that hyperlinks can jump to this spot by using joinus in the link’s address.

Spaces matter! Leave a space between the h2 and the id, and no space next to the equal sign or quotes.

The ID name should be brief and meaningful. There are plenty of rules for allowable ID names, but you’ll always be safe if you stick to lowercase letters.

Our final link destination looks like this:
page editor - destination text with anchor

Step 2: Create the link

Okay, enough of Text mode. Switch back to Visual mode by clicking the Visual tab in the upper right of the editor window. Back to user-friendly:
page editor - back to visual mode

We’ve created a place for the link to point to. Next we need to create a link that actually goes there.

Highlight the text you’d like to use as a hyperlink—in our example, “Join Our Community!”–then click the link button:
page editor - link button

WordPress will prompt you for the link’s destination. Enter the pound sign (#) followed by the anchor ID you created earlier:
page editor - format for jump links

Click Add Link and you’re done.

Contact Form

Fields marked with an * are required

Deprecated: genesis_footer_creds_text is deprecated since version 3.1.0! Use genesis_pre_get_option_footer_text instead. This filter is no longer supported. You can now modify your footer text using the Theme Settings. in /home/blazingm/public_html/subdomains/npwordpressinfo/wp-includes/functions.php on line 5234

Creative Commons License
Nonprofit WordPress by Andrew Giesler is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Based on a work at http://nonprofitwordpress.info.