[Resolved] Display Taxonomy Terms anywhere in the website via shortcode

[Author]

Posts

[Silvia]

My client is an Educational Agency that offers courses for companies, freelances, professional schools and private people.
I am using Toolset and Divi theme for this project to create a Course Managing website and proceeded as follows:
1. I created the ANAGRAFICA CORSI (Course Catalog) cpt, where I store all the courses available regardless of the time and the place they are given as I have different sessions of the same course given in different venues;
2. I created a “AREE DI RIFERIMENTO” (Course Scope Area) taxonomy, which is related to ANAGRAFICA CORSI ( Course Catalog) with two custom fields that hold respectively an image being the header image of that taxonomy term, and an icon that represents the taxonomy term itself.
3. I created another CPT called SEDI CORSI (Course Venues) where of course I store all the possible venues a course can be given in.
4. I created another CPT AGENDA CORSI (Course Sessions) which is set to be child of ANAGRAFICA CORSI and SEDI CORSI. AGENDA CORSI holds info about a specific course session of a course from ANAGRAFICA CORSI, given in a specific VENUE, with other additional info as Enrollment price, start date and so on.

My goal is to be able to display TAXONOMY terms in views and content templates considering that when I am displaying data from AGENDA CORSI (Course Sessions) the taxonomy is related to ITS PARENT, and not directly to the post I am viewing at the moment.
Searching in the support forum I found instructions to create a custom shortcode in order to display a taxonomy term anywhere I want.
I then proceeded to

1. edit my FUNCTIONS.PHP file adding the following code:

add_shortcode( 'display_termmeta_field_info', 'display_termmeta_field_info_func');
function display_termmeta_field_info_func($atts)
{
  $slug = $atts['slug'];
  return types_render_termmeta( $slug , array());
}

2. register the shortcode in the Toolset settings

3. insert the shortcode where I want a taxonomy term to be displayed. In this case I wanted to display the taxonomy icon (“icona-area-riferimento) in a view where I am showing all the Courses in Courses Sessions. The shortcode I used is the following:

[display_termmeta_field_info slug="icona-area-riferimento" id="$anagrafica-corsi"]

but nothing is showing, as you can see in image1.

What am I doing wrong?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Silvia

Thanks for the detailed description of the issue.

I played around with this to get it to work, so that when displaying a child post, it will output a custom term field for a taxonomy assigned to a parent post.

The code to register the shortcode itself is:

/**
 * Display term field from parent post
 */
function parent_post_term_field_sc( $atts ){

	global $post;

	// Get id of parent post
	$parent_post_id = get_post_meta( $post->ID, '_wpcf_belongs_' . $atts['parent-slug'] . '_id', true );

	// Get ID of taxonomy term assigned to parent post
	$term_id = wp_get_post_terms( $parent_post_id, $atts['tax-slug'], array( 'fields' => 'ids' ) );

	// Output the required field for that term
	return types_render_termmeta( $atts['field'], array( 'term_id' => $term_id[0] ) );

}
add_shortcode( 'parent-post-term-field', 'parent_post_term_field_sc' );

You need to pass arguments for the slug of the field you want to output, the slug of the parent post type, and the slug of the taxonomy in question, would use it like so:

[parent-post-term-field field="field-slug" tax-slug="tax-slug" parent-slug="parent-post-slug"]

Normally when you register shortcodes you would check that the attributes had been supplied and set defaults for if they are missing, but I'll leave that to you.

[Silvia]

Nigel,
thanks for your reply and for your precious help!! I did as you instructed, and in my view in the homepage I inserted the shortcode:

[parent-post-term-field field="icona-area-riferimento" tax-slug="area-riferimento" parent-slug="anagrafica-corso"]

It works fine! The only problem is that whenever I try to resize the page to see how it shows on mobile, the icon shrinks to invisible and setting the css to min-width and min-height doesn't seem to do the trick. Any suggestions? You can view it here hidden link.

Also: Is this shortcode valid fo ANY taxonomy term that I might add in the future? Because I was thinking about adding a specific hex code to color each taxonomy in a different way, and I was asking myself If I could retrieve that value and pass it as parameter to style elements according to that.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Silvia

I think you need to add a min-width style to the image itself and not to the container td cell, which doesn't seem to respect it.

In the browser console I was able to use min-width on the image and it worked, so you need to add a style rule that targets that.

Yes, you should be able to use the same shortcode with different term fields and different taxonomies, you pass these as attributes.

[Silvia]

Dear Nigel,
I wanted to do exactly what you said but since the icon is rendered as image via a shortcode, how can I style it directly? Can I pass width and height thru the shortcode?
Thanks!

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Silvia

You would add a class to the parent element, i.e. the td tag in this case, where you have currently added the inline style. Say you give it a class of "course-icon", then you can set the min width of the image with a rule like

.course-icon > img {
  min-width: 60px;
}

[Silvia]

Nigel, I cannot thank you enough! Your suggestion worked like a charm, and you helped me to solve a problem that made me learn a great deal about toolset. Thank you so much!!