Directorist | Template Override | Use Multiple iFrames

 

Directorist is a plugin with full of functionalities, anyone can create almost any type of website with this, depends on the user's imagination.

Template override is a feature that allows you to customize it in many ways to fulfill your requirements. Here, we are going to check how we can create a Textarea field into a multiple iFrame field by overriding the templates.

We have to follow some simple steps to achieve this functionality on our website.

1. Enabling the key field:

Please copy and paste the following code at the end of the "functions.php" file of the currently activated theme folder. 

1. 
   
2. add_filter('directorist_custom_field_meta_key_field_args', function ($args) {
3.     $args['type'] = 'text';
4.     return $args;
5. });
6. 
   

2. Create a custom Textarea field:

Please create a custom Textarea field and make sure the key ( meta key ) has the word "iframe" in it.

3. Single listing template:

Place the custom Textarea field on the single listing templates. 

If you are using a pricing plan extension please make sure you have allowed this field in the pricing plan. 

4. Template Override:

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 Documentation

a) Override the single listing template: 

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

1. 
   
2. <?php
3.  
4. /**
5.  * @author  wpWax
6.  * @since   6.7
7.  * @version 7.0.5.2
8.  */
9.  
10. if (!defined('ABSPATH')) exit;
11. ?>
12.  
13. <div class="directorist-single-info directorist-single-info-textarea">
14.  
15.     <?php if (isset($data['field_key']) && strpos($data['field_key'], 'iframe') !== false) : ?>
16.         <div class="directorist-single-info__value"><?php echo $value; ?></div>
17.     <?php else : ?>
18.         <div class="directorist-single-info__label">
19.             <span class="directorist-single-info__label-icon"><?php directorist_icon($icon); ?></span>
20.             <span class="directorist-single-info__label--text"><?php echo esc_html($data['label']); ?></span>
21.         </div>
22.         <div class="directorist-single-info__value"><?php echo esc_html($value); ?></div>
23.     <?php endif; ?>
24.  
25. </div>
26. 
    

b) Override the listing form template:

Please create a file "directorist/listing-form/custom-fields/textarea.php" in your currently activated theme folder with the following code -

1. 
   
2. <?php
3.  
4. /**
5.  * @author  wpWax
6.  * @since   6.6
7.  * @version 6.7
8.  */
9.  
10. if (!defined('ABSPATH')) exit;
11.  
12. $max = !empty($data['max']) ? 'max="' . esc_attr($data['max']) . '"' : '';
13. ?>
14.  
15. <div class="directorist-form-group directorist-custom-field-textarea">
16.  
17.     <?php $listing_form->field_label_template($data); ?>
18.  
19.     <?php if (isset($data['field_key']) && strpos($data['field_key'], 'iframe') !== false) : ?>
20.         <textarea <?php echo $max; ?> name="<?php echo esc_attr($data['field_key']); ?>" id="<?php echo esc_attr($data['field_key']); ?>" class="directorist-form-element" rows="<?php echo (int) $data['rows']; ?>" placeholder="<?php echo esc_attr($data['placeholder']); ?>" <?php $listing_form->required($data); ?>><?php echo esc_html($data['value']); ?></textarea>
21.     <?php else : ?>
22.         <textarea <?php echo $max; ?> name="<?php echo esc_attr($data['field_key']); ?>" id="<?php echo esc_attr($data['field_key']); ?>" class="directorist-form-element" rows="<?php echo (int) $data['rows']; ?>" placeholder="<?php echo esc_attr($data['placeholder']); ?>" <?php $listing_form->required($data); ?>><?php echo wp_kses_post($data['value']); ?></textarea>
23.     <?php endif; ?>
24.  
25.     <?php $listing_form->field_description_template($data); ?>
26.  
27. </div>
28. 
    

5. Insert iFrames:

Now you can insert the iFrames in the custom Textarea field you have created in the backend or frontend.

a) Backend:

b) Frontend:

6. Output:

If everything goes well this should be the output on the frontend single listing page -

Thank you for following this instruction. Please comment below if you face any difficulties or you have any queries regarding this.