HTML Page Jumps to Anywhere in a WordPress Post (Bookmarks)

If you link to a specific page jump in WordPress. That link takes you there. Many already know this as bookmarking in Microsoft Word.

Creating page jumps (or bookmarks) are useful when a page/post has a lot of content. A mini table of contents can be created using page jumps, but you can also link from the middle of paragraphs.

WordPress Page Jumps/Bookmarks

Making page jumps is simple, but it requires accessing your editor’s HTML section. By clicking on the “Text” tab.

visual classic editor in WordPress
visual classic editor in WordPress
text editor to put bookmark html in wordpress
text editor to put bookmark html in WordPress

Your page jump will need two parts:

  1. The link
  2. The target

1. The Link Bookmark

The link code will need to take in this form:

<a href="#unique-name">Your Link Text</a>

You need to create a unique name for your page jump link and place that in your coding. Notice that you also need to use a hashtag (#) before the name.

Example

So, let’s call this page jump link “wordpress-plugin”.

<a href="#wordpress-plugin">Your Link Text</a>

Then, of course, you can change the visible link text to say anything you want. I’m going to use “Wordpress Plugin Collections”.

<a href="#wordpress-plugin">Wordpress Plugin Collections</a>

2. The Target Bookmark

The target (the location to which you will jump) must take the following form:

<a name="unique-name">Target Text</a>

Alternatively, you can omit the text and simply paste the code into your editor.

<a name="unique-name"></a>

Example

In the preceding example, I named my target “music-history,” so I must do the same (there is no need for a hashtag # here).

<a name="wordpress-theme">Wordpress Theme Collections</a>

Or, if I don’t want to use text, it will look like this:

<a name="wordpress-theme"></a>

Clean Version of Bookmarking in WordPress

To avoid having a toolbar or something else at the top of your page obscure the actual beginning of your site, you may choose not to use any text at all.

The way to get around this is to put the “target” just ABOVE the spot you actually want your visitors to begin.

For example, if I want my visitors to see the heading “WordPress Theme Collections”, I might prefer to code it as follows:

<a name="wordpress-theme"></a>
Wordpress Theme Collections
The newspaper theme displays many categories on one page.

Linking to Specific Spots on Other Pages

The URL in your browser will change to reflect exactly where you are when you jump to a target after setting up these page jumps.

For example, if your main page is techtiptrics.com/wordpress/, and you jump to your “wordpress plugin” target, your URL will now show as

techtiptrics.com/wordpress/#wordpress-plugin

With this same pattern, you can create links between pages and navigate directly to the desired location anywhere.

For example, if you had a post on your site about all your interests, and you wanted to link to the “Wordpress Plugin Collection” of your “wordpress” page (techtiptrics.com/wordpress/), you would link directly to that spot:

techtiptrics.com/wordpress/#wordpress-plugin

Linking to the Top of the Page

Perhaps you’ve been on a site before that had a link at the bottom of the page that said “Top” or “Go to the Top of the Page.”

You can also easily accomplish this with the same type of code that we’ve discussed here.

Embedding the following “target code” at the very top of your page is recommended:

<a name="top"></a>

After that, you can place the following link code wherever you want (again, notice the hashtag #):

<a href="#top">Go to the Top</a>

The same principles apply here: you’ve got a link (even though it’s at the bottom of the page) and you’ve got a target (even though it’s at the top of the page) that the visitor wants to see it again.

End, but: some interesting apps here

That’s all how to create html bookmarks in WordPress posts. Hope it is useful. Thank you.

Source

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top