I use Timber with WordPress.
I'm trying to create a list of posts with a "Load more posts"
button.
I would like to display 10 posts of the same category and to load 10 others posts of the same category when the user click on the button "Load more posts"
All work fine when there is no distinction between categories. The button "Load more posts"
work fine. 10 posts are display.
But when I try to display posts in the same category when I click on the button "Load more posts"
. No post are display. What's wrong with category ?
Can I have some help please ?
archive.php
$category = get_the_category($post->ID);
$category = $category[0]->cat_ID;
$context['posts'] = Timber::get_posts(array(
'post_type' => 'post',
'post_status' => 'publish',
'category__in' => array($category),
'posts_per_page' => 10,
'paged' => 1,
'has_password' => FALSE
));
script.js
function load_more_news() {
var page = 1;
$(document).on('click', '#load-more-news', function(e) {
e.preventDefault();
page++;
$.ajax({
type: 'POST',
url: '/wp-admin/admin-ajax.php',
dataType: 'html',
data: {
'action' : 'get_news',
'get_page' : page
},
success: function(data) {
if($('<div></div>').html(data).find('.archive__item.ended').size() > 0) $('#load-more-news').parents('.cta').remove();
else $('#load-more-news').parents('.cta').show();
$('#archive__list').append(data);
},
error: function(data) {
console.log(data);
}
});
});
}
functions.php
add_action( 'wp_ajax_nopriv_get_news', 'get_news' );
add_action( 'wp_ajax_get_news', 'get_news' );
function get_news() {
global $post;
$context = Timber::get_context();
$context['get_page'] = empty($_POST['get_page']) ? 1 : $_POST['get_page'];
$category = get_the_category($post->ID);
$category = $category[0]->cat_ID;
$context['posts'] = Timber::get_posts(array(
'post_type' => 'post',
'post_status' => 'publish',
'category__in' => array($category),
'posts_per_page' => 10,
'paged' => $context['get_page'],
'has_password' => FALSE
));
$count = count(Timber::get_posts(array(
'post_type' => 'post',
'posts_per_page' => -1,
'post_status' => 'publish',
'category__in' => array($category)
)));
if($count <= $context['get_page'] * 10) $context['ended'] = 'ended';
Timber::render( 'bloc_news.twig', $context );
die();
}
archive.twig
<section class="archive">
<p class="archive__title h-headline text-size-l">In the same thematic</p>
<div id="archive__list" class="archive__list">
<article class="post">
...
</article>
</div>
</section>
{% if posts|length >= 10 %}
<section class="cta">
<a href="#" id="load-more-news">
<p class="cta__text">Load more posts</p>
</a>
</section>
{% endif %}
I use Timber with WordPress.
I'm trying to create a list of posts with a "Load more posts"
button.
I would like to display 10 posts of the same category and to load 10 others posts of the same category when the user click on the button "Load more posts"
All work fine when there is no distinction between categories. The button "Load more posts"
work fine. 10 posts are display.
But when I try to display posts in the same category when I click on the button "Load more posts"
. No post are display. What's wrong with category ?
Can I have some help please ?
archive.php
$category = get_the_category($post->ID);
$category = $category[0]->cat_ID;
$context['posts'] = Timber::get_posts(array(
'post_type' => 'post',
'post_status' => 'publish',
'category__in' => array($category),
'posts_per_page' => 10,
'paged' => 1,
'has_password' => FALSE
));
script.js
function load_more_news() {
var page = 1;
$(document).on('click', '#load-more-news', function(e) {
e.preventDefault();
page++;
$.ajax({
type: 'POST',
url: '/wp-admin/admin-ajax.php',
dataType: 'html',
data: {
'action' : 'get_news',
'get_page' : page
},
success: function(data) {
if($('<div></div>').html(data).find('.archive__item.ended').size() > 0) $('#load-more-news').parents('.cta').remove();
else $('#load-more-news').parents('.cta').show();
$('#archive__list').append(data);
},
error: function(data) {
console.log(data);
}
});
});
}
functions.php
add_action( 'wp_ajax_nopriv_get_news', 'get_news' );
add_action( 'wp_ajax_get_news', 'get_news' );
function get_news() {
global $post;
$context = Timber::get_context();
$context['get_page'] = empty($_POST['get_page']) ? 1 : $_POST['get_page'];
$category = get_the_category($post->ID);
$category = $category[0]->cat_ID;
$context['posts'] = Timber::get_posts(array(
'post_type' => 'post',
'post_status' => 'publish',
'category__in' => array($category),
'posts_per_page' => 10,
'paged' => $context['get_page'],
'has_password' => FALSE
));
$count = count(Timber::get_posts(array(
'post_type' => 'post',
'posts_per_page' => -1,
'post_status' => 'publish',
'category__in' => array($category)
)));
if($count <= $context['get_page'] * 10) $context['ended'] = 'ended';
Timber::render( 'bloc_news.twig', $context );
die();
}
archive.twig
<section class="archive">
<p class="archive__title h-headline text-size-l">In the same thematic</p>
<div id="archive__list" class="archive__list">
<article class="post">
...
</article>
</div>
</section>
{% if posts|length >= 10 %}
<section class="cta">
<a href="#" id="load-more-news">
<p class="cta__text">Load more posts</p>
</a>
</section>
{% endif %}
Share
Improve this question
edited Aug 19, 2020 at 10:22
Jandon
asked Aug 19, 2020 at 10:01
JandonJandon
1471 silver badge9 bronze badges
1 Answer
Reset to default 2I think there is a small correction in your code, you just passing page number but you have pass category ID also. I've added data-category
attribute in load more button. So your archive.twig should like:
<section class="archive">
<p class="archive__title h-headline text-size-l">In the same thematic</p>
<div id="archive__list" class="archive__list">
<article class="post">
...
</article>
</div>
</section>
{% if posts|length >= 10 %}
<section class="cta">
<a href="#" id="load-more-news" data-category="YOUR_CATEGORY_ID_HERE">
<p class="cta__text">Load more posts</p>
</a>
</section>
{% endif %}
Pass data-category
attribute value via your script.js, So script.js code should like:
function load_more_news() {
var page = 1;
$(document).on('click', '#load-more-news', function(e) {
e.preventDefault();
page++;
$.ajax({
type: 'POST',
url: '/wp-admin/admin-ajax.php',
dataType: 'html',
data: {
'action' : 'get_news',
'get_page' : page,
'get_category' : $(this).data('category'),
},
success: function(data) {
if($('<div></div>').html(data).find('.archive__item.ended').size() > 0) $('#load-more-news').parents('.cta').remove();
else $('#load-more-news').parents('.cta').show();
$('#archive__list').append(data);
},
error: function(data) {
console.log(data);
}
});
});
}
Now receive data-category
attribute value in server side like get_page
, So your functions.php code should like:
add_action( 'wp_ajax_nopriv_get_news', 'get_news' );
add_action( 'wp_ajax_get_news', 'get_news' );
function get_news() {
global $post;
$context = Timber::get_context();
$context['get_page'] = empty($_POST['get_page']) ? 1 : $_POST['get_page'];
$context['get_category'] = isset($_POST['get_category']) ? $_POST['get_category'] : '';
$context['posts'] = Timber::get_posts(array(
'post_type' => 'post',
'post_status' => 'publish',
'category__in' => array($context['get_category']),
'posts_per_page' => 10,
'paged' => $context['get_page'],
'has_password' => FALSE
));
$count = count(Timber::get_posts(array(
'post_type' => 'post',
'posts_per_page' => -1,
'post_status' => 'publish',
'category__in' => array($context['get_category'])
)));
if($count <= $context['get_page'] * 10) $context['ended'] = 'ended';
Timber::render( 'bloc_news.twig', $context );
die();
}