Directorist – Anchor Text For Custom URL Field

There is a way to add anchor text for the custom URL field in the directorist builder. You can easily achieve this by implementing some custom coding and template overriding.

First of all, you need to install and activate a child theme. Then, please use the following custom code in the functions.php file of the child theme folder. This code will enable a new field to enter the “Anchor Text” in the Directory builder.

add_filter('atbdp_single_listing_content_widgets', function ($widgets) {
    $widgets['url'] = [
        'options' => [
            'icon' => [
                'type'  => 'icon',
                'label' => __('Icon', 'directorist'),
                'value' => 'las la-link',
            ],
            'anchor' => [
                'type'  => 'text',
                'label' => __('Anchor Text', 'directorist'),
                'value' => 'Visit Website',
            ],
        ]
    ];
    return $widgets;
});

Now, you need to override the template.

Please read the template override documentation before you start this process. This will help you to understand how to override the templates properly.

Template Override (directorist.com)

Please create a file “directorist/single/custom-fields/url.php” in your currently activated theme folder with the following code

<?php

/**
 * @author  wpWax
 * @since   6.7
 * @version 7.0.5.2
 */

if (!defined('ABSPATH')) exit;
$anchor_text = isset($data['anchor']) && !empty($data['anchor']) ? $data['anchor'] : 'Visit Website';
?>

<div class="directorist-single-info directorist-single-info-url">

	<div class="directorist-single-info__label">
		<span class="directorist-single-info__label-icon"><?php directorist_icon($icon); ?></span>
		<span class="directorist-single-info__label--text"><?php echo esc_html($data['label']); ?></span>
	</div>

	<div class="directorist-single-info__value"><a target="_blank" href="<?php echo esc_url($value); ?>" <?php echo !empty($data['use_nofollow']) ? 'rel="nofollow"' : ''; ?>><?php echo esc_html($anchor_text); ?></a></div>

</div>

Overriding this template will do the job for you. Now you will have the anchor text on the single listing page.

Now, you can design this with custom CSS.