Dynamically load post with ajax in wordpress
The best way is to use the built-in AJAX. In other words, send your AJAX request to wp-admin/admin-ajax.php
. Your PHP function should be inclueded in functions.php
.
For a beginner, I confess it is not an easy issue, but there are many tutos on the web about this.
this is a tutorial I have already written about Wordpress AJAX on SO:
Dynamically changing navigation links (next and previous) in Wordpress via AJAX
Note: Do not read the question since it contains the old approach I was using, read the answer it contains the correct approach.
cmdv
Updated on June 17, 2022Comments
-
cmdv almost 2 years
Hi I've gone through a lot of tutorials also questions on here but the subjects seems really unclear.
This is the best tutorial I could find 5-tips-for-using-ajax
I have my custom post thumbnails being displayed in a grid on my index page. I’m trying to create a click event to load the linked post via ajax into a div on the same page instead of being taken to the post. I’ve seen this method being used on lots of websites but just cant find the correct tutorial/method to do it.
here are some examples: Reveal,aware, garnish, ying+yang
Hope someone can clarify this as 2 weeks down the line I'm no clearer on the subject :(
Script I'm using so far:
<ul id="og-grid" class="og-grid"> <?php query_posts( array( 'post_type' => array('portfolio') ));?><?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li><a class="ajax-click" href="#" ><?php the_post_thumbnail('thumbnail', array('class' => 'thumb', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a></li><?php endwhile; ?><?php endif; ?> </ul> </div>
index.php
.
wp_register_script( 'loadajax', get_stylesheet_directory_uri() . '/library/js/loadajax.js', array( 'grid-js' ), false , true ); wp_localize_script( 'loadgrid', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
Register my script and admin-ajax
add_action ( 'wp_ajax_nopriv_cmdv_load', 'cmdv_load_ajax' ); add_action('wp_ajax_cmdv_load_ajax', 'cmdv_load_ajax' ); function cmdv_load_ajax () { $the_slug = $_POST['slug']; $args=array( 'name' => $the_slug, 'post_type' => 'projects', 'post_status' => 'publish', 'showposts' => 1, ); $my_posts = get_posts($args); if( $my_posts ) : global $post; $post = $my_posts[0]; // generate the response $response = json_encode( "Success" ); // response output header( "Content-Type: application/json" ); ?> <div id="ajax-project-<?php the_ID(); ?>" <?php post_class('project main ajax clearfix'); ?> > <div class="projectHeader"> <h1><?php the_title(); ?></h1> <div class="projectNav clearfix"> <?php $prev_post = get_previous_post(); if($prev_post) $prev_slug = $prev_post->post_name; $next_post = get_next_post(); if($next_post) $next_slug = $next_post->post_name; ?> <div class="next <?php if(!$next_slug) echo 'inactive';?>"> <?php if(isset($next_slug)) : ?> <a href="#<?php echo $next_slug;?>" onClick="nextPrevProject('<?php echo $next_slug;?>');">Next</a> <?php endif; ?> </div> <div class="previous <?php if(!$prev_slug) echo 'inactive';?>"> <?php if(isset($prev_slug)) : ?> <a href="#<?php echo $prev_slug;?>" onClick="nextPrevProject('<?php echo $prev_slug;?>');">Previous</a> <?php endif; ?> </div> <div class="closeBtn"> <a href="#index">Close Project</a> </div> </div> </div> <div class="entry"> <?php the_content(); ?> </div> </div> <?php endif; ?> <?php die();?> <?php } ?>
function.php
The jquery is where I'm really struggling so this is where I need direction! I'm using thumbnail grid with expanding preview to align the thumbnails but adding the click function and response I just cant work out :(
Thanks