I asked this in stackovorflow under javascript and was informed not possible so I trying here

I have a shortcode for a opt-in form and I want it to pop up when a image is clicked

I tried the function in both the Header Scripts and my functions.php file.

<img src="someimage.png" onclick="executeShortCode()" /> 

<script> 
function executeShortCode() {
<?php echo do_shortcode('[yourshortcode]'); ?>
}
</script>

I asked this in stackovorflow under javascript and was informed not possible so I trying here

I have a shortcode for a opt-in form and I want it to pop up when a image is clicked

I tried the function in both the Header Scripts and my functions.php file.

<img src="someimage.png" onclick="executeShortCode()" /> 

<script> 
function executeShortCode() {
<?php echo do_shortcode('[yourshortcode]'); ?>
}
</script>

• php
• functions

Share Improve this question edited Apr 2, 2014 at 23:51 s_ha_dum 65.6k1313 gold badges8484 silver badges174174 bronze badges asked Apr 2, 2014 at 23:45 xyzxyz 21522 gold badges77 silver badges1414 bronze badges 1

• Why do you need this to be a shortcode? Is your data dynamic in some way? – s_ha_dum Commented Apr 2, 2014 at 23:53

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

It's certainly possible but you're probably looking at doing an ajax request on the image click which in turn executes the short code and returns the output. This involves three distinct steps, binding the ajax request to an action, executing the ajax request and handling the response, and actually writing the script that will process the request. This answer will not cover all of the necessary overhead, you'll need to properly localize your script to generate the correct url to post to, you'll need to add checks to make sure the request is legit, this should not just be copy/pasted.

Handling the click (js)

jQuery(document).ready(function($) {
    $('#my_image_id').on('click',function() {
        // you need to, at a minimum, include a nonce here as well
        var data = {
            action: 'process_shortcode_on_image_click'
        }
        // change '/wp-admin/admin-ajax.php to the correct variable generated by wp_localize_script()
        $.post('/wp-admin/admin-ajax.php',data).done(function(response) {
            // do whatever you want with response, it will contain the shortcode output
            // maybe something like $('#my_popup_id').html(response);
        });
    })
})

Hooking the request onto actions

This can go in functions.php or a plugin, something that will get executed on every page load.

// these call the appropriate function based on the action passed from the data object in the js
add_action( 'wp_ajax_process_shortcode_on_image_click_action', 'process_shortcode_on_image_click_ajax');
add_action( 'wp_ajax_nopriv_process_shortcode_on_image_click_action', 'process_shortcode_on_image_click_ajax');

Handling the ajax request

This can go in functions.php or a plugin, something that will get executed on every page load.

function process_shortcode_on_image_click_ajax() {
    // you should check for a nonce and do other validation here to make sure this is a legit request
    echo do_shortcode('[yourshortcode]');
    die();
}

For further info, see Handling Ajax in Plugins from the Codex and the docs on wp_localize_script

I was having the same issue. Somehow I was able to resolve it by using the following plugin

https://wordpress/plugins/anything-popup/

You can give popup title/link/image and in the content echo the shortcode of the form. and call the popup shortcode where ever the text/link/image is placed. On clicking any of these, popup with the required content will appear.