Posted on Leave a comment

Tips: Creating button shortcode for Single Listing page

This tutorial, We will show you how to add a custom button shortcode to Wilcity and How can We use it in Group Custom Field

Creating Wilcity Custom Button shortcode

Step 1: Activating Wilcity Child Theme.

To create a shortcode or add custom code to the Wilcity, We highly recommend using the Wilcity Child Theme instead of the Wilcity Theme. Please read to know how can you set up it.

Step 2: Adding Wilcity Custom button to functions.php

Under the Wilcity Child Theme, you will see functions.php file. Now, please open this file with an editor like Sublime text, NotePad++

Now, put the following code to this file, it should under <?php syntax

add_shortcode('wilcity_custom_button', 'wilcityCustomButton');
if (!function_exists('wilcityCustomButton')) {
function wilcityCustomButton($aAtts, $btnName)
$aAtts = shortcode_atts(
'target' => 'self',
'link' => '#',
'meta_key' => '',
'name' => '',
'size' => 'wil-btn--sm',
'variation' => 'wil-btn--primary2',
'icon' => '',
'extra_classes' => 'wil-btn--round',
'id' => uniqid('custom_button_')

$btnName = empty($buttonName) ? $aAtts['name'] : $buttonName;

if (empty($btnName)) {
return '';

if (empty($aAtts['link']) && !empty($aAtts['meta_key'])) {
global $post;
$aAtts['link'] = WilokeListingTools\Framework\Helpers\GetSettings::getPostMeta(
$post->ID, 'custom_'.$aAtts['meta_key']

if (empty($aAtts['link'])) {
return '';

$classes = 'wil-btn wil-custom-btn wil-btn--round wil-btn '.$aAtts['classes'].' '.$aAtts['variation'].' '
<a id="<?php echo esc_attr($aAtts['id']); ?>" class="<?php echo esc_attr($classes); ?>"
href="<?php echo esc_url($aAtts['link']) ?>" target="<?php echo esc_attr($aAtts['target']); ?>">
<?php if (!empty($aAtts['icon'])) : ?>
<i class="<?php echo esc_attr($aAtts['icon']); ?>"></i>
<?php endif; ?>
<?php echo esc_html($btnName); ?>
$content = ob_get_contents();

return $content;

Embedding Wilcity Custom Shortcode to Wilcity Group

Step 1: Now, please click on Wiloke Tools -> [Your Directory Type] Settings -> Add New Directory Type -> Add Group to Used Fields area

Step 2: Next, please setup your group looks the following image.

Note that you can add any key name you want

Step 3: Re-opening functions.php of the Child Theme and put the following code to this file

'wilcityCombineGroupAndCustomButton', 10, 4);
function wilcityCombineGroupAndCustomButton($html, $aSettings, $aGroupSettings, $aAtts)
if (!isset($aSettings['items']) || !is_array($aSettings['items'])) {
return '';

foreach ($aSettings['items'] as $aItem) {
if (empty($aItem['link']) || empty($aItem['name'])) {

$html .= do_shortcode('[wilcity_custom_button link="'.$aItem['link'].'" icon="'.$aItem['icon'].'" variation="'
.$aItem['variation'].'" extra_classes="mr-20"]'.$aItem['name'].'[/wilcity_custom_button]');

if (!empty($html)) {
<?php if (!empty($aSettings['title'])) : ?>
<div class="col-md-12"><h4 class="<?php echo esc_attr(apply_filters('wilcity/filter/class-prefix',
'wilcity-group-properties-heading')); ?>"><?php echo esc_html($aSettings['title']); ?></h4></div>
<?php endif; ?>

<?php if (!empty($aSettings['description'])) : ?>
<div class="col-md-12"><p class="<?php echo esc_attr(apply_filters('wilcity/filter/class-prefix',
'wilcity-group-properties-desc')); ?>"><?php Wiloke::ksesHTML($aSettings['description']); ?></p></div>
<?php endif; ?>
$title = ob_get_contents();

$html = '<div class="wilcity-'.esc_attr($aAtts['group_key']).'-wrapper">'.$title.
'<div class="wilcity-custom-button-group">'.$html.'</div></div>';

return $html;

Warning: wilcity_shortcode/focus-filter/wilcity_render_group_field/my_custom_button: my_custom_button is the key of group field.

Inserting Wilcity Custom Button to Single Navigation

Step 1: Navigating to Single Navigation -> Click Add New Custom Field

Step 2: Focusing your mouse on Key field -> You will see all your Custom Fields option -> Select Your Group

Step 3: Finally, click on Save Changes

Now, You can go to Listings -> Your Listing -> Add some buttons:

And you will get

Embedding Wilcity Custom Button to Input Field

You can also combine Wilcity Custom Button with Input Field / Textarea Field as well.

Step 1: Back to Add Listing area -> Add a Input / Text area field -> Save Changes

Step 2: Navigate to Single Navigation -> Click on Add New custom field

Now, you can go to Listings -> Your Listing -> Enter a link to your custom Input field

And you will see

Joining Wilcity Bundle Plugins to download all premium plugins for free