How To Add Clickable Links in WordPress [Beginners Guide]

Clickable links are the lifeblood of any website. They connect your content to valuable resources, allow visitors to explore different sections of your site, and ultimately enhance the user experience. 

If you’re new to WordPress, adding links might seem like a daunting task, but fear not! This beginner-friendly guide will walk you through the methods on how to add clickable links in WordPress — using the Block Editor.

Why Add Clickable Links in WordPress?

There are several reasons why clickable links are essential for your WordPress website:

💯 Improved User Experience: Links guide your visitors to relevant information, both on your website and on external sources. This helps them find what they’re looking for quickly and efficiently.

💯 Enhanced Credibility: Linking to authoritative sources strengthens the credibility of your content and demonstrates your research.

💯 Increased Engagement: Links to related content on your website keep visitors engaged and exploring different sections, potentially leading them to discover more of your valuable content.

💯 SEO Benefits: Strategic use of internal links within your website can improve your search engine ranking (SEO) by helping search engines understand the structure and content of your site.

How To Add Clickable Links in WordPress Block Editor

There are two primary methods for adding clickable links in WordPress, depending on the editor you’re using — Visual Editor and Block Editor.

In this blog, we will depict the steps of creating a clickable link using the Block Editor. The Block Editor, also known as Gutenberg, is the current default editor in WordPress. 

Here’s how to add clickable links in the Block Editor:

Select the text you prefer to be a clickable link

To create a clickable link, simply select the desired text within your blog post by clicking and dragging your cursor. 

Locate and click the link button 🔗 

After you identify and highlight the text or phrase you want to be your hyperlink, a block toolbar will appear. Find the link icon within the block toolbar and click on it.

Enter the link URL

Once you click on the link icon, a small pop-up window will appear where you can paste the URL of the website you want to link to. Then, hit “Enter” or you can just click “Submit”.

Now, your text is visually distinguished by being underlined and highlighted. This signifies that it’s a hyperlink or clickable link. Clicking on the text will direct users to the specified URL.

How To Add Clickable Links in Elementor

Incorporating links into sections within Elementor can present a challenge. Typically, the default method involves inserting a button and configuring its link to direct to the desired section. Yet, this approach may occasionally disrupt the visual harmony of your design. But could there be any way to avoid this?

Of course, there is! What you will need is a wrapper link. This allows you to attach links to any section, column, or widget within Elementor, enhancing the navigational efficiency of your website.

But do we need a plugin for this? Absolutely! But fear not, a feature that gives you the freedom to attach a link within Elementor is now offered by ElementsKit. To get started with this feature, make sure to install the prerequisites —  Elementor and ElementsKit Pro.

Let’s find out how it works……..

Set up Wrapper Link 

Navigate to your WordPress dashboard and locate ElementsKit. Choose Module and enable Wrapper Link. Then, Save Changes to get started with this feature.

Add link to a new page or existing page

To add a link in the Elementor, simply open a new page or an existing page. Once on your page, click Edit with Elementor situated at the top of your screen.

Select the section where you want to add a link. Go to the Advanced Tab and go to the ElemenstKit Conditions. Select ElementsKit Wrapper Link and toggle the button to Yes to enable the link. 

Enter the URL to the custom link field. Click on the setting icon beside the field to allow the link to open in a new window when you click on the image or text where you wrap the link. 

Lastly, publish or update your page and witness the magic.

Troubleshooting Clickable Links in WordPress

In WordPress, clickable links may occasionally malfunction or break. Here’s how to fix broken and malfunctioned links within WordPress posts or pages.

Broken Hyperlinks

A broken hyperlink refers to a link that doesn’t function properly, resulting in a 404 error page or another error message. 

To address broken hyperlinks in WordPress, adhere to these troubleshooting steps:

1. Utilize a broken link checker plugin to scan your website for any broken links.
2. Upon identifying broken links, either update or remove them accordingly.
3. Ensure that the URLs you are linking to are accurate and remain active.

An alternative method to rectify broken hyperlinks involves manually inspecting each link on your website. Although time-consuming, this approach guarantees the functionality of all website links. Simply click on each link and confirm its redirection to the intended page.

Hyperlinks Dysfunction in WordPress Posts or Pages

One common cause of hyperlink dysfunction is an issue with the link URL itself. Sometimes, it’s caused by the compatibility with the plugin or theme.

If hyperlinks fail to function properly in WordPress posts or pages, proceed with these steps:

1. Verify the correct formatting of the hyperlinks.
2. Confirm the accuracy of the linked URLs and make sure that they are still active.
3. Disable conflicting plugins that may disrupt hyperlinks.
4. Clear cache and cookies to resolve potential browser-related hyperlink issues.

Occasionally, hyperlink malfunctions may stem from WordPress database issues. Resolve this by accessing your WordPress dashboard, navigating to “Tools,” and selecting “Database.” Proceed to choose “Repair Database” to address any underlying issues.

How to Make an Image Clickable in WordPress?

Adding a hyperlink is not only limited to text but also applicable to images. Absolutely! But you will need to highlight the image instead of the text. This will allow users to click on the image and be directed to the linked website.

1. Insert the image into your WordPress post or page.
2. Click on the image to select it.
3. Click on the link icon.
4. Enter the desired URL.
5. Hit “Enter” or click “Submit”

What’s the difference with adding a link to your image is that you have the option to make the linked URL open in a new tab. 

FAQs

Final Thought

Adding clickable links in WordPress is a fundamental skill for any beginner. The steps vary depending on the choice of your WordPress editor.  If you are using a Gutenberg Editor, these steps are right for you. 

Remember, strategic use of links is key to building an engaging and informative website. These hyperlinks enhance your website’s user experience, improve its SEO, and connect your visitors to valuable resources. 

Happy linking!