• Resolved Belal K

    (@bekalash)


    i created a fields to show in an events table using query loops, all work well, except one thing i can’t figure out, which is to create a button, leading to an external sites so it will display for each item in the table.

    any work around so to work it our or other solution? or to generate the link from the fields as a button?

    thanks in advance

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Support Paul Clark

    (@pdclark)

    There is an HTML element called <button>. It can be adapted to act like a link, or can be combined with a link, but it is really meant to submit a form.

    What you are more likely looking for is an <a> link styled as a button.

    See CSS Tricks: A Complete Guide to Links and Buttons for various stylizations.

    The basic HTML format for a link which opens in a new window or tab is:

    <a href="https://www.ads-software.com/showcase/" target="_blank">Showcase</a>

    If you have a field on your Pod called link_url, a Pods template using magic tags might like this:

    <a href="{@link_url}">{@post_title}</a>

    PHP has many ways to output the same thing, but I generally recommend sprintf or printf:

    <?php
    printf(
      '<a href="%s" target="_blank">%s</a>',
      esc_url( get_post_meta( get_the_ID(), 'link_url', true ) ),
      esc_html( get_the_title() )
    );

    All of these will output a link, where _target="_blank" causes a new tab to open.

    See the linked examples for styling it as a button. Most examples will usually add a class for this purpose. But one can also get fancy with attributes or pseudo-elements, for example styling all links with certain text in their URL, or adding an emoji before certain links.

    In the case if your current site, you might like something similar to the current theme button classes. Adding class="wp-block-button__link has-accent-color has-text-color has-background has-link-color has-border-color has-accent-border-color wp-element-button" to a link will apply many of the developer-defined styles for buttons.

Viewing 1 replies (of 1 total)
  • The topic ‘Button field with custom link or link in button’ is closed to new replies.