{"id":70941,"date":"2012-02-04T10:15:08","date_gmt":"2012-02-04T15:15:08","guid":{"rendered":"http:\/\/wpmu.org\/?p=70941"},"modified":"2022-02-23T01:52:27","modified_gmt":"2022-02-23T01:52:27","slug":"link-to-any-spot-in-a-wordpress-post-with-page-jumps-bookmarks","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/link-to-any-spot-in-a-wordpress-post-with-page-jumps-bookmarks\/","title":{"rendered":"Link to Any Spot in a WordPress Post with Jump Links"},"content":{"rendered":"<p style=\"text-align: left;\">A \u201cjump link\u201d in WordPress is when you link to a specific spot, or target, on a page. Clicking that link takes you directly to the place you&#8217;ve specified.<\/p>\n<p style=\"text-align: left;\">You might be familiar with this function in Microsoft Word, known as bookmarking.<\/p>\n<p>Jump links (or bookmarks) allow you to create content where readers can instantly go to a spot on your page, just by clicking the linked text.<\/p>\n<p>They are especially convenient for a mini table of contents at the top of any page, or to quickly get to sections when you have a lot of content on a single page.<\/p>\n<ul>\n<li><a href=\"#how-to\">How to Create WordPress Jump Links<\/a><\/li>\n<li><a href=\"#rules\">Other Important Rules for Jump Links<\/a><\/li>\n<li><a href=\"#other-pages\">Linking to Specific Spots on Other Pages<\/a><\/li>\n<li><a href=\"#top-of-page\">Linking to the Top of the Page<\/a><\/li>\n<li><a href=\"#master\">Becoming a Target Master<\/a><\/li>\n<\/ul>\n<h2 id=\"how-to\"><strong>How to Create WordPress Jump Links<\/strong><\/h2>\n<p>Creating jump links is fairly easy, and can be done by going into the Text tab of the Classic WordPress editor.<\/p>\n<p>Jump links consist of two parts:<\/p>\n<ol>\n<li>The Link<\/li>\n<li>The Target<\/li>\n<\/ol>\n<p>When the <em>Link<\/em> is clicked, it will bring your visitors to the location on the page where the <em>Target<\/em> text exists.<\/p>\n<p>The link is represented in code by <em>href<\/em>.<\/p>\n<p>The target is represented in code by <em>id.<\/em><\/p>\n<h3>The Link<\/h3>\n<p>The link code uses the following format:<\/p>\n<pre style=\"padding-left: 30px;\">&lt;a href=\"#unique-name\"&gt;Link Text&lt;\/a&gt;<\/pre>\n<p>You need to create a unique name for your jump link and place that in your coding. (See below for <a href=\"#parameters\">parameters<\/a> on what is meant here by unique.)<\/p>\n<p>You must always precede the unique name with a <strong>hashtag #<\/strong>.<\/p>\n<h4>Example:<\/h4>\n<p>The unique name for this jump link is: music-history.<\/p>\n<p>The code would like like this:<\/p>\n<pre style=\"padding-left: 30px;\">&lt;a href=\"#music-history\"&gt;Link Text&lt;\/a&gt;<\/pre>\n<p>The visible link text can say whatever you like. Here we&#8217;ll use \u201cMusic History\u201d, as it&#8217;s the header we&#8217;ll be linking it to.<\/p>\n<pre style=\"padding-left: 30px;\">&lt;a href=\"#music-history\"&gt;Music History&lt;\/a&gt;<\/pre>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_205868\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-205868\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/02\/referring-link-code-in-text-editor-1050x356.png\" alt=\"Link code\" width=\"1050\" height=\"356\" \/><figcaption class=\"wp-caption-text\">Code for your link.<\/figcaption><\/figure>\n<h3>The Target<\/h3>\n<p>The target (the spot where you\u2019re jumping to) will need to take the following form:<\/p>\n<pre style=\"padding-left: 30px;\"><code>&lt;a id=\"unique-name\"&gt;Target Text&lt;\/a&gt;<\/code><\/pre>\n<p>Or, you can do without the target text, and simply place the code in your editor.<\/p>\n<p style=\"padding-left: 30px;\"><code>&lt;a id=\"unique-name\"&gt;&lt;\/a&gt;<\/code><\/p>\n<h4>Example:<\/h4>\n<p>In the example above, I made my unique name \u201cmusic-history,\u201d and so I need to name my target exactly the same (<strong>hashtag #<\/strong> is not needed for the target).<\/p>\n<pre style=\"padding-left: 30px;\"><code>&lt;a id=\"music-history\"&gt;Music History&lt;\/a&gt;<\/code><\/pre>\n<p>Or, if I\u2019ve decided not to use target text, it would look like this:<\/p>\n<pre style=\"padding-left: 30px;\"><code>&lt;a id=\"music-history\"&gt;&lt;\/a&gt;<\/code><\/pre>\n<figure id=\"attachment_205871\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-205871\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/02\/target-on-link-code-in-text-editor-1050x355.png\" alt=\"Target code\" width=\"1050\" height=\"355\" \/><figcaption class=\"wp-caption-text\">Code for your target.<\/figcaption><\/figure>\n<h2 id=\"rules\">Other Important Rules for Jump Links<\/h2>\n<p>Because this is code, even thought it&#8217;s basic, it is important to know a few finer points that apply here. Close doesn&#8217;t cut it&#8230; much like being off by only one number on a credit card&#8230; it must be exact.<\/p>\n<h3 id=\"parameters\">ID (Unique Name) Parameters<\/h3>\n<ol>\n<li>No Spaces: The ID word cannot have spaces, but can have mixed caps.<br \/>\n<strong>Examples:<br \/>\n<\/strong>&#8220;Hello Friend&#8221; won&#8217;t work.<br \/>\n&#8220;HelloFriend&#8221; or &#8220;hello-friend&#8221; will.<\/li>\n<li>Must Start With a Letter: The ID is an alphanumeric character string, so it can contain letters and\/or numbers, but it must <strong>start<\/strong> with a letter.<br \/>\n<strong>Examples:<br \/>\n<\/strong>&#8220;321hello&#8221; won&#8217;t work.<br \/>\n&#8220;hello321&#8221; or &#8220;hello1&#8221; will.<\/li>\n<li>Use a Keyword: This one is optional. It can be easier to write and remember keywords rather than code, but either works.<br \/>\n<strong>Examples:<br \/>\n<\/strong>&#8220;HelloFriend&#8221; or &#8220;hello&#8221; are easy to remember as a reference, whereas &#8220;hf1&#8221; or &#8220;he110fr1end999&#8221; aren&#8217;t.<br \/>\nAny of these will work, but the first two will be easier to recall.<\/li>\n<\/ol>\n<h3>Placement<\/h3>\n<p>There may be times you&#8217;d prefer not to put the code on top of text; perhaps a spot on your site where a toolbar or other element might potentially cover up what you want visible when it&#8217;s jumped to.<\/p>\n<p>The way to get around this is to put the \u201ctarget\u201d just ABOVE the spot you actually want your visitors to jump to.<\/p>\n<p>For example, if I want to make sure my visitors can see my heading labeled \u201cMusic History\u201d, and there&#8217;s another page element covering it up, I could put the target code ABOVE the heading I&#8217;m linking it to, like this:<\/p>\n<figure id=\"attachment_205869\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-205869\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/02\/target-above-link-code-in-text-editor-1050x355.png\" alt=\"Code above target text.\" width=\"1050\" height=\"355\" \/><figcaption class=\"wp-caption-text\">Code above target text.<\/figcaption><\/figure>\n<p>Which results in this&#8230;<\/p>\n<figure id=\"attachment_205892\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-205892 size-ratio-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/02\/target-above-link-in-browser-view-1050x308.png\" alt=\"Target above link in browser view\" width=\"1050\" height=\"308\" \/><figcaption class=\"wp-caption-text\">How putting code above your target looks in the browser.<\/figcaption><\/figure>\n<h3>Other Code<\/h3>\n<p>Keep in mind while you are in the HTML\/Text editor, you&#8217;re going to see more than just your jump link codes. You are going to see all of the HTML code, interspersed with all of your content text.\u00a0 Focus on the code specific to jump links\u2015to see that it is formatted &amp; placed correctly\u2015and try to tune out the rest.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<figure id=\"attachment_205874\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-205874\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/02\/all-the-code-content-text-1050x318.png\" alt=\"All the code\" width=\"1050\" height=\"318\" \/><figcaption class=\"wp-caption-text\">All the code.<\/figcaption><\/figure>\n<h2 id=\"other-pages\">Linking to Specific Spots on Other Pages<\/h2>\n<p>Once you set up these jump links and test them out, you will notice that when you jump to a target, the URL in your browser changes to reflect exactly where you are.<\/p>\n<h4>Example:<\/h4>\n<p>If your main page is<em> mysite.com\/music\/<\/em>, and you jump to your \u201cMusic History\u201d target, your URL will now show as <em>mysite.com\/music\/#music-history<\/em>.<\/p>\n<p>Because of this, you can also set up links between pages and go directly to the spot on the page that you want.<\/p>\n<h4>Example:<\/h4>\n<p>If you have posts and pages on your site about all your interests, and you wanted to link to the \u201cMusic History&#8221; section\u201d of your \u201cMusic\u201d page (<em>mysite.com\/music\/<\/em>), you would link directly to that spot:<em> mysite.com\/music\/#music-history<\/em>.<\/p>\n<h2 id=\"top-of-page\">Linking to the Top of the Page<\/h2>\n<p>Perhaps you\u2019ve been on a site before that had a link at the bottom of the page that said \u201cTop\u201d or \u201cGo to the Top of the Page.\u201d<\/p>\n<p>You can also easily do that with the same type of code we\u2019ve gone over here, making sure you are in the HTML\/Text editor.<\/p>\n<p>Put the following \u201ctarget code\u201d at the very top of your page:<\/p>\n<pre style=\"padding-left: 30px;\"><code>&lt;a id=\"top\"&gt;&lt;\/a&gt;<\/code><\/pre>\n<p>And then wherever you\u00a0 like, put the following link code, using the <strong>hashtag #<\/strong>:<\/p>\n<pre style=\"padding-left: 30px;\"><code>&lt;a href=\"#top\"&gt;Go to the Top&lt;\/a&gt;<\/code><\/pre>\n<p>The same principles are at work here: you\u2019ve got a link (even though it\u2019s at the bottom) and you\u2019ve got a target (even though it\u2019s at the top).<\/p>\n<h2 id=\"master\">Becoming a Target Master<\/h2>\n<p>And that\u2019s all there is to it. You now have all the knowledge on jump links!<\/p>\n<p>Making easily clickable targets in your posts and pages is more than a convenience for your readers. It can actually improve your bounce rates.<\/p>\n<p>Why? Because if people HAVE to scroll through a long read when they just want to see a particular section, they can get frustrated and leave your site altogether.<\/p>\n<p>In the end, it&#8217;s more important that your visitors get the exact content they are looking for (and from YOUR site), than reading every single word you&#8217;ve written.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_190678\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190678 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/02\/jumpingfish.jpg\" alt=\"Goldfish jumping out of water\" width=\"600\" height=\"603\" \/><figcaption class=\"wp-caption-text\"><a href=\"http:\/\/www.bigstockphoto.com\/image-26329694\/stock-photo-high-resolution-image-of-fish-jumping-up\" target=\"_blank\">Photo from Bigstock.<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to easily link directly to any spot on a post or page.<\/p>\n","protected":false},"author":84404,"featured_media":190676,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[],"class_list":["post-70941","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/70941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=70941"}],"version-history":[{"count":27,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/70941\/revisions"}],"predecessor-version":[{"id":206121,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/70941\/revisions\/206121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/190676"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=70941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=70941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=70941"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=70941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}