URL field into button

• jeremy_o

• November 5, 2020 at 4:06 am

Hi,

I have created an url field to be displayed into buttons with the code below :

<div>
  <a class="wp-block-button__link" href="<?php the_field( 'vibe_url' ); ?>"><?php the_field( 'vibe_url' ); ?></a>
</div>

As you can see my goal is to display the url as a link but also as the button text. But having button text with “http” doesn’t looks great. Is there a work around to remove the http (or https) without creating two fields (one for the url and another for the text button) ?

Thanks by advance,
Jeremy

• celestial

• November 5, 2020 at 8:21 am

Hi!

I think you can use this

$url = parse_url( get_field( 'vibe_url') );
$btn_url = $url['host'] . $url['path'];

• jeremy_o

• November 5, 2020 at 11:50 pm

Hi celestial,

Thanks for your help !
I’ve tried your proposition and the text into the button is correctly displayed but the url return https://domain-name.com/vibes/Array for every button I’ve created.

I’m using these buttons into a custom query :

<?php
$the_query = new WP_Query( $args );
  if ( $the_query->have_posts() ) : 
  ?>
    <?php
    while ( $the_query->have_posts() ) : $the_query->the_post(); 
       $url = parse_url( get_field( 'vibe_url', get_the_ID()) );
       $btn_url = $url['host'] . $url['path'];
    ?>
    <a class="wp-block-button__link" href="<?php echo $url; ?>"><?php echo $btn_url; ?></a>
    <?php endwhile; ?>
  <?php endif;?>

so I’ve guessed it could be a scoping issue but adding get_the_ID() in second parameter doesn’t help 🙁
What do you think?

Thanks again,
J

• celestial

• November 6, 2020 at 12:19 am

Hi, Jeremy!

You don’t need to use an ID because you are using a loop and get the current post every time.
But you need to change the value of the href attribute like this

$the_query = new WP_Query( $args );
  if ( $the_query->have_posts() ) : 
 
    while ( $the_query->have_posts() ) : $the_query->the_post(); 
       $url = parse_url( get_field( 'vibe_url') );
       $btn_url = $url['host'] . $url['path'];
    ?>
    <a class="wp-block-button__link" href="<?php the_field('vibe_url'); ?>"><?php echo $btn_url; ?></a>
    <?php endwhile; ?>
  <?php endif;

wp_reset_postdata(); // reset query

And don’t forget reset your query to avoid errors in future queries.

Let me know if it works correctly or not.

• jeremy_o

• November 6, 2020 at 1:17 am

It works lke a charm !

And don’t forget reset your query to avoid errors in future queries.

Indeed !

Thank you so much for your time celestial.