Wordpress highlight recent posts in front page - wordpress

I'm trying to highlight the three most recent posts in the home page with bigger cover images and an excerpt so that if they're highlighted they don't appear on the smaller post list. Something like this, but with the most recent posts on top:
I've tried using multiple WP_Query with an offset but it doesn't seem to quite work (it's possible I'm not doing it right).
Any ideas? Thanks!
EDIT: Here's what I tried. The problem with this is that I get "undefined offset" errors.
<?php
/* Featured posts */
?>
<div class="featured-posts columns">
<?php
$featured_query = new WP_Query( array( 'posts_per_page' => 3) );
while ( $featured_query->have_posts() ) : the_post(); ?>
<div class="featured-post col-4">
<?php dge_post_thumbnail(); ?>
<div class="entry-meta">
<?php
dge_posted_on();
?>
</div><!-- .entry-meta -->
<h2>
<?php the_title(); ?>
</h2>
<p><?php the_excerpt(); ?></p>
<p>continue reading</p>
</div>
<?php endwhile; ?>
</div>
<?php
/* Start the Loop */
$query = new WP_Query( array( 'posts_per_page' => 5, 'offset' => 3 ) );
while ( $query->have_posts() ) :
the_post();
/*
* Include the Post-Type-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Type name) and that will be used instead.
*/
/*get_template_part( 'template-parts/content', get_post_type() );*/
get_template_part( 'template-parts/preview-content');
endwhile;
?>

Try this script:
<?php
$featured_query = new WP_Query( array( 'posts_per_page' => 3,"orderby"=>"date","order"=>"DESC") );
while ( $featured_query->have_posts() ) : $featured_query->the_post();
echo '<p>'.the_title().'</p>';
endwhile;
?>
<?php
echo '<hr/><h1>After offset set</h1> <br/>';
$featured_query = new WP_Query( array( 'posts_per_page' => 5,"orderby"=>"date","order"=>"DESC","offset"=>3) );
while ( $featured_query->have_posts() ) : $featured_query->the_post();
echo '<p>'.the_title().'</p>';
endwhile;
?>
Response:

Related

Wordpress page shows content from the previous loop (wp_reset_postdata not working?)

