I would need the following in Wordpress:
<div class="posts-wrapped">
<div id="post-1" class="post">
<h1>Title 1</h1>
</div>
<div id="post-2" class="post">
<h1>Title 2</h1>
</div>
</div>
<div class="posts-wrapped">
<div id="post-3" class="post">
<h1>Title 3</h1>
</div>
<div id="post-4" class="post">
<h1>Title 4</h1>
</div>
</div>
I know how to get posts with WP loop, but how can I wrap every two posts in .posts-wrapped div?
I fetch the posts with WP_Query.
Thanks!
EDIT:
So I tried few ways to do it. For example with this:
$index=0;
<div class="posts-wrapped">
<?php
while ( have_posts() ) {
$index++;
?>
<div class="post">
<h1><?php the_post(); ?></h1>
</div> <?php
if(($index % 2) ==0){
echo '</div><div class="posts-wrapped">';
}
} ?>
</div>
But this prints one extra empty posts-wrapped div:
<div class="posts-wrapped">
Lorem ipsum 1<br>
Lorem 2 ipsum est<br>
</div>
<div class="posts-wrapped">
Lorem ipsum 1<br>
Lorem 2 ipsum est<br>
</div>
<div class="posts-wrapped">
</div>
How can i get rid of this last empty div? It screws my carousel (this content is part of carousel).
Get the index that counts the loop iteration and check the modulus operation to know that its even or odd
$index=0;
<div class="posts-wrapped">
<?php
while ( have_posts() ) {
$index++;
?>
<div class="post">
<h1><?php the_post(); ?></h1>
</div> <?php
if(($index % 2) ==0){
echo '</div><div class="posts-wrapped">';
}
} ?>
</div>
this should work:
<?php
while(have_posts()){
the_post();
?>
<div class="posts-wrapped">
<div class="post">
<h1><?php the_title(); ?></h1>
</div>
<?php
if(have_posts()){ //Makes sure you have another post
the_post();
?>
<div class="post">
<h1><?php the_title(); ?></h1>
</div>
<?php
}
?>
</div>
<?php
}
?>
<?php
$i = 0;
if (have_posts()) :
while (have_posts()) : the_post();
if($i == 0) {
echo '<div class="posts-wrapped">';
} ?>
<div class="post">
<h1><?php the_title(); ?></h1>
</div>
<?php
$i++;
if($i == 2) {
$i = 0;
echo '</div>';
}
endwhile;
if($i > 0) {
echo '</div>';
}
?>
Would you please try above code?
Related
Very new Wordpress apprentice here. Trying to get my archive page to display posts in two columns going like:
Post 1 Post 2
Post 3 Post 4
Here is an example from a figma we were working on: https://ibb.co/N3XwtwD
My question is, what code can I add to my files to allow this? I currently have some bootstrap classes on the html portion I inserted here and it is displaying as one column, so I don't know if those classes will interfere with anything. Here is my archive.php code below:
<?php
get_header();
?>
<div class="container mt-5 mb-5">
<p class="font-size"><?php the_archive_title(); ?></p>
<hr>
</div>
<div class="container">
<?php
while(have_posts()) {
the_post(); ?>
<div class="row">
<div class="col-lg-6">
<p class="font-size text-center"><?php the_title();?></p>
<img class="img-fluid mb-3"<?php
the_post_thumbnail();
?>
<p class="category-font">Published on <?php the_time('n.j.y');?></p>
<p>Posted by <?php the_author_posts_link() ?></p>
</div>
</div>
<?php }
echo paginate_links();
?>
</div>
<?php
get_footer();
?>
First time posting here so apologies if I left anything important out. Really appreciate this place!
Thanks!
You need to create a row every two posts and you have to add <div class="col-lg-6"> two times in a row. check below code.
<?php get_header(); ?>
<div class="container mt-5 mb-5">
<p class="font-size"><?php the_archive_title(); ?></p>
<hr>
</div>
<div class="container">
<?php
$count = 1;
while( have_posts() ) { the_post();
if ( $count % 2 == 1){ ?>
<div class="row">
<?php } ?>
<div class="col-lg-6">
<p class="font-size text-center"><?php the_title();?></p>
<?php the_post_thumbnail(); ?>
<p class="category-font">Published on <?php the_time('n.j.y');?></p>
<p>Posted by <?php the_author_posts_link() ?></p>
</div>
<?php if ( $count % 2 == 0 ){ ?>
</div>
<?php } $count++; ?>
<?php }
if ( $count % 2 != 1 ) echo "</div>";
echo paginate_links(); ?>
</div>
Please replace with the below code that helps you.
<?php
get_header();
?>
<div class="container mt-5 mb-5">
<p class="font-size"><?php the_archive_title(); ?></p>
<hr>
</div>
<div class="container">
<?php
$counterval = 0;
while(have_posts()) {
the_post();
$counterval++;
if($counterval % 2 != 0)
{ ?>
<div class="row">
<?php } ?>
<div class="col-lg-6">
<p class="font-size text-center"><?php the_title();?></p>
<?php $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
if(!empty($featured_img_url)){ ?>
<img class="img-fluid mb-3" src="<?php echo esc_url($featured_img_url); ?>" />
<?php } ?>
<p class="category-font">Published on <?php the_time('n.j.y');?></p>
<p>Posted by <?php the_author_posts_link() ?></p>
</div>
<?php
if($counterval % 2 == 0)
{ ?>
</div>
<?php } ?>
<?php } ?>
<?php echo paginate_links();
?>
</div>
<?php
get_footer();
?>
Using bootstrap in wordpress, I'm trying to get my blog page to have the 1st latest post as a col-sm-12 (which is working) and then have the remaining posts fall into 2 columns where all the even # posts show up in the left column and the odd # posts show up in the right column. My left column loop is working but my right column isn't pulling the odd posts starting at the 3rd post ... please help! http://dev.starship.capital/blog/
<div class="container">
<div class="row">
<h2 style="color: white; text-align: center;">Latest Posts</h2>
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
<?php endif; endwhile; else: ?>
<div class="col-md-6 entry blog-menu">
<article class="entry">
<a href="<?php the_permalink(); ?>">
<div class="blog-overlay"></div>
<?php if ( has_post_thumbnail()) the_post_thumbnail('excerpt-thumb'); ?>
</a>
<div class="entry-content clear">
<div style="padding: 1% 15%;">
<?php the_category(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<p>Posted on: <?php the_time(get_option('date_format') ); ?> By <?php the_author(); ?> | <?php $totalcomments = get_comments_number(); echo $totalcomments; ?> Comments</p>
</div>
</div>
</article>
<?php endif; ?>
</div>
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<?php endif; endwhile; else: ?>
<div class="col-md-6 entry blog-menu">
<article class="entry">
<a href="<?php the_permalink(); ?>">
<div class="blog-overlay"></div>
<?php if ( has_post_thumbnail()) the_post_thumbnail('excerpt-thumb'); ?>
</a>
<div class="entry-content clear">
<div style="padding: 1% 15%;">
<?php the_category(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<p>Posted on: <?php the_time(get_option('date_format') ); ?> By <?php the_author(); ?> | <?php $totalcomments = get_comments_number(); echo $totalcomments; ?> Comments</p>
</div>
</div>
</article>
<?php endif; ?>
<?php endwhile; ?>
</div>
</div>
to learn wordpress development, I'm building a wordpress theme from scratch .
Now i want to add pagination on my category page but the problem is:
when i click on older-post-link the url change from "http://localhost/wordpress4/category/bloc1/" to "http://localhost/wordpress4/category/bloc1/page/2/" but it take me to a blank page instead of showing the other posts.
this is the code on the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
if(have_posts()) : while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-6 text-left">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-6 text-right">
<?php previous_posts_link('Newer post >>'); ?>
</div>
<?php
endif;
?>
</div>
</div>
<?php get_footer(); ?>
I noticed that if i add the code below to my index.php the pagination work also on the category page.
but the second category page("http://localhost/wordpress4/category/bloc1/page/2/") will take the markup of index.php so the posts will not be in a grid format like the first category page.
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
also on the category page the older post-link show up between rows instead of showing at the bottom of the pages.
finally this is the code on my index.php
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<?php
if(have_posts()):
while(have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<h3><?php the_title(); ?></h3>
<small><?php the_category(); ?></small>
</a>
<p><?php the_content(); ?></p>
<hr/>
<?php endwhile;
endif;
?>
</div>
<div class="col-xs-12 col-sm-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Thank You.
Use this code, may be it will solve your problem
<?php
// the query to set the posts per page to 3
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 3, 'paged' => $paged );
query_posts($args); ?>
<!-- the loop -->
<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
<!-- rest of the loop -->
<!-- the title, the content etc.. -->
<?php endwhile; ?>
<!-- pagination -->
<div class="row">
<div class="col-xs-12>"
<div class="col-xs-6 text-left"><?php next_posts_link(); ?></div>
<div class="col-xs-6 text-right"><?php previous_posts_link(); ?></div>
</div>
</div>
<?php else : ?>
<!-- No posts found -->
<?php endif; wp_reset_postdata(); ?>
for more details, check this link https://codex.wordpress.org/Pagination
After a lot of searching i was able to find a solution .
The problem was that the The "Blog pages show at most" in the wordpress reading settings was interfering with the "posts_per_page=4" that i declared through the query_posts().
The solution :
I deleted the "query_posts()" because it is best to use the WP_Query() or the pre_get_posts filter.
for me even with using wp_query i couldnt get the pagination to work so i tried using the pre_get_posts filter and it worked .
so in the category.php i deleted the query_posts and used just the normal loop.
this is my new code in the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
if(have_posts()) :
while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-12 text-left ">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-12 text-right ">
<?php previous_posts_link('Newer post >>'); ?>
</div>
</div>
<?php
endif;
?>
</div>
<?php get_footer(); ?>
Then I added the pre_get_posts action on my function.php
this is the code:
add_action( 'pre_get_posts', function ( $q )
{
if ( !is_admin() // Very important, otherwise back end queries will be affected as well
&& $q->is_main_query() // Very important, we just need to modify the main query
&& $q->is_category() // Only target category pages
) {
$q->set( 'posts_per_page', 2 );
}
});
I hope my answer will help someone who have the same problem i had even if my answer is not so well explained.
for more info search for something like this:
using pagination with the wp_query
using pre_get_posts to set pagination for a custom page.
It will be so nice if a developer could explain my solution in more details and give us more information about using pre_get_posts to set pagination for a custom page.
I am working on a custom theme and on one of the pages i need to style the posts pages as follows: http://gyazo.com/e1f7cfc03c7ba3981188077afcdf0314
The grey box is an image and the red box is content. I need to use perhaps an odd/even Li/Ul pseudo class/selector but i have no idea how to do it.
Could anyone offer me a way to start it up? I was thinking of using the Odd/Even pseudo class on UL to change the divs names however i can't think how to do it or where to start.
Thanks!
Edit: I am thinking perhaps odd/even selector combined with jquery prepend/append?
Edit2: this is what i have however it is displaying all the Odds first then all of the Evens instead of alternatively.
PHP:
<?php $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="section group">
<div class="col span_1_of_2 blue doubleheight">
<?php the_post_thumbnail('large'); ?>
</div>
<div class="col span_1_of_3_30 blue doubleheight">
<h2><?php the_title(); ?></h2>
<div class="post-text"><?php the_excerpt(); ?></div>
</div>
</div>
<?php echo $i; ?>
<?php endif; endwhile; ?>
<?php while(have_posts()) : ?>
<?php $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="section group">
<div class="col span_1_of_3_30 blue doubleheight">
<h2><?php the_title(); ?></h2>
<div class="post-text"><?php the_excerpt(); ?></div></div>
<div class="col span_1_of_2 blue doubleheight">
<?php the_post_thumbnail('large'); ?>
</div>
</div>
<?php echo $i; ?>
<?php endif; endwhile; ?>
Since you are in the loop, you can use the build in loop counter ($wp_query->current-post) to add a different class to all odds or all evens or both
There is no need to run two loops. Here is an example of how I use this in my website to create two post columns
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* Start the Loop */ ?>
<div class="entry-content-<?php if( $wp_query->current_post%2 == 1 ){ echo ' left-post';}else{ echo ' right-post';} ?>">
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php endwhile; ?>
EDIT
I misunderstood you in my original answer, but you can still use the same idea as I used there. Here is something you can try. Just replace all your code with this
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* Start the Loop */
if($wp_query->current_post%2 == 1 ) { ?>
<div class="section group">
<div class="col span_1_of_2 blue doubleheight">
<?php the_post_thumbnail('large'); ?>
</div>
<div class="col span_1_of_3_30 blue doubleheight">
<h2><?php the_title(); ?></h2>
<div class="post-text">
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php }else{ ?>
<div class="section group">
<div class="col span_1_of_3_30 blue doubleheight">
<h2><?php the_title(); ?></h2>
<div class="post-text">
<?php the_excerpt(); ?>
</div>
</div>
<div class="col span_1_of_2 blue doubleheight">
<?php the_post_thumbnail('large'); ?>
</div>
</div>
<?php }
<?php endwhile; ?>
<?php endif; ?>
The following produces 2 posts in the loop with the surrounding div row-fluid. Then it creates another 2 posts after. Why is this?
EDIT:code above as requested:
<?php get_header(); ?>
<section class="clearfix" id="home">
<div class="row-fluid">
<?php $count = 1; ?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="span4">
<div class="wrap-title">
<div class="position">
<div class="title"><?php the_title();?></div>
<div class="tags"><?php echo $cats; ?> </div>
</div>
</div>
</div>
<?php if($count == 2) {
echo '</div>';
}?>
<?php $count++; ?>
<?php endwhile; ?>
I posted here as apposed to wordpress as I'm anticipating it being a PHP syntax error, something with the count variable possibly or where the row-fluid div is positioned.
Although I would create a code differently, the solution to your problem I believe is to modify your code to this:
<?php get_header(); ?>
<section class="clearfix" id="home">
<?php $count = 1; ?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if($count % 2 == 0) {
<div class="row-fluid">
}?>
<div class="span4">
<div class="wrap-title">
<div class="position">
<div class="title"><?php the_title();?></div>
<div class="tags"><?php echo $cats; ?> </div>
</div>
</div>
</div>
<?php if($count % 2 == 0) {
echo '</div>';
}?>
<?php $count++; ?>
<?php endwhile; ?>
EDIT:
You said it produces 2 posts after also - that is why you will add </div> after first two posts, and then after that you will continue printing. The solution would be to use the code above - with % or to print only two posts use this code:
<?php get_header(); ?>
<section class="clearfix" id="home">
<div class="row-fluid">
<?php $count = 1; ?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="span4">
<div class="wrap-title">
<div class="position">
<div class="title"><?php the_title();?></div>
<div class="tags"><?php echo $cats; ?> </div>
</div>
</div>
</div>
<?php if($count == 2) {
break;
}?>
<?php $count++; ?>
<?php endwhile; ?>
</div>
But the above code could be optimized not to search for all posts, but it should will work as is.