Support

Account

Home Forums Front-end Issues Button on front end website

Solved

Button on front end website

  • Hi,

    In my previous theme, there was a button created for an external link on each post. Now I have a new theme, I want the button back, but I can’t get it to work.

    I have these .php codes.:

    <?php if ( get_field( ‘show_external_link_button’ ) == 1 ) : ?>
    <?php // echo ‘true’; ?>
    <?php else : ?>
    <?php // echo ‘false’; ?>
    <?php endif; ?>

    <?php the_field( ‘external_link_button_url’ ); ?>
    <?php the_field( ‘external_link_button_label’ ); ?>
    <?php the_field( ‘external_link_button_price’ ); ?>

    If I place for example the button_url in the single.php I see the complete URL, but not a button. I have little programming experience, so that is probably the problem here. The text on the button needs to be ‘go to pattern’ (button_label).

    Does anybody have a solution? I would be so grateful. Thanks for thinking along!

    Lisa

  • A button would be created using CSS to modify an link element

    A link element create would be created something like this

    
    if (get_field('show_external_link_button')) {
      ?><a href="<?php 
          the_field('external_link_button_url');
          ?>"><?php the_field('external_link_button_label'); ?></a><?php 
    }
    
  • Hi John,

    Thank you for your reply.
    I tried the code both in my css as in the single.php file, but it gave errors. I’m afraid I have too little knowledge for this.

    Lisa

  • Add this to your single.php file where you want your button to appear:

    if (get_field('show_external_link_button')) { ?>
      <a class="post-button" href="<?php the_field('external_link_button_url') ?>"><?php the_field('external_link_button_label') ?></a><?php 
    }

    Remember that this code needs to be inside a PHP code block. This will create a link with external_link_button_label as the label and external_link_button_url as the target.

    To style the link as button add this snippet to your CSS file:

    .post-button {
      background-color: #4CAF50; /* Green background */
      color: white; /* White text */
      border: none; /* No border */
      padding: 15px 32px; /* Padding */
      text-align: center; /* Center the text */
      text-decoration: none; /* No underline */
      display: inline-block; /* Display on the same line */
      font-size: 16px; /* Increase font size */
    }

    You can play around with the values to match your website’s styles.

  • Hi Andisaleh,

    You are a genuis! It worked! Thank you so much!
    I have my botton back. Awesome.

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

You must be logged in to reply to this topic.