{"id":4740,"date":"2025-05-26T14:44:38","date_gmt":"2025-05-26T18:44:38","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?p=4740"},"modified":"2025-08-20T10:31:21","modified_gmt":"2025-08-20T14:31:21","slug":"how-to-add-anchors-to-your-webpages","status":"publish","type":"post","link":"https:\/\/carleton.ca\/cutheme-docs\/2025\/how-to-add-anchors-to-your-webpages\/","title":{"rendered":"How to Add Anchors to your Webpages"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        How to Add Anchors to your Webpages\n\n\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>Anchors\u2014also known as jump links or bookmarks\u2014allow users to quickly navigate to specific sections of a webpage. They\u2019re especially useful on longer pages where readers may want to skip to the part that matters most to them.<\/p>\n\n\n\n<h2 id=\"method-1-using-headings\" class=\"wp-block-heading\">Method 1: Using Headings<\/h2>\n\n\n\n<p>In <strong>cuTheme<\/strong>, anchors are automatically created for headings (e.g., H2, H3). The system generates an ID based on the heading text by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Converting it to lowercase<\/li>\n\n\n\n<li>Replacing spaces with dashes<\/li>\n<\/ul>\n\n\n\n<p>For example<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The heading: <strong class=\"myprefix-text-bold\">Add Anchors to Webpage<\/strong>, <\/li>\n\n\n\n<li>will have the ID: <strong class=\"myprefix-text-bold\">add-anchors-to-webpage<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Link to the header block using the ID with a hashtag. For example: <strong class=\"myprefix-text-bold\">#add-anchors-to-webpage<\/strong><\/p>\n\n\n\n<p>Bonus feature: for linking internally within a page, if you use a proper headings structure you can then just <a href=\"https:\/\/carleton.ca\/cutheme-docs\/block-library\/design-blocks\/table-of-contents-block\/\">insert a Table of Contents<\/a> block at the top of the page and it builds links for users to hop around the page. <\/p>\n\n\n\n<p>This also improves accessibility for your pages. <\/p>\n\n\n\n<h2 id=\"method-2-manually-adding-anchors\" class=\"wp-block-heading\">Method 2: Manually Adding Anchors<\/h2>\n\n\n\n<p>If your content doesn\u2019t use a heading, you can still add an anchor manually:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click where you would like to add the anchor (e.g., start of a paragraph block).<\/li>\n\n\n\n<li>In the block settings panel on the right, open the <strong>Advanced<\/strong> section.<\/li>\n\n\n\n<li>Enter a unique name in the <strong>HTML Anchor<\/strong> field (use lowercase letters and dashes). <br>For example: <strong class=\"myprefix-text-bold\">custom-anchor<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"522\" height=\"278\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/05\/add-anchor.png\" alt=\"Add anchor screenshot\" class=\"wp-image-4745\" style=\"width:300px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/05\/add-anchor.png 522w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/05\/add-anchor-512x273.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/05\/add-anchor-320x170.png 320w\" sizes=\"auto, (max-width: 522px) 100vw, 522px\" \/><\/figure>\n\n\n\n<p>Then link to it using the following: <strong class=\"myprefix-text-bold\">#custom-anchor<\/strong><\/p>\n\n\n\n<p>Anchors are an easy way to make your webpages more user-friendly. They help readers get where they want to go faster, especially on longer pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anchors\u2014also known as jump links or bookmarks\u2014allow users to quickly navigate to specific sections of a webpage. They\u2019re especially useful on longer pages where readers may want to skip to the part that matters most to them. Method 1: Using Headings In cuTheme, anchors are automatically created for headings (e.g., H2, H3). The system generates [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[25],"tags":[],"class_list":["post-4740","post","type-post","status-publish","format-standard","hentry","category-tips-tricks"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/posts\/4740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=4740"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/posts\/4740\/revisions"}],"predecessor-version":[{"id":4763,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/posts\/4740\/revisions\/4763"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=4740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/categories?post=4740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/tags?post=4740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}