Un widget wordpress pour afficher vos derniers articles dans un custom post type

Comment afficher ses derniers articles dans un custom post type ?

Dans ce tuto, je partage le code d’un widget pour afficher les derniers articles du blog au sein d’un custom post. Selon la structure du thème, il se peut que les articles du blog soient en relation directe avec le sujet des custom post type. Sur un site de tutoriels informatiques par exemple, on peut crée un custom post pour des formation, et avoir des articles du blog qui parlent des même sujet. On peut dans ce cas vouloir afficher les articles qui parlent du même sujet.

L’idéal, comme on va le voir ici, c’est de pouvoir afficher les articles en fonction de leur catégorie, en lien avec le « term » de la taxonomie de votre custom post type.

Ce que va contenir notre widget

Notre widget doit contenir :

  • un titre
  • un champ select pour pouvoir choisir la catégorie
  • une case à cocher pour choisir un affichage aléatoire
  • Un champ texte pour le nombre de post à afficher

Le rendu dans le backoffice

widget last posts back

Le rendu en front

widget last post front

Le code du widget


class Cc_Related_Posts_Widget extends WP_Widget {

/*
* Register widget with WordPress.
*/

function __construct() {
parent::__construct(
'cc_related_posts_widget', // Base ID
__( 'Cc Last blog posts in formation page', 'text_domain' ), // Name
array( 'description' => __( 'Shows last posts.', 'text_domain' ), ) // Args
);
}


/**
* Front-end display of widget.
*/

public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
// Catch result
$cat_id = $instance['cat_id'];
$random = $instance['rand'] ? true : false;
$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
if( true === $random ) {
$arguments=array(
'posts_per_page'=> $number , // Number of related posts that will be shown.
'orderby' => 'date',
'order' => 'rand',
'cat' => $cat_id,
);

}else{
$arguments = array(
'posts_per_page'=> $number , // Number of related posts that will be shown.
'orderby' => 'date',
'order' => 'DESC',
'cat' => $cat_id,
);
}


$my_query = new WP_Query($arguments);
if( $my_query->have_posts() ) {

echo '<div id="related_blog_post">';



while ($my_query->have_posts()){
$my_query->the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="related_blog_post-thumbnail">
<a rel="bookmark" href="<?php the_permalink()?>" itemprop="url">
<?php the_post_thumbnail ('formation_related');?>
</a>
</div>
<div class="entry-header related_blog_post-title">
<a rel="bookmark" href="<?php the_permalink()?>" itemprop="url">
<h3><?php the_title(); ?></h3>
</a>
</div>

</a>
</article>

<?php
}


echo '</div>';
wp_reset_query();
echo $args['after_widget'];
}
}

/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['cat_id'] = ( ! empty( $new_instance['cat_id'] ) ) ? strip_tags( $new_instance['cat_id'] ) : '';
$instance['rand'] = $new_instance['rand'];
$instance['number'] = (int) $new_instance['number'];
return $instance;
}

/**
* Back-end widget form.
*/

public function form( $instance ) {
$title = '';
if( !empty( $instance['title'] ) ) {
$title = $instance['title'];
}
$number = isset( $instance['number'] ) ? absint( $instance['number'] ) : 3;
$random = isset( $instance['rand'] ) ? $instance['rand'] : false;
$cat_id = '';
if( !empty( $instance['cat_id'] ) ) {
$cat_id = absint( $instance['cat_id'] ) ;
}
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('cat_id'); ?>"><?php _e( 'Category Name:' )?></label>
<select id="<?php echo $this->get_field_id('cat_id'); ?>" name="<?php echo $this->get_field_name('cat_id'); ?>">
<?php
$this->categories = get_categories();
foreach ( $this->categories as $cat ) {
$selected = ( $cat->term_id == esc_attr( $cat_id ) ) ? ' selected = "selected" ' : '';
$option = '<option '.$selected .'value="' . $cat->term_id;
$option = $option .'">';
$option = $option .$cat->name;
$option = $option .'</option>';
echo $option;
}
?>
</select>
</p>
<p>
<label for="<?php echo $this->get_field_id('rand'); ?>"><?php _e( 'Show random posts' ); ?></label>
<?php $checked = ( $random ) ? ' checked=\"checked\" ' : ''; ?>
<input type="checkbox" id="<?php echo $this->get_field_id( 'rand' ); ?>" name="<?php echo $this->get_field_name( 'rand' ); ?>" value="true" <?php echo $checked; ?> />
</p>
<p><label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php esc_html_e( 'Number of posts to show:', 'custom-post-type-widgets' ); ?></label>
<input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo esc_attr( $number ); ?>" size="3" /></p>

<?php
}


}

La particularité

Les points intéressants dans la fonction widget c’est la boucle conditionnelle, pour afficher les articles soit de manière aléatoire, soit en fonction d’une catégorie

if( true === $random ) {
$arguments=array(
'posts_per_page'=> $number , // Number of related posts that will be shown.
'orderby' => 'date',
'order' => 'rand',
'cat' => $cat_id,
);

}else{
$arguments = array(
'posts_per_page'=> $number , // Number of related posts that will be shown.
'orderby' => 'date',
'order' => 'DESC',
'cat' => $cat_id,
);
}

N’hésitez pas, si vous avez des idées d’amélioration ou des corrections à apporter à ce tuto !