12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Apr 8, 2019

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

Sridhar Katakam

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)
0
0
60
0

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right