Is it possible to return content, and then also continue to do other things?

Question

Please see my shortcode script below (which is intended to print the next 15 minute time interval, eg if the current time is 9:01pm, it would print 9:15pm).

I have managed to produce the correct output, however because I am echoing the <span id="webinartime"></span> HTML, the dynamic content is showing up at the top of my WordPress content area, not in the location I type the shortcode.

I understand after reading that I need to return my value to get it to appear in the right place... However, returning ends the function, and so I miss out on including the javascript that will ultimately insert my correct time value (the javascript is necessary to retrieve the user's local time).

I'm wondering if there is a way to have two functions in the shortcode, or nest them somehow... change my approach, etc?

<?php
add_shortcode( 'now_plus_15_min', 'now_plus_15_min' );

function now_plus_15_min() {

// get current date & time
$current_date = date('d-M-Y g:i:s A');
$current_time = strtotime($current_date);

// create new date & time that is the nearest next 15 minute interval
$frac = 900;
$r = $current_time % $frac;
$new_time = $current_time + ($frac-$r);
$new_date = date('d-M-Y g:i:s A', $new_time);

// insert HTML which will be later affected by javascript
// this part is the issue! I need to return this, not echo...
// but returning ends the function before javascript can be run...
echo '<span id="webinartime"></span>';
echo "\n";

// Modify the PHP new date & time to match the user's local time
// and insert it into above HTML
echo "<script>
var date = new Date('" . $new_date . " UTC');
var NextWebinarTime = date.toLocaleString();
console.log(NextWebinarTime);
document.getElementById('webinartime').innerHTML = NextWebinarTime;
</script>
";

}
?>

Answer 1

What you should do is create a variable to store all of the HTML data you wish to output with your shortcode then use return. Your code would look something like this:

<?php
// insert HTML which will be later affected by javascript
// this part is the issue! I need to return this, not echo...
// but returning ends the function before javascript can be run...
$html_out = '<span id="webinartime"></span>';
$html_out .= "\n";

// Modify the PHP new date & time to match the user's local time
// and insert it into above HTML
$html_out .= "<script>
var date = new Date('" . $new_date . " UTC');
var NextWebinarTime = date.toLocaleString();
console.log(NextWebinarTime);
document.getElementById('webinartime').innerHTML = NextWebinarTime;
</script>
";

return $html_out;

}
?>

However, if you require JavaScript as part of your response the best WordPress practice would be to enqueue the script. You can learn more about that here:

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Moreover, as another user has already pointed out there is no need to make use of JavaScript for this shortcode. PHP is more than capable of completing all of the required calculations you need to output to the user.

Answer 2

Add ob_start() on top your function and add return ob_get_clean() at the last row of your function.

function this_is_example() {
    ob_start();
    echo "stuff";
    return ob_get_clean();
}

Answer 3

Result of shortcode will appear after entire code of that shortcode is processed.

PHP can do what you are trying to do through javascript as it is just adding information to an element. As both calculations are ready through PHP processing, you can just echo full 'webinartime' element without handing over that job to javascript. From your content where you used the element div or span etc, you can remove from there and let the PHP code display it already filled with the calculations.

Hope I understood your situation right from your description.