[Resolved] Need to create a custom field that shows links to related posts of the same type

[Author]

Posts

[Laura Savard]

I'm trying to create a dictionary of branding terms. Each term will be a "Post" within the custom post type "Brand Terms". For each term I'd like to be able to hand selected "related brand terms" that will appear on the post page after the term definition (see attached image).

A previous developer I worked with did this using Advanced Custom Fields, but I am using Toolset and would like to accomplish the same thing.

Any help would be greatly appreciated.

Cheers,
Laura Gallagher

[Christian Cox]

Hi, if I understand you correctly, you would like to create links between multiple posts in a Custom Post Type - we'll call this post type "Definitions". You would like to hand-pick the Definitions that are related to each Definition, so that you can include links to those related Definitions in a View or single Definition page. Is that correct? I can think of two ways to accomplish this:

1. Create a custom taxonomy. When you create a new Definition, also create a term for that Definition. Apply that term to any other Definitions you wish to show as related to this Definition. In other words, let's say you have Definition A. You want to relate Definition B and Definition C to Definition A, and vice versa. This means that in the Definition A post editor, you must first create term "Definition A" in your custom taxonomy. Then you must select terms "Definition B" and "Definition C". In Definition B post editor, you must select "Definition A", in Definition C post editor, you must select "Definition A", and so on for all related Definitions. Create a View that shows all Definitions filtered on that taxonomy term and add that View to the View, Content Template or Layout for Definitions.

2. Use a repeating custom field that stores the slug or ID of a related Definition. Create a View that loops over the repeated fields and displays the title of each matching Definition. Note the following:

a. The repeating fields only apply to a single Definition, and are not managed in a single place. In other words, if you edit Definition A and add the fields that say Definitions B, C, and D are related to Definition A, then B, C, and D will show up on Definition A. However, this does not mean the same relationships will automatically exist for B, C, and D. You must manually edit B, C, and D and relate them to A.

b. You must know the slug or ID of any Definition you want to relate to another Definition. There is not an easy way to select another Definition from a custom field - these fields are not automatically populated with other Definition titles, and there is no autosuggest feature here. The only way to do it is to manually type the Definition slug or ID into the custom field. You may review the types of Custom Fields offered here: https://toolset.com/documentation/user-guides/using-custom-fields/

I think the custom taxonomy is the most straightforward approach. Please let me know your thoughts on these two approaches and we can go from there.

[Laura Savard]

I understand the challenges in the second option with knowing what slug or ID is for each related definition. However, I'm not sure I follow the first option completely. I am very new to toolset and have only created one Custom Post Type with Custom Fields, Template and View (hidden link)

The "Brand Dictionary" I'm attempting to build has about 400 definitions and if I understand what you're saying, I would need to build a "Custom Taxonomy" for each set of related terms?

Any visuals/videos you can share would be greatly appreciated!

Cheers,
Laura

[Christian Cox]

Hi, let me show you some examples. You won't need to create a custom taxonomy for each Definition. You will have one custom taxonomy that includes multiple terms. Each Definition will have a matching term, which you can use to relate other Definitions to that Definition.

1-custom-taxonomy.png - This is a custom taxonomy called "Definition Relationships", where I will add terms for each Definition. This taxonomy is applied to the Definitions post type.

2-custom-post-type.png - This is the custom post type called "Definitions". You can see that the Definition Relationship taxonomy is used with this custom post type.

3-pet.png - This is my first Definition. In the bottom right, you can see that I have created a Definition Relationship Term "Pet".

4-dog.png - This is the second Definition. In the bottom right, you can see that I have selected "Pet" because I want the "Dog" link to show in the related terms on the "Pet" Definition page. I have also created the Definition Relationship Term "Dog" because I might want some other Definitions to appear on the Dog Definition page.

5-cat.png - Just like Dog, I've created a new Definition and Term. I've chosen the Pet term as well, so the "Cat" link will show up in the related Definitions of "Pet".

6-taco.png - This Definition is not related to any of the other Definitions yet, so I have not select any other terms. But I have created a term anyway for Taco, since you may want to use it later. Might as well set it up now.

7-horse.png - Just like Dog and Cat, I've created a new Definition and Term. I've chosen the Pet term as well, so the "Horse" link will show up in the related Definitions of "Pet".

8-pet.png - This is where it gets tricky. After adding Dog, Cat, and Horse, you return to the Pet Definition. You see that the Definition Relationships for "Dog" "Cat" and "Horse" are not selected. You must apply these terms here if you want the link to the Pet Definition to show up on any of those other Definition pages. In other words, the relationships established in a Definition are one-way, not reciprocal - you must select related terms in both places.

9-related-definitions.png - This is the View that you will use to display related Definitions on each Definition page. You may need to right-click this image to open in a new tab so you can zoom in and see more detail.

This is the shortcode format you will use to place your Related Definitions View:

[wpv-view name="related-definitions-view" wpvdefinitionrelationship="pet"]

In this shortcode, you will include the slug of the Definition Relationship term you want to search for. In the example above, this shortcode is used on the Pets Definition page. It will find any Definition that also has the Definition Relationship Term "Pet" (the slug is "pet").

