Related Posts Slider in Oxygen

le 26/10/2021
JAG

Update on June 03, 2020
This members-only tutorial provides the steps to show 12 related posts (based on tags first and then categories) and show 3 at a time as a slider/carousel using Flickity on single posts in Oxygen.

From 767px and below, we will change 3 items per view to 2 per view and from 479px and below, 1 at a time.
This can also be applied to entries of a Custom Post Type with corresponding custom taxonomies.
Step 1
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Custom Image Sizes
Code:
add_image_size( 'related', 440, 244, true );
Regenerate thumbnails.
Step 2
Install and activate My Custom Functionality plugin.
Connect to your hosting account using a FTP client and navigate to site’s /wp-content/plugins/my-custom-functionality-master.
Upload flickity.pkgd.min.js to the plugin’s assets/js directory.
Create a file named say, flickity-init.js in the same location having:

(function ($) {

$('.related-posts').flickity({

// At the end of cells, wrap-around to the other end for infinite scrolling.
// wrapAround: true,

// Align cells within the carousel element.
cellAlign: 'left',

// Groups cells together in slides. Flicking, page dots, and previous/next buttons are mapped to group slides, not individual cells. is-selected class is added to the multiple cells in the selected slide.
// if set to true, group cells that fit in carousel viewport.
groupCells: true,

// Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded.
imagesLoaded: true
});

})(jQuery);
If you want a carousel effect with wrapping around, uncomment (i.e., remove the slashes in front)
// wrapAround: true,
Edit plugin.php and add the following inside the custom_enqueue_files() function:
if ( is_singular( 'post' ) ) {
wp_enqueue_script( 'flickity', plugin_dir_url( __FILE__ ) . 'assets/js/flickity.pkgd.min.js', '', '2.2.1', true );
wp_enqueue_script( 'flickity-init', plugin_dir_url( __FILE__ ) . 'assets/js/flickity-init.js', '', '1.0.0', true );
}
Step 3
Edit the Template that applies to single posts with Oxygen.
Add a Section where you want the related posts to be shown.
Add a Heading and change the text to say, Related Posts. You might want to change the Tag to h3 or h4.
Add a Code Block.
Advanced > Size & Spacing > Width: 100%.
PHP & HTML:
';
echo '

';
echo '

';

/**
* The taxonomy query.
*
* @since 1.0.0
*
* @param array $terms Array of the taxonomy's objects.
* @param int $count The number of posts.
* @param string $type The type of taxonomy, e.g: `tag` or `category`.
*
* @return string
*/
function sk_related_tax_query( $terms, $count, $type ) {
global $do_not_duplicate;

// If the current post does not have any terms of the specified taxonomy, abort.
if ( ! $terms ) {
return;
}

// Array variable to store the IDs of the posts.
// Stores the current post ID to begin with.
$post_ids = array_merge( array( get_the_ID() ), $do_not_duplicate );

$term_ids = array();

// Array variable to store the IDs of the specified taxonomy terms.
foreach ( $terms as $term ) {
$term_ids[] = $term->term_id;
}

$tax_query = array(
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => array(
'post-format-link',
'post-format-status',
'post-format-aside',
'post-format-quote',
),
'operator' => 'NOT IN',
),
);

$showposts = 12 - $count;

$args = array(
$type . '__in' => $term_ids,
'post__not_in' => $post_ids,
'showposts' => $showposts,
'ignore_sticky_posts' => 1,
'tax_query' => $tax_query,
);

$related = '';

$tax_query = new WP_Query( $args );

if ( $tax_query->have_posts() ) {
while ( $tax_query->have_posts() ) {
$tax_query->the_post();

$do_not_duplicate[] = get_the_ID();

$count++;

$title = get_the_title();

// Get the alt text of featured image
$thumb_id = get_post_thumbnail_id( get_the_ID() );
$alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

// If no alt text is present for featured image, set it to entry title
if ( '' == $alt ) {
$alt = the_title_attribute( 'echo=0' );
}

$related .= '

';

$related .= '' . $alt . '';

$related .= '

';

$related .= '

';
}
}

wp_reset_postdata();

$output = array(
'related' => $related,
'count' => $count,
);

return $output;
}

?>
CSS:
img {
vertical-align: top;
height: auto;
max-width: 100%;
}

.related {
background-color: #fff;
}

.related a {
text-decoration: none;
}

.related-post {
width: 33.333%;
padding-left: 15px;
padding-right: 15px;
}

.related-post-image {
vertical-align: top;
}

.related-post-info {
margin-top: 10px;
font-size: 15px;
}

.related-post-date {
font-size: 14px;
color: #858585;
}

.related-post-tags,
.related-post-categories,
.related-post-tags a,
.related-post-categories a {
color: #858585;
}

.related-post-tags a:hover,
.related-post-categories a:hover {
color: #333;
}

.related-post-tags,
.related-post-categories {
font-size: 13px;
margin-top: 10px;
}

.related-posts .flickity-prev-next-button.previous {
left: -50px;
}

.related-posts .flickity-prev-next-button.next {
right: -50px;
}

@media only screen and (max-width: 1200px) {
.flickity-prev-next-button {
display: none;
}
}

@media only screen and (max-width: 767px) {
.related-post {
width: 50%;
}
}

@media only screen and (max-width: 479px) {
.related-post {
width: 100%;
}
}
Copy all the CSS from here and add at the end in the above CSS.
Update: How to apply the tutorial to CPT
a) In Step 2 change
if ( is_singular( 'post' ) ) {
to
if ( is_singular( 'testimonial' ) ) {
where testimonial is the name of your CPT.
b) In Step 3 replace
post_tag
with the name of your custom taxonomy that is similar to tags for this post type. If it is the standard tag, then leave it as is.
Similarly, replace
category
with the name of your custom taxonomy that is similar to categories for this post type. If it is the standard category, then leave it as is.
Also specify your post type in the $args array.
Ex.:
Change
$args = array(
$type . '__in' => $term_ids,
'post__not_in' => $post_ids,
'showposts' => $showposts,
'ignore_sticky_posts' => 1,
'tax_query' => $tax_query,
);
to
$args = array(
'post_type' => array( 'testimonial' ),
$type . '__in' => $term_ids,
'post__not_in' => $post_ids,
'showposts' => $showposts,
'ignore_sticky_posts' => 1,
'tax_query' => $tax_query,
);

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat