Directorist – Display as Button option for Custom URL field

There is a way to enable the “Display as button” option 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 enable the “Display as button” option and enter the “Anchor Text” in the Directory builder.

add_filter('atbdp_single_listing_content_widgets', function ($widgets) {
	$widgets['url']['options']['display_button'] =
		[
			'type'  => 'toggle',
			'label' => __('Display as button', 'directorist'),
			'value' => '',
		];
	$widgets['url']['options']['anchor'] = [
		'type' => 'text',
		'label' => __('Anchor Text', 'directorist'),
		'value' => 'Visit',
		'show_if' => [
			'where' => "self.display_button",
			'conditions' => [
				['key' => 'value', 'compare' => '=', 'value' => true],
			],
		],
	];
	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;
$display_button = isset($data['display_button']) && !empty($data['display_button']) ? $data['display_button'] : false;
$anchor_text = isset($data['anchor']) && !empty($data['anchor']) ? $data['anchor'] : 'Visit';
?>

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

    <?php if ($display_button) : ?>
        <div class="directorist-single-info__value"><a class="directorist-btn directorist-btn-primary url-btn-style" target="_blank" href="<?php echo esc_url($value); ?>" <?php echo !empty($data['use_nofollow']) ? 'rel="nofollow"' : ''; ?>><?php echo esc_html($anchor_text); ?></a></div>
    <?php else : ?>
        <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($value); ?></a></div>
    <?php endif; ?>
</div>

Overriding this template will do the job for you. Now you will be able to see the button with the provided anchor text on the single listing page.

Now, you can design the button with custom CSS. It is really easy to change CSS code using this class “url-btn-style”.

.url-btn-style{color: #fff}

Please contact us if you need help with any issue related to this custom coding – support@directorist.com