Is this making sense so far? Any questions? There are a few more steps involved to make this shortcode more dynamic - meaning that you won't have to manually type "pet" in the shortcode, you can just drop it in a Content Template or Layout that you will use for all Definitions. But I want to make sure you're following along so far.

[Laura Savard]

I believe this makes sense. The only question I have and want to make sure I was clear in the specifics of what I'm trying to accomplish. In the attachment I posted earlier (the definition for "Bottom Up") the related definition "Top Down" is merely a link to the definition for the term Top Down.

~Laura

[Christian Cox]

In the attachment I posted earlier (the definition for "Bottom Up") the related definition "Top Down" is merely a link to the definition for the term Top Down.
Yes, I think we understand each other. Take a look in the Loop Output section of 9-related-definitions.png to see how this will be accomplished. The [wpv-post-link] shortcode inside the <wpv-loop> tags is used to display a link to each Related Definition.

[Christian Cox]

Sorry for the extra post, I used the wrong setting earlier and needed to adjust the ticket. Let me know if you have questions about that comment, and then I can continue.

[Laura Savard]

Thanks for all your help! I'll give this a try today and report back to let you know how I did.

Cheers,
Laura

[Christian Cox]

Sure, I'll mark this ticket as pending an update and we can pick up later.

[Laura Savard]

Christian,

Thanks so much!

After re-reading your posts, it sounds like you had more to tell me in terms of making this more dynamic. You can see the work I've done so far at the addresses below. I've also included some screen grabs.

I have only created a relationship between two terms so far as a test.

Term 1:
hidden link

Term 2:
hidden link

[Laura Savard]

Also, as a side question, is there any way to remove the "post author, date and # of comments" that appears underneath the post title?

[Christian Cox]

OK great, looking good so far. In order to make this dynamic, you will replace the definition slug in your shortcode with another shortcode:

[wpv-view name="related-definitions-view" wpvdefinitionrelationship="[wpv-post-slug]"]

Now this shortcode will work on any Definition page, as long as the slug of the Definition page matches the slug of its Definition Relationship term (e.g. the "Pet" Definition slug is "pet", and the "Pet" Definition Relationship slug is also "pet", so these match) .

You can place the shortcode manually on all Definition posts, or you can add it to a Content Template or Layout for all Definition posts so you don't need to repeat it everywhere. And remember, the slugs for the Definition and Definition Relationship term must match, otherwise this shortcode won't function as expected.

Is there any way to remove the "post author, date and # of comments" that appears underneath the post title?
Not in Toolset, no. This part of the site design is managed by the Divi theme. Anything outside the main content area, including the Header, Footer, Title, Meta information (date, author, #comments etc.), and Comments area, is part of the framework provided by Divi. If you want to modify any of that, it requires some custom code and a new PHP template file specifically for your custom post type.

[Laura Savard]

So, I think I have this working nicely. However, I have two minor bugs that I could use your advice on:

1. If you look at a page that has multiple "related terms" hidden link , everything works with two exceptions:

first exception: I need a way to put in a comma and space after each related term if there happens to be a second or third… but no comma after the last term in the list

second exception: two sets of social media sharing icons appear - separate issue that popped up after creating this template - I can look into this one myself unless you have a quick answer for it.

2. If you look at a page that has no "related term" hidden link , I have the same social media sharing issue, but I also have the issue of seeing the word "See:" with nothing after it. Is there a way to show the related term template content ONLY IF a term has related terms? Or do I need to move the shortcode to another place in order for this to work? I like the idea of doing it more dynamically like you said and not putting the shortcode in every definition because there are hundreds of them!

I'm attaching screen grabs of how I have everything set up.

Thanks again!
Also, I noticed you're in NY. I went to school in Brooklyn : )

Cheers,
Laura

[Christian Cox]

Great work so far!

first exception: I need a way to put in a comma and space after each related term if there happens to be a second or third… but no comma after the last term in the list
Sure, you need to use wpv-item and index to display each iteration of the loop differently. The general idea is that you display only the link for iteration #1, then for any other iteration you display a comma, followed by a space, followed by the link.

 
[wpv-item index=1]
[wpv-post-link]
[wpv-item index=other]
, [wpv-post-link]

More info about item and index here:
https://toolset.com/documentation/user-guides/digging-into-view-outputs/

second exception: two sets of social media sharing icons appear - separate issue that popped up after creating this template - I can look into this one myself unless you have a quick answer for it.
This is probably a separate issue that will need to be addressed in another ticket. Usually this is either a conflict between a social media sharing plugin and Toolset or your theme and Toolset. But yes, please open a new ticket with these details so we can get that cleared up.

I also have the issue of seeing the word "See:" with nothing after it. Is there a way to show the related term template content ONLY IF a term has related terms?
The best way to handle this is to move the word "See:" into the related definitions View. You can add it below the wpv-items-found tag, but above the wpv-loop tag. This way it will only show if items are found, but it won't be repeated over and over in the loop.

[Laura Savard]

Christian,

Thanks for all you're help. Had to take a break from this for a bit, but I think I have what I need. If I run across anything else, I'll create a new thread.

Have a great week!

Cheers,
Laura