Im trying to make a page that displays all of the archive posts of my posts with the category food(category id is 10). I am trying to set it up using col-md-4 so I would have three posts in one row. I think I added all of the necessary elements to my php file, I just don't know how to set it up now. I tried to set it up so that there is 4 column's of 3 posts (so 12 posts) and then after every 12 posts it would load the ajax load more button. Can anyone help me out in trying to get this to work. Thanks in advance.
UPDATED it is still not looping through the posts correctly - and it is only showing 1 post
<?php
get_header();
get_template_part ('inc/carousel-food');
$the_query = new WP_Query( [
'posts_per_page' => 12,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<article class="post">
<div class="row">
<div class="col-md-4"><?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
<?php get_template_part( 'share-buttons' ); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
</div>
</div>
</article>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
You are missing a loop that will repeat your posts code, once for each post.
Add this around your <article>:
<?php while ( $the_query->have_posts() ) : ?>
<?php $the_query->the_post(); ?>
<article> ...
... </article>
<?php endwhile; ?>
Related
I am using bootstrap to display the posts on my front page. I have my posts alternate between 2 rows of 3 posts and 1 large post. Everything looked good except for the fact that I noticed that if there is a longer title or excerpt in one of the posts then the rest of the page would be messed up (example below). After researching I've noticed the best solutions are to use row and clear fix. However every time I try adding a div of row I seem to be placing it in incorrectly. (I had some help constructing my front-page.php so I don't know the correct way to add it in) Can anyone help me correctly add in a div row into my front-page.php? I would appreciate it a lot, I've been trying to find a solution for weeks!
I have tried looking at different solutions to questions on here but I still can't correctly change my own code. So if anyone can help at all it would be greatly appreciated.
how it should look...
how it looks when I have a post that has a title (or excerpt) that goes on to multiple lines...
as you can see example post 12 moves all the way over to the right (where it should be on the left) example post 13 and 14 are moved underneath.
my front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) {
?>
<div id="ajax">
<?php
$i = 0;
while ( $the_query->have_posts() ) {
$the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after...
?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
} else { // Small posts
?>
<article <?php post_class( 'col-md-4' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
}
$i++;
}
?>
</div>
<?php
if(get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
You can create another variable $j = 0 and add row every 3rd small blog post.
<?php
/*
* Template Name:
*/
get_header();
get_template_part('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ($the_query->have_posts()) {
?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ($the_query->have_posts()) {
$the_query->the_post();
if ($i % 7 === 0) { // Large post: on the first iteration and every 7th post after...
?>
<div class="row">
<article <?php
post_class('col-sm-12 col-md-12');
?>>
<div class="large-front-container">
<?php
the_post_thumbnail('full', array(
'class' => 'large-front-thumbnail'
));
?>
</div>
<h2><a class="front-page-post-title" href="<?php
the_permalink();
?>"><?php
the_title();
?></a></h2>
<p class="front-page-post-excerpt"><?php
echo get_the_excerpt();
?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php
the_permalink();
?>">Read more</a>
<?php
get_template_part('front-shop-the-post');
?>
<?php
get_template_part('share-buttons');
?>
<div class="front-comments"><?php
comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div>
</div>
</article>
</div>
<?php
} else { // Small posts
?>
<?php
if ($j % 3 === 0)
echo '<div class="row">';
?>
<article <?php
post_class('col-md-4');
?>>
<?php
the_post_thumbnail('full', array(
'class' => 'medium-front-thumbnail'
));
?>
<h2><a class="front-page-post-title" href="<?php
the_permalink();
?>"><?php
the_title();
?></a></h2>
<p class="front-page-post-excerpt"><?php
echo get_the_excerpt();
?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php
the_permalink();
?>">Read more</a>
<?php
get_template_part('front-shop-the-post');
?>
<?php
get_template_part('share-buttons');
?>
<div class="front-comments"><?php
comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div>
</div>
</article>
<?php
$j++;
if ($j % 3 === 0)
echo '</div>';
?>
<?php
}
$i++;
}
?>
</div>
<?php
if (get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
} elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
I am working on a site with a page that has multiple sections, each section has multiple loops featuring multiple categories. I use Ajax Load More plugin to load new posts for each sections. The issue is when I click on Load More, it loads both the posts already shown and the one that hasn't been shown. I want it to load only new posts not already shown.
Here is the shortcode I used:
echo do_shortcode('[ajax_load_more container_type="div" post_type="post" posts_per_page="3" preloaded="true" preloaded_amount="4" pause="true" scroll="false" button_loading_label="Loading..." seo="true" category="church-music-news"]');
Here is the loop on on of the sections
<div class="row">
<div class="col-lg-12 col-sm-12">
<div class="music_box bg-color1">
<div class="music_box_top">
<?php
$sticky = get_option( 'sticky_posts' );
rsort( $sticky );
$args = array(
'post__in' => $sticky,
'posts_per_page' => 1,
'cat' => 34
);
$sticky_query = new WP_Query( $args );
while ( $sticky_query->have_posts() ) : $sticky_query->the_post();
?>
<a href="<?php the_permalink(); ?>">
<div class="fashion_box_thumb">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full', array() );
}
?>
</div>
</a>
<div class="fashion_box_text">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
<p><?php the_excerpt(); ?></p>
<div class="post_cont_icons">
<span class="fa fa-comments cmnt"> <?php comments_number('0','1','%'); ?></span>
<?php echo getPostLikeLink(get_the_ID());?>
<span class="matchtime2"><i class="fa fa-clock-o"></i> <?php the_time();?><br></span>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<div class="clear"></div>
</div><!--music_box_top-->
<div class="fashion_box_bottom">
<?php
$args = array(
'post__not_in' => get_option( 'sticky_posts' ),
'posts_per_page' => 4,
'cat' => 34
);
$sticky_query = new WP_Query( $args );
$count = 0;
while ( $sticky_query->have_posts() ) : $sticky_query->the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) :
?>
<div class="fashion_box_bottom_item">
<a href="<?php the_permalink(); ?>">
<h4><?php the_title(); ?></h4>
</a>
</div>
<?php elseif ($count == 2) : ?>
<div class="fashion_box_bottom_item">
<a href="<?php the_permalink(); ?>">
<h4><?php the_title(); ?></h4>
</a>
</div>
<?php elseif ($count == 3) : ?>
<div class="fashion_box_bottom_item">
<a href="<?php the_permalink(); ?>">
<h4><?php the_title(); ?></h4>
</a>
</div>
<?php elseif ($count == 4) : ?>
<div class="fashion_box_bottom_item">
<a href="<?php the_permalink(); ?>">
<h4><?php the_title(); ?></h4>
</a>
</div>
<div class="clear"></div>
</div><!--music_box_bottom-->
</div><!--music_box-->
</div><!--col-lg-12-->
<?php else :
get_template_part( 'woodclefpro/pro_template3' );
endif;
endwhile;
wp_reset_postdata(); ?>
</div><!--row-->
<div class="row">
<?php
echo do_shortcode('[ajax_load_more container_type="div" post_type="post" posts_per_page="3" preloaded="true" preloaded_amount="4" pause="true" scroll="false" button_loading_label="Loading..." seo="true" category="church-music-news"]');
?>
</div>
This is for those that might come across the question above and are facing the same issue that I was. Here is how I solved it.
Add the code below right before endwhile
$do_not_duplicate[] = $post->ID;
Add this inside your shortcode: post__not_in="'.$post__not_in.'"
Then your final shortcode looks like this:
echo do_shortcode('[ajax_load_more ajax_load_more post__not_in="'.$post__not_in.'" container_type="div" post_type="post" posts_per_page="3" preloaded="true" preloaded_amount="4" pause="true" scroll="false" button_loading_label="Loading..." seo="true" category="church-music-news"]');
Not quite right. The fact is that on the page of one of the Addons to this plugin say that the template output single entry, for example "single.php" should be nothing but a shortcode. All content single.php should be placed in the template used by the plugin. Sorry for the crooked English.
https://connekthq.com/plugins/ajax-load-more/add-ons/single-posts/
Note: Ajax Load More will take care of loading ALL posts, including
the initial post when a user lands on the page. All that should remain
in your single.php loop is the ajax_load_more shortcode (as seen
above).
I'm trying to add a load more button to my front page. I have my posts set up so that I have one post in a row, and then 3 posts in a row, another 3 posts in a row, and then 1,3,3,etc. I want to add the load more button after 14 posts. I've added the short code however now when I press the load more button the posts appear all wonky. I have figured out its because I never customized my repeater code. However, I can't figure out how to properly add my template to the repeater code since I had a lot of help writing the code for my front-page.php. If anyone can help me out I would really appreciate it.
The plugin I am using is - https://wordpress.org/plugins/ajax-load-more/faq/
my front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article><?php
} else { // Small posts ?>
<article <?php post_class( 'col-sm-6 col-md-4' ); ?>>
<div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div>
<a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article>
<?php
}
$i++;
}
wp_reset_postdata();?>
</div>
<?php
}
else {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
echo do_shortcode( '[ajax_load_more id="ajax-load" post_type="post" posts_per_page="14" pause="true" scroll="false" button_label="LOAD MORE"]' );
get_footer();
I've asked the author for help and hist suggestion was to use Ajax Load More variables (https://connekthq.com/plugins/ajax-load-more/docs/variables/) so something like this...
if ( $alm_item % 7 === 0 ) { // Large posts
} else { // Small posts
}
so I have now tried the following for my repeater template but it still does not work...
<?php
/*
* Template Name:
*/
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax-load">
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $alm_item % 7 === 0 ) { // Large posts ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article><?php
} else { // Small posts ?>
<article <?php post_class( 'col-sm-6 col-md-4' ); ?>>
<div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div>
<a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
In my wordpress I have many posts, every page I am showing 5 posts.
Bottom of my page I have next and prev button. When I click one the next button it will go to /page/2/ link but this page title is showing Page not found. And it's not showing other posts in page 2.
My next and prev code :
<div class="prev-next-btn">
<?php next_posts_link( __( 'next', 'themename' ) ); ?>
</div>
<div class="prev-next-btn">
<?php previous_posts_link( __( 'prev', 'themename' ) ); ?>
</div>
My index.php code :
<div class="center-content">
<ul>
<?php query_posts('posts_per_page=5'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<div class="date">In
<?php
$category = get_the_category();
if(!empty($category))
echo ''.$category[0]->cat_name.'';
?>
- <?php the_time('d M, Y') ?>
</div>
<!--<div class="auther">by <?php the_author(); ?> <span> - <?php comments_number( 'no comments', 'one comment', '% comments' ); ?> Reply</span></div>-->
<div class="title clear-both"><h2><?php the_title(); ?></h2></div>
<div class="details"><p><?php the_excerpt(); ?></p></div>
<div class="readmore">Read more</div>
<br>
</li>
<?php endwhile; ?>
</ul>
</div>
<div class="pagination">
<?php
if(function_exists('wp_pagenavi')) {
wp_pagenavi();
}
else {
?>
<div class="prev-next-btn">
<?php next_posts_link( __( 'next', 'themename' ) ); ?>
</div>
<div class="prev-next-btn">
<?php previous_posts_link( __( 'prev', 'themename' ) ); ?>
</div>
<?php } ?>
</div>
<?php else : ?>
404 Nothing here. Sorry.
<?php endif; ?>
</div>
You do have a few issues here
NEVER EVER use query_posts. It is slow, reruns queries, breaks and fails silently with pagination and worse of all, it breaks the main query object. If you break the main query object, you break page functions. So, please never use query_posts. Mke if it never existed
You have replaced the main query loop with a custom query, which you must not do. If you need to show a different amount of posts on a particular page ( not on page templates and a static front page though as this will not work there ), then use pre_get_posts. You need to go and read how helpful that action is and how to use it
Remove this line
<?php query_posts('posts_per_page=5'); ?>
Then add the following in your functions file
add_action( 'pre_get_posts', function ( $query )
{
if ( $query->is_home() && $query->is_main_query() ) {
$query->set( 'posts_per_page', 5 );
}
});
<?php
// set the "paged" parameter (use 'page' if the query is on a static front page)
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
// the query
$the_query = new WP_Query( 'cat=1&paged=' . $paged );
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php
// the loop
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<?php the_title(); ?>
<?php endwhile; ?>
<?php
// next_posts_link() usage with max_num_pages
next_posts_link( 'Next', $the_query->max_num_pages );
previous_posts_link( 'Previous' );
?>
<?php
// clean up after the query and pagination
wp_reset_postdata();
?>
<?php endif; ?>
Just add below code: I added 'paged' variable and set in next_posts_link() and previous_posts_link()..please see below code:
<div class="center-content">
<ul>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts(array('posts_per_page'=>5,'paged'=>$paged )); ?>
<?php if (have_posts()) : while (have_posts()) :the_post(); ?>
<li>
<div class="date">In
<?php
$category = get_the_category();
if(!empty($category))
echo ''.$category[0]->cat_name.'';
?>
- <?php the_time('d M, Y') ?>
</div>
<!--<div class="auther">by <?php the_author(); ?> <span> - <?php comments_number( 'no comments', 'one comment', '% comments' ); ?> Reply</span></div>-->
<div class="title clear-both"><h2><?php the_title(); ?></h2></div>
<div class="details"><p><?php the_excerpt(); ?></p></div>
<div class="readmore">Read more</div>
<br>
</li>
<?php endwhile; ?>
</ul>
</div>
<div class="pagination">
<?php
global $wp_query;
if(function_exists('wp_pagenavi')) {
wp_pagenavi();
}
else { echo 'test';
?>
<div class="prev-next-btn">
<?php echo next_posts_link( __( 'next', 'themename' ) , $wp_query->max_num_pages ); ?>
</div>
<div class="prev-next-btn">
<?php echo previous_posts_link( __( 'prev', 'themename' ) , $wp_query->max_num_pages ); ?>
</div>
<?php } ?>
</div>
<?php else : ?>
404 Nothing here. Sorry.
<?php endif; ?>
</div>
I'm trying to use offset on a specific WP_Query on a page that has a total of 3 Loops with the code described here.
For now, this works but I can only target all three loops. What (I think) I have to do is change this part:
//Before anything else, make sure this is the right query...
if ( ! $query->is_posts_page ) {
return;
}
To something like this:
//Before anything else, make sure this is the right query...
if ( ! $query->$THELOOPIWANTTOTARGET ) {
return;
}
Is there a way to do this?
The query:
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$mainloop = new WP_Query(array('posts_per_page' => 3, 'paged' => $paged));
?>
<div class="full padding center isotope">
<?php if ( $mainloop->have_posts() ) : while ( $mainloop->have_posts() ) : $mainloop->the_post(); ?>
<article class="post">
<?php the_post_thumbnail(); ?>
<div class="textwrap">
<h2><?php the_title(); ?></h2>
<?php if ( get_field('bron')): ?>
<?php if ( get_field('bron')): ?><a href="<?php the_field('bron_link'); ?>" target="_blank" class="source"><?php endif; ?>
<?php the_field('bron'); ?>
<?php if ( get_field('bron')): ?></a><?php endif; ?>
<?php endif; ?>
<?php the_excerpt(); ?>
</div>
<div class="readmore">
<div class="fa fa-share share" id="<?php the_ID(); ?>">
<div class="share_block"><div class="addthis_sharing_toolbox" data-url="<?php the_permalink(); ?>"></div></div>
</div>
Lees verder
</div>
</article>
<?php endwhile; ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div>