Home › Forums › Front-end Issues › 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.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.