<\/iframe><\/p>\n<\/div>\n<h2 id=\"what-is-an-anchor\">What is an “Anchor?”<\/h2>\n<figure id=\"attachment_25121\" aria-describedby=\"caption-attachment-25121\" style=\"width: 223px\" class=\"wp-caption alignright\"><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/information-management-proposal.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-25121\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/information-management-proposal-223x300.gif\" alt=\"Information Management: A Proposal by Tim Berners-Lee\" width=\"223\" height=\"300\"><\/a><figcaption id=\"caption-attachment-25121\" class=\"wp-caption-text\">Tim Berners-Lee’s original proposal that became the World Wide Web, included the concept of “Linked Information.” <a href=\"http:\/\/info.cern.ch\/Proposal.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Source<\/a><\/figcaption><\/figure>\nThe phrase “Anchor Links” in the modern web usually refers to making a link to a specific section of a page, but this isn’t entirely accurate. Technically, all links are anchors— the <a> HTML element that creates a link actually originally stood for the word “anchor.”<\/p>\n<blockquote>When Tim Berners-Lee first conceived of the web, he envisioned links would be like a ship’s anchor for a floating piece of information, keeping it moored to the right location instead of drifting in the cloud.<\/p><\/blockquote>\nLinks are more than just a way to move from one web page to another, or even for moving from one part of a page to another part. They are vital for SEO because they inform search engines which pieces of information are related to others. This is why the “Anchor Text”<\/strong> you use for links is such a strong factor in your WordPress website’s SEO rankings.<\/p>\nThis tutorial focuses on creating anchor links in WordPress<\/strong> so you can link to different sections of a page.<\/strong> There are two main parts required— creating ID’s for your anchor links to target, and then creating a link with the anchor in it.<\/p>\n<h2 id=\"creating-anchor-ids\">Creating Anchor ID’s<\/h2>\nThe first step to creating anchor links in WordPress is to label the sections of the page you’ll be linking to. You can link to any element, but most commonly, you’ll be linking to headings. There are a few things you’ll need to know about HTML ID’s.<\/p>\nHTML ID’s should be unique<\/strong> on each page. If you use the same ID on two elements on a page, all anchor links will go to the first one that occurs from the top of the page.<\/p>\nID’s also cannot contain spaces<\/strong>. Commonly, hyphens or underscores will be used in place of spaces.<\/p>\nAnd finally, ID’s should be semantically relevant<\/strong> to the element they belong to. This is a fancy way of saying that the name you give to an element should describe the purpose of the element.<\/p>\nThis article will show you how to add an ID to a heading in three WordPress page editors— the WordPress “Gutenberg” Editor, the Classic Editor, and the BoldGrid Post and Page Builder.<\/p>\n<h3 id=\"how-to-add-an-anchor-id-using-the-wordpress-gutenberg-editor\">How to add an Anchor ID using The WordPress “Gutenberg” Editor<\/h3>\nThe WordPress Editor makes adding an ID to a heading very easy. While you’re editing a Heading Block, click the arrow to open the Block > Advanced<\/strong> section in the right-hand settings pane. If you don’t see the settings pane, click on the cog icon (  ), or use the shortcut Ctrl-Shift-Comma<\/strong>.<\/p>\nFrom here, you’ll see the option to add an HTML anchor<\/strong>. \n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/anchor-id-in-gutenberg.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-25142\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/anchor-id-in-gutenberg-1024x744.png\" alt=\"HTML Anchor setting in Gutenberg\" width=\"1024\" height=\"744\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/anchor-id-in-gutenberg-1024x744.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/anchor-id-in-gutenberg-300x218.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/anchor-id-in-gutenberg-768x558.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/anchor-id-in-gutenberg.png 1038w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<h3 id=\"how-to-add-an-anchor-id-using-the-classic-editor\">How to add an Anchor ID using the Classic Editor<\/h3>\nAdding an ID in the Classic Editor, also known as TinyMCE, is a little more difficult. It involves using the HTML Text Editor, which can be intimidating to newer WordPress users. This is especially true for long, complex sets of content, because there are no visual indicators of which elements are headings.<\/p>\nHere’s a trick you can use to easily find the right HTML element in the text editor. Simply highlight the heading before you switch editors, and it will stay highlighted in the text editor.<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/switch-to-text-editor.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-25153\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/switch-to-text-editor.gif\" alt=\"Animation showing highlighting an element, then switching to the text editor\" width=\"1034\" height=\"799\"><\/a><\/p>\nOnce you’ve located the right element, put your cursor inside the < and > carets of the heading element, and add id=”this-ID”<\/strong> to the element. Replace this-ID with your own anchor link ID.<\/p>\n<h3 id=\"how-to-add-an-anchor-id-using-the-boldgrid-post-and-page-builder\">How to add an Anchor ID using the BoldGrid Post and Page Builder<\/h3>\nUsing the Post and <a href=\"https:\/\/www.boldgrid.com\/wordpress-page-builder-by-boldgrid\/\">Page Builder WordPress Plugin<\/a> makes adding an ID to an element very easy. This is the process outlined in the video at the top of the article.<\/p>\nWhile you’re editing your page, hover your mouse over the heading that you’d like to link, and click on the orange Edit Content<\/strong> context menu, and then click on Advanced Control<\/strong>. \n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/advanced-control-ppb.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-25180\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/advanced-control-ppb.png\" alt=\"The Advanced Control menu\" width=\"648\" height=\"325\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/advanced-control-ppb.png 648w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/advanced-control-ppb-300x150.png 300w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/a><\/p>\nIn the Advanced Control menu, the bottom item is the Custom Classes and CSS ID section. Enter your ID into the CSS ID<\/strong> field. \n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/adding-ID-ppb.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-25181\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/adding-ID-ppb.png\" alt=\"Adding an ID in the Post and Page Builder\" width=\"913\" height=\"671\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/adding-ID-ppb.png 913w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/adding-ID-ppb-300x220.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/adding-ID-ppb-768x564.png 768w\" sizes=\"auto, (max-width: 913px) 100vw, 913px\" \/><\/a><\/p>\n<h2 id=\"creating-wordpress-anchors-links\">Creating WordPress Anchors Links<\/h2>\nNow that you’ve got your ID’s added to the right elements, it’s time to create links to go to those ID’s. You do this by adding the # (Pound, Hashtag, Number sign, Octothorpe) symbol to your link, followed by the ID. If you’re linking to a section of the same page, you only need to use the #this-ID as the link’s reference rather than the full URL.<\/p>\n<h3 id=\"linking-to-an-anchor-with-a-text-link\">Linking to an Anchor with a text link<\/h3>\nRegardless of which editor you’re using, making text on your page link to an anchor is much the same. Highlight the text that you want to make into a link, and click the “Chain” icon ( ), or use the shortcut Ctrl-k<\/strong>. Then, enter the the ID name with the # symbol before it. \n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/link-to-anchor-on-same-page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-25192\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/link-to-anchor-on-same-page.png\" alt=\"Creating a link to an anchor on the same page\" width=\"767\" height=\"162\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/link-to-anchor-on-same-page.png 767w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/link-to-anchor-on-same-page-300x63.png 300w\" sizes=\"auto, (max-width: 767px) 100vw, 767px\" \/><\/a><\/p>\n<h3 id=\"wordpress-anchor-links-in-a-menu\">WordPress Anchor Links in a Menu<\/h3>\nSince Menus appear on multiple pages of your website, you’ll need to use the full URL of the page, followed by the #this-ID label. That also means you’ll need to use the Custom Link<\/strong> menu item type. \n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/custom-link-menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-25195\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/custom-link-menu.png\" alt=\"\" width=\"809\" height=\"545\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/custom-link-menu.png 809w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/custom-link-menu-300x202.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/custom-link-menu-768x517.png 768w\" sizes=\"auto, (max-width: 809px) 100vw, 809px\" \/><\/a><\/p>\n<h2 id=\"anchor-links-in-wordpress-and-sticky-headers\">Anchor Links in WordPress and Sticky Headers<\/h2>\nNow that you have created your anchor links, you might want to take some additional steps to provide a better experience for your website’s visitors. By default, anchor links abruptly send the visitor to the section of the page. This can be a jarring experience and leave your visitor feeling disoriented, because they won’t have any visual queue which part of the page they’re now seeing.<\/p>\nAdditionally, if your theme features a “sticky header,” that remains visible on your page even if you scroll down, you’ll find that your anchors appear “below” the header. That’s because by default, the browser puts the anchor right at the very top of the page.<\/p>\nOne of the best parts about using WordPress is that there are so many free ways to improve your website in the WordPress Plugin Repository. The plugin <a href=\"https:\/\/wordpress.org\/plugins\/easy-smooth-scroll-links\/\" target=\"_blank\" rel=\"noopener noreferrer\">Easy Smooth Scroll Links<\/a> is free, doesn’t have any upsells, has largely good reviews, and takes care of both the user experience as well as lets you specify an offset<\/strong>. An offset will let you deal with a sticky header.<\/p>\n<h3 id=\"how-to-find-your-sticky-header-offset\">How to find your Sticky Header Offset<\/h3>\nThe offset is a value, in pixels, of how much to move your anchors down so that they don’t go into your sticky header. In order to find out how many pixels tall your header is, visit your website in Firefox or Chrome. Right click on your header, and click Inspect<\/strong> in Chrome, or Inspect Element<\/strong> in Firefox. Then, hovering over it, you’ll see the element’s dimensions just below it. \n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/inspect-header.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-25199\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/inspect-header.png\" alt=\"Clicking Inspect, and seeing the element's dimensions\" width=\"517\" height=\"628\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/inspect-header.png 517w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/07\/inspect-header-247x300.png 247w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/a><\/p>\nThe second number is the height, in this example 110 pixels. Now you can use that value to determine your offset. You may want to add 5-20 pixels to put a little space between your Anchor and your header.<\/p>\nCongratulations! Now you know how to create Anchor Links in WordPress!<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"What is an “Anchor?” The phrase “Anchor Links” in the modern web usually refers to making a link to a specific section of a page, but this isn’t entirely accurate. Technically, all links are anchors— the <a> HTML element that creates a link actually originally stood for the word “anchor.” When Tim Berners-Lee first conceived […]<\/p>\n","protected":false},"author":1294,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Add Anchor Links in WordPress - Step by Step Tutorial","bgseo_description":"Learn how to create anchor links in WordPress. The \"Anchor Text\" you use for links is a strong factor in your WordPress website SEO rankings.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[],"class_list":["post-25118","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/25118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/1294"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=25118"}],"version-history":[{"count":51,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/25118\/revisions"}],"predecessor-version":[{"id":40471,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/25118\/revisions\/40471"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=25118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=25118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=25118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}