WordPress: Construct A Modal To Dynamically Populate From A Customized Submit Kind Utilizing Ajax

One of many main tasks that I’ve labored on within the final yr is constructing out an acronym library utilizing a customized publish kind (CPT) on Martech Zone. I’ve outlined over 1,000 advertising, gross sales, and technology-related acronyms on the positioning! It’s been fairly widespread and drives a lot engagement with readers and search engine referrals.

Whereas I’m pleased with the engagement, one concern bothered me. When readers clicked on an acronym, it took them to an acronym web page to disclose the definition… away from the article they have been studying. That’s not an optimum consumer expertise (UX). At the moment, I modified my youngster theme with a pleasant customization. Now, if you click on on an acronym, the definition seems in a pleasant modal window that’s straightforward to dismiss.

Modal With Customized Submit Kind

Right here’s what the outcomes appear like… you may strive it out your self by clicking the UX acronym.

What’s distinctive about this resolution is that I can publish my article as I usually would, with out including any particular code within the article or web page to show the modal. Utilizing jQuery, I seize when a consumer clicks on an anchor textual content, verify the permalink construction, and if it’s an acronym, I take advantage of Ajax to question WordPress and populate the modal with the ensuing content material.

As at all times, I’ll present the code right here so you may determine the best way to implement the same resolution in your WordPress website!

Step 1: Add the CSS for the Modal in Your Baby Theme

You’ll possible wish to modify your CSS from mine, I wished to include a darkish or gentle pores and skin into it and customise the widths for various display screen sizes.

.modal { 
  show:none;
  place:fastened;
  z-index:1000;
  left:0;
  prime:0;
  width:100%;
  peak:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4); 
}
.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  padding-right: 40px; /* Add area for the shut button */
  border: 1px strong #888;
  border-radius: 20px;
  width: 50%;
  max-height: 80vh;
  overflow-y: auto;
  place: relative; /* Make place relative for absolute positioning of youngsters */
}
.dark-skin .modal-content {
  background-color: #111;
  border: 1px strong #000;
}
@media display screen and (min-width: 768px) and (max-width: 1024px) {
  .modal-content {
    width: 70%;
  }
}
@media display screen and (max-width: 767px) {
  .modal-content {
    width: 90%;
  }
}
.modal-close-btn {
  place: absolute;
  prime: 10px;
  proper: 15px;
  font-size: 28px;
  font-weight: daring;
}
.modal-close-btn:hover,
.modal-close-btn:focus {
  cursor: pointer;
  text-decoration: none;
}

Step 2: Add the Modal HTML To Your Footer

Immediately above my </physique> tag in my footer.php web page, I add my empty Modal. Included in that is my shut button, which is a straightforward HTML entity for an X.

<div id="customModal" class="modal">
  <div class="modal-content">
    <span class="modal-close-btn">&occasions;</span>
    <h2></h2>
    <div class="entry-content entry clearfix"></div>
  </div>
</div>

Step 3: Add the Ajax Perform and Customized Submit Kind Question To Your Baby Theme

There are two features beneath. modal_script provides a listener for anybody clicking on a hyperlink. There’s a regex rule the place I can search for /acronym/ inside the URL after which return the slug after the hyperlink… which occurs to be the acronym. That’s posted again to WordPress, and the customized publish kind is queried and returns the content material in JSON, the place it’s parsed and displayed within the modal HTML.

operate modal_script() {
    ?>
<script kind="textual content/javascript">
    jQuery(doc).prepared(operate(jQuery) {
        // Connect click on occasion listener to all anchor tags
        jQuery(doc).on('click on', 'a', operate(e) {
            var href = jQuery(this).attr('href'); // Use the href immediately

            // Test if the href attribute comprises '/acronym/'
            if (href.consists of('/acronym/')) {
                e.preventDefault(); // Stop default motion just for hyperlinks with '/acronym/'

                // Extract the acronym from the href attribute
                var acronym;
                strive {
                    var match = href.match(/acronym/(.+)/$/);
                    if (match) {
                        acronym = match[1];
                    } else {
                        console.error("No legitimate acronym present in href.");
                        return; // Exit if no acronym is discovered
                    }
                } catch (error) {
                    console.error("Error extracting acronym from href: ", error);
                    return; // Exit the operate if an error happens
                }

                jQuery.ajax({
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    methodology: 'POST',
                    dataType: 'json',
                    knowledge: {
                        motion: 'fetch_acronym_definition',
                        acronym: acronym,
                        nonce: '<?php echo wp_create_nonce('ajax_nonce'); ?>'
                    },
                    success: operate(response) {
                        jQuery('#customModal .modal-content h2').textual content(acronym.toUpperCase());
                        jQuery('#customModal .modal-content .entry-content').html('<h3>' + response.definition + '</h3>' + response.content material);
                        jQuery('#customModal').present();
                    }
                });
            }
        });

        jQuery('.modal-close-btn').on('click on', operate() {
            jQuery('#customModal').conceal();
        });

        jQuery(window).on('click on', operate(e) {
            if (jQuery(e.goal).is('.modal')) {
                jQuery('#customModal').conceal();
            }
        });
    });
</script>
    <?php
}
add_action('wp_footer', 'modal_script');

operate fetch_acronym_definition() {
    // Test nonce for safety
    check_ajax_referer('ajax_nonce', 'nonce');

    $acronym_slug = sanitize_text_field($_POST['acronym']);
    $args = array(
        'title'        => $acronym_slug,
        'post_type'   => 'acronym',
        'post_status' => 'publish',
        'numberposts' => 1
    );
    $publish = get_posts($args);
    if (!empty($publish)) {
        $post_id = $publish[0]->ID;
        $acronym_definition = get_post_meta($post_id, 'acronym_definition', true);
        $content material = apply_filters('the_content', $publish[0]->post_content); // Get the content material and apply content material filters
        
        // Put together and ship JSON response
        wp_send_json(array(
            'definition' => $acronym_definition,
            'content material' => $content material
        ));
    } else {
        echo 'Definition not discovered.';
    }
    wp_die(); // That is required to terminate instantly and return a correct response
}
add_action('wp_ajax_fetch_acronym_definition', 'fetch_acronym_definition');
add_action('wp_ajax_nopriv_fetch_acronym_definition', 'fetch_acronym_definition');

Fairly environment friendly resolution! The one drawback to this resolution is that it’s going to drop my pageviews per session. Nevertheless, because it’s enhancing my reader’s expertise, the benefits far outweigh this!