Elementor: Make Only a Dynamic Tag a Link and Not Before or After Text

Smart Web Creative - Elementor: Make Only a Dynamic Tag a Link

If you have ever wanted to make a dynamic tag within Elementor a link, you will come to find that when you place the before or after text within the Advanced options, it makes those parts of the link as well. Well, what if you wanted to have ONLY the dynamic tag be the portion that has the link on it? In this article, we will go over how to make only a dynamic tag a link and not the “before” or “after” text.

To do this, we’re assuming that you have Elementor Pro, ACF, and access to the functions.php file of your theme. Also, you’re probably wanting to do this within a custom loop using Ele Custom Skin.

Adding the Shortcode for Link on Dynamic Tag Only Code

The first thing you will want to do is copy the following code and paste it into your theme’s function.php file. What this code does is it makes a shortcode for your dynamic tag link that you can utilize elsewhere:


/* Shortcode for Link on Dynamic Tag Only */
function link_dynamic_tag_only_shortcode_function() {
$link_url = get_post_permalink();// Grab the URL for the post in the loop
$dynamic_link_text = get_field('custom_field_name');// Change "custom_field_name" to the name of your custom field
$output = '<a href="' . $link_url . '">' . $dynamic_link_text . '</a>';
return $output;
}
add_shortcode( 'dynamic_tag_link_shortcode', 'link_dynamic_tag_only_shortcode_function' );// "dynamic_tag_link_shortcode" is the name of the shortcode
/* Shortcode for Link on Dynamic Tag Only */

Be sure to change the code above to work with your ACF custom field setup. You will also want to copy “dynamic_tag_link_shortcode”, which is going to be the name of your shortcode.

Adding Your Dynamic Tag Widget to Your Page or Loop

In this next step, you can use either the Text Editor widget or the Heading widget. For this article, we’ll be using the Heading widget.

When you add your dynamic tag, normally you would use the ACF Field option. However, we want to use in this case, the Shortcode option.

Next, for the actual shortcode, paste what you copied from the functions.php file and add brackets around it like so, [dynamic_tag_link_shortcode].

In the “Advanced” options, you can add whatever you’d like that will come before and after the dynamic tag. In this example, we are using “Learn more about ” for the before and “.” for the after. Be sure to include the space at the end of the before, otherwise, your result will look like this, “Learn more aboutthis link”.

 

That should be it. If you use this in a loop, you will see that each before and after are the same, but the dynamic part that is a link will change both its text and the link.

Other Helpful Articles

Smart Web Creative - Quick Resources: Date and Time in PHP

Quick Resources: Date and Time in PHP

If you want to display the date and time in PHP, it can be somewhat confusing what letters to use to bring in those elements. Below is a list of all the PHP date and time options that you can use on your site: To utilize these options in PHP,

Read More »

Disable Product Pages in WooCommerce

Add the following code to your functions.php file to disable users from accessing product pages within WooCommerce: /* Remove Links to Access Product Pages */ remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 ); remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 ); /* Prevent Users from Accessing Product Pages by Displaying the 404 Page */ function prevent_access_to_product_page(){

Read More »

How To Close A Mobile Popup Menu in Elementor for a One-Page Site

If you’re making a one-page / landing page site and want to have the mobile popup menu close after clicking on a link, copy the following code: <!– Close Popup once anything within popup is clicked. –> <script> jQuery(function($){ $(document).on(‘click’,’.elementor-location-popup a’, function(event){ elementorProFrontend.modules.popup.closePopup( {}, event); }); }); </script> Now, paste

Read More »

What Do You Need Done?:

(Please check all that apply)

Tell Us About You

Almost Done!

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info