WordPress Bookmarks

0192020 Update: The new WordPress editor now support bookmarks, so this can be done without coding. Any heading can be turned into a bookmark, by opening the Advanced block settings for the heading. Read how to do it here: https://wordpress.org/support/article/page-jumps/

 

WordPress makes creating web sites easy, but there is one handy web page feature that requires a tiny bit of coding: Bookmarks. Fortunately, it’s simple coding that anyone can do. These instructions apply to WordPress.com and WordPress.org sites, and have been updated for the new Gutenberg (Blocks) editor. 

Introduction
Create a Bookmark
Link to a Bookmark from the Same Page
Link to a Bookmark from Another Page


Introduction

Bookmarks allow you to jump to anywhere on a page (or post), from the same page, from another page on the same site, or from another site. You can use bookmarks to create links for a specific point on a page, and send these via email, or use them for social media posts.

If there are sections on a page, like this one, you can create a table of contents at the top of the page, like the one at the top here, and allow users to click and go directly to that section. This is useful on longer pages, and remember that a one screen page on a large desktop monitor might already require a lot of scrolling on a mobile device. There are two steps for each bookmark: Create the bookmark, and create the link to it.


Create a Bookmark

  1. Go to the block where you want to create the bookmark.
  2. Add a new block above that one. The type should be Custom HTML.
  3. Type the bookmark code, including a name. For this section, the bookmark code is:
    <a name=“Create”></a>
  4. The name of the bookmark is between the quotes. It can be anything you want, but it should be short, simple, and descriptive, with no spaces or odd characters. You can put as many bookmarks as you want on a page, but each one must be unique on that page. This bookmark could also have been:
    <a name=“second_section”></a>
    or
    <a name=“part2”></a>
  5. You can also create a bookmark in a block at the top of the page, in case you want to offer users a Return to Top link. That bookmark might be:
    <a name=“top”></a>
  6. If you will be adding several bookmarks, you can save the code as a Reusable Block. Instead of typing everything each time, you will only need to update the bookmark name. As a reusable block, it will appear to be blank, but the code is visible if you click the block and click Edit.


Link to a Bookmark from the Same Page

  1. First you need to type the word or phrase that will be the thing to click. For example, if you are making a table of contents, you need to type the headings at the top of the page. If you want to offer a Return to Top link, type that wherever you want to offer it.
  2. Highlight the text, and click the Insert/Edit Link button in the WordPress toolbar.
  3. In the box for the link, type a hashtag, and the name of the bookmark. For the example bookmark above, you’d enter:
    #Create
    For a link that goes to the top of the page, you’d enter:
    #top
  4. Click Apply. The link is created.


Link to a Bookmark from Another Page

  1. Bookmarks can be added to a page address, so that when someone clicks a link to a page, they go directly to a specific place on the page.
  2. For example, the address of this page is:
    covell.ca/wordpress-bookmarks/
  3. To go directly to the Create a Bookmark section of this page, from any other page on the internet, the address is:
    covell.ca/wordpress-bookmarks/#Create
  4. That link can also be sent via email, or used on social media posts.

Bookmarks are also known as anchors, and “a name” is short for anchor name. Depending on your WordPress configuration, you may see anchor icons when editing your page. 

Bookmarks are a simple but powerful tool that make it easier for your readers to find things on larger pages, and for you to offer links to sections of your pages.

Published
Categorized as Website

By trc

Freelance writer, freelance editor, web consultant, and film studies scholar.

1 comment

Leave a comment

Please log in using one of these methods to post your comment:

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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.