[Support request] Display only 1 category from a taxonomy hierarchy in a query loop

[John]

Hi GP team,

So far I’ve been able to find answers to all my questions by reading previous posts, but this one got me stuck.

I’m using GP Pro and GB Free. I’m trying to build a Query Loop in a page that lists all pages with a specific category (I have a plugin to add taxonomy to pages). In each of these ‘cards’, I want to display other categories that I use to show various criteria about the tool presented in the card.

I’ve created several categories hierarchies to capture these criteria. For example, this one:

Difficulty (parent category)
– level 1 (child category)
– level 2 (child category)
– level 3 (child category)

And I have a couple others using the same schema.

When I use the “Post Categories” block, it shows all the categories associated with that page. I only want to show select categories that are part of the 3 parent categories I’m using for the relevant criteria.

How would I be able to do that? Is that possible with GB Pro?

[John]

Maybe there is a better way to achieve what I’m trying to do. Taxonomy makes intuitive sense to me but it may not be the most practical path…

[Fernando]

Hi John,

You could probably create a custom field through ACF, and retrieve that instead. This might be the easier route.

How to use ACF: https://www.advancedcustomfields.com/resources/getting-started-with-acf/

[John]

Thank you Fernando.

Following your advice, I have installed ACF and created the custom fields.

Now I’m struggling to add them into my page. I tried using GB title block or button block to pull dynamic data, but it doesn’t seem like the custom fields are available from the dynamic data available. Is there another way to access it?

[John]

I thought I found a solution by using ACF shortcodes, but it doesn’t work. I’m able to create a short code to retrieve a value, but I need to manually enter the ID of the page I want to retrieve it from, so it’s not dynamic, which defeats the purpose.

Is there any way for GP or GB to retrieve a custom field value in the Gutenberg editor?

[John]

Ok, I found how to display the custom field value! I used the Heading block, dynamic data and used “Post Meta” and simply entered the custom field name.

That’s great. Now I’m trying to use CSS to add an icon to that field that depends on the value returned for the field. I know the CSS part, but I don’t know how to add a selector dynamically according to the value, so that I can style it accordingly.

Ideally I would use the same method of dynamic data to add a css class of the same name to the element. But I don’t see a way to add a class dynamically. Is there any way to do that with GP Pro or GB (free)?

[Fernando]

You would need custom code for this?

What specific Block are you using – a Headline or Button? And, around how many values would be possible for your field?

Basically, would a logic like this apply?:

If post meta field value is A
-display icon X

If post meta field value is B
-display icon Y

If post meta field value is C
-display icon Z

[John]

Yes exactly, that’s the logic I’m going for.

I can use a headline or a button, it doesn’t matter so much, I can always style it later to look however I need it to. Though a Headline block would be easier if possible. I mostly want to show the icon + a label. If I can add a dynamic class to the element I can use :before and :after selectors to achieve that.

There are 3 fields, and each has 4 possible values showing a different icon (SVG).

Does it require custom code?

[Fernando]

Here’s a sample snippet:

add_filter('generateblocks_dynamic_content_output', function($content, $attributes, $block){
	if ( ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'add-custom-icon' ) !== false ) {
	$my_svg1 = '<span><svg xml:space="preserve" version="1.1" viewBox="0 0 129.921 129.921" height="129.921px" width="129.921px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><g id="Layer_2"></g><g id="Layer_1"><g><path d="M63.775,100.941c-31.357,0-56.867-25.51-56.867-56.867c0-1.642,1.33-2.972,2.973-2.972H117.67 c1.642,0,2.972,1.33,2.972,2.972C120.642,75.431,95.131,100.941,63.775,100.941z M12.938,47.047 c1.544,26.701,23.756,47.949,50.837,47.949c27.08,0,49.293-21.249,50.836-47.949H12.938z"></path></g><g><path d="M63.775,91.582c-26.28,0-47.66-21.38-47.66-47.66c0-1.642,1.331-2.972,2.973-2.972h89.374 c1.643,0,2.973,1.331,2.973,2.972C111.435,70.202,90.055,91.582,63.775,91.582z M22.165,46.895 c1.53,21.619,19.608,38.742,41.61,38.742s40.08-17.123,41.61-38.742H22.165z"></path></g><g><path d="M63.775,62.385c0,0,7.744,10.229,0,10.229S63.775,62.385,63.775,62.385z"></path></g><g><path d="M78.323,56.358c0,0,12.709,1.757,7.233,7.233C80.081,69.067,78.323,56.358,78.323,56.358z"></path></g><g><path d="M49.226,56.358c0,0-1.756,12.709-7.232,7.233C36.519,58.115,49.226,56.358,49.226,56.358z"></path></g></g></svg></span>';
		
	$my_svg2 = '<span><svg xml:space="preserve" version="1.1" viewBox="0 0 129.921 129.921" height="129.921px" width="129.921px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><g id="Layer_2"></g><g id="Layer_1"><g><path d="M63.775,100.941c-31.357,0-56.867-25.51-56.867-56.867c0-1.642,1.33-2.972,2.973-2.972H117.67 c1.642,0,2.972,1.33,2.972,2.972C120.642,75.431,95.131,100.941,63.775,100.941z M12.938,47.047 c1.544,26.701,23.756,47.949,50.837,47.949c27.08,0,49.293-21.249,50.836-47.949H12.938z"></path></g><g><path d="M63.775,91.582c-26.28,0-47.66-21.38-47.66-47.66c0-1.642,1.331-2.972,2.973-2.972h89.374 c1.643,0,2.973,1.331,2.973,2.972C111.435,70.202,90.055,91.582,63.775,91.582z M22.165,46.895 c1.53,21.619,19.608,38.742,41.61,38.742s40.08-17.123,41.61-38.742H22.165z"></path></g><g><path d="M63.775,62.385c0,0,7.744,10.229,0,10.229S63.775,62.385,63.775,62.385z"></path></g><g><path d="M78.323,56.358c0,0,12.709,1.757,7.233,7.233C80.081,69.067,78.323,56.358,78.323,56.358z"></path></g><g><path d="M49.226,56.358c0,0-1.756,12.709-7.232,7.233C36.519,58.115,49.226,56.358,49.226,56.358z"></path></g></g></svg></span>';
		
	$my_svg3 = '<span><svg xml:space="preserve" version="1.1" viewBox="0 0 129.921 129.921" height="129.921px" width="129.921px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><g id="Layer_2"></g><g id="Layer_1"><g><path d="M63.775,100.941c-31.357,0-56.867-25.51-56.867-56.867c0-1.642,1.33-2.972,2.973-2.972H117.67 c1.642,0,2.972,1.33,2.972,2.972C120.642,75.431,95.131,100.941,63.775,100.941z M12.938,47.047 c1.544,26.701,23.756,47.949,50.837,47.949c27.08,0,49.293-21.249,50.836-47.949H12.938z"></path></g><g><path d="M63.775,91.582c-26.28,0-47.66-21.38-47.66-47.66c0-1.642,1.331-2.972,2.973-2.972h89.374 c1.643,0,2.973,1.331,2.973,2.972C111.435,70.202,90.055,91.582,63.775,91.582z M22.165,46.895 c1.53,21.619,19.608,38.742,41.61,38.742s40.08-17.123,41.61-38.742H22.165z"></path></g><g><path d="M63.775,62.385c0,0,7.744,10.229,0,10.229S63.775,62.385,63.775,62.385z"></path></g><g><path d="M78.323,56.358c0,0,12.709,1.757,7.233,7.233C80.081,69.067,78.323,56.358,78.323,56.358z"></path></g><g><path d="M49.226,56.358c0,0-1.756,12.709-7.232,7.233C36.519,58.115,49.226,56.358,49.226,56.358z"></path></g></g></svg></span>';
		
	$my_meta_value = get_post_meta( get_the_ID(), 'PLACE META FIELD NAME HERE', false);
		
	if( $my_meta_value === 'A') {
		$content = $my_svg1 . $content;
	} else if( $my_meta_value === 'B') {
		$content = $my_svg2 . $content;
	} else {
		$content = $my_svg3 . $content;
	}
	
	}
	return $content;
}, 10, 3);

Replace the 3 svg codes with yours, and place the post meta field name in the placeholder I set in the code.

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

We’ll need custom CSS to fix its appearance afterwards.

[John]

