{"id":80593,"date":"2019-05-13T09:57:43","date_gmt":"2019-05-13T14:57:43","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&#038;p=80593"},"modified":"2024-06-25T18:50:01","modified_gmt":"2024-06-25T23:50:01","slug":"creating-anchor-links-in-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/","title":{"rendered":"Creating Anchor Links in WordPress"},"content":{"rendered":"\n<p>When you have a page with a lot of content, such as an FAQ page or a how-to guide, it can be hard for visitors to find what they\u2019re looking for. For better or worse, <a href=\"https:\/\/www.theguardian.com\/commentisfree\/2018\/aug\/25\/skim-reading-new-normal-maryanne-wolf\" target=\"_blank\" rel=\"noreferrer noopener\">skimming is the new norm<\/a> in online reading. If you overwhelm viewers with long blocks of text, they may simply leave.<br><\/p>\n\n\n\n<p>Fortunately, it\u2019s easy to break pages down into discrete chunks by using anchor links. These are links that enable readers to go straight to a specific part of the page. You can use this feature to list out a set of topics and let visitors jump to whichever one they\u2019re interested in. Using anchor links correctly can even help to <a href=\"https:\/\/moz.com\/learn\/seo\/anchor-text\" target=\"_blank\" rel=\"noreferrer noopener\">boost your Search Engine Optimization (SEO)<\/a>.<br><\/p>\n\n\n\n<p>On this page, we\u2019ll explain what anchor links are and how to apply them on your WordPress site. Let\u2019s jump right in!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Are Anchor Links?<\/h2>\n\n\n\n<p>Anchor links (also known as \u201cjump links\u201d) are links that take you to a specific section of either the page you\u2019re already on, or an external page. It\u2019s very likely that you\u2019ve used anchor links many times. They may have come in handy when you needed to navigate a table of contents in a Wikipedia article, for example, or jump to a particular section on an FAQ page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tips for Adding Anchor Links<\/h2>\n\n\n\n<p>Anchor links are simple in principle, but there are a few things you\u2019ll want to keep in mind when using them on your own website. These include:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Transitions.<\/strong> Unless you specify a transition effect, anchor links will quickly jump the reader down to the appropriate part of the page. This can have an unpleasant result if the page moves too quickly. It\u2019s easy to add a transition effect using a WordPress plugin such as <a href=\"https:\/\/wordpress.org\/plugins\/page-scroll-to-id\/\" target=\"_blank\" rel=\"noreferrer noopener\">Page Scroll to ID<\/a>, or by <a href=\"https:\/\/stackoverflow.com\/questions\/17631417\/css-pure-css-scroll-animation\/17633941\" target=\"_blank\" rel=\"noreferrer noopener\">adjusting your jump links\u2019 CSS<\/a>.<\/li>\n\n\n\n<li><strong>\u2018Return to top\u2019 links.<\/strong> Once a user has jumped down to the location indicated by the anchor text, they\u2019ll have to scroll all the way back up to the top if they want to visit another section. Therefore, it\u2019s smart to include a \u2018return to top\u2019 link at the end of each section for easy navigation.<\/li>\n\n\n\n<li><strong>Using anchor links appropriately.<\/strong> Anchor links aren\u2019t always necessary. For example, if you\u2019re writing a long article with multiple chapters, it may be better to break it into separate pages (<a href=\"https:\/\/wpengine.com\/resources\/how-to-create-table-of-contents-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">using a table of contents plugin<\/a>) than to use anchor links on an endless scroll.<\/li>\n<\/ul>\n\n\n\n<p>To expand on that last point, anchor links are best suited to content that\u2019s relatively short, and where each reader may only be interested in a specific section. FAQs, reference articles, troubleshooting guides, and similar types of content are perfectly suited to anchor links.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Manually Create Anchor Links in WordPress<\/h2>\n\n\n\n<p>There are a few ways to create anchor links in WordPress. The two most common options are to add them manually, and to use a plugin. Let\u2019s explore the manual approach first.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Choose Your Link\u2019s Text and Assign It an Anchor Name<\/h3>\n\n\n\n<p>To get started, you\u2019ll want to add the text for your anchor link to your page or post. Then, select it and click on the link icon from among the formatting options, just as you would to add a link normally. Instead of linking the text to a URL, post, or page, however, you will assign it an \u2018anchor name\u2019:<br><\/p>\n\n\n\n<p>In the window that opens up, instead of pasting in external link, you\u2019ll create a name for the link. This can be anything you like, although it\u2019s best to keep it short and relate it to the section the link will point to. In addition, make sure you preface your anchor name with a hashtag (#), as in the example above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add Your Anchor Name to the Relevant Section of Your Page or Post<\/h3>\n\n\n\n<p>Next, you\u2019ll need to indicate which section of your page or post your anchor link should lead to. Navigate to that section, and access the HTML editor by selecting <em>More Options &gt; Edit as HTML<\/em>:<br><\/p>\n\n\n\n<p>Then, add the ID you created earlier to the content\u2019s initial tag. If you\u2019re linking to a specific paragraph, for example, you would include the ID in its starting &lt;p&gt; tag, like this: &lt;p id=&#8221;about&#8221;&gt;.<br><\/p>\n\n\n\n<p>It\u2019s important that the ID you add here exactly matches the ID you used for your link. As long as that\u2019s the case, readers will be jumped to the section you chose when they click on the anchor link.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Create Anchor Links in WordPress With a Plugin<\/h2>\n\n\n\n<p>As with so many things, creating anchor links is made much easier in WordPress with the right plugin. There are a few options, but let\u2019s look at how to do this using the popular <a href=\"https:\/\/wordpress.org\/plugins\/page-scroll-to-id\/\" target=\"_blank\" rel=\"noreferrer noopener\">Page Scroll to ID<\/a> plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add a Shortcode Block to Your Page or Post<\/h3>\n\n\n\n<p>First, you\u2019ll want to install and activate the plugin. Then open up your page or post, and add a <em>Shortcode<\/em> block wherever you want your anchor link to jump to:<\/p>\n\n\n\n<p>Then, enter the following into the Shortcode block:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[ps2id id='section-1'\/]<br><\/pre>\n\n\n\n<p>You\u2019ll want to replace \u201csection-1\u201d with whatever anchor name you\u2019d like to use. For more details on using and modifying this shortcode, you can check out <a href=\"http:\/\/manos.malihu.gr\/page-scroll-to-id-for-wordpress-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">the plugin\u2019s detailed documentation<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Create an Anchor Link<\/h3>\n\n\n\n<p>Next, you can insert your anchor link. Again, you\u2019ll do this by creating a <em>Shortcode<\/em> block, and placing it wherever you\u2019d like your link to be located.<\/p>\n\n\n\n<p>You\u2019ll paste this shortcode into the new block:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[ps2id url='#some-id']link text[\/ps2id]<br><\/pre>\n\n\n\n<p>You should replace \u201csome-id\u201d with the anchor name you created above, and \u201clink text\u201d with whatever anchor text you\u2019d like the link to have. Then save your changes, and your anchor link will be ready to go!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Learn More With WP Engine<\/h2>\n\n\n\n<p>Anchor links aren\u2019t hard to use, but they can take a little practice to get right. If you\u2019re feeling stuck or need help adding them to your site, don\u2019t be afraid to <a href=\"https:\/\/wpengine.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\">reach out<\/a>.<\/p>\n\n\n\n<p>Here at WP Engine, we offer <a href=\"https:\/\/developer.wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">top resources for developers<\/a> and make it easy to create an incredible digital experience for your customers. <a href=\"https:\/\/wpengine.com\/plans\/\" target=\"_blank\" rel=\"noreferrer noopener\">Check out our plans<\/a> to learn more about WP Engine&#8217;s world-class <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress hosting<\/a> today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you have a page with a lot of content, such as an FAQ page or a how-to guide, it can be hard for visitors to find what they\u2019re looking for. For better or worse, skimming is the new norm in online reading. If you overwhelm viewers with long blocks of text, they may simply<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":297,"featured_media":0,"template":"","resource-topic":[904,910],"resource-role":[895,903],"resource-type":[916],"class_list":["post-80593","resource","type-resource","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating Anchor Links in WordPress | WP Engine<\/title>\n<meta name=\"description\" content=\"Explore our comprehensive tutorial on how to create anchor links in WordPress to enhance navigation and user experience on your website.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Anchor Links in WordPress | WP Engine\" \/>\n<meta property=\"og:description\" content=\"Explore our comprehensive tutorial on how to create anchor links in WordPress to enhance navigation and user experience on your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-25T23:50:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/WPE-IMG-Thumbnail-1200x630-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/\",\"name\":\"Creating Anchor Links in WordPress | WP Engine\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2019-05-13T14:57:43+00:00\",\"dateModified\":\"2024-06-25T23:50:01+00:00\",\"description\":\"Explore our comprehensive tutorial on how to create anchor links in WordPress to enhance navigation and user experience on your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creating Anchor Links in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521\",\"name\":\"Erin Myers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"caption\":\"Erin Myers\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Anchor Links in WordPress | WP Engine","description":"Explore our comprehensive tutorial on how to create anchor links in WordPress to enhance navigation and user experience on your website.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Creating Anchor Links in WordPress | WP Engine","og_description":"Explore our comprehensive tutorial on how to create anchor links in WordPress to enhance navigation and user experience on your website.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-06-25T23:50:01+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/WPE-IMG-Thumbnail-1200x630-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/","name":"Creating Anchor Links in WordPress | WP Engine","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2019-05-13T14:57:43+00:00","dateModified":"2024-06-25T23:50:01+00:00","description":"Explore our comprehensive tutorial on how to create anchor links in WordPress to enhance navigation and user experience on your website.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/creating-anchor-links-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Creating Anchor Links in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521","name":"Erin Myers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","caption":"Erin Myers"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/05\/shutterstock_1324194398.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Marketer","topic":"<strong>Topics:<\/strong> Marketing, SEO","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/80593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/297"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=80593"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=80593"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=80593"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=80593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}