Ask the community

This is a community support forum where you can ask
questions and interact with other PremiumPress Customers.

Transform "custom field" text link to buttons

  • Vivian
    Vivian
    Senior Member 174 points
    May 9, 2019 at 4:18 am

    Hello, I have used taxonomies in the custom fields on the listing page however these display as text links and would be nice to transform them to buttons – any clues from the experts please…

  • JamesD
    JamesD
    Super Guru 1,345 points
    May 9, 2019 at 4:49 am

    Hello Vivian,
    The easiest way would probably be adding a couple bootstrap classes.
    This snippet will add those classes to give those links the button look as well as two link attributes.

    You may need to make some adjustments to suit your needs. Try placing this with your custom javascript:
    jQuery('.fieldtype-taxonomy a').addClass('btn btn-danger btn-sm px-2 my-1').attr({"role":"button", "aria-pressed":"true"});
    Note: The px-2 adjusts the x-axis (horizontal) padding, the my-1 adjusts the y-axis (vertical) margin and the btn-danger gives it it’s color (I picked btn-danger to match your site better).

  • Vivian
    Vivian
    Senior Member 174 points
    May 9, 2019 at 7:02 am

    Fabulous but silly question… where would custom javascript be placed I assume not with CSS…

  • JamesD
    JamesD
    Super Guru 1,345 points
    May 9, 2019 at 7:50 am

    Place this in your child theme _functions.php file:

    add_action( 'wp_footer', 'load_footerjs' );
    function load_footerjs() {
        ?>
    <script type="text/javascript">
    <!--
    alert('here');
    	jQuery('.fieldtype-taxonomy a').addClass('btn btn-danger btn-sm px-2 my-1').attr({"role":"button", "aria-pressed":"true"});
    //-->
    </script>
    <?php } ?>
  • JamesD
    JamesD
    Super Guru 1,345 points
    May 9, 2019 at 8:13 am

    Note: Be sure to remove the alert('here'); line once you verify it’s working.

  • Vivian
    Vivian
    Senior Member 174 points
    May 9, 2019 at 8:20 pm

    Wonderful thanks so very much!!!! If I may ask for one more thing where to change the padding and spacing of the “tag” buttons there is a big gap between them and the heading and not enough space between them…

  • JamesD
    JamesD
    Super Guru 1,345 points
    May 9, 2019 at 8:42 pm

    @Vivian
    Remove the my-1.

  • JamesD
    JamesD
    Super Guru 1,345 points
    May 9, 2019 at 9:44 pm

    Should also point out that you can place other custom javascript within the same <script></script> area (if the need arises).

Viewing 8 posts - 1 through 8 (of 8 total)