Fernando, thank you so much! I will try it, but first I need to make sure I got it. Since I have 4 possible values per field, I had to tweak your code a bit. Hopefully I understood correctly what you meant and how it was structured that I didn’t make a mistake. Do you mind checking it?

add_filter('generateblocks_dynamic_content_output', function($content, $attributes, $block){
	if ( ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'add-custom-icon' ) !== false ) {
	$svg_type1 = '<span><svg xml:space="preserve" version="1.1" viewBox="0 0 129.921 129.921" height="129.921px" width="129.921px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><g id="Layer_2"></g><g id="Layer_1"><g><path d="M63.775,100.941c-31.357,0-56.867-25.51-56.867-56.867c0-1.642,1.33-2.972,2.973-2.972H117.67 c1.642,0,2.972,1.33,2.972,2.972C120.642,75.431,95.131,100.941,63.775,100.941z M12.938,47.047 c1.544,26.701,23.756,47.949,50.837,47.949c27.08,0,49.293-21.249,50.836-47.949H12.938z"></path></g><g><path d="M63.775,91.582c-26.28,0-47.66-21.38-47.66-47.66c0-1.642,1.331-2.972,2.973-2.972h89.374 c1.643,0,2.973,1.331,2.973,2.972C111.435,70.202,90.055,91.582,63.775,91.582z M22.165,46.895 c1.53,21.619,19.608,38.742,41.61,38.742s40.08-17.123,41.61-38.742H22.165z"></path></g><g><path d="M63.775,62.385c0,0,7.744,10.229,0,10.229S63.775,62.385,63.775,62.385z"></path></g><g><path d="M78.323,56.358c0,0,12.709,1.757,7.233,7.233C80.081,69.067,78.323,56.358,78.323,56.358z"></path></g><g><path d="M49.226,56.358c0,0-1.756,12.709-7.232,7.233C36.519,58.115,49.226,56.358,49.226,56.358z"></path></g></g></svg></span>';
		
	$svg_type2 = '<span><svg xml:space="preserve" version="1.1" viewBox="0 0 129.921 129.921" height="129.921px" width="129.921px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><g id="Layer_2"></g><g id="Layer_1"><g><path d="M63.775,100.941c-31.357,0-56.867-25.51-56.867-56.867c0-1.642,1.33-2.972,2.973-2.972H117.67 c1.642,0,2.972,1.33,2.972,2.972C120.642,75.431,95.131,100.941,63.775,100.941z M12.938,47.047 c1.544,26.701,23.756,47.949,50.837,47.949c27.08,0,49.293-21.249,50.836-47.949H12.938z"></path></g><g><path d="M63.775,91.582c-26.28,0-47.66-21.38-47.66-47.66c0-1.642,1.331-2.972,2.973-2.972h89.374 c1.643,0,2.973,1.331,2.973,2.972C111.435,70.202,90.055,91.582,63.775,91.582z M22.165,46.895 c1.53,21.619,19.608,38.742,41.61,38.742s40.08-17.123,41.61-38.742H22.165z"></path></g><g><path d="M63.775,62.385c0,0,7.744,10.229,0,10.229S63.775,62.385,63.775,62.385z"></path></g><g><path d="M78.323,56.358c0,0,12.709,1.757,7.233,7.233C80.081,69.067,78.323,56.358,78.323,56.358z"></path></g><g><path d="M49.226,56.358c0,0-1.756,12.709-7.232,7.233C36.519,58.115,49.226,56.358,49.226,56.358z"></path></g></g></svg></span>';
		
	$svg_type3 = '<span><svg xml:space="preserve" version="1.1" viewBox="0 0 129.921 129.921" height="129.921px" width="129.921px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><g id="Layer_2"></g><g id="Layer_1"><g><path d="M63.775,100.941c-31.357,0-56.867-25.51-56.867-56.867c0-1.642,1.33-2.972,2.973-2.972H117.67 c1.642,0,2.972,1.33,2.972,2.972C120.642,75.431,95.131,100.941,63.775,100.941z M12.938,47.047 c1.544,26.701,23.756,47.949,50.837,47.949c27.08,0,49.293-21.249,50.836-47.949H12.938z"></path></g><g><path d="M63.775,91.582c-26.28,0-47.66-21.38-47.66-47.66c0-1.642,1.331-2.972,2.973-2.972h89.374 c1.643,0,2.973,1.331,2.973,2.972C111.435,70.202,90.055,91.582,63.775,91.582z M22.165,46.895 c1.53,21.619,19.608,38.742,41.61,38.742s40.08-17.123,41.61-38.742H22.165z"></path></g><g><path d="M63.775,62.385c0,0,7.744,10.229,0,10.229S63.775,62.385,63.775,62.385z"></path></g><g><path d="M78.323,56.358c0,0,12.709,1.757,7.233,7.233C80.081,69.067,78.323,56.358,78.323,56.358z"></path></g><g><path d="M49.226,56.358c0,0-1.756,12.709-7.232,7.233C36.519,58.115,49.226,56.358,49.226,56.358z"></path></g></g></svg></span>';
	
	$svg_type4 = '<span><svg xml:space="preserve" version="1.1" viewBox="0 0 129.921 129.921" height="129.921px" width="129.921px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><g id="Layer_2"></g><g id="Layer_1"><g><path d="M63.775,100.941c-31.357,0-56.867-25.51-56.867-56.867c0-1.642,1.33-2.972,2.973-2.972H117.67 c1.642,0,2.972,1.33,2.972,2.972C120.642,75.431,95.131,100.941,63.775,100.941z M12.938,47.047 c1.544,26.701,23.756,47.949,50.837,47.949c27.08,0,49.293-21.249,50.836-47.949H12.938z"></path></g><g><path d="M63.775,91.582c-26.28,0-47.66-21.38-47.66-47.66c0-1.642,1.331-2.972,2.973-2.972h89.374 c1.643,0,2.973,1.331,2.973,2.972C111.435,70.202,90.055,91.582,63.775,91.582z M22.165,46.895 c1.53,21.619,19.608,38.742,41.61,38.742s40.08-17.123,41.61-38.742H22.165z"></path></g><g><path d="M63.775,62.385c0,0,7.744,10.229,0,10.229S63.775,62.385,63.775,62.385z"></path></g><g><path d="M78.323,56.358c0,0,12.709,1.757,7.233,7.233C80.081,69.067,78.323,56.358,78.323,56.358z"></path></g><g><path d="M49.226,56.358c0,0-1.756,12.709-7.232,7.233C36.519,58.115,49.226,56.358,49.226,56.358z"></path></g></g></svg></span>';
		
	$my_meta_value = get_post_meta( get_the_ID(), 'Resource Type', false);
		
	if( $my_meta_value === 'Software') {
		$content = $svg_type1 . $content;
	} else if( $my_meta_value === 'External Service') {
		$content = $svg_type2 . $content;
	} else if( $my_meta_value === 'Instructions') {
		$content = $svg_type3 . $content;
	} else {
		$content = $svg_type4 . $content;
	}
	
	}
	return $content;
}, 10, 3);

