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.
