How can I display posts side by side? - wordpress

I created the WordPress loop below to display posts from a certain category in a row side by side. I'm having trouble because they are displayed on top of each other. I'm using Bootstrap 4
<?php
$args = array(
'category_name' => 'featured',
'posts_per_page' => 4
);
$the_query = new WP_Query($args);
?>
<?php if($the_query->have_posts()): while($the_query->have_posts()): $the_query->the_post(); ?>
<div class="row featured-row">
<div class="col-md-3">
<?php the_post_thumbnail( 'fimage', array('class' => 'img-fluid') ); ?>
<h5><?php the_title(); ?></h5>
<em>Posted on - <?php echo get_the_date(); ?></em>
<em>Written by - <?php the_author(); ?></em>
</div>
<?php endwhile; ?>
<?php endif; ?>
<hr>
</div>
<?php wp_reset_postdata(); ?>

Try these :
<?php
$args = array(
'category_name' => 'featured',
'posts_per_page' => 4
);
$the_query = new WP_Query($args);
?>
<?php if($the_query->have_posts()): ?>
<div class="row featured-row">
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
<div class="col-md-3">
<?php the_post_thumbnail( 'fimage', array('class' => 'img-fluid') ); ?>
<h5><?php the_title(); ?></h5>
<em>Posted on - <?php echo get_the_date(); ?></em>
<em>Written by - <?php the_author(); ?></em>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

Put your div with class row outside the loop. Use below code
<?php
$args = array(
'category_name' => 'featured',
'posts_per_page' => 4
);
$the_query = new WP_Query($args);
if($the_query->have_posts()):
echo ' <div class="row featured-row">';
while($the_query->have_posts()): $the_query->the_post(); ?>
<div class="col-md-3">
<?php the_post_thumbnail( 'fimage', array('class' => 'img-fluid') ); ?>
<h5><?php the_title(); ?></h5>
<em>Posted on - <?php echo get_the_date(); ?></em>
<em>Written by - <?php the_author(); ?></em>
</div>
<?php endwhile;
echo '</div>';
endif; ?>
<hr>
<?php wp_reset_postdata(); ?>

Related

Pagination in Wordpress after the 5 latest posts

How do I add pagination to this code? It currently shows latest articles.
Pagination can be after every 3 or 5 or 10 posts.
<?php
$the_query = new WP_Query( array(
'category_name' => $category_name,
'offset' => 1, //ignore the first 4 posts and show remaining
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 3,
'ignore_sticky_posts' => true,
));
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="home__full">
<div class="row">
<div class="col-md-3">
<small><?php the_time('F jS, Y') ?> • <?php echo reading_time(); ?> • <?php $cat = get_the_category(); echo $cat[0]->cat_name; ?></small>
</div>
<div class="col-md-6">
<h3><?php echo substr(get_the_title(),0,95); ?></h3>
<div class="home__latest--excerpt"><p><?php echo substr(get_the_excerpt(),0,140); ?></p></div>
</div>
<div class="col-md-3">
<a href="<?php the_permalink() ?>">
<?php if( !empty(get_the_post_thumbnail()) ) { ?>
<?php the_post_thumbnail('medium');?>
<?php } else { ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/blog-thumbnail.png" alt="<?php echo the_title(); ?>" class="wp-post-image" />
<?php } ?>
</a>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php __('No News'); ?></p>
<?php endif; ?>

Add pagination on display post wordpress

