{"id":24817,"date":"2021-09-02T01:30:14","date_gmt":"2021-09-01T19:30:14","guid":{"rendered":"https:\/\/www.themerally.com\/?p=24817"},"modified":"2022-03-26T08:45:43","modified_gmt":"2022-03-26T08:45:43","slug":"4-easy-methods-to-create-anchor-links-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.themerally.com\/4-easy-methods-to-create-anchor-links-in-wordpress\/","title":{"rendered":"4 Easy Methods to Create Anchor Links in WordPress"},"content":{"rendered":"
Anchor links are not a topic that is much debated, but we have achieved excellent results with them! Today, we\u2019ll discuss deeper about how to create anchor links in WordPress<\/strong> and explore why you might want to start using them. From our experience, anchor links can improve the user experience, make it easier to navigate content a long way, and even give you a slight advantage over Google. Who doesn\u2019t want a free benefit on Google? So, let’s start the discussion:<\/p>\n <\/p>\n Anchor links are links that take you immediately to a specific part of the page. Anchors are usually specified using element A (naming with the name attribute) or other elements (naming with the id attribute).<\/p>\n Just because we do something doesn\u2019t always mean we should.\u00a0Here are some pros and cons to consider when using anchor links on a WordPress<\/a> site.<\/p>\n While we think the pros certainly outweigh the cons, here are some setbacks you might want to consider.<\/p>\n You may also want to consider changing the passage of the anchor connection. By default, anchor links will suddenly jump to an ID lower down the page. This cannot be very pleasant for some. You can change this so that it is a smooth sliding transition. We do this on the ThemeRally blog. You can use a free plugin like\u00a0<\/span>Page scroll to id<\/span><\/a> or add some CSS to your site, for example, scroll-behavior: smooth.\u00a0<\/span><\/p>\n <\/p>\n As with most WordPress tips, here are a few different ways to show how to add anchor links to WordPress. Take a look at these four different simple methods.<\/p>\n The first way to create anchor links in WordPress is to simply manually execute the HTML in each of your posts. Let\u2019s create it so you can see how they work.<\/p>\n Create text for your link and add a hyperlink to it, as you would normally do for any other link. Create an anchor link with HTML.<\/p>\n Instead of linking it to a URL, post, or page, you will assign it an anchor name. URIs that specify\u00a0<\/span>anchors contain a \u201c#\u201d character<\/span><\/strong>\u00a0followed by the anchor name. You can name anything you want, although we usually recommend that they be short and related to the actual name of the head.<\/span><\/p>\n Here is an example of all the anchor links we use in this post:<\/span><\/p>\n Then you need to add the ID to which you want to jump the anchor link to the header. To do this, you need to switch to text view (HTML) in WordPress. In the header, in this case, header H2, add the ID along with the anchor name you selected in step 2. The anchor name and ID attribute must be exactly the same for the connection to work.<\/p>\n Don\u2019t want to be burdened with HTML every time?\u00a0No worries, there are some great free WordPress plugins available that allow you to easily add anchor links and even an index to each post.<\/p>\n One of the easiest ways to add an anchor link is the free TinyMCE Advanced plug-in<\/a>. This plugin basically adds additional features to the editor with quick shortcuts. Since writing this article, the plugin has had more than 2 million active installations with a rating of 4.5 out of 5 stars.<\/p>\n <\/p>\n After installing and activating the plugin, go to the post and create a hyperlink on the anchor text.\u00a0Instead of linking it to a URL, post, or page;\u00a0you will assign it an anchor name with # in front of it.<\/p>\n Highlight the header you want to connect to.\u00a0Then click \u201cInsert\u201d on the button at the top and select \u201cAnchorage\u201d.\u00a0This button appears in the editor due to the TinyMCE Advanced plug-in.<\/p>\n Enter the name of the anchor you gave it in step 1 and click \u201cOK\u201d.\u00a0This plugin saves you time because you never have to leave the view of the visual editor.\u00a0If you do this manually with HTML, you need to switch between the views of the visual editor and the text editor (HTML).<\/p>\n You may want to speed up the process even more. ? If you write a lot of in-depth content and always want to include an index (anchor link lists\/jump menu) in your posts, then take advantage of the index plugin.<\/p>\n One of the best free plugins is Easy Index. This plugin automatically creates anchor links for your heads and allows you to easily insert the index anywhere in the post with a simple shortcode. Since writing this article, the plugin has had more than 30,000 installations with a rating of 4.5 out of 5 stars.<\/p>\n After installing and activating the plug-in, you will probably want to change some settings.\u00a0You can find them in the \u201cSettings \u2192 Index\u201d section.<\/p>\n To insert the index manually, simply insert the shortcode [ez-toc] where you want it to appear in the post. The table of contents is then automatically created for all chapters in the post.\u00a0How great is that?<\/p>\n You can also make several changes in the settings regarding what to display, exclusions, appearance, and so on.\u00a0For example, you may always have a \u201cSummary\u201d heading at the end of your posts.\u00a0You can enter this header in the exclusion list in settings so that it is not included in the index.<\/p>\n Another index plug-in you might want to check out is the Short Code Index.\u00a0It\u2019s a newer plug-in on the market, but it was developed by James Kemp, with whom we were happy to talk.<\/p>\n You May Also Read: How to Add and Use Widgets in WordPress<\/a><\/p>\n Do you want to add anchor links to all of your heads automatically? Then check out the free WP Anchor Header plugin. This will add anchor links to all of your H1-H6 heads.<\/p>\n Add Anchor Links Plugin<\/a>: <\/strong>This is a very basic plugin, and there are no settings. Install it, activate it, and you\u2019re ready to go. Each head will automatically get an anchor name (derived from the head name), and they even get a nifty little anchor icon that appears when you move the mouse pointer over your head. This allows visitors to quickly see a link there that they can copy if they wish.<\/p>\n You can easily create an anchor link in WordPress with Gutenberg by following some steps. Let’s talk about these steps:<\/p>\n Highlight the header in the Gutenberg block and click \u201cAdvanced\u201d on the right.\u00a0You will then see the option to add an HTML anchor.<\/p>\n <\/p>\n To connect to it, simply create a hyperlink on the anchor text.\u00a0Instead of linking it to a URL, post, or page;\u00a0you will assign it an anchor name with # in front of it.<\/p>\n Don\u2019t want to create anchor links with HTML or install a plug-in? Then check out the free Anchor Links Chrome extension. It is fully compatible with standalone WordPress, WordPress.com, and Medium.<\/p>\n Once you\u2019ve installed the Chrome extension, simply highlight the header to which you want to add the anchor link.\u00a0Then click the small Anchor Link Chrome extension icon in the browser toolbar.<\/p>\n Creates an anchor ID in the background (derived from the header name).\u00a0In this case: # Header_1.\u00a0When you click the icon, it automatically copies it to the clipboard.<\/p>\n Then go to the text to which you want to add an anchor link, create a hyperlink as usual, and press \u201cPaste\u201d.<\/p>\n And that\u2019s It! The Chrome extension helps make it quick and easy without relying on any third-party plug-ins.<\/p>\n As you can see, there are many creative ways to add anchor links to WordPress. Some are lighter than others. For example, posting much longer content helps visitors get to the content they want right away.<\/p>\n Do you already use anchor links on your WordPress site? If so, we would love to hear your experiences or thoughts. If you have any difficulties, please join our\u00a0Theme Rally Community<\/a> to ask your questions.<\/p>\n","protected":false},"excerpt":{"rendered":" Anchor links are not a topic that is much debated, but we have achieved excellent results with them! Today, we\u2019ll discuss deeper about how to create anchor links in WordPress and explore why you might want to start using them. From our experience, anchor links can improve the user experience, make it easier to navigate […]<\/p>\n","protected":false},"author":6,"featured_media":24866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"acf":false,"yoast_head":"\nWhat are Anchor Links?<\/strong><\/h2>\n
Advantages and Disadvantages of Anchor Connections<\/strong><\/h2>\n
Advantages<\/strong><\/h3>\n
\n
Disadvantages<\/strong><\/h3>\n
\n
Anchor Connection Passage<\/strong><\/h2>\n
How to Manually Create Anchor Links in WordPress<\/strong><\/h2>\n
Step 1<\/strong><\/h3>\n
Step 2<\/strong><\/h3>\n
\n
Step 3<\/strong><\/h3>\n
How to Create Anchor Links in WordPress with a Plugin<\/strong><\/h2>\n
Add an Anchor Connection to the Plugin<\/strong><\/h2>\n
Step 1- Add an Anchor Name<\/strong><\/h3>\n
Step 2- Add an Anchor<\/strong><\/h3>\n
Step 3- Anchor ID<\/strong><\/h3>\n
Add Content with a Plugin<\/strong><\/h2>\n
Step 1- Simple Index Settings<\/strong><\/h3>\n
\n
Step 2- EZ-TOC Shortcode<\/strong><\/h3>\n
Automatically Add Anchor Links to the Heads with a Plugin<\/strong><\/h2>\n
How to Create Anchor Links in WordPress with Gutenberg<\/strong><\/h2>\n
Step 1- Add an HTML Anchor to the Gutenberg Editor<\/strong><\/h3>\n
Step 2- Add an Anchor Link to Gutenberg<\/strong><\/h3>\n
How to Create Anchor Links in WordPress with the Chrome Extension<\/strong><\/h2>\n
Step 1- Chrome Extension Adds Anchor Link<\/strong><\/h3>\n
Step 2- Add an Anchor Link<\/strong><\/h3>\n
Conclusion<\/strong><\/h2>\n