{"id":6054,"date":"2023-06-18T10:54:07","date_gmt":"2023-06-18T00:54:07","guid":{"rendered":"https:\/\/vjdesign.com.au\/?page_id=6054"},"modified":"2024-03-16T10:01:10","modified_gmt":"2024-03-15T23:01:10","slug":"wordpress-anchor-links","status":"publish","type":"page","link":"https:\/\/vjdesign.com.au\/wordpress-anchor-links\/","title":{"rendered":"WordPress Anchor Links"},"content":{"rendered":"\n<h1 class=\"gb-headline gb-headline-e43a2efe gb-headline-text\">WordPress Anchor Links<\/h1>\n\n\n\n<p class=\"gb-headline gb-headline-f01339ce gb-headline-text\">Unleash the Power of <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-central-palette-1-color\">WordPress<\/mark><\/strong> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-central-palette-1-color\">Anchor Links<\/mark> \ud83d\udd17 &#8211; Ultimate Guide<\/p>\n\n\n\n<p><strong>Clicking through lengthy pages can be annoying. Learn how to create smooth scrolling anchor links in WordPress for an improved browsing experience.<\/strong><\/p>\n\n\n\n<p>WordPress is one of the most popular content management systems in the world and for good reason. It offers a robust and user-friendly platform for website and blog creation. However, navigating through a lot of content on a single page can be challenging, especially on mobile devices where scrolling can become cumbersome. Fortunately, WordPress has a solution for this problem: <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-central-palette-1-color\">anchor links<\/mark><\/strong>.\u00a0<br>Anchor links, also known as\u00a0<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-central-palette-1-color\">jump links<\/mark><\/strong>, allow users to click on a link that takes them directly to a specific section on a page, rather than having to scroll manually to find it. What&#8217;s more, when used in conjunction with\u00a0<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-central-palette-1-color\">smooth scroll<\/mark>,  <\/strong>anchor links create a seamless and improved user experience. Smooth scroll is a feature that gradually scrolls the page to the<strong>\u00a0<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-central-palette-1-color\">linked heading or section<\/mark><\/strong>, rather than abruptly jumping to it.\u00a0<br>In this article, we will explore the benefits of using anchor links with smooth scroll in WordPress, and how to implement them effectively to enhance your website&#8217;s navigation and user experience.\u00a0<\/p>\n\n\n\n<p class=\"gb-headline gb-headline-b8f1a5f9\"><span class=\"gb-icon\"><svg xml:space=\"preserve\" viewBox=\"0 0 32 32\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Icons\" version=\"1.1\" width=\"200px\" height=\"200px\" fill=\"#000000\"><g stroke-width=\"0\" id=\"SVGRepo_bgCarrier\"><\/g><g stroke-linejoin=\"round\" stroke-linecap=\"round\" id=\"SVGRepo_tracerCarrier\"><\/g><g id=\"SVGRepo_iconCarrier\"> <g> <path d=\"M12.8,29c-0.3,0-0.5-0.1-0.7-0.3l-8.3-8.3C3.2,19.8,3,19,3.4,18.2s1-1.2,1.8-1.2h3.6c0.5-6.2,5.7-11,12-11h4 c0.5,0,0.9,0.4,1,0.9S25.5,7.9,25,8l-0.2,0c-4.4,1-7.5,4.6-8,9h3.5c0.8,0,1.5,0.5,1.8,1.2s0.1,1.6-0.4,2.2l-8.3,8.3 C13.3,28.9,13,29,12.8,29z\"><\/path> <\/g> <\/g><\/svg><\/span><span class=\"gb-headline-text\">The Table of Contents below uses anchor links<\/span><\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li ><a href=\"#importance-of-anchor-links-in-word-press\">Importance of Anchor Links in WordPress\u00a0<\/a><\/li><li ><a href=\"#how\">How to Create Anchor Links in WordPress<\/a><\/li><li ><a href=\"#smooth-scrolling-anchor-links\">Smooth Scrolling Anchor Links<\/a><\/li><li ><a href=\"#how-to-use-anchor-links-in-word-press\">How to Use Anchor Links in WordPress<\/a><\/li><li ><a href=\"#tips-on-using-anchor-links-in-word-press\">Tips on Using Anchor Links in WordPress<\/a><\/li><li ><a href=\"#frequently-asked-questions-faq\">Frequently Asked Questions (FAQ)<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"importance-of-anchor-links-in-word-press\">Importance of Anchor Links in WordPress&nbsp;<\/h2>\n\n\n\n<p>Anchor links, also known as jump links or <strong>named links<\/strong>, are essential elements in any website, including WordPress. Anchor links allow visitors to navigate quickly and easily within long posts or pages, without scrolling continuously. Anchor links provide a better user experience by making it easier for the visitor to find the information that is relevant to their search.<\/p>\n\n\n\n<p>Here are some of the benefits of anchor links in WordPress:<\/p>\n\n\n\n<ol>\n<li><strong>Improved User Experience:<\/strong> Anchor links make navigation easier and quicker for visitors. This way, visitors can find relevant information without having to scroll through long pages or posts.<\/li>\n\n\n\n<li><strong>Enhanced Site Structure<\/strong>: Anchor links divide long articles or pages into smaller sections with meaningful subheadings. This helps improve the site&#8217;s structure and makes it easier for search engines to crawl the site.<\/li>\n\n\n\n<li><strong>Better Accessibility:<\/strong> Anchor links make the content more accessible to people with disabilities or impairments. These individuals may find it challenging to navigate through long pages, and anchor links help them bypass irrelevant content to find the information they need.<\/li>\n\n\n\n<li><strong>Boost SEO:<\/strong> Anchor links use specific keywords that can help improve the SEO of the site. Targeted keywords used in anchor links will help crawlers to understand the content and the site structure better.<\/li>\n<\/ol>\n\n\n\n<p>In conclusion, anchor links are vital components of any WordPress site. They make it simpler for visitors to find relevant information, and they improve the site&#8217;s overall accessibility and structure. By using anchor links, you can provide a better user experience, boost SEO, and ultimately drive traffic to your website.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how\">How to Create Anchor Links in WordPress<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/wordpress-anchor-link-1024x575.png\" alt=\"How to Create Anchor Links in WordPress\" class=\"wp-image-6068\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/wordpress-anchor-link-1024x575.png 1024w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/wordpress-anchor-link-600x337.png 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/wordpress-anchor-link-300x168.png 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/wordpress-anchor-link-768x431.png 768w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/wordpress-anchor-link.png 1073w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<ol>\n<li>In the WordPress Gutenberg Editor, select the text where you want to insert the anchor link. Typically you would use the Heading block. <\/li>\n\n\n\n<li>Click on the <strong>Advanced<\/strong> section of the Heading Block Settings panel on the right. Add your <strong>anchor<\/strong> text (a single word or multiple words separated by hyphens) in the HTML ANCHOR field. <\/li>\n\n\n\n<li>Select your link text and click on the link \ud83d\udd17 icon. Create a link to the anchor. Add \u2018#\u2019 followed by the name of the anchor link you created earlier (e.g., #wordpress) into the URL field. Click on the \u2018Submit\u2019 \u21a9\ufe0f button to create the anchor link.<\/li>\n\n\n\n<li>Repeat the process for any additional anchor links you wish to create. Once you are finished, save your changes and publish your content.&nbsp; Your anchor links are now created and ready for use in your post or page on WordPress.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"387\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/wordpress-anchor-link-add-link.png\" alt=\"Create a link to anchor text\" class=\"wp-image-6069\" style=\"width:411px;height:290px\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/wordpress-anchor-link-add-link.png 548w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/wordpress-anchor-link-add-link-300x212.png 300w\" sizes=\"(max-width: 548px) 100vw, 548px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"smooth-scrolling-anchor-links\">Smooth Scrolling Anchor Links<\/h2>\n\n\n\n<p>Anchor links typically jump the user to the heading instead of scrolling smoothly. This can be a jarring experience. You will notice that the jump links on this page scroll smoothly.<\/p>\n\n\n\n<p>To enable smooth scroll, simply copy-paste the following CSS code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html { scroll-behavior: smooth; }<\/code><\/pre>\n\n\n\n<p>To add the above CSS code, from the WordPress menu, select Appearance &gt; Customise &gt; Additional CSS.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"314\" height=\"225\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/css-smooth-scroll.jpg\" alt=\"Additional CSS plugin showing smooth scroll css\" class=\"wp-image-4617\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/css-smooth-scroll.jpg 314w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/css-smooth-scroll-300x215.jpg 300w\" sizes=\"(max-width: 314px) 100vw, 314px\" \/><\/figure><\/div>\n\n\n<p><br>You can also add CSS using a plugin like&nbsp;<a href=\"https:\/\/wordpress.org\/plugins\/simple-css\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Simple CSS<\/a>.<\/p>\n\n\n<div class=\"gb-container gb-container-cf6bcc4e\"><div class=\"gb-inside-container\">\n<div class=\"gb-container gb-container-edcb0ef6\"><div class=\"gb-inside-container\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-3edd8bb9\">\n<div class=\"gb-grid-column gb-grid-column-c05004f3\"><div class=\"gb-container gb-container-c05004f3\"><div class=\"gb-inside-container\">\n\n<figure class=\"gb-block-image gb-block-image-60421504\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\" class=\"gb-image gb-image-60421504\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2019\/10\/vj-gravatar.jpeg\" alt=\"VJ - Vijay Rudraraju\" title=\"VJ - Vijay Rudraraju\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2019\/10\/vj-gravatar.jpeg 400w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2019\/10\/vj-gravatar-300x300.jpeg 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2019\/10\/vj-gravatar-150x150.jpeg 150w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n<\/div><\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-ff2e7aaa\"><div class=\"gb-container gb-container-ff2e7aaa\"><div class=\"gb-inside-container\">\n\n<p class=\"gb-headline gb-headline-a731b706 gb-headline-text\"><strong>Improve your online presence<\/strong><\/p>\n\n\n\n<p class=\"gb-headline gb-headline-0bb11d86 gb-headline-text\">Hi! My name is VJ &#8211; I am web design and SEO consultant with over 12 years experience. I am obsessed with SEO, web design, WordPress, productivity hacks and page speed optimisation. <\/p>\n\n\n\n<p class=\"gb-headline gb-headline-d0a1e102 gb-headline-text\">Do you need help improving your existing WordPress site?<\/p>\n\n\n\n<a class=\"gb-button gb-button-adc4b92c\" href=\"https:\/\/vjdesign.com.au\/contact\/\"><span class=\"gb-icon\"><svg aria-hidden=\"true\" role=\"img\" height=\"1em\" width=\"1em\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill=\"currentColor\" d=\"M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z\"><\/path><\/svg><\/span><span class=\"gb-button-text\">Hire Me<\/span><\/a>\n\n<\/div><\/div><\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use-anchor-links-in-word-press\">How to Use Anchor Links in WordPress<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navigation-within-a-page\">Navigation within a Page<\/h3>\n\n\n\n<p>Follow the steps highlighted above: <a href=\"#how\">How to Create Anchor Links in WordPress<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navigation-between-pages\">Navigation between Pages<\/h3>\n\n\n\n<p>You can use the same technique to link to a particular heading or section on another page (or even another site).<\/p>\n\n\n\n<ol>\n<li>Decide on the section or heading on a page you want to link to. In the WordPress Gutenberg Editor, select the text where you want to insert the anchor link. Typically you would use the <strong>Heading<\/strong> block (or a <strong>Container<\/strong> block). <\/li>\n\n\n\n<li>Click on the <strong>Advanced<\/strong> section of the Block Settings panel on the right. Add your <strong>anchor<\/strong> text (a single word or multiple words separated by hyphens) in the HTML ANCHOR field. <\/li>\n\n\n\n<li>On the page where you want to create a link,  select your link text and click on the link \ud83d\udd17 icon. Create a link to the anchor on that page. Add a link to the page\/post, then a \u2018#\u2019 followed by the name of the anchor link you created earlier (e.g., #rankmath) into the URL field. Click on the \u2018Submit\u2019 \u21a9\ufe0f button to create the anchor link.  <code>https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/<mark>#rankmath<\/mark><\/code><br>For example, <a href=\"https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/#rankmath\" target=\"_blank\" rel=\"noreferrer noopener\">this link will take you to the &#8216;Rank Math&#8217; section<\/a> of my How to create a Table Of Contents in WordPress&nbsp;post.<\/li>\n\n\n\n<li>Save and publish your page.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"improving-user-experience\">Improving User Experience<\/h3>\n\n\n\n<ol>\n<li>Use descriptive anchor link names that accurately reflect the content they link to.<\/li>\n\n\n\n<li>Place anchor links strategically in the content to guide users to important sections or information. For example, include a <a href=\"https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/\" data-type=\"post\" data-id=\"4601\">Table Of Contents (TOC)<\/a> on a long page or post.<\/li>\n\n\n\n<li>Make sure the links are visible and easy to use, either with contrasting colours or underlined text.<\/li>\n\n\n\n<li>Consider using sticky or fixed navigation menus with anchor links to improve website navigation and user experience. For example, you can implement a site-wide <strong>Back to top<\/strong> menu to help users to navigate back to the top of the website.<\/li>\n\n\n\n<li>Use <a href=\"#smooth-scrolling-anchor-links\">smooth scrolling anchor links<\/a> to prevent a jarring experience.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tips-on-using-anchor-links-in-word-press\">Tips on Using Anchor Links in WordPress<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"keep-anchor-links-short-and-sweet\">Keep Anchor Links Short and Sweet<\/h3>\n\n\n\n<p>It&#8217;s important to keep your anchor links short and simple so that they are easy for users to remember and type in. Ideally, they should be just a few words or even a single word.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use-descriptive-texts-for-anchor-links\">Use Descriptive Texts for Anchor Links<\/h3>\n\n\n\n<p>When creating anchor links, it is important to use descriptive texts that accurately describe the content that users will find when clicking on the link. For example, instead of using &#8220;click here,&#8221; use specific words that describe what the link is about, such as &#8220;Read more about our services.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"avoid-overloading-pages-with-anchor-links\">Avoid Overloading Pages with Anchor Links<\/h3>\n\n\n\n<p>While anchor links can help navigate long pages, it&#8217;s important not to overload your pages with too many links. This can make your content look cluttered and confusing. Try to limit the number of anchor links on a page and only use them when necessary.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frequently-asked-questions-faq\">Frequently Asked Questions (FAQ)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-an-anchor-link-in-word-press\">What is an anchor link in WordPress?<\/h3>\n\n\n\n<p>An anchor link in WordPress is a hyperlink that directs the user to a specific section on the same page. It is a type of internal link that is used to navigate a website more efficiently. Anchor links are created by adding a unique identifier, or anchor, to a specific heading or section on a page. When a user clicks on the anchor link, the page will automatically scroll to the corresponding section. Anchor links are often used in long-form content to help readers quickly find the information they are looking for.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"can-you-use-anchor-links-in-word-press\">Can you use anchor links in WordPress?<\/h3>\n\n\n\n<p>Yes, you can use anchor links in WordPress. Anchor links are used to link to a specific section within a web page. To create an anchor link in WordPress, you need to first add the anchor tag to the section of the page you want to link to, and then create a link to that anchor. You can create an anchor link by using the HTML anchor tag, or by using a plugin, such as the Easy Smooth Scroll Links plugin or the Table of Contents Plus plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"can-you-create-anchor-links-in-word-press-classic-editor\">Can you create Anchor Links in WordPress Classic Editor?<\/h3>\n\n\n\n<p>Yes, you can create anchor links in WordPress Classic Editor. While the default WordPress Editor (Gutenberg) makes it easy, you will need to delve into the code view to add anchor text in the old classic editor.<\/p>\n\n\n\n<p>This 3-minute video show you how to add anchor links in WordPress Classic Editor.<\/p>\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube\"><div class=\"lyte-wrapper\" style=\"width:1280px;max-width:100%;margin:5px auto;\"><div class=\"lyMe hidef\" id=\"WYL_vmwcWMdg3mg\"><div id=\"lyte_vmwcWMdg3mg\" data-src=\"https:\/\/vjdesign.com.au\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=%2F%2Fi.ytimg.com%2Fvi%2FvmwcWMdg3mg%2Fmaxresdefault.jpg\" class=\"pL\"><div class=\"tC\"><div class=\"tT\"><\/div><\/div><div class=\"play\"><\/div><div class=\"ctrl\"><div class=\"Lctrl\"><\/div><div class=\"Rctrl\"><\/div><\/div><\/div><noscript><a href=\"https:\/\/youtu.be\/vmwcWMdg3mg\" rel=\"nofollow noopener\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vjdesign.com.au\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FvmwcWMdg3mg%2F0.jpg\" alt=\"-\" width=\"1280\" height=\"700\"><br \/>Watch this video on YouTube<\/a><\/noscript><\/div><\/div><div class=\"lL\" style=\"max-width:100%;width:1280px;margin:5px auto;\"><\/div><figcaption>How to add a table of contents in WordPress Classic Editor (3 mins) shows you how you can add anchor text.<\/figcaption><\/figure>\n\n\n<p>To add a link to an anchor in WordPress Classic editor, follow these steps:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"714\" height=\"282\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/anchor-links-wordpress-classic-editor.jpg\" alt=\"How do I link an anchor tag in WordPress Classic editor?\" class=\"wp-image-6075\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/anchor-links-wordpress-classic-editor.jpg 714w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/anchor-links-wordpress-classic-editor-600x237.jpg 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/anchor-links-wordpress-classic-editor-300x118.jpg 300w\" sizes=\"(max-width: 714px) 100vw, 714px\" \/><\/figure><\/div>\n\n\n<ol>\n<li>Open the post or page where you want to add the link. In the Classic editor, select on the text where you want to add the link and click on the \u2018insert\/edit link\u2019 \ud83d\udd17 button in the editor toolbar.<\/li>\n\n\n\n<li>In the pop-up window, enter a # and the name of the anchor. For example, if your anchor name is \u2018WordPress Classic Editor\u2019, your URL should be <code>#wordpress-classic-editor<\/code>.&nbsp;Click the \u2018apply\u2019 button to save the link.<\/li>\n\n\n\n<li>Make sure that you have the correct name for the anchor, and that there are no typos in the URL. You will need in the next step.<\/li>\n\n\n\n<li>Click on the Toggle and choose the CODE view. Find the heading in the code and add the anchor text as an id as illustrated in code below.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>...\n&lt;p&gt;I don't use the &lt;a href=\"<mark style=\"background-color:#BEEFFF\" class=\"has-inline-color\">#wordpress-classic-editor<\/mark>\"&gt;WordPress Classic Editor&lt;\/p&gt;\n...\n&lt;h2<mark style=\"background-color:#BEEFFF\" class=\"has-inline-color\"> id=\"wordpress-classic-editor\"<\/mark>&gt;WordPress Classic Editor&lt;\/h2&gt;\n...<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"why-create-word-press-anchor-links\">Why create WordPress anchor links?<\/h3>\n\n\n\n<ol>\n<li>Navigation: Anchor links make it easier for users to navigate through lengthy pages of content. For example, if your page consists of multiple sections, anchor links can help users jump straight to the section they want instead of scrolling through the entire page.<\/li>\n\n\n\n<li>Improves User Experience: Anchor links help improve user experience by allowing users to find the information they are looking for quickly and easily. This can reduce user frustration and increase engagement.<\/li>\n\n\n\n<li>Better SEO: Anchor links can also help improve the SEO of your website as they provide context to search engines on the content of your page. This can help increase your website\u2019s visibility and ranking on search engines.<\/li>\n\n\n\n<li>Easy to implement: Creating anchor links on WordPress is relatively easy and can be done using the default block editor or a plugin like Yoast SEO.<\/li>\n\n\n\n<li>Enhances Accessibility: Anchor links improve accessibility for users with disabilities as they can jump to specific sections of the page using assistive technology like screen readers.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"can-i-use-anchor-links-to-create-a-table-of-contents-toc\">Can I use anchor links to create a Table Of Contents (TOC)?<\/h3>\n\n\n\n<p>Yes, you can use anchor links to create a Table of Contents (TOC) in your web page or document. The TOC will include links that jump directly to the corresponding section on the page. This is a useful way to highlight the main sections and subheadings of your content and make it easier for readers to navigate through it. To create an anchor link, you must first assign an ID to the section you want to link to, and then create a hyperlink with the same ID. When the user clicks on the hyperlink, the browser will automatically scroll to the section with the matching ID.&nbsp;Read more about <a href=\"https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/#manual\">How to Create a Table of Contents Manually<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"want-to-simply-add-anchor-links-on-all-of-your-headers-automatically\">Want to simply add anchor links on all of your headers automatically?<\/h3>\n\n\n\n<p>Most readers scan content rather than reading it in full. A Table Of Contents (TOC) helps your readers jump to different sections of a long page\/post. Label each section of your content with a heading, and provide jump links to these headings. Creating a table of contents in WordPress is easy; let me show you how you can add a TOC using the Rank Math plugin (without any code). The plugin automatically picks up all the headings on your page creates a full table of contents in a click. You can decide to hide a specific type of heading such as h3 and h4. <\/p>\n\n\n\n<p>I used Rank Math to add a table of contents for this page. Read more about <a href=\"https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/#rankmath\">How to Create a Table of Contents Using Rank Math SEO Plugin<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-create-back-to-top-anchor-links\">How to create back to top anchor links?<\/h3>\n\n\n\n<p>To create a&nbsp;<strong>back to top<\/strong>&nbsp;anchor link, follow the steps below:&nbsp;<\/p>\n\n\n\n<ol>\n<li>Add an ID tag to the section you want to link to by using the&nbsp;<strong>&#8216;id&#8217;<\/strong>&nbsp;attribute. In most themes (like GeneraPress), you will find that the main content has an id of &#8216;primary&#8217;.&nbsp;<\/li>\n\n\n\n<li>Add a link to the top of your page. In the Search or type URL enter the link in the format #ID, for example #primary &nbsp;<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-do-i-add-an-anchor-link-from-a-button-to-a-heading-on-the-same-page\">How do I&nbsp;add an&nbsp;Anchor&nbsp;link&nbsp;from a button to a heading on the same&nbsp;page?<\/h3>\n\n\n\n<p>Creating an anchor link from a button is exactly the same as creating text anchor links. See <a href=\"#how\">How to Create Anchor Links in WordPress<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"336\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/button-to-header-anchor.png\" alt=\"Add an\u00a0Anchor\u00a0link\u00a0from a button to a heading\" class=\"wp-image-6077\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/button-to-header-anchor.png 794w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/button-to-header-anchor-600x254.png 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/button-to-header-anchor-300x127.png 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/button-to-header-anchor-768x325.png 768w\" sizes=\"(max-width: 794px) 100vw, 794px\" \/><figcaption class=\"wp-element-caption\">Add an&nbsp;Anchor&nbsp;link&nbsp;from a button to a heading in format #ID<\/figcaption><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"how-do-i-add-an-anchor-link-to-an-image-on-the-same-page\">How do I&nbsp;add an&nbsp;Anchor&nbsp;link&nbsp;to an image on the same&nbsp;page?<\/h3>\n\n\n\n<p>Creating an anchor link to an image in WordPress is exactly the same as creating text anchor links to headings. See <a href=\"#how\">How to Create Anchor Links in WordPress<\/a>.<\/p>\n\n\n\n<p>You can add a HTML ANCHOR text from the Advanced section of the the Image Block settings as illustrated below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"939\" height=\"337\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-image-anchor.png\" alt=\"Anchor\u00a0link\u00a0to an image\" class=\"wp-image-6078\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-image-anchor.png 939w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-image-anchor-600x215.png 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-image-anchor-300x108.png 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-image-anchor-768x276.png 768w\" sizes=\"(max-width: 939px) 100vw, 939px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-do-i-add-an-anchor-link-to-an-video-on-the-same-page\"><strong>How do I&nbsp;add an&nbsp;Anchor&nbsp;link&nbsp;to an video on the same&nbsp;page?<\/strong><\/h3>\n\n\n\n<p>Yes, you can add an anchor to a Video Block via the HTML ANCHOR in Advanced block settings pane.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1005\" height=\"318\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-anchor.jpg\" alt=\"-\" class=\"wp-image-6080\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-anchor.jpg 1005w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-anchor-600x190.jpg 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-anchor-300x95.jpg 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-anchor-768x243.jpg 768w\" sizes=\"(max-width: 1005px) 100vw, 1005px\" \/><\/figure>\n\n\n\n<p><strong>How do I&nbsp;add an&nbsp;Anchor&nbsp;link&nbsp;to a YouTube video embed on the same&nbsp;page?<\/strong><\/p>\n\n\n\n<p>As illustrated below, there is no option to add an anchor link to a YouTube embed. <\/p>\n\n\n\n<p>Create an anchor link to the nearest Heading. See <a href=\"#how\">How to Create Anchor Links in WordPress<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"918\" height=\"354\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-embed-anchor.jpg\" alt=\"-\" class=\"wp-image-6079\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-embed-anchor.jpg 918w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-embed-anchor-600x231.jpg 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-embed-anchor-300x116.jpg 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/link-to-video-embed-anchor-768x296.jpg 768w\" sizes=\"(max-width: 918px) 100vw, 918px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>Anchor links can make it easier for users to navigate through long pages of content on your WordPress website. They also improve the user experience and help with search engine optimization (SEO) by creating a hierarchy of information for search engines to crawl. Additionally, anchor links can be used to direct users to specific sections of your web page, allowing them to quickly find what they are looking for.<\/p>\n\n\n\n<p>Don&#8217;t miss out on the benefits of anchor links for your WordPress site! Start implementing them to make your content more accessible and improve your website&#8217;s SEO. Use descriptive anchor text and place links strategically throughout your page. Your users and search engines will thank you!&nbsp;<\/p>\n\n\n<div class=\"gb-container gb-container-f08edfd9\">\n\n<p class=\"gb-headline gb-headline-bf946811 gb-headline-text\">You might also like these Posts<\/p>\n\n\n<div class=\"gb-container gb-container-4d1e4778\">\n\n<ul>\n<li><a href=\"https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/\">How to create a Table Of Contents (TOC) in WordPress with\/without plugin<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/vjdesign.com.au\/how-to-write-seo-optimised-post\/\" data-type=\"post\" data-id=\"4674\">How to Write a Page or Post That Gets Lots of Traffic in 2022<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/vjdesign.com.au\/seo-silos-rank-keywords\/\" data-type=\"post\" data-id=\"3827\">SEO Content Silos to Rank Competitive Keywords &amp; Improve Site Usability<\/a><\/li>\n<\/ul>\n\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-314e3565\"><div class=\"gb-inside-container\">\n<div class=\"gb-container gb-container-2e94c800\"><div class=\"gb-inside-container\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-5e114053\">\n<div class=\"gb-grid-column gb-grid-column-36c4a28d\"><div class=\"gb-container gb-container-36c4a28d\"><div class=\"gb-inside-container\">\n\n<figure class=\"gb-block-image gb-block-image-04f3f8ff\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\" class=\"gb-image gb-image-04f3f8ff\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2019\/10\/vj-gravatar.jpeg\" alt=\"VJ - Vijay Rudraraju\" title=\"VJ - Vijay Rudraraju\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2019\/10\/vj-gravatar.jpeg 400w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2019\/10\/vj-gravatar-300x300.jpeg 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2019\/10\/vj-gravatar-150x150.jpeg 150w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n<\/div><\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-f91f0249\"><div class=\"gb-container gb-container-f91f0249\"><div class=\"gb-inside-container\">\n\n<p class=\"gb-headline gb-headline-b29faae3 gb-headline-text\"><strong>Improve your online presence<\/strong><\/p>\n\n\n\n<p class=\"gb-headline gb-headline-8022b420 gb-headline-text\">Hi! My name is VJ, a web design and SEO consultant with over 12 years experience. I am obsessed with SEO, web design, WordPress, productivity hacks and page speed optimisation. <\/p>\n\n\n\n<p class=\"gb-headline gb-headline-235a9038 gb-headline-text\">Do you need help improving your existing WordPress site?<\/p>\n\n\n\n<a class=\"gb-button gb-button-b0bcb2e9\" href=\"https:\/\/vjdesign.com.au\/contact\/\"><span class=\"gb-icon\"><svg aria-hidden=\"true\" role=\"img\" height=\"1em\" width=\"1em\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill=\"currentColor\" d=\"M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z\"><\/path><\/svg><\/span><span class=\"gb-button-text\">Hire Me<\/span><\/a>\n\n<\/div><\/div><\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>WordPress Anchor Links Unleash the Power of WordPress Anchor Links \ud83d\udd17 &#8211; Ultimate Guide Clicking through lengthy pages can be annoying. Learn how to create smooth scrolling anchor links in WordPress for an improved browsing experience. WordPress is one of &#8230; <a title=\"WordPress Anchor Links\" class=\"read-more\" href=\"https:\/\/vjdesign.com.au\/wordpress-anchor-links\/\" aria-label=\"Read more about WordPress Anchor Links\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":6064,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"folder":[],"acf":[],"_links":{"self":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/pages\/6054"}],"collection":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/comments?post=6054"}],"version-history":[{"count":52,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/pages\/6054\/revisions"}],"predecessor-version":[{"id":6413,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/pages\/6054\/revisions\/6413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/media\/6064"}],"wp:attachment":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/media?parent=6054"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/folder?post=6054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}