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 ($27/month).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: