Skip to content

Adding Links in WordPress – Step by Step

  • 13 min read
  • by

Introduction

Links are references to a URL. By clicking on a link, we can access the URL’s contents. Links may point to a file or more commonly, to a page on a website. Links are used because they make accessing and navigating websites easy.

In this tutorial, we will be learning different ways to add links to a WordPress site. There are many so if you need to add a link in a specific way, be free to jump to that section.

With that let’s begin.

Adding Links in WordPress Posts or Pages

Links can be placed in WordPress Posts and Pages. The process for doing so is similar. In our example, we will be adding the link to a post.

From the admin dashboard, hover over “Posts”. Click “Add New”.

create new post

It will redirect to the new post’s block editor.

new post

Type the text you will use as a link. This is called an anchor text.

type an anchor text

After doing that, highlight the anchor text and click on the “Link” icon (or alternatively, press CTRL+ K).

click link icon

A small window will appear, prompting for the URL of the link. Type the URL. In this example, we will link to “www.wordpress.org“. Click “Submit” after. (You may want to add more content, so feel free to do that.) When you’ve done all that is needed, publish the site.

insert the link

There’s an button which allows you to toggle whether you want the link to open on a new tab or not when the anchor text is clicked.

Click "Open in new tab" if you want this.

Here’s what the text looks like in a published post.

the link in the published post

That’s it. We now know how to add links to WordPress posts and pages.

Copying and Pasting a URL onto the Anchor Text

We can also add a link in a post or page by copying a URL, highlighting the text that will be used as an anchor text, and clicking paste.

paste a URL

In the example below, we copied the URL of “wordpress.org”. Publish the changes to the site.

publish the changes

Here’s what the page looks like when published.

published post

Adding Links in WordPress Text Widgets

Links can also be added to text widgets.

From the WordPress admin dashboard hover over “Appearance” and click “Widgets”.

Appearance of the widgets

You will be redirected to the “Widgets” page.

"Widgets" page

Under “Available Widgets” look for the “Text” Widget. (Note: the widgets are arranged alphabetically so it should be easy to find). After doing that, assign the text widget to a Widget Area. In the example below, we will assign it to the “Blog Sidebar” Widget area.

search after "text" widget

A small window will appear. This is where we fill in the Text widget’s details. The widget behaves similarly to a post’s or page’s block editor.

The window

Give the widget a title.

name the widget

To place a link, we enter the text in a text area, highlight the text and then we click the “Insert/edit link” icon (alternatively. we could have just pasted the link onto the Anchor text).

Appearance of the menu

Type the URL to be used in the link. In this example, we will use “www.wordpress.org“. Click “Apply” after.

type url, click apply

Click “Save” to apply the changes.

Save the changes

Finally, click “Done”.

click done

Here is what the widget looks like on a post or page.

The look of the widget.

Adding Links in WordPress Navigation Menus

We can also add links in a menu. From the admin dashboard, hover over “Appearance” and click on “Menus”.

Appearance - menu

This will redirect to the “Menus” page. Once there, create a Menu. In our example, we will create a Menu and name it “Links Menu”.

name the menu

After the menu is created, click on the arrow beside the “Custom Links” tab, found under the “Add menu items” section. Fill in the “URL” and “Link Text” field. Click “Add to Menu” when that is done.

add menu items

The link menu item will appear inside the “Menu structure” section.

menu structure with the link menu item

After that, choose a display location. In this example, we will choose the “Top Menu” location. Click “Save Menu” to apply.

Choose a display location

We will add more links to the menu

add more links

Here is what the menu looks like on a page

menu look frontend

Adding Link Buttons in WordPress Posts or Pages

We can also use a button as a link in a post or a page. For our example, we will place it in a post.

From the admin dashboard, hover over “Posts” then click “Add New”. You will be redirected to the post’s block editor. Once there, click on the “Add block” button.

add a block

Search for the “Buttons” block. When you find it, click on its icon.

search for buttons

This will create a button in the block editor. Click on the button then type the text you want embedded on it.

label the button

Click on the “Link” button. Type the URL in the “URL” field. In this example, we will type “www.wordpress.org“. Click “Submit” after. Publish the post to see the changes.

link the button

Here is what the button looks like on a page.

frontend: page with button

Embedding Linked Content in WordPress

Embedded links are also possible in WordPress. They can be embedded in post or pages.

To embedded a link, just paste a link in the post’s or page’s block editor . In our example, we will embed a Twitter tweet.

embedded a link

(Note: if a post cannot be embedded, a message will appear saying so).

Message: Sorry, this content could not be embedded.

This is what the embedded link looks like when published.

Frontend: post with the embedded link

Adding Titles and Nofollow Attributes to WordPress Links

WordPress also allows us to add titles and nofollow attributes to a link.

