Fetch Next / Prev wp posts from 1 category with Ajax WordPress
- SOLVED
Hello all,
I have a client that is dead-set on having a sort of dynamic testimonials section on his wordpress site. He wants users to be able to navigate next / previous testimonials.
I have reviewed several available "load wordpress post with ajax" posts or tutorials but they are severely lacking or don't work for me. I'm very expert with Wordpress, and theme editing but I know nothing about Ajax.
If a plugin existed (excluding bulky content sliders) I would be happy to use that. Ultimately I need to retrieve I'm guessing 5 to 10 posts from 1 category in wordpress and be able to navigate them with next / prev buttons.
Very simple
Below is the code I've used for wordpress. I don't know about the functionality with Ajax if it just dynamically changed the query on next request to choose offset=1 and continue to climb. That may work but I don't know if the same would work for going back previous.
<?php $testimonial = new WP_Query("showposts=1&category_name=testimonials"); while($testimonial->have_posts()) : $testimonial->the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
Additionally I don't know the efficiency of something like this. It may be better to create a div the house the post specifically with Ajax in mind and creating a query to load 5 posts and using next and previous to just carousel through them. I believe that would make the Ajax code more complex because when you reach the end, it would have to perform another query for the next 5 post.
Lastly... maybe it is necessary to run 2 functions... first to retrieve the total amount of posts from the category and then run the Ajax functions to retrieve the most recent 5, then the remaining 5. Ultimately I don't know much about Ajax but I'd really like to get this wrapped up.
<strong>UPDATE: To possibly help in seeing the ONLY page I need this functionality on, I have included the code of my page-home.php a custom template file that I am using in Wordpress attached to a page named home that is selected as the index page under Settings > Reading.
Also I am attaching an image of the theme page here where you can see the testimonial block as a small fixture on the right.</strong>
<?php
/*
Template Name: Home Page
*/
?>
<?php get_header(); ?>
<div id="upper" class="group">
<div id="content-home">
<?php $mainpost = new WP_Query("showposts=1&cat=-10"); while($mainpost->have_posts()) : $mainpost->the_post();?>
<div id="post-<?php the_ID(); ?>" <?php post_class('mainpost'); ?>>
<h1 class="sectionhead"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<hr />
<div class="entry-meta">
<span class="entry-date"><?php the_time( get_option( 'date_format' ) ); ?></span>
<span class="meta-sep"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/meta_sep.png" width="1" height="20" alt="" /></span>
<span class="cat-links"><?php echo get_the_category_list(', '); ?></span>
<span class="meta-sep"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/meta_sep.png" width="1" height="20" alt="" /></span>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'shape' ), __( '1 Comment', 'shape' ), __( '% Comments', 'shape' ) ) ?></span>
</div>
<div class="entry-content main-entry group">
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('main-thumb'); ?>
<?php endif; ?>
<?php echo content(50); ?>
</div><!-- .entry-content -->
</div><!-- #post-<?php the_ID(); ?> -->
<?php endwhile; ?>
</div><!-- #content-home -->
<div id="testimonials">
<h2 class="sectionhead">Testimonials</h2>
<div class="navigate group">
<span class="nav-prev"><a href="#" title="Previous"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/spacer.png" width="9" height="14" alt="" /></a></span>
<span class="nav-next"><a href="#" title="Next"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/spacer.png" width="9" height="14" alt="" /></a></span>
</div>
<hr />
<div id="testimonialblock">
<?php $testimonial = new WP_Query("showposts=1&category_name=testimonials"); while($testimonial->have_posts()) : $testimonial->the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
</div>
</div><!-- #upper -->
<div id="lower" class="group">
<?php $subpost = new WP_Query("showposts=2&offset=1&cat=-10"); while($subpost->have_posts()) : $subpost->the_post();?>
<div id="post-<?php the_ID(); ?>" <?php post_class('subpost'); ?>>
<h2 class="sectionhead"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php $excerpt = get_the_title(); echo string_limit_words($excerpt,4); ?></a></h2>
<hr />
<div class="entry-meta">
<span class="entry-date"><?php the_time( get_option( 'date_format' ) ); ?></span>
<span class="meta-sep"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/meta_sep.png" width="1" height="20" alt="" /></span>
<span class="cat-links"><?php echo get_the_category_list(', '); ?></span>
<span class="meta-sep"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/meta_sep.png" width="1" height="20" alt="" /></span>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'shape' ), __( '1 Comment', 'shape' ), __( '% Comments', 'shape' ) ) ?></span>
</div>
<div class="entry-content sub-entry group">
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('sub-thumb'); ?>
<?php endif; ?>
<p><?php echo excerpt(40); ?></p>
</div><!-- .entry-content -->
</div><!-- #post-<?php the_ID(); ?> -->
<?php endwhile; ?>
<div id="catlist">
<h2 class="sectionhead">See More</h2>
<hr />
<ul>
<?php foreach ( array(5, 7, 6, 8, 9) as $id ) wp_list_categories("show_count=1&hide_empty=0&title_li=&include=$id"); ?>
</ul>
</div>
</div>
<?php get_footer(); ?>
Answers (2)
Christianto answers:
Hi Gary,
If use plugin is allowed you can use [[LINK href="http://wordpress.org/extend/plugins/json-api/"]]wordpress json api[[/LINK]], with this plugin we can fetch the content in json format through http request for example:
http://yoursite.com/api/get_category_posts?slug=featured
With "featured" as your category.
I've done it before in [[LINK href="http://wpquestions.com/question/show/id/2151"]]this question[[/LINK]], with the help of [[LINK href="http://plugins.jquery.com/project/jquery-wordpress"]] jquery wordpress plugin[[/LINK]].
The jquery plugin currently didn't support category query, if you want to use wordpress json api, I can modify the jquery plugin API to support query category.
After we load all post in category using ajax and stored it on certain variable, then we can add event to certain element and manipulate the content like show next 5 posts, prev 5 posts base on the function attach to it.
Gary Smith comments:
Hello Christianto,
After reviewing the jquery wordpress plugin, I don't really understand the need for this. It says:
"<em>This plugin was developed to use the greats functionalities available on WordPress (posts, pages, categories, tags and comments) skipping the creation of WordPress PHP templates</em>"
This Ajax / jQuery / JSON whatever feature I need will only be on the home page... and the home page has its own custom template page-home.php which I have customized.
So if the plugin is designed to circumvent the need for custom pages then it would serve no purpose at least not in that one aspect because a custom page is already created.
Ultimately adding jQuery to this custom page does not bother me in the least. Even if the jQuery needs to be loaded into the footer... a footer-home.php template file could be created.
I don't mind using the plugin, but if it is unnecessary then bypassing it just means making things even quicker.
---
Attached is a screenshot of the area that would load next / previous posts from the testimonials category. This would be the only area on the page affected by this design. The concept obviously, to load different testimonials upon interacting with the next / prev symbols without impacting the index design.