I am using the below code to list the posts but there are more than 200 posts so i want to add pagination at the end.
<?php
// the query
$the_query = new WP_Query(array(
'category_name' => 'Reports',
'post_status' => 'publish',
));
?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="col-md-12 event_col">
<div class="col-md-2 event_date">
<span><?php echo the_post_thumbnail(null, 'medium');?></span>
</div>
<div class="col-md-7 event_venue">
<div class="titl">
<?php the_title(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php __('No News'); ?></p>
<?php endif; ?>

I can not show my product feature image

<?php
$params = array(
'posts_per_page' => 9,
'post_type' => 'product'
);
$wc_query = new WP_Query($params);
if ($wc_query->have_posts()) :
while ($wc_query->have_posts()) : $wc_query->the_post(); ?>
<div class="col-sm-4 nk">
<div class="course">
<a href="<?php the_permalink(); ?>">
<img src="<?php the_post_thumbnail('thumbnail', array('class' => 'img-responsive')); ?>" />
</a>
<h3> <?php the_title(); ?></h3>
<h5><?php the_author(); ?></h5>
<p><?php echo $product->get_rating_html();?></p>
<h4><?php echo $product->get_price_html();?></h4>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p>
<?php _e( 'No Products' ); ?>
</p>
<?php endif; ?>
First of all,
replace this code
<img src="<?php the_post_thumbnail('thumbnail', array('class' => 'img-responsive')); ?>" />
with
<?php the_post_thumbnail('thumbnail', array('class' => 'img-responsive')); ?>
And you need to add <?php global $product; ?> exactly before it use.
The total correct code is
<?php
$params = array(
'posts_per_page' => 9,
'post_type' => 'product'
);
$wc_query = new WP_Query($params);
if ($wc_query->have_posts()) :
while ($wc_query->have_posts()) : $wc_query->the_post(); ?>
<?php global $product;?>
<div class="col-sm-4 nk">
<div class="course">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail', array('class' => 'img-responsive')); ?>
</a>
<h3> <?php the_title(); ?></h3>
<h5><?php the_author(); ?></h5>
<p><?php echo $product->get_rating_html();?></p>
<h4><?php echo $product->get_price_html();?></h4>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p>
<?php _e( 'No Products' ); ?>
</p>
<?php endif; ?>
you are doing mistake whenever you use the_post_thumbnail() write with echo the_post_thumbnail();
so instead of the_post_thumbnail() use echo the_post_thumbnail()

WP-Page Navi doesn't work

How to solve this problem ? I really don't have any idea.
Plugin generate only this html :
<div class="wp-pagenavi">
<span class="pages">Page 1 of 1</span><span class="current">1</span>
</div>
This is my archive.php
<?php $loop = new WP_Query(array( 'orderby' => 'ASC', )); ?>
<?php if($loop->have_posts() ) : ?>
<?php while($loop->have_posts() ) : $loop->the_post(); ?>
<article class="article">
<div class="time"><?php the_time('Y-m-d'); ?></div>
<div class="h2"><?php the_title(); ?></div>
<div class="article__descript">
<?php $content = the_content();
$test =substr($content, 0, 20);
echo $test; ?>
</div>
</article>
<?php endwhile; ?>
<?php wp_pagenavi(); wp_reset_query(); ?>
<?php else : ?>
<?php endif; ?>
Try this. I have updated your code-
You have not passed the parameter paged in query arguments.
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$loop = new WP_Query(array('post_type' => 'post',
'paged' => $paged,
'posts_per_page' => 5,
'orderby' => 'date',
'post_status'=>'publish'
));
?>
<?php if($loop->have_posts() ) : ?>
<?php while($loop->have_posts() ) : $loop->the_post(); ?>
<article class="article">
<div class="time"><?php the_time('Y-m-d'); ?></div>
<div class="h2"><?php the_title(); ?></div>
<div class="article__descript">
<?php $content = the_content();
$test =substr($content, 0, 20);
echo $test; ?>
</div>
</article>
<?php endwhile; ?>
<?php wp_pagenavi(); wp_reset_query(); ?>
<?php else : ?>
<?php endif; ?>

Two custom loops on same page in wordpress?

I wasn't able to find anything on here, so I am bringing this question to you. The following code does mainly what I want, only the page-cycle doesn't work: When I want to navigate to older posts, the page that is seen displays the same new posts again. How do I do this properly?
So index.php has two loops:
<?php
$args = array( 'numberposts' => 1,
'post_status'=>"publish",
'post_type'=>"post",
'orderby'=>"post_date");
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post);
?>
// regular post html with wp tags
<?php endforeach; ?>
<?php
query_posts('posts_per_page=12&offset=1');
if (have_posts()) : ?>
<h3>Headline</h3>
<?php while (have_posts()) : the_post(); ?>
// regular html with wp tags for these posts (teasers, with the_excerpt)
<?php endwhile; ?>
<div class="navigation">
<span class="nextlink"><?php next_posts_link( 'Older', 0 ); ?></span>
<span class="previouslink"><?php previous_posts_link( 'Newer' ); ?></span>
</div>
<?php else : ?>
<h3><?php _e('Nothing found'); ?></h3>
<?php endif; ?>
Here is the explanation: One visits the blog: The most recent blog post is displayed in full length in one block, the 12 older posts (excluding the first one with offset, so 2–13) are displayed in another block with content teasers and a next-previous-navigation at the bottom to display post teasers 14–25 and so on. (The problem: it's always 2–13)
// Edit: Code in response to the top answer, now the full code of the index.php. Notice, that the HTML has changed, since I have used normalized HTML, since it should usually not matter. This times it's the actual code.
<?php get_header(); ?>
<div class="box blog-block">
<?php
$args = array( 'numberposts' => 1, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
<span class="head"><?php the_time('j. F Y') ?></span>
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php global $more;
$more = 1;
the_content();
?>
<p class="author"><?php the_author(); ?></p>
<p><a class="more-link" href="<?php the_permalink(); ?>#respond" title="<?php the_title();?>">Kommentieren</a>
</div>
<?php endforeach;
wp_reset_postdata(); /* 1. reset post data */
?>
</div>
<div class="box" id="recentposts">
<?php
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$display_count = 12;
$excluded_count = 1;
$offset = ( ($paged-1) * $display_count ) + $excluded_count;
$args = array(
'post_status'=>"publish",
'post_type'=>"post",
'orderby'=>"post_date",
'posts_per_page' => $display_count,
'offset' => $offset,
'paged' => $paged
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) : ?>
<h3>Bisherige Artikel</h3>
<div class="recentpostsmasonry">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div <?php post_class('halb'); ?> id="post-<?php the_ID(); ?>">
<span class="head"><?php the_time('j. F Y') ?></span>
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php the_excerpt(); ?>
<p class="more-link">Weiterlesen ...</p>
<p class="comments"><?php edit_post_link(__('Bearbeiten'), '', ' | '); ?> <?php comments_popup_link(__('Schreib den ersten Kommentar'), __('Ein Kommentar'), __('% Kommentare'), '', __('') ); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="navigation">
<span class="nextlink" title="Ältere Einträge"><?php next_posts_link( '«', 0 ); ?></span>
<span class="previouslink" title="Jüngere Einträge"><?php previous_posts_link( '»' ); ?></span>
</div>
<?php else : ?>
<h3><?php _e('Nichts gefunden :('); ?></h3>
<?php endif; ?>
</div>
I am trying out this code now (14.10.17), but it doesn't add functioning page navigation...:
<?php get_header(); ?>
<div class="box blog-block">
<?php
$args = array( 'numberposts' => 1, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
<span class="head"><?php the_time('j. F Y') ?></span>
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php global $more;
$more = 1;
the_content();
?>
<p class="author"><?php the_author(); ?></p>
<p><a class="more-link" href="<?php the_permalink(); ?>#respond" title="<?php the_title();?>">Kommentieren</a>
</div>
<?php endforeach;
wp_reset_postdata(); /* 1. reset post data */
?>
</div>
<div class="box" id="recentposts">
<?php
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$display_count = 12;
$excluded_count = 1;
$offset = ( ($paged-1) * $display_count ) + $excluded_count;
$args = array(
'post_status'=>"publish",
'post_type'=>"post",
'orderby'=>"post_date",
'posts_per_page' => $display_count,
'offset' => $offset,
'paged' => $paged
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) : ?>
<h3>Bisherige Artikel</h3>
<div class="recentpostsmasonry">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div <?php post_class('halb'); ?> id="post-<?php the_ID(); ?>">
<span class="head"><?php the_time('j. F Y') ?></span>
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php the_excerpt(); ?>
<p class="more-link">Weiterlesen ...</p>
<p class="comments"><?php edit_post_link(__('Bearbeiten'), '', ' | '); ?> <?php comments_popup_link(__('Schreib den ersten Kommentar'), __('Ein Kommentar'), __('% Kommentare'), '', __('') ); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="navigation">
<span class="nextlink" title="Ältere Einträge"><?php next_posts_link( '«', 0 ); ?></span>
<span class="previouslink" title="Jüngere Einträge"><?php previous_posts_link( '»' ); ?></span>
</div>
<?php else : ?>
<h3><?php _e('Nichts gefunden :('); ?></h3>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
New:
<?php get_header(); ?>
<div class="box blog-block">
<?php
$args = array( 'numberposts' => 1, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
<span class="head"><?php the_time('j. F Y') ?></span>
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php global $more;
$more = 1;
the_content();
?>
<p class="author"><?php the_author(); ?></p>
<p><a class="more-link" href="<?php the_permalink(); ?>#respond" title="<?php the_title();?>">Kommentieren</a>
</div>
<?php endforeach;
wp_reset_postdata(); /* 1. reset post data */
?>
</div>
<div class="box" id="recentposts">
<?php
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$display_count = 12;
$excluded_count = 1;
$offset = ( ($paged-1) * $display_count ) + $excluded_count;
$args = array(
'post_status'=>"publish",
'post_type'=>"post",
'orderby'=>"post_date",
'posts_per_page' => $display_count,
'offset' => $offset,
'paged' => $paged
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) : ?>
<h3>Bisherige Artikel</h3>
<div class="recentpostsmasonry">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div <?php post_class('halb'); ?> id="post-<?php the_ID(); ?>">
<span class="head"><?php the_time('j. F Y') ?></span>
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php the_excerpt(); ?>
<p class="more-link">Weiterlesen ...</p>
<p class="comments"><?php edit_post_link(__('Bearbeiten'), '', ' | '); ?> <?php comments_popup_link(__('Schreib den ersten Kommentar'), __('Ein Kommentar'), __('% Kommentare'), '', __('') ); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="navigation">
<span class="nextlink" title="Ältere Einträge"><?php next_posts_link( '«', $the_query->max_num_pages ); ?></span>
<span class="previouslink" title="Jüngere Einträge"><?php previous_posts_link( '»' ); ?></span>
</div>
<?php else : ?>
<h3><?php _e('Nichts gefunden :('); ?></h3>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You haven't set up paging, so your query always thinks its on page 1.
Also according to the WP Developer Resources , you shouldn't use query_posts- use WP_Query or pre_get_posts instead, so I'm using WP_Query below to do your 2nd query.
Note that I've assumed you are using this on a static homepage, but I've added the change required for a custom page in comments.
<?php
$args = array( 'numberposts' => 1,
'post_status'=>"publish",
'post_type'=>"post",
'orderby'=>"post_date");
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post);
?>
// regular post html with wp tags
<?php endforeach;
wp_reset_postdata(); /* 1. reset post data */
?>
<?php
/* Set up your pagination - $paged will contain the current page, telling WP_Query which post to start with (e.g. #13 on page 2) */
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
/* NOTE: if this is NOT on a static page
get the 'paged' query var instead of 'page', i.e.:
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
*/
$display_count = 12; /* variable for the number of posts per page */
$excluded_count = 1; /* the number of posts excluded from the start position */
/* Calculate the offset, i.e. the post number to start the page with
Normally this is calculated by: ($paged-1) * $display_count
so we just need to add 1 for the one we excluded */
$offset = ( ($paged-1) * $display_count ) + $excluded_count;
/* set up your new query passing in the page so WP_Query knows what to return */
$args = array(
'post_status'=>"publish",
'post_type'=>"post",
'orderby'=>"post_date",
'posts_per_page' => $display_count,
'offset' => $offset,
'paged' => $paged
);
/* set up your new query */
$the_query = new WP_Query( $args );
<?php if ( $the_query->have_posts() ) : ?>
<h3>Headline</h3>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
// regular html with wp tags for these posts (teasers, with the_excerpt)
<?php endwhile; ?>
<div class="navigation">
<span class="nextlink"><?php next_posts_link( 'Older', $the_query->max_num_pages ); ?></span>
<span class="previouslink"><?php previous_posts_link( 'Newer' ); ?></span>
</div>
<?php else : ?>
<h3><?php _e('Nothing found'); ?></h3>
<?php endif; ?>
The above code is untested, but the basic logic should be right.
UPDATE:
next_posts_link and
previous_posts_link use the global variable $wp_query by default, so to make is use your custom query, pass $custom_query->max_num_pages into next_posts_link, e.g.:
<span class="nextlink"><?php next_posts_link( 'Older', $the_query->max_num_pages ); ?></span>
<span class="previouslink"><?php previous_posts_link( 'Newer' ); ?></span>

Resources