{"id":21828,"date":"2021-03-22T17:00:14","date_gmt":"2021-03-22T16:00:14","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=21828"},"modified":"2021-03-22T10:05:11","modified_gmt":"2021-03-22T09:05:11","slug":"how-to-add-anchor-link-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-anchor-link-in-wordpress\/","title":{"rendered":"How to Create an Anchor Link in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If you\u2019re a WordPress site owner, ensuring that your visitors always have a smooth and impeccable user experience when browsing through your website should be one of your priorities. A typical user won\u2019t spend too long on your page before they determine whether they want to keep browsing or if they want to leave altogether. So, you actually have no longer than a few seconds to get them to stay.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, this can be achieved using many different strategies, but when it comes to improving user experience on your site, nothing beats solid <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-website-navigation\/\">website navigation<\/a>. Now, when we say website navigation, we mean the creation of different <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-navigation-menu-in-wordpress\/\">navigation menus<\/a>, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-design-cta\/\">CTA buttons<\/a>, and spreading different types of <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-links-in-wordpress\/\">navigation links<\/a> throughout your site, including anchor links. And this time around, <strong>we are going to focus on anchor links in particular<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Anchor links have the power to enhance the user experience of your visitors since <strong>they allow them quick access to the section they are interested in<\/strong>. Stay tuned as we further discuss the importance of these types of links and show you some of the best ways to add them to your WordPress site \u2013 both in the <strong>Gutenberg and Classic editor<\/strong>.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will cover:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-anchor-links\">What Are Anchor Links and Why Are They Useful<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#manually-adding-in-gutenberg\">Manually Adding an Anchor Link in Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#manuall-adding-in-the-classic-editor\">Manually Adding an Anchor Link in the Classic Editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#automatically\">Automatically Adding Anchor Links in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-anchor-links\"><\/a>What Are Anchor Links and Why Are They Useful<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we already mentioned, anchor links are quite useful navigation elements since they have the ability to bring users to a specific area on the same page, which allows them to quickly get to the section they are interested in. Otherwise known as table of contents, these types of links are often used in longer forms of content, such as different types of articles, <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-faq-for-wordpress\/\">FAQ sections<\/a>, or lists of products or services, for example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"324\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/What-Is-a-Bounce-Rate.gif\" class=\"attachment-full size-full\" alt=\"What Is a Bounce Rate\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Aside from largely improving your website\u2019s UX in general, anchor links can also have a positive influence on your website\u2019s SEO. Namely, Google has a tendency to show your anchor links in a form of a \u201cjump to\u201d link in search results especially if users type in the keywords contained in your anchor link. All this can <strong>improve your click-through rate, and by extension, bring more traffic to your website<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/1-Google-Jump-to-links.jpg\" class=\"attachment-full size-full\" alt=\"Google Jump to links\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/1-Google-Jump-to-links.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/1-Google-Jump-to-links-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/1-Google-Jump-to-links-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/1-Google-Jump-to-links-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Also, if you list your anchor links as a table of contents, Google may decide to display them as a rich snippet, like this:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/2-Anchor-links-as-a-table-of-contents.jpg\" class=\"attachment-full size-full\" alt=\"Anchor links as a table of contents\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/2-Anchor-links-as-a-table-of-contents.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/2-Anchor-links-as-a-table-of-contents-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/2-Anchor-links-as-a-table-of-contents-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/2-Anchor-links-as-a-table-of-contents-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now that we\u2019ve covered some of the basic reasons why anchor links can be valuable for a website, let\u2019s take a look at how you can add them in WordPress.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"manually-adding-in-gutenberg\"><\/a>Manually Adding an Anchor Link in Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_column_text]To get your anchor links to work, there are two things you should do \u2013 first, you need to <strong>add a # sign before your anchor text, and then add the ID attribute<\/strong> to the text that you want users to be led to when clicking on the anchor link.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To create your anchor link in Gutenberg, you should select the text you want to have as your anchor and hit the <em>Link<\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/3-Manually-adding-an-anchor-link-in-Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Manually adding an anchor link in Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/3-Manually-adding-an-anchor-link-in-Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/3-Manually-adding-an-anchor-link-in-Gutenberg-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/3-Manually-adding-an-anchor-link-in-Gutenberg-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/3-Manually-adding-an-anchor-link-in-Gutenberg-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A popup will appear where you are usually able to add a link URL. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/4-Add-a-link-URL.jpg\" class=\"attachment-full size-full\" alt=\"Add a link URL\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/4-Add-a-link-URL.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/4-Add-a-link-URL-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/4-Add-a-link-URL-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/4-Add-a-link-URL-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But instead of doing that, you need to <strong>include a # prefix and insert the keywords for the specific area you want users to jump to<\/strong> when clicking on this type of link. Of course, you should use the keywords related to the anchor section you are creating a link for. We also recommend using hyphens and\/or capitalization to make your anchor text more readable in general. Here\u2019s an example of a # prefix:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]#Hair-Products[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/5-Use-the-keywords-related-to-the-anchor-section.jpg\" class=\"attachment-full size-full\" alt=\"Use the keywords related to the anchor section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/5-Use-the-keywords-related-to-the-anchor-section.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/5-Use-the-keywords-related-to-the-anchor-section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/5-Use-the-keywords-related-to-the-anchor-section-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/5-Use-the-keywords-related-to-the-anchor-section-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Hit the Enter button to finish adding your anchor link. After you do this, you will be able to see the anchor link in the editor, but won\u2019t be able to click on it as you still need to create an ID for it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/6-finish-adding-your-anchor-link.jpg\" class=\"attachment-full size-full\" alt=\"Finish adding your anchor link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/6-finish-adding-your-anchor-link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/6-finish-adding-your-anchor-link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/6-finish-adding-your-anchor-link-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/6-finish-adding-your-anchor-link-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add an ID to the anchor link, you should <strong>find the section you want users to be led to when clicking on your link<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To link to a heading section, select the desired block, and <strong>choose the <em>Advanced<\/em> tab<\/strong>. Then, in the <em>HTML anchor<\/em> field, you should <strong>add the same text you used for your anchor link<\/strong> \u2013 the only difference being that you should <strong>leave out the # prefix<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/7-HTML-anchor-field.jpg\" class=\"attachment-full size-full\" alt=\"HTML anchor field\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/7-HTML-anchor-field.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/7-HTML-anchor-field-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/7-HTML-anchor-field-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/7-HTML-anchor-field-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, you can hit the <em>Publish\/Update<\/em> button (or Save Draft) and preview your anchor link to see what it looks like live.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want to link to any other section other than a heading (like a paragraph, or other block types), click on a three-dotted menu icon (in the block itself) and then select the <em>Edit as HTML<\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/8-Edit-as-HTML-button.jpg\" class=\"attachment-full size-full\" alt=\"Edit as HTML button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/8-Edit-as-HTML-button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/8-Edit-as-HTML-button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/8-Edit-as-HTML-button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/8-Edit-as-HTML-button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, find the HTML tag for the specific section or element. For instance, <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;p&gt;<\/code> is a paragraph, <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;h2&gt;<\/code>, <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;h3&gt;<\/code>, etc. are headings, and so on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you find your element, simply <strong>attach an ID attribute together with your anchor to the HTML tag<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Like this:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;p id=\"Hair-Products\"&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]Once you see a message telling you that this block contains content that is unexpected or invalid, you should <strong>click the <em>Convert to HTML<\/em> button<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/9-Convert-to-HTML-button.jpg\" class=\"attachment-full size-full\" alt=\"Convert to HTML button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/9-Convert-to-HTML-button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/9-Convert-to-HTML-button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/9-Convert-to-HTML-button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/9-Convert-to-HTML-button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s it \u2013 you\u2019ve successfully added an anchor link to a specific section in your paragraph, or any other block of your choice. [\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"manuall-adding-in-the-classic-editor\"><\/a>Manually Adding an Anchor Link in the Classic Editor<\/h2>\n<p>[\/vc_column_text][vc_column_text]In case you prefer to use the Classic editor, you can, of course, create anchor links from within this editor as well. Here\u2019s how you can do it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First things first, select your desired anchor link text and hit the <em>Insert\/Edit<\/em> link button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/10-Manually-adding-an-anchor-link-in-the-Classic-Editor.jpg\" class=\"attachment-full size-full\" alt=\"Manually adding an anchor link in the Classic Editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/10-Manually-adding-an-anchor-link-in-the-Classic-Editor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/10-Manually-adding-an-anchor-link-in-the-Classic-Editor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/10-Manually-adding-an-anchor-link-in-the-Classic-Editor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/10-Manually-adding-an-anchor-link-in-the-Classic-Editor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, add a # prefix as well as a slug for your link.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/11-Add-a-prefix-as-well-as-a-slug-for-your-link.jpg\" class=\"attachment-full size-full\" alt=\"Add a prefix as well as a slug for your link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/11-Add-a-prefix-as-well-as-a-slug-for-your-link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/11-Add-a-prefix-as-well-as-a-slug-for-your-link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/11-Add-a-prefix-as-well-as-a-slug-for-your-link-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/11-Add-a-prefix-as-well-as-a-slug-for-your-link-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re done with this step, you should <strong>add your ID attribute to the section you want your users to navigate to<\/strong> when clicking on your link.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Change your mode to <em>Text<\/em> first, and then <strong>find the HTML tag of the section you want to add the ID attribute to<\/strong>\u00a0(like <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;h2&gt;<\/code>, <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;p&gt;<\/code>, and so on).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/12-Change-your-mode-to-Text.jpg\" class=\"attachment-full size-full\" alt=\"Change your mode to Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/12-Change-your-mode-to-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/12-Change-your-mode-to-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/12-Change-your-mode-to-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/12-Change-your-mode-to-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Add your ID attribute together with the slug of your anchor link, but without the # prefix. For example:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;p&gt; id=\u201cHair-Products\u201d&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]Make sure to hit publish\/update your page\/post and then preview it to see what your anchor link looks like.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you prefer to write and edit your content using the Text mode entirely, then you can also use it to create your anchor links using HTML from scratch.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once in the <em>Text<\/em> mode, you can <strong>create your anchor link using the<\/strong> <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;a href-\u201c \u201c&gt;<\/code> tag. Here\u2019s an example of what your anchor link can look like in HTML:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;a href=\"#Hair-Products\"&gt;Hair Products&lt;\/a&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]Then, find the area where you want users to be taken to when clicking on the anchor link (a heading which is usually marked as <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;h2&gt;<\/code> and <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;h3&gt;<\/code>, a paragraph marked as <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;p&gt;<\/code>, etc.) and add your ID attribute to the HTML tag (once again, without the # prefix):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;p&gt; id=\"Hair-Products\"&gt; Hair Products&lt;\/p&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]After saving your changes, go ahead and preview what your anchor link looks like.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"automatically\"><\/a>Automatically Adding Anchor Links in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you regularly create and post long-form content on your site (like particularly lengthy articles, for example), then you also might want to consider adding anchor links automatically to speed up the process. Fortunately, WordPress has a vast online community that regularly creates many useful tools and plugins \u2013 many of which can be used for free. Among such plugins is also a plugin called <a href=\"https:\/\/wordpress.org\/plugins\/easy-table-of-contents\/\" target=\"_blank\" rel=\"noopener\">Easy Table of Contents<\/a>, which you can use to create anchor links on your website automatically.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/13-Easy-Table-of-Contents.jpg\" class=\"attachment-full size-full\" alt=\"Easy Table of Contents\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/13-Easy-Table-of-Contents.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/13-Easy-Table-of-Contents-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/13-Easy-Table-of-Contents-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/13-Easy-Table-of-Contents-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As its name suggests, this plugin will allow you to easily create a table of contents with a list of anchor links and add it to your pages, posts, and\/or custom post types. You can either <strong>enable the auto-insert option to add your anchor links automatically<\/strong>, or you <strong>can uncheck this option and set the table of contents for specific pages\/posts only<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve already got an article that talks in depth about <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-table-of-content-to-wordpress\/\">adding a table of contents in WordPress<\/a> using this practical plugin, so we recommend that you check it out if you want to break your pages or posts into different sections for better navigation.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]Anchor links can be a great addition to any website as they allow users to quickly and easily jump to the section they wish to read. In turn, they can help improve your navigation and enhance your website\u2019s UX as a whole. Adding these types of links to your pages or posts may seem complex at first, but when you take a closer look at the instructions we presented above, you will realize that this process isn\u2019t difficult at all. Just make sure to carefully follow all the steps and you\u2019ll be all set.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Stay tuned as we discuss the importance of anchor links and show you the best ways to add them to your WordPress site \u2013 both in the Classic editor and Gutenberg.<\/p>\n","protected":false},"author":2,"featured_media":21883,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[14,4,13],"class_list":["post-21828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-core","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=21828"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21828\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/21883"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=21828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=21828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=21828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}