I am trying to use ajax for a Load more posts button on a Custom Post Type
In my functions file I have this:
add_action('rest_api_init', 'custom_api_get_news');
function custom_api_get_news(){
register_rest_route( 'news', '/news', array(
'methods' => 'GET',
'callback' => 'custom_api_get_news_callback'
));
}
function custom_api_get_news_callback($request){
$posts_data = array();
$paged = $request->get_param('page');
$paged = (isset($paged) || !(empty($paged))) ? $paged : 1;
$posts = get_posts( array(
'post_type' => 'news',
'status' => 'published',
'posts_per_page' => 6,
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => $paged
));
foreach($posts as $post){
$id = $post->ID;
$post_thumbnail = (has_post_thumbnail($id)) ? get_the_post_thumbnail_url($id) : null;
$post_cat = get_the_category($id);
$posts_data[] = (object)array(
'id' => $id,
'slug' => $post->post_name,
'type' => $post->post_type,
'title' => $post->post_title,
'featured_img_src' => $post_thumbnail,
'category' => $post_cat[0]->cat_name
);
}
return $posts_data;
}
In my js file I have:
$('#loadButton').click(function() {
let pull_page = 1;
let jsonFlag = true;
if(jsonFlag) {
jsonFlag = false;
pull_page++;
$.getJSON("/wp-json/news/all-posts?page=" + pull_page, function(data){
if(data.length){
var items = [];
$.each(data, function(key, val){
const arr = $.map(val, function(el) {
return el
});
const post_url = arr[1];
const post_title = arr[3];
const post_img = arr[4];
const post_cat = arr[5];
const post_class = (class_counter == 2) ? 'post adjust' : 'post';
let item_string = '<div class="news__holder">' + post_img + '</div>';
items.push(item_string);
});
if(data.length >= 6){
$("#news-archive").append(items);
} else {
$("#news-archive").append(items);
$("#load-more").hide();
}
} else {
$("#load-more").hide();
}
}).done(function(data){
if(data.length){
jsonFlag = true;
}
});
}
});
And on the archive page:
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'news',
'post_status' => 'publish',
'posts_per_page' => 6,
'order_by' => 'post_date',
'order' => 'DESC',
'paged' => $paged
);
$news = new WP_Query( $args );
if( $news->have_posts() ) :
?>
<section id="news-archive" class="news">
<?php while( $news->have_posts() ): $news->the_post(); ?>
<div class="news__holder">
<?php the_post_thumbnail(); ?>
<p class="news__holder__date"><?php the_date(); ?></p>
<h3><?php the_title(); ?></h4>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</section>
<?php
if($news->post_count < 6) {
} else {
?>
<section id="load-more" class="load-more">
<div class="load-more__holder">
<button id="loadButton" type="button" name="button">Load More Posts</button>
</div>
</section>
<?php } ?>
<?php endif; ?>
The problem I am having is when I click on the Load More button I am getting an error in the console of GET http://localhost:8888/una/wp-json/news/all-posts?page=2 404 (Not Found)
I am not sure if this matters but I had seen on a few other posts some people having trouble with this part but mine is returning the json fine if you go to http://localhost:8888/una/wp-json/news -- Below is what is shown at this url. Any ideas on how to solve this error?
{"namespace":"news","routes":{"\/news":{"namespace":"news","methods":["GET"],"endpoints":[{"methods":["GET"],"args":{"namespace":{"required":false,"default":"news"},"context":{"required":false,"default":"view"}}}],"_links":{"self":"http:\/\/localhost:8888\/una\/wp-json\/news"}},"\/news\/news":{"namespace":"news","methods":["GET"],"endpoints":[{"methods":["GET"],"args":[]}],"_links":{"self":"http:\/\/localhost:8888\/una\/wp-json\/news\/news"}}},"_links":{"up":[{"href":"http:\/\/localhost:8888\/una\/wp-json\/"}]}}
I am trying to use ajax for a Load more posts button on a Custom Post Type
In my functions file I have this:
add_action('rest_api_init', 'custom_api_get_news');
function custom_api_get_news(){
register_rest_route( 'news', '/news', array(
'methods' => 'GET',
'callback' => 'custom_api_get_news_callback'
));
}
function custom_api_get_news_callback($request){
$posts_data = array();
$paged = $request->get_param('page');
$paged = (isset($paged) || !(empty($paged))) ? $paged : 1;
$posts = get_posts( array(
'post_type' => 'news',
'status' => 'published',
'posts_per_page' => 6,
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => $paged
));
foreach($posts as $post){
$id = $post->ID;
$post_thumbnail = (has_post_thumbnail($id)) ? get_the_post_thumbnail_url($id) : null;
$post_cat = get_the_category($id);
$posts_data[] = (object)array(
'id' => $id,
'slug' => $post->post_name,
'type' => $post->post_type,
'title' => $post->post_title,
'featured_img_src' => $post_thumbnail,
'category' => $post_cat[0]->cat_name
);
}
return $posts_data;
}
In my js file I have:
$('#loadButton').click(function() {
let pull_page = 1;
let jsonFlag = true;
if(jsonFlag) {
jsonFlag = false;
pull_page++;
$.getJSON("/wp-json/news/all-posts?page=" + pull_page, function(data){
if(data.length){
var items = [];
$.each(data, function(key, val){
const arr = $.map(val, function(el) {
return el
});
const post_url = arr[1];
const post_title = arr[3];
const post_img = arr[4];
const post_cat = arr[5];
const post_class = (class_counter == 2) ? 'post adjust' : 'post';
let item_string = '<div class="news__holder">' + post_img + '</div>';
items.push(item_string);
});
if(data.length >= 6){
$("#news-archive").append(items);
} else {
$("#news-archive").append(items);
$("#load-more").hide();
}
} else {
$("#load-more").hide();
}
}).done(function(data){
if(data.length){
jsonFlag = true;
}
});
}
});
And on the archive page:
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'news',
'post_status' => 'publish',
'posts_per_page' => 6,
'order_by' => 'post_date',
'order' => 'DESC',
'paged' => $paged
);
$news = new WP_Query( $args );
if( $news->have_posts() ) :
?>
<section id="news-archive" class="news">
<?php while( $news->have_posts() ): $news->the_post(); ?>
<div class="news__holder">
<?php the_post_thumbnail(); ?>
<p class="news__holder__date"><?php the_date(); ?></p>
<h3><?php the_title(); ?></h4>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</section>
<?php
if($news->post_count < 6) {
} else {
?>
<section id="load-more" class="load-more">
<div class="load-more__holder">
<button id="loadButton" type="button" name="button">Load More Posts</button>
</div>
</section>
<?php } ?>
<?php endif; ?>
The problem I am having is when I click on the Load More button I am getting an error in the console of GET http://localhost:8888/una/wp-json/news/all-posts?page=2 404 (Not Found)
I am not sure if this matters but I had seen on a few other posts some people having trouble with this part but mine is returning the json fine if you go to http://localhost:8888/una/wp-json/news -- Below is what is shown at this url. Any ideas on how to solve this error?
{"namespace":"news","routes":{"\/news":{"namespace":"news","methods":["GET"],"endpoints":[{"methods":["GET"],"args":{"namespace":{"required":false,"default":"news"},"context":{"required":false,"default":"view"}}}],"_links":{"self":"http:\/\/localhost:8888\/una\/wp-json\/news"}},"\/news\/news":{"namespace":"news","methods":["GET"],"endpoints":[{"methods":["GET"],"args":[]}],"_links":{"self":"http:\/\/localhost:8888\/una\/wp-json\/news\/news"}}},"_links":{"up":[{"href":"http:\/\/localhost:8888\/una\/wp-json\/"}]}}
The URL you're using is not the URL that you've registered.
This code:
register_rest_route( 'news', '/news', array(
'methods' => 'GET',
'callback' => 'custom_api_get_news_callback'
));
Registers this URL:
http://localhost:8888/una/wp-json/news/news
But you're sending requests to
http://localhost:8888/una/wp-json/news/all-posts
Nowhere in your code have you defined an all-posts endpoint.
You either need to change /news in register_rest_route() to /all-posts, or the /all-posts in your URL to /news. They need to be the same.