[Resolved] {{post_terms.category}} tag as button

[George]

I want to display the {{post_terms.category}} tag in a header element as a button so I can style it from the Customizer. The only way I see doing it is by adding a class of button to the template tag programmatically. Is there a way to do that?

[David]

Hi there,

GP uses the WP get_the_term_list function, which doesn’t have a filter for that.
You could wrap the post terms:

<span class="hero-term">{{post_terms.category}}</span>

Then write your own custom css output to the .hero-term a selector.

Heres an example where the user wanted to output <H1> styles to .h1 classes. The same principle applies with using the button class:

https://generatepress.com/forums/topic/creating-heading-classes-via-customizer-settings/#post-1379115

Note: Tom’s reply as it being a core function some updates may change its behaviour in the future.

[George]

No, this won’t work, as I mentioned, I want to be able to style it as a button from the Customizer so I want the class to be inside the actual link markup. Unless I didn’t understand correctly what you are saying, David. I can some JavaScript, would that be future-proof?

var element = document.querySelector(".inside-page-hero a:first-child");
element.classList.add("button", "header_cat");

[David]

You can use JS – but adding classes on the front end may lead to FOUC.
What i was proposing was you simply output the Customizers Button styles to your own custom CSS, which is what the example provided did for the <h1> –> .h1 in your case it would be .button –> .hero-term a or whatever element selector you wrap around the button.

Or the simplest option is to use custom CSS for that element. In some instances the additional work of setting this up over a few lines of CSS isn’t really worth it.

[George]

I still don’t understand what this code might be doing. My main concern is that I want to style the term as a button from the Customizer. With all the options that the Customizer offers. It’s not my decision but the client’s. Will the proposed solution (which I am still unsure of how to implement) allow me to do that?

[Elvin]

Hi George,

You can make a shortcode for this.

Use this PHP snippet to make the shortcode.

add_shortcode( 'generatepress_category_button', function() {
    ob_start();
    // Start your PHP below

	foreach (get_the_terms(get_the_ID(), 'category') as $cat) {
	   echo '<button class="hero-cat-button" data-link="'.get_category_link( $cat->term_id ).'" type="button">'.$cat->name.'</button>';
	}

	echo '
	<script> var catBtn = document.querySelectorAll(".hero-cat-button"); 
		for(i=0; i<catBtn.length; i++){ catBtn[i].addEventListener("click", function() {
  			location.href = this.dataset.link;
		}); } 
	</script>
	<style> .hero-cat-button:not(:first-child){ margin-left: 10px; }</style>
	';
	
    // End your PHP above
    return ob_get_clean();
} );

After this you can use [generatepress_category_button] on your header element.

And since this is a button. It follows the GP customizer setting.

Note: If you want further styling to this w/ custom CSS, I’ve made sure to include a selector. Use .hero-cat-button.

[George]

Hi Elvin, it works but also outputs the post meta twice: Once in the header element and once in the post meta underneath. Is there any way of fixing that? Only want it for the header element.

[Elvin]

Hi Elvin, it works but also outputs the post meta twice: Once in the header element and once in the post meta underneath. Is there any way of fixing that? Only want it for the header element.

Can you link us to the site you’re working on so I could check which is causing it?

You can add the site details on the Private Information text area.

[George]

Ok, attached. What’s the difference between my solutions and yours? You are still adding the class through JavaScript, aren’t you?

I am just using:

var element = document.querySelector(".inside-page-hero a:first-child");
element.classList.add("button", "header_cat");

two lines of code.

[Elvin]

You mean to remove this?
https://share.getcloudapp.com/E0urQn88

If so, this is the default post meta. You can remove this through Appearance > Customize > Layout > Blog > single tab and uncheck “Display post categories”.

Ok, attached. What’s the difference between my solutions and yours? You are still adding the class through JavaScript, aren’t you?

I am just using:

Main difference is, the shortcode I did is styled through Appearance > Customize > Button.

It uses <button> markup. The script included only adds an event listener so the button will work as an <a> link. Classes are added within the markup’s attribute.

We can add dynamic classes from category slugs if you want though. 🙂 In case you want different colors for each categories.

[George]

Yes, it’s that one from the screenshot. I cannot remove the post meta category from the Customizer, I need it for the pages where there is no featured image, you see. I could hide it with CSS, though. The code I used also adds the button class inside the markup output generated by the template tag.

I think I am going to go with my initial solution, other solutions seem too complicated for their own good. Since there is no filter for the get_the_term_list, nothing much that can be done.

Thanks for your help!

[Elvin]

Yes, it’s that one from the screenshot. I cannot remove the post meta category from the Customizer, I need it for the pages where there is no featured image, you see. I could hide it with CSS, though. The code I used also adds the button class inside the markup output generated by the template tag.

Yeah that works. And it’s way more simple that adding PHP snippets. Nice work.

No problem. 🙂

[Author]

Posts