Dynamically load post with ajax in wordpress

Question

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

Yes, a real life sample of what are you trying will get you a concrete solution for a specific problem, otherwise you'll be pointed to [other tutorials](http://stackoverflow.com/a/13614297/1287812). — brasofilo, Apr 12 '13 at 17:05
Thanks guys I'll edit it with some code to make it clearer where I'm struggling. — cmdv, Apr 12 '13 at 18:27
@cmdv Just wondering if you ever got this figured out. I'm trying to do the same thing. — J82, Dec 31 '14 at 04:08

score 3 · Accepted Answer · edited May 23 '17 at 11:49

3

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.

edited May 23 '17 at 11:49

Community

1
1

answered Apr 12 '13 at 16:53

Adib Aroui

4,981
5
42
94

thanks I'll have a look through the link you've attached. I've also added some code to the question to make a bit more sense as to what I have at the moment – cmdv Apr 12 '13 at 19:46

Dynamically load post with ajax in wordpress

1 Answers1