URL Field

Q: Can I customize the URL?

You can set the default link text by setting the Default Link Text which can be changed on the Article's Fields Page. You can also add any CSS classes you desire on the URL Class setting to style your link.

The URL custom field gives you the ability to add a link with customized Text, URL, Classes and more.

How to add a URL Custom Field to Joomla! Articles
Field Usage
Field Frontend Display
Frequently Asked Questions
Can I set the link to open in a new Tab?
Can I click the link and download a file?
Can I run custom JavaScript on link click?
Can I make the link not get followed by search engines?
Can I make the link not get tracked by analytics?
Can I customize the URL?

How to add a URL Custom Field to Joomla! Articles

The URL field provides you the way to set default link text, default way to open the link, custom class(es), set whether your URL will have attributes such as NoFollow, NoReferrer, whether to treat the link as downloadable as well as add custom javascript code.

acf-url-field-settings

Let's see what each option does.

Name	Description
Name	The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title.
Label	The label of the field to display.
Description	A description of the field that will be displayed in the label tooltip.
Required	Is this a mandatory field?
Default Link Text	Set a link text to be used by default
Default Open in	Set the default way to open the link

Pro Only

Name	Description
NoFollow	Selecte whether to add NoFollow attribute so search engines wont follow this link.
NoReferrer	Select whether to add NoReferrer attribute which wont send the HTTP referrer head so it won't be tracked by analytics tools.
Treat as Download Link	Select whether to download the file instead of navigating to the link.
on Click	Enter Javascript code to run on click.

Usage

Once you are in your Article's Edit screen, choose the "Fields" Tab to see the URL custom field as you can see in the screenshot below.

acf-url-field-usage

In the input field, you can enter the text of the link, the URL as well as how to open the link(same tab, new tab or new window).

Frontend Display

Take a look at the screenshot below to see how it could be displayed in your frontend.

acf-url-frontend

Frequently Asked Questions

Can I set the link to open in a new Tab?

You can set your link to appear in three different ways:

Same Tab
New Tab
Popup Window

This can be set in the setting Default Open In. Please note that this can also be set in the Article's Fields Page.

Can I click the link and download a file?

If you want to make the link be treated as a downloadable link, you can do so by setting the URL to a link which contains a file, then by enabling the setting Treat as Download Link, the browser will force to download the file instead of navigating to it.

Can I run custom JavaScript on link click?

You can definitely run any JavaScript code you desire on the onclick event. You can enter your code on the setting on Click.
Example input:

alert("You clicked the link. Now let's move on...");

This will show the alert and then continue to go to the set link.

Can I make the link not get followed by search engines?

If you don't want ot make the search engines follow this link. You can enable the setting NoFollow to do so.

Can I make the link not get tracked by analytics?

You can make analytics tools not track this link by not sending the HTTP referrer head. To do so enable the setting NoReferrer.

Can I customize the URL?

You can set the default link text by setting the Default Link Text which can be changed on the Article's Fields Page. You can also add any CSS classes you desire on the URL Class setting to style your link.