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

Home Forums Support [Resolved] {{post_terms.category}} tag as button

Home Forums Support {{post_terms.category}} tag as button

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1522087
    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?

    #1522770
    David
    Staff
    Customer Support

    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.

    #1522782
    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");
    #1522788
    David
    Staff
    Customer Support

    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.

    #1522809
    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?

    #1522958
    Elvin
    Staff
    Customer Support

    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.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.

    A wise man once said:
    "Have you cleared your cache?"

    #1522967
    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.

    #1522968
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1522972
    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.

    #1522976
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1522983
    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!

    #1522989
    Elvin
    Staff
    Customer Support

    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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.