To do that, create a normal anchor text in the post’s or page’s block editor.

create an anchor text

Highlight the anchor text, then, click “More Options”.

Highlight the anchor text

You will see a menu. Click “Edit as HTML”.

Choose "edit as HTML"

We will see the text, including the anchor text, in its tag form.

text in tag form

We will add the following attributes:

title="Anchor Text Title" rel="nofollow"
Code language: JavaScript (javascript)

to the opening “a” tag as seen in the image below:

opening "a" tag

Publish the site when ready. In the image below, you can see the title attribute we added when hovering over the link.

Frontend: page with the attribute

Adding Affiliate Links in WordPress Posts or Pages

We can also add affiliate links in WordPress. These are links that point to purchasing products in external sites. In this tutorial, we will use the ThirstyAffiliates plugin. Before we can proceed, you need to install and activate the plugin.

Installing the ThirstyAffiliates Plugin

From the admin dashboard, navigate to the “Add Plugins” page and search for “ThirstyAffiliates”.

Search for the "ThirstyAffiliates" plugin

Click on “Install Now” in the plugin’s section.

Install ThirstyAffiliates

Click “Activate” to activate the plugin.

Activate ThirstyAffiliates

A new menu item will appear – “Thirsty Affiliates”.

plugin ThirstyAffiliates in the sidebar

Using the ThirstyAffiliates Plugin

Creating an Affiliate Link

From the admin dashboard, over “ThirstyAffiliates” then click “New Affiliate Link”.

Choose  "New Affiliate Link"

You will be redirected to the “Add Affiliate Link”.

Add Affiliate Link page

Fill in the link title and URL.

Fill in the fields

Configure the link’s settings in the “Link Options” section.

configure settings

Click “Save Link” to save the affiliate link.

save the link

Using an Affiliate Link in a WordPress Post or Page

To use the affiliate link, a post or page needs to be created or edited. On the post’s or page’s block editor, type the anchor text to be used for the affiliate link.

Post with anchor text

Highlight the text and click “More rich text controls”.

Choose  "More rich text controls"

Choose “Affiliate Link”.

click "Affiliate Link"

Type the title of the affiliate link. In this example, the title of the affiliate link is “An Affiliate Link”.

Type the title of the link.

Click “Apply” after.

Click "Apply"

Publish, the page when ready. The image below shows the affiliate link in a published post.

Frontend: Post with the link

Manually Adding an HTML Link in WordPress Posts or Pages

We can also add a link manually using the “a” html tag. To do that, navigate to a post’s or page’s block editor. Once there, click “Add block”.

Add a block

Search for “Custom HTML”. Once found, click on its icon.

Search for "Custom HTML"

We can then write a link by creating an “a” tag. In the example below, we will link to “www.wordpress.org“.

link to your site

This is what the link looks like in a published post.

link at the frontend

Adding Anchor Links in WordPress Posts or Pages

WordPress also allows the addition of anchor links (these are links that point to a specific part of the same page). In this example, we will use a post. To create an anchoring link, use the Custom HTML block in a post’s or page’s block editor.

create a link with "Custom HTML"

Type the anchoring text and enclose it within the opening and closing “a” tags. However, instead of a URL, we will place a string following this template:

#elementID
Code language: CSS (css)

This means that if the element’s id attribute is “header-one” the string we will place in the “a” tag’s “href” attribute is “#header-one”.

In our example, we will anchor the link to an html element with the “an-element” id.

Code with the "an-element"

After creating the anchoring link, we will make an element and give that element an “id” attribute with the value of “an-element”. In our example, the element we created is a header.

create a header

Publish the post or page when ready.

The image below shows the anchor link in a published post.

Frontend: Anchor Link

Adding Social Share Links in WordPress

We can also add Social Share Links. We need to use a plugin to do this. We will use the Shared Counts plugin.

Installing the Shared Counts Plugin

From the admin dashboard, navigate to the “Add Plugins” page. Once there, search for the “Shared Counts” plugin.

Search "Shared Counts" plugin

Install the plugin.

Install "Shared Counts"

Then activate.

Activate "Shared Counts"

Using the Shared Counts Plugin

To add social share buttons, we need to configure the plugin first. Hover over “Settings” and click “Shared Counts”.

Settings "Shared Counts"

This will take you to the “Shared Counts” page. This is where we configure the plugin.

Configure "Shared Counts"

Scroll down to the “Display” section. This is where we configure the plugins display options. In this example, we chose to go with most of the default settings. However, we chose to display the social share links after the post content.

Choose your options

Now when we a view a post, we will see the social share settings after the content.

post with social share buttons

Conclusion

In this tutorial, we learned that there are different ways to add links to WordPress. Now we know them. We can now apply them to real world scenarios. That’s it.

nv-author-image

Kristin Eitel

Leave a Reply

Your email address will not be published.