Filterable Portfolio in Oxygen

le 26/10/2021
JAG

Updated on October 05, 2020
This tutorial provides the steps to set up entries of a portfolio custom post type that can be filtered by the terms of associated portfolio_category custom taxonomy using Isotope in Oxygen.
Live Demo

We shall
create a Template that applies the portfolio CPT archive pageedit the template and add an Easy Posts elementuse pre_get_posts filter hook to show all the entries on the CPT archiveload and initialize Isotope in a custom pluginadd a custom callback function to output space-separated terms of the specified taxonomy for the current entryecho the space-separated terms for div.oxy-post by editing the template’s PHP for Easy Postsadd a custom callback function that displays buttons with specified taxonomy terms as values of custom data-filter attributeadd a Code Block element, move it above the Easy Posts element and call the above function to display the filtering buttons rowdefine and use a custom image size for the images in the output of Easy Posts
This technique can also be applied to posts of any post type and any taxonomy.

(tutorial has been updated since recording this screencast – so there may be some differences)
Note: This tutorial only works with Easy Posts component, not a Repeater.

This tutorial can also be implemented for Easy Posts on a static Page or a static homepage. For the Easy Posts, select "custom" as the WP Query type, select your post type and for Count, tick "All" under "How Many Posts?".

In Step 4 you would need to change

if ( is_post_type_archive( 'portfolio' ) ) {

to something like

if ( is_page( 'sample-page' ) ) {

where sample-page is the static Page's slug or

if ( is_front_page() ) {

if you want to set it up on the static homepage.
Step 1
Install and activate Portfolio Post Type plugin.
Add your portfolio entries and set featured images. Images should ideally be 800 x 800.
Create portfolio categories as needed and assign the entries to their corresponding portfolio categories.
Step 2
Install and activate Code Snippets plugin.
a) Go to Snippets > Add New.
Title: Custom Image Sizes
Code:
add_image_size( 'portfolio_thumb', 800, 800, true );
If there are any portfolio posts that already have featured images of dimensions other than 800 x 800, regenerate thumbnails.
b) Add another Snippet.
Title: Set number of entries on portfolio CPT archive
Code:

add_filter( 'pre_get_posts', 'wpdd_portfolio_archive_posts_per_page' );
/**
* Set number of posts per page on portfolio CPT archive.
* @param WP_Query $query Original query.
* @return WP_Query Modified query.
*/
function wpdd_portfolio_archive_posts_per_page( $query ) {

if ( $query->is_main_query() && ! is_admin() && $query->is_post_type_archive( 'portfolio' ) ) {
$query->set( 'posts_per_page', -1 );
}

return $query;
}
c) Add another Snippet.
Title: [Function] Outputs space separated terms of the specified taxonomy for the current entry
Code:
/**
* Callback function to output space separated terms of the specified taxonomy for the current entry.
*
* @param string $taxonomy Name of the taxonomy.
* @return string Space separated classes.
*/
function wpdd_get_terms( $taxonomy ) {

$terms = get_the_terms( get_the_ID(), $taxonomy );

if ( $terms ) {
foreach ( $terms as $term ) {
$classes[] = esc_attr( $term->slug );
}

return ' ' . implode( ' ', $classes );
} else {
return '';
}

}
d) Add another Snippet.
Title: [Function] Displays buttons with specified taxonomy terms as values of custom data-filter attribute
Code:
/**
* Callback function that displays buttons with specified taxonomy terms as values of custom data-filter attribute.
*
* @param string $taxonomy Name of the taxonomy.
* @return void
*/
function wpdd_get_filters( $taxonomy ) {

$terms = get_terms(
array(
'taxonomy' => $taxonomy,
)
);

$count = count( $terms );

if ( $count > 0 ) { ?>




You might want to give it 15px of margin on left and right and some 10px at the bottom.
Add an Easy Posts component below it.
Template PHP:

Template CSS:
%%EPID%% .oxy-posts {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

%%EPID%% .oxy-post {
display: flex;
flex-direction: column;
text-align: left;
align-items: flex-start;
margin-bottom: 2em;
width: 33.33%;
padding: 1em;
}

%%EPID%% .oxy-post-image {
margin-bottom: 1em;
position: relative;
background-color: grey;
background-image: repeating-linear-gradient(
45deg,
#eee,
#eee 10px,
#ddd 10px,
#ddd 20px);
width: 100%;
}

%%EPID%% .oxy-post-image-fixed-ratio {
padding-bottom: 100%;
background-size: cover;
background-position: center center;
}

%%EPID%% .oxy-post-image-date-overlay {
position: absolute;
top: 1em;
right: 1em;
font-size: .7em;
color: white;
background-color: rgba(0,0,0,0.5);
padding: .7em 1em;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

%%EPID%% .oxy-post-title {
font-size: 1.5em;
line-height: 1.2em;
}
Step 6
To style the filter buttons you could use the Selector Detector feature in Oxygen or alternatively, add this CSS at Manage > Stylesheets:
.filter-button-group button {
margin-right: 6px;
margin-bottom: 14px;
padding: 12px 30px;
border: none;
border-radius: 0;
background-color: #000;
color: #fff;
font-weight: normal;
letter-spacing: normal;
text-transform: uppercase;
cursor: pointer;
font-size: 12px;
}

.filter-button-group button:hover,
.filter-button-group button.active {
color: #fff;
background-color: #6799b2;
}

.filter-button-group button:focus {
outline-style: none;
outline-color: transparent;
}

That should be it!
Visit yoursite.com/portfolio and check out your filterable portfolio on the frontend.

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