I am rather new to Wordpress, and I can't really get what is going wrong in my example.
In my template I have page-standard.php which has a Slider in the Header working by means of the following code:
<div class="slider">
<div class="slider__wrapper">
<?php
$posts = get_posts( array(
'numberposts' => -1,
'category_name' => 'slidertop',
'orderby' => 'date',
'order' => 'ASC',
'include' => array(),
'exclude' => array(),
'meta_key' => '',
'meta_value' =>'',
'post_type' => 'post',
'suppress_filters' => true,
) );
foreach( $posts as $post ){
setup_postdata($post);
?>
<!-- ! Here goes SLIDE content -->
... <!-- ! End of SLIDE content -->
<?php
}
wp_reset_postdata();
?>
And it works fine. But then I need to show contents of the page and make another wp loop on the same page this way:
<?php
/*
Template Name: Standard Page
*/
get_header();
?>
<section class="blog-posts-section">
<div class="container">
<?php
while( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
?>
</div>
</section>
<?php
get_footer();
?>
content.php looks as follows:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1><?php the_title(); ?></h1>
<div class="entry-content">
<?php
the_content();
?>
</div>
</article>
So it should be showing the contents of the page which has the Page Standard template.
But instead it shows the contents from the SLIDER which it got in the very first wp loop. It seems like wp_reset_postdata() is not working properly. I used the same approach before, but just now it started to show this kind of behaviour.
I've tried using wp_reset_query() as well, but no effect.
Just use proper methods provided by Wordpress to run an extra query instead of $posts = get_posts. The code should look like that:
<?php
// the query
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; ?>
<!-- end of the loop -->
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
and then your standard query. It's all described in details in here:
https://developer.wordpress.org/reference/classes/wp_query/

Wordpress Tags in class

I have added tags to my Custom Post Type.
Now I want to use them to create a isotope portfolio, I can load all tags with this code:
<?php $args = array( 'post_type' => 'portfolio', 'posts_per_page' => 24;
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="all <?php echo $tag->slug; ?>">
<?php echo the_post_thumbnail(); ?>
<p><?php the_title(); ?></p>
</div>
<?php endwhile; ?>
But now I want to add the all tags that from each portfolio item to the class="".
With <div class="<?php $tag->slug; ?>"> I just get the last tag of all the tags that are used.
I know there are already a lot of posts about this problem, but every post I have found does not seem to work for me.
It now works with the following code:
<?php $tags = get_the_tags();
$tag = wp_list_pluck( $tags, 'slug' );
$tagToClass = implode(" ", $tag);
?>
And then use <?php echo $tagToClass ?>

How to show Previous and Next link in WordPress

Below is my example code that is dynamically get the posts.
<?php
global $post;
$args = array( 'numberposts' => 4 );
$the_posts = get_posts( $args );
foreach( $the_posts as $post ){ ?>
//The Post Content Goes here...
?>
The code above will works correctly but my question is, since this is not a default blog page or a category, how can I use the posts_nav_link() so that I can still access the rest of the pages? I tried to used it but it doesn't work unless if the current page is a category. Hope you guys can help me this.
If you giving you paging in your custom post type. then i think you can do very simple you have to use wordpress plugin like wp-pagenavi after then add your custom post type in this plugin in admin panel after then add
<div class="pagination">
<?php wp_pagenavi(); ?>
</div>
<?php
global $post;
$args = array( 'numberposts' => 4 );
$the_posts = get_posts( $args );
foreach( $the_posts as $post ){ ?>
//The Post Content Goes here...
?>
<div class="pagination">
<?php wp_pagenavi(); ?>
</div>
Without plugin you can use like this
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$loop = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => 3, 'cat' => '-10, -72&paged=' . $paged) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li>
<?php the_post_thumbnail(); ?> <?php the_title(); ?>
<span><?php the_time('d.m.y') ?></span>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php posts_nav_link(' — ', __('« Previous Page'), __('Next Page »')); ?>

Pagination on WordPress posts within page

I'm trying to do a custom archive for all posts, but I want it to look a little different than the category-specific archives. I've achieved this so far by placing the code below into a page on my site.
Is it possible to add pagination to something like this? I thought that 'paged' => $paged line might do it, but no such luck.
Here's my code: (I'm using a custom thumbnail size if you were wondering what that refers to.)
<?php
global $post;
$args = array(
'posts_per_page' => 3,
'offset' => 0,
'paged' => $paged
);
$thumbnails = get_posts($args);
foreach ($thumbnails as $post)
{
setup_postdata($post);
?>
<div class="featuredarticle">
<h4 class="entry-title"><?php the_title(); ?></h4>
<div class="featuredimage">
<?php the_post_thumbnail('featured'); ?><br />
</div>
</div>
<p><?php the_excerpt(); ?></p>
<div class="entry-utility">
<span class="read-more">Read More</span>
</div>
<?php
}
?>
This code works very good within a page querying posts and use pagination.
<?php
/**
* Template Name: Page of Books
*
* Selectable from a dropdown menu on the edit page screen.
*/
?>
<?php get_header();
if ( have_posts() ) while ( have_posts() ) : the_post();
the_content();
endwhile; wp_reset_query();
?>
<div id="container">
<div id="content">
<?php
$type = 'book';
$args=array(
'post_type' => $type,
'post_status' => 'publish',
'paged' => $paged,
'posts_per_page' => 2,
'caller_get_posts'=> 1
);
$temp = $wp_query; // assign orginal query to temp variable for later use
$wp_query = null;
$wp_query = new WP_Query($args);
?>
<?php
get_template_part( 'loop', 'index' );?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Wordpress - List all posts (with proper_pagination)

On the Wordpress site I'm working on, it lists posts by category, but I am also after a page that lists ALL the posts (with pagination, showing 10 per page). How would I go about achieving this?
Thanks
You could create a new page template with this loop in it:
<?php
$paged = get_query_var('paged')? get_query_var('paged') : 1;
$args = [
'post_type' => 'post',
'posts_per_page' => 10,
'paged' => $paged,
];
$wp_query = new WP_Query($args);
while ( have_posts() ) : the_post(); ?>
<h2><?php the_title() ?></h2>
<?php endwhile; ?>
<!-- then the pagination links -->
<?php next_posts_link( '← Older posts', $wp_query ->max_num_pages); ?>
<?php previous_posts_link( 'Newer posts →' ); ?>
For others who might be Googling this... If you have replaced the front page of your site with a static page, but still want your list of posts to appear under a separate link, you need to:
Create an empty page (and specify any URL/slug you like)
Under Settings > Reading, choose this new page as your "Posts page"
Now when you click the link to this page in your menu, it should list all your recent posts (no messing with code required).
A bit more fancy solution based on #Gavins answer
<?php
/*
Template Name: List-all-chronological
*/
function trimStringIfTooLong($s) {
$maxLength = 60;
if (strlen($s) > $maxLength) {
echo substr($s, 0, $maxLength - 5) . ' ...';
} else {
echo $s;
}
}
?>
<ul>
<?php
$query = array( 'posts_per_page' => -1, 'order' => 'ASC' );
$wp_query = new WP_Query($query);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" title="Link to <?php the_title_attribute() ?>">
<?php the_time( 'Y-m-d' ) ?>
<?php trimStringIfTooLong(get_the_title()); ?>
</a>
</li>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts published so far.'); ?></p>
<?php endif; ?>
</ul>

Resources