http://Creative%20Coco'Nuts
  • Home
  • About us
  • Portfolio
  • Services
    • Branding & Identity
    • Web Design
    • Print Design
    • Digital Marketing
    • Virtual Tours
    • Illustrations
    • Signage
  • Testimonials
  • Blog
  • Contact
  • Start a project

How to Create Anchor Links in WordPress

July 25, 2022

Now that your site is up and running, there might still be a few minor tweaks you need to make.

One of those tweaks are anchor links.

What are anchor links?

Anchor links are often table of contents sections that appear at the top of your page. When users click on an anchor link, it takes them to a specific part of your webpage, which makes it very easy to quickly find they information they’re looking for.

Anchor links also help with SEO for your website. It makes information easy to find — for both Google and your users. Great, right?

Often, anchor links are used for long posts or longer articles on a website. It means that readers don’t have to skim an entire page to find what they’re looking for and makes for much easier navigation.

This improves the user experience of your customers and makes them more likely to check out other pages on your site.

Why are anchor links important?

Anchor links capture the attention of your users, who do not have the time or patience to spend hours combing your site for the information they need.

Anchor links can also be used to create bookmark links to specific sections on your WordPress site. You can include these links in social media posts, newsletters, and email marketing campaigns so that when users click on the link, they are taken directly to the part of the post that you want them to see.

How to create an anchor link

Creating an anchor link isn’t as daunting as you might think.

There are two easy steps to follow.

Step #1: Create your anchor link

Select and highlight the text that you want to link (usually a title or heading). This is the text that appears at the beginning of an article, not the actual section of your webpage that has this information.

Then, click the insert link button when the WordPress taskbar pops up.

blank

At this point, you would normally insert a URL to a different page. But to create your own anchor link type in # and then type in the name of the title or heading you want to create an anchor link for.

For example, if you want to create an anchor link for a section entitled “Fluffiest Dogs in Edmonton” type #fluffiest-dogs-in-edmonton into the link function.

Make sure to hyphenate the words in your anchor link, and you can capitalize them to make it easier to read. Don’t create an anchor link where the heading is very long or very complex.

Step #2: Add a link to the section of text

Now, scroll down your webpage to the section that you want users to be able to navigate to through the anchor link. This is usually a heading for that section.

Click on the block of text with the desired heading. Navigate to the block settings and click on the Advanced settings tab.

Under the HTML anchor section, input the same text that you used as an anchor link for the above heading. For example, the “Fluffiest Dogs in Edmonton” section would be inputted as “fluffiest-dogs-in-edmonton” under the HTML anchor section. No “#” should be inputted.

And that’s it! When you save your site, you can preview your brand new anchor link before making it public.

How do you link to a specific paragraph of text and not a heading?

Easy! Select the block you want to link and click on the three dot function in the toolbar. Then press edit as HTML.

blank

Then select find the HTML tag for the paragraph you want to link to. For a paragraph, select <p>. For a table, select <table>.

Next, add in your anchor as the ID attribute to the tag.

It would look something like this: 1 | <p id=“fluffiest-dogs-in-edmonton”>

Then you will see a message that says the block contains unexpected or invalid content. Press the “convert to HTML” button to fix this.

Then you’re good to go.

Anchor links in Classic Editor

If you’re still using Classic Editor, the older version of WordPress, for your site, here’s how you add in anchor links there.

Step #1: Create your anchor link

Select the text you’d like to become an anchor link and click the “insert link” button. Type in your anchor link with a # sign in front and hyphenated words.

Step #2: Add a link to the section of text

Switch to the “text” mode in classic editor and scroll down to the section you want to link to.

Find the HTML tag you want to link tom whether that’s <h2>, <h3>, or <p>.

Add in your anchor link without the “#”. For example: 1| <h3 id=”fluffiest-dogs-in-edmonton”>

And you’re good to go! Remember to save your changes.

Now you’re ready to add anchor links to your WordPress site. If you have more questions, feel free to contact our web designers at Creative Coco’Nuts!

See also:

Creative Coco’Nuts Services – Web Design & Development

Creative Coco’Nuts Services – Digital Marketing

Steps ans Stages of Building a Website

What Creative Coco’Nuts can do for you : Web Design & Development

Visit our online portfolio today or contact us.

The expert designers of the Coco’Nuts’ studio are here to help!


Contact us by email at info@creativecoconuts.ca

Talk to you soon!

SOFTWARE WE LOVE

Adobe Creative Cloud*– For Graphic Design & Photo Editing

 

WEBSITE HOSTING COMPANIES WE LOVE

Host Armada – For Cloud and Dedicated Server Hosting

HostArmada - Affordable Cloud SSD Web Hostingblank

Printed MasksCustom Wordpress WebsiteGraphic DesignPrint and AdvertisingColoursNewslettersPackage Designlogo artistLogo DesignEdmonton Website DesignWeb Design EdmontonCustom Printed Maskslogo design edmontonVirtual TourGoogle AnalyticsWeb DesignIllustrationsWordpress WebsiteLogoPromotionRebrandingNewsletterEdmonton Graphic Design CompaniesGraphic Design EdmontonVirtual Tours EdmontonPromotional ItemBrand Strategy DevelopmentWordpressWebsite Development EdmontonDesign Marketing EdmontonSEO3D TourCOVID-19 SignageBrand IdentityGoogle Analytics TrackingVideo MarketingBrandingCustomized Printed MasksSearch Engine OptimizationCustom LogoLogo designerFonts360 virtual tourSignagePackaging

Search

Recent Posts

  • How Strategic Branding Boosts Your SEO and Builds Long-Term Business Growth
  • Why Your Brand Deserves Professional Design: The Value of Expert Branding in Edmonton
  • Why Hiring a Professional Web Designer in Edmonton Is Essential for Your Business
  • Why UX Design Matters
  • Case Study: Casablanca Sandy Lane Barbados

Categories

  • Branding
  • Web Development
  • Print and Advertising
  • Digital Marketing
  • Signage
  • Copywriting
  • FAQ
  • Illustrations
blank

If you're ready to discover the possibilities then, naturally, we'd love to hear from you!

Simply Complete the contact from below and we will respond to your request within a few business days.

Contact Form - Footer
blank
logo

© Creative Coco'Nuts.

All Rights reserved 2025

See just how passionate we are about our work.

(780) 909-5091

info@creativecoconuts.ca

Edmonton Alberta, Canada
Calgary Alberta, Canada

Join the conversation

© Creative Coco'Nuts.

All Rights reserved 2025