–Top Resources–
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
–Related Videos–
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
In today's video I'm going to show you How to add anchor links to your WordPress website quickly easily and for Free if you don't know what anchor links Are let me explain anchor links are Specific kind of links that when you Click on the link it takes you to a Different position in the same blog post Instead of linking out to another blog Post or an external website these are Special links so you have to understand How to create them on your website and I'm going to be covering three different Ways to create anchor links on your Website for different scenarios Depending on how your website is set up So make sure to watch the video till the End otherwise you might miss out on a Really cool method that you might not Know existed alright let's get to a site And I'll show you how to add anchor Links to your site so let's start with The absolute Basics you can see on my Screen right here that I've created a Simple blog post for demonstration we Are using the block editor in this case And not using any external plugins or Third-party plugins to create the anchor Links we'll be doing everything Ourselves manually so the page structure Is very simple this is the title of the Post this is just a paragraph that I've Added I've added a spacer block just to Give it some space so I can actually
Show you the process or how should Demonstrate the actual anchor working And I've just added two blocks here one Is a paragraph block which is simple and Another is a heading block now what you Need to do to understand or to start Creating anchor links is to First figure Out where you want to reach right that's Going a backward route you have to Figure out where we want to reach when We create a link so let's say for Example that this is the place that you Want to reach whence this link is Clicked so what I'm going to do right Here is click on this block which is the Parent of block which will bring bring Up the block settings right here and Notice the advanced block can you see it Right here click and open this and this Will show you this option which is Called the HTML and anchor this is what We'll be using to create the anchor link And also just to clarify if you choose The heading block and go to the block Settings and once again in the advanced Settings you see the HTML anchor block Here as well so regardless if you're Using this on a heading or a paragraph The process is actually the same and That's why I added both of these Elements or both of these blocks just to Do this demonstration so what I'm going To do is go back to the paragraph block Go to the block Advance Tab and what I'm
Going to do is type an anchor right here Which I'm going to use in this link to Reference this link to this position so What does the anchor need to be what I'm Going to enter right here well there are No rules so you can enter anything you Like but I would reference or I would Say anything that is descriptive of the Heading or the position you're reaching Is usually easy to understand and Remember at a later date so for example I'm just doing this demonstration right Now so I'll just type in bring me here And notice that I have just typed in the Uh words right here you are separated by Hyphen so bring me here and what I'm Going to do is now copy this right so I've added the anchor to this uh Specific paragraph block right now let's Go to the actual link where I want to Anchor to be placed so I'll go right Here I'll select the entire link or Entire assay paragraph because that's Where I want the link to be instead of a Specific word I want the entire line to Be a link so I'll click the link option Right here and I'll type in Very important I'll start with the hash Key or the pound key And just paste the entire anchor that I Created just a second ago paste it right Here Bring me here I'll just zoom it on the Screen so that you can see it completely
Just press enter And we are done I'll just update the Blog post And I'll also open it up in a new tab And then let's see a demonstration of How it works So this is the post let's check it out First let me just scroll on the post and Show you where the elements are so this Is the title this is the actual anchor Link spacer and this is a paragraph Where we should reach once the anchor Link is actually clicked so let's go Here and I'll click this And instantly we see we reach right here So the anchor link is now working and if We wanted to change the anchor from the Paragraph to The Heading all we have to Do is come right here Right here just cut this Go to The Heading HTML anchor Update the post once again Go to the demonstration page or the Preview page let's refresh I just update The URL for a second And once again I'll click and now you'll Notice that we'll reach the heading Instead of paragraph so I'll click this And now we reach the heading not the Paragraph which is just above so the Idea here was that it's very simple too And even if you want to change it as a Future date all you have to do is delete
The anchor that you created or delete The anchor associated with a specific Block and just add it to another block That supports it or even if you want to Change the link then it's very simple Just change the hyperlink delete the Hyperlink from here and use the same Methodology just hash and then add the Actual anchor that you added to any Other element and whenever the link is Clicked it will take you to the actual Position where you marked it all right So this was the simplest way to add Anchor links to your WordPress website Now let me show you how to do this with A couple of plugins which might be much Faster and easier and I'd say more Manageable all right let's go So let me now demonstrate how to add Anchor links to your WordPress website With the help of some plugins so I have This post setup right now anchor with Toc so yes we'll be using some table of Contents to automatically create uh Links or anchor links to the most Important headings to our site and this Is a much easier process and most of the Time you will be linking to the headings Itself not a specific section on the Site so it's much easier to manage and I Say a lot of times this can be automated As well and I've selected two plugins That we can do this with one is an SEO Plugin called All in One SEO but it also
Includes a feature for a table of Contents block so it's much easier and Since you'll be using an SEO plugin Anyway if you haven't used any any SEO Plugin or you're still looking for an SEO plugin why not just try all in one SEO it has this wonderful feature as Well but let's say you already are using An SEO plugin you don't want to change So you can use this plugin which is Called easy table of contents so I'll Demonstrate both the methods I'll Demonstrate how the table of contents is Created using all of an SEO and easy Table of contents and of course the Links to both these plugins will be down In the description and and once you've Added that I'll also show you or once We've added those links or added the Table of contents I'll also show you What are the customization options that You get when you add a table of contents Using both of these plugins all right Let's get to the post right here and Let's say for example I want to add the Table of contents which contain anchor Links right here after this section the First paragraph so I'll just type in Enter and to add a table of contents With all in one SEO which is what we are Using right now we'll just type in Forward slash a i o s e o and all the Blocks that all in one SEO has will come Up right here and of course we want to
Use the table of contents block first so I'll click on this I'll take a second For the table of contents block to load All the headings there are and as you Can see it's already uh showing all me All the headings and the neat part about This it automatically detected that this This heading and this heading is H3 but This heading is actually H4 And that's why it's showing it in this Chronological order with some Indentation and this is a great way to Understand that this all this process Can be automated now if you want to Customize this then you have all the Options let's click on the Block right Here and you can see all these beautiful Options let me explain what you can do So first of all what you can do is first Change the anchor if you want to right Now the anchor is this if you want to Change it for some reason you have the Ability you can also reorder them so This is a powerful functionality let's Say you're changing or you have the Content written down in a certain way But there's a strong reason why you want To reorder this these links then you Have the ability right here also you can Also disable some of these anchors right Here so let's say for example you you Are using a lot of h5s on your website Then you want to disable some of those Links not all of them just click the eye
Icon right here and the associated Anchor or the heading will be disabled Automatically it's pretty awesome right So let's just leave it at that and what I'll do is update the post and I'll Preview it in a new tab just to show you How it works let's go right here And as you can see the headings are Automatically inserted right here so if I click the heading one I'll go to Heading 1 I'll click heading 2 I'll Reach heading to if I click heading 3 I'll reach heading 3. now let me also Demonstrate how you would hide it so I'll just click right here let's say I Want to disable heading 2 for some Reason I just do this I'll update the Post it's updated let's refresh this Page right here Let's go back to the top and now you see Heading 1 and heading 3 heading 2 has Been disabled or hidden this is a Powerful feature so all this is possible Right inside all in one SEO it's very Simple and most of the time you'll be Using an SEO plugin anyway so why not Use all of an SEO and you have this Functionality as well but I understand Let's also demonstrate how to do this With easy table of contents so I'll Delete this block right now and what I'll do is you notice that the table of Contents block uh table of contents Plugin is actually already installed I
Disabled the functionality of the plugin On this particular post because I wanted To demonstrate all of an SEO as well so I'll open the settings option right here And first of all I'll disable this Option which is enabled to disable the Functionality of the plugin on this post And there are a bunch of options right Here but what I'll do is I'll just save The post first Open it once again it's already open let Me just refresh it here And instantly feel the table of contents Are actually inserted so you can click This to enable or show them and even Hide them so it's already done if you Just wanted to do that it's already done And you click and it takes you to a Smooth scroll this is the difference There if you wanted to include a smooth Scroll this is a feature that's present Right here let's go back to the options Right here and explain how you can Customize uh the functionality of these Anchors using all the options inside Table of contents so the first option is Obviously you can disable the plugin on A particular post and you can also Disable this on a global scale and most Of these settings right here are Available as global settings as well and You can override them on a post level Which is also cool so using these Heading options so first of all which of
The headings uh you want to uh include Or not include it's a similar Functionality to how I showed you in all In on SEO but you know on all in Visio You can disable individual headings as Well even if it's uh or let's say all The headings are H2 but you want to Disable just one so there's a difference Right here you also have some extra Options if you want to customize the Title of the heading right here you can Do that you also have options to exclude Headings so let's say for some reason You need wildcard access to exclude Certain types of keywords from your Headings then you can use this option Right here so point being very simple if You just want to include table of Contents just couple of anchor links I Already showed you the manual method to Do so and of course if you want to use Table of contents it's very simple to do It right here so in both cases we have Covered the block editor and how to add Anchor links to your website using the Block editor but what about the classic Editor then a lot of people that still Use the classic error right so there Must be a way to add anchor links to the Classic data or using the client a Classic editor well there is so let me Talk about it and demonstrate it right Now all right let's now talk about how To add anchor links to your WordPress
Website when you're using the classic Editor as you can see on the screen Right here simple classic editor post Anchors and classic editor is the title Of the post and this is the anchor link Which I want to create the link to that Means I click this link and I should Reach here so let's one one thing to Clarify that the process or the Principle behind what we're going to do Is exactly this the same on what I Showed you in the block editor on the First step but because the block editor Gives you some controls right here in The blocks this is a little bit or this Might look different but the principle Is actually the same so what we're going To do is switch to the text based editor Right here click this link right here And we'll reach this kind of view which Is the HTML view or the code view Similar to how you see in the block Editor and what we're going to do is Just start from the bottom or start on The bottom where we want to reach and This is the line where we want to reach So I'm going to start modifying this a Little bit now based on what you see Right here this is a paragraph So First Step I'll do is wrap this in paragraph Tags which looks something like this I'll Zoom it up on the screen B and closing tag is this so what this Signifies is that this is a paragraph
Tag and this opens right here and closes Right here it's similar to how you would See a paragraph block so just imagine This being a paragraph block now what I'm going to do is add a little bit of Properties right here so how do you do That just reach this before the closing Of the opening tag and just type this ID Equals Quotes open And we'll type in the exact HTML anchor That we typed in in the HTML block so I'm going to type here Let's Hyphen reach here Brackets I'm going to just copy this Entire segment because it's easier and I'm going to be reusing this anyways I'll copy this so just to clarify what We did we and and or we covered the Paragraph in paragraph tags and we added A property which is called ID so ID Property and the ID is let's reach here That's all we did now let's move to the Anchor now since the anchor is a link It's not going to be wrapped in Paragraph tags it's going to be added or Wrapped in a tags so similar process Instead of P we'll type in a Reach the end A So we've wrapped this in a tags now Let's add the link property to it Similar to how we did in the ID property
Or the paragraph had an ID property the A tag will have a hrf property which is A HTML way of saying link so I'll type In href Equals just Paste it right here and okay once again An important segment reach to the Beginning of this and type in the pound Key or the hash key or the hashtag key If you're a gen Z then ahrefs equals Hashtag or hash pound let's reach here Similar exactly what it looks like this Just the property is different so let me Recap before we go to the actual Demonstration we wrapped the ending Point where we want to reach in Paragraph tags we gave it in specific ID Using the ID property of the phtml tag Then going to the link which we want to Create we wrapped it in a tags and then Give it the href property we added the Same href as the tag right here just Adding the pound key right here all Right let's go back to the visual Segment right here let's go and we let's Update the post Let's wait the post is now updated let's Open it up in a new tab And as you can see this is a post this Looks like a link and this is where we Want to reach will it work let's find Out I'll click and I'll reach right here So that's how you add HTML tags using The classic editor and also the block
Editor and also with third-party plugins I hope I anchored this information right In your brain if not then leave any of Your questions yet you have in the Comments and if you like this video then Leave a like on this video And subscribe To our channel for more easy to follow Easy to understand WordPress tutorials And if you want more on the WordPress Learning Journey just watch the couple Of these videos that I'm going to paste On the screen right here my name is Yuvraj and I'll catch you in the next Video on wbeginner take care stay safe
