PHP in Javascript using Wordpress - php

Question

I have found a few articles about using PHP in JS but nothing has helped me so far, so here is my question. I need to call wordpress post content (title, excerpt and thumbnail) into a JS "preview" functionality (essentially calling posts with the ThumbnailGridExpandingPreview). I have been able to make the "expanding preview" open from the post thumbnail and title, however I am having trouble adding the post content to the preview.
I am attempting to add the php calls to the preview function in the "grid.js" file, however I am not sure exactly how to "minify" the php code. See below for my code.
The code as it reads originally:
this.$title = $( '<h3></h3>' );
And here is how I am attempting to call the post title:
this.$title = $( '<h3><?php echo get_the_title(); ?></h3>' );
Any help would be hugely appreciated! Thanks in advance.

Answer 1

Some clarifications: PHP is a server side language; this means that it can be parsed and executed only server-side.
That said, you have two options here, one more elegant, the other a bit crappy (i would use it only in really rare and limited cases):
Elegant solution: Wordpress Ajax. Setup an ajax-callable function in your functions.php file which returns data-populated html:
a. Add an ajax-callable action to your functions.php file:
add_action("wp_ajax_[function_name]", "function_name");
//If the action wants users to be logged in, you can specify a different function to be called in case a user is not:
//add_action("wp_ajax_nopriv_[function_name]", "[function_name_for_non_logged_users]");
b. Specify the function to be called (specify a second one for non logged-in users in case you need it)
function function_name() {
//It is good practice to use nonce verification
if (!wp_verify_nonce( $_REQUEST['nonce'], "function_name_nonce")) {
exit("[Your scary message against bad people]");
}
// Make your query here.
$post_id = $_REQUEST["post_id"];
$post = get_post($id, ARRAY_A);
// Return your data. Here I go with a simple JSON.
$result = json_encode($result);
echo $result;
}
c. Cook the frontend-code, somewhere in the template (obviously make it so that's available to your grid.js calls). You'll need to have $post populated with your post data. I tend to use a global wrapper:
<script type="text/javascript">
<?php
$nonce = wp_create_nonce('function_name_nonce');
$endpoint = admin_url('admin-ajax.php');
?>
var Globals = {
nonce: "<?php echo $nonce; ?>",
postId: "<?php echo $post->ID; ?>",
endpoint: "<?php echo $endpoint; ?>"
}
</script>
d. From now on, it's up to you to make the ajax call (I don't have any references to your code) but it's pretty straightforward:
$.ajax({
type: "post",
dataType: "json",
url: Globals.endpoint,
data: {
action: "function_name",
post_id: Globals.postId,
nonce: Globals.nonce
},
success: function(response) {
//Aaaaand here's your post data
console.log(response);
}
});
See http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action) for this.
This is a good tutorial (found it on the first page of Google): http://wp.smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress/
Crappy solution: generated data-populated JS code (i would stick to a JS object). In this case, you will need an additional script tag inside your page (template or whatever else has access to PHP) in which you'll output JS valid code:
var title = "<?php the_title(); ?>";