Custom Taxonomy Description and Related Posts in Single Posts Template in Oxygen

le 26/10/2021
JAG

In the members-only tutorial requests forum a user asks:
I’ve created a custom taxonomy (“series”) for posts to be able to mark several posts as being in a single series. On the single post template, I want to have a section that lists the series name, series description, and other posts in that series.Using {data}, I’m able to insert the series name, but I can’t figure out how to pull in the custom taxonomy’s description or how to tweak the Easy Posts query to get other posts from that taxonomy.Basically, since I’m doing this in a single post template, rather than an archive template, the default settings don’t work the way I want them to… Easy Posts is pulling just the current post (not all posts in the series). Here is the mockup I’m trying to build:

This tutorial provides the steps to set up a 2-column section on single posts with the left column showing the title, published date and excerpt and the right column showing taxonomy term that the current post belongs to, description of that taxonomy and other posts that belong to the same taxonomy in Oxygen.
click to enlarge
We shall use Code Block components for pulling the series that the current post has been assigned to and showing its (series’) title and description.
As for the bulleted list of posts that belong the same series as the current post, we are going to first retrieve the series and pass it as one of the arguments to a custom WP_Query while ensuring that the current post is excluded from the results in another code block. In the loop part, we simply show linked titles formatted as an unordered list.
Step 1
Let’s create a custom taxonomy called series for posts.
Install and activate Custom Post Type UI.
Go to CPT UI > Add/Edit Taxonomies.
Add new Taxonomy like so:

[Optional] In the Settings meta box, set Hierarchical to True to make our custom taxonomy behave like categories unlike tags.
Step 2
Add/edit your posts and assign them to appropriate series.
We are going to add code such that the first taxonomy term is pulled and used. You may want to assign any given post to only 1 term at a time.

You might want to add a description for each of your series by going to Posts > Series and clicking on the names.

Step 3
Create a Template that applies to all the individual post pages.

Edit it with Oxygen.
a) Add a Section.
Advanced > Size & Spacing > Container Padding: 0 (all the values)
Section Container Width: full-width
[Optional] Effects > Box Shadow.
rgba(0,0,0,0.1)00600
b) Add a Columns component inside the Section.
Select 50 50 config.
Left Div
Horizontal Item Alignment: Center
Vertical Item Alignment: Middle
Background color: #7d4af8
Advanced > Size & Spacing > Padding: 80px on all the sides.
Advanced > Layout > Position: relative (this is for the right triangular arrow separating the left and right columns)
Advanced > Typography > Color: #ffffff (or any light color of your choice)
With the left Div selected in the Structure panel,
+Add > WordPress > Dynamic Data > Title
Font Size: 30px
+Add > WordPress > Dynamic Data > Date
Text Color: rgba(255,255,255,0.67)
Font Size: 12px
Advanced > Typography > Font Style: I
+Add > Text
Select the entire text, click on “Insert Data” at the top, and click on “Excerpt” under “Excerpt”.
Right Div
Horizontal Item Alignment: Center
Vertical Item Alignment: Middle
Advanced > Size & Spacing > Padding: 80px on all the sides.
With the right Div selected in the Structure panel,
+Add > Text
Change the text to say, “from the series…”
Text Color: rgba(43,44,40,0.69)
Advanced > Typography > Font Style: I
+Add > Code Block
Tag: h4
PHP & HTML:

"all" ) );

echo $term_list[0]->name;
?>
Advanced > Typography > Font size: 20px
+Add > Code Block
Tag: p
PHP & HTML:
"all" ) );

echo $term_list[0]->description;
?>
+Add > Code Block
PHP & HTML:
"all" ) );

// WP_Query arguments.
$args = array(
'post_type' => array( 'post' ),
'tax_query' => array(
array(
'taxonomy' => 'series',
'field' => 'slug',
'terms' => $term_list[0]->slug,
),
),
'post__not_in' => array( get_the_ID() ),
'order' => 'ASC',
'orderby' => 'title',
);

// The Query.
$query = new WP_Query( $args );

// The Loop.
if ( $query->have_posts() ) {
echo '

';
} else {
// no posts found.
}

// Restore original Post Data.
wp_reset_postdata();
?>
b) Let’s add the CSS for showing the triangle in between the columns.
Add a Code Block as the last element in this Template.
CSS:
#div_block-30-160::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 50px 60px;
border-color: transparent transparent transparent #7d4af8;
position: absolute;
right: -30px;
}

@media only screen and (max-width: 992px) {

#div_block-30-160::before {
border-color: #7d4af8 transparent transparent transparent;
border-width: 60px 50px 0 50px;
right: auto;
bottom: -30px;
}

}
Replace both the instances of div_block-30-160 with the ID of left Div.
References
https://codex.wordpress.org/Function_Reference/wp_get_post_terms
https://generatewp.com/wp_query/
https://codex.wordpress.org/Class_Reference/WP_Query
http://triangle.designyourcode.io/

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