And then I have to copy that PHP snippet (and tweak it) for each field, correct?

I have made the following replacements:
– PLACE META FIELD NAME HERE = Resource Type
– A = Software
– B = External Service

(I haven’t replace the SVG code yet.)

Is it correct? Thank you so much

UPDATE: I guess it’s not correct because it doesn’t work :/

[Fernando]

Forgot to mention you’ll need to add add-custom-icon to the class list of the Headline Block.

[John]

Aaah that was it. I was also wondering how the snippet would know where to get applied. It works! Thank you so much!

[Fernando]

Your welcome John! Glad that worked!

[John]

I have proclaimed victory a bit too soon, it seems. Turns out, the function only returns the last value — if I understand correctly, it means that all the “if” arguments before the last “else” statement return false, so it outputs the svg from the last else statement. What might explain that?

[John]

Well, I think I’ve found a much simpler approach. I realized I’m able to simply add HTML in the custom field, and it is passed to the front-end. So I simply added it to the ACF values like so:

<div class="type-software">Software</div> : Software
<div class="type-service">External Service</div> : External Service
<div class="type-instructions">Instructions</div> : Instructions
<div class="type-policy">Policy</div> : Policy

With that class added, I’m then able to add the icon via CSS! Yay!

In fact I would be able to add the SVG code directly in the ACF field value too if needed.

I hope it’s useful for someone else in the future

[Author]

Posts