0

WhatsApp has a feature that allows you to start a conversation from a link.

This link will be built like this:

https://wa.me/1XXXXXXXXXX?text=message%20here

Where 1XXXXXXXXXX must be replaced by the phone number to be spoken to and message%20here by the message that will be sent by default.

Using ACF Pro, I would like to create two fields:

  • whatsapp_phone for phone number. This field is universal and will only be populated once on an ACF Pro options page
  • whatsapp_message for the message, a different one for each post.

With these two fields, I intend to generate a third hidden and dynamic URL field associated with each post and which will be used in the contact button on the front end: whatsapp_link

This way, the site admin would only need to fill in the number in the site options and the message in the post and I could display the generated link in the front end, for example, using the shortcode [acf field="whatsapp_link" post_id="123" ].

I can create the two fields to be filled in, but I need code that solves two challenges:

  1. Message field needs to be URL encoded before use
  2. The whatsapp_link field needs to be dynamically populated whenever the post is saved or if the number changes in the theme options

Can anyone help me?

3
  • Unless the acf shortcode supports an 'encoding' parameter I'd guess you'll need to make your own shortcode to assemble the URL instead.
    – Rup
    Commented Feb 5 at 11:26
  • For 2 you don't need to save the computed value in a field, you can compute it cheaply when the page is rendered.
    – Rup
    Commented Feb 5 at 11:27
  • I would like to store the value in a field to ensure compatibility with all features of the theme which is very well integrated with ACF. This way I am sure that the theme will be able to use the data as if it were a simple ACF field. Of course, in other usage situations, this would probably not be necessary. Commented Feb 5 at 11:51

1 Answer 1

2

You can used ACF Pro and adding some custom code to your theme's functions.php file.

// Add ACF fields
if( function_exists('acf_field_group') ):

acf_field_group(array(
    'key' => 'group_60aaf3a3f3d4a',
    'title' => 'WhatsApp Fields',
    'fields' => array(
        array(
            'key' => 'field_60aaf3aaf3d4b',
            'label' => 'WhatsApp Phone',
            'name' => 'whatsapp_phone',
            'type' => 'text',
            'instructions' => 'Enter the WhatsApp phone number',
            'required' => 1,
            'default_value' => '',
        ),
        array(
            'key' => 'field_60aaf3b9f3d4c',
            'label' => 'WhatsApp Message',
            'name' => 'whatsapp_message',
            'type' => 'text',
            'instructions' => 'Enter the default WhatsApp message',
            'required' => 1,
            'default_value' => '',
        ),
        array(
            'key' => 'field_60aaf3d7f3d4d',
            'label' => 'WhatsApp Link',
            'name' => 'whatsapp_link',
            'type' => 'text',
            'instructions' => 'This field will be dynamically populated',
            'required' => 0,
            'default_value' => '',
            'readonly' => 1,
            'hidden' => 1,
        ),
    ),
    'location' => array(
        array(
            array(
                'param' => 'post_type',
                'operator' => '==',
                'value' => 'post', // Change this to your post type to your post_type_slug
            ),
        ),
    ),
));

endif;

// Function to dynamically generate WhatsApp link
function generate_whatsapp_link($post_id) {
    // Get phone number from theme options
    $whatsapp_phone = get_field('whatsapp_phone', 'option');

    // Get message from post
    $whatsapp_message = get_field('whatsapp_message', $post_id);

    // Encode message
    $encoded_message = urlencode($whatsapp_message);

    // Generate WhatsApp link
    $whatsapp_link = "https://wa.me/{$whatsapp_phone}?text={$encoded_message}";

    // Update the whatsapp_link field value
    update_field('whatsapp_link', $whatsapp_link, $post_id);
}

// Hook to update WhatsApp link when post is saved
add_action('acf/save_post', 'generate_whatsapp_link', 20);

// Shortcode to display WhatsApp link in the frontend
function whatsapp_link_shortcode($atts) {
    $post_id = isset($atts['post_id']) ? intval($atts['post_id']) : get_the_ID();
    return get_field('whatsapp_link', $post_id);
}

add_shortcode('acf_whatsapp_link', 'whatsapp_link_shortcode');
6
  • That looks like it'd work at first glance. What's the requirement to have Pro though rather than regular ACF?
    – Rup
    Commented Feb 5 at 11:29
  • The field group: does that mean you'll show the phone number on each post, where it's not used? And the computed field, which will get overwritten automatically - so there's no point showing it?
    – Rup
    Commented Feb 5 at 11:30
  • I need ACF Pro to use the options page functionality. I also already have the Pro on the site for other reasons. But I believe that the solution could be used for the free version as long as the phone number does not need to be on the options page. Commented Feb 5 at 11:54
  • // Get phone number from a specific post for acf free version $whatsapp_phone = get_field('whatsapp_phone', 123); // 123 means post id Commented Feb 5 at 12:03
  • It worked very well! Thank you very much! There is just one detail: if I edit the phone number in the options, the link is not updated in the posts. Is it possible to do this too? Commented Feb 5 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.