ACF (Advanced Custom Fields) display problems in Elements

But the dates for instance (even though I checked the ADF Return Format box as I want the format to be displayed) it returns the database record format on dates. The same problem applies for the time field as well. I also couldn’t make the URL field to be a clickable link even though it displays the URL.

Is it a URL field or a text field where you've put a URL? I believe that matters. If its just a text field, it'll display the URL as text.

Besides I’d like to hide the phrases before the ACF fields (Like Date: {{custom_field.name}}) if there is no data in it. ACF has the ability to hide the field if it is blank but how can we hide the title part preceding the custom field?

You'll have to write custom shortcode for this because the Header Element doesn't run PHP.

Say for example, for the date:

add_shortcode('custom_date',function(){
$date_field = get_field( "your_custom_field_here", get_the_ID() );
if( !empty($date_field) ){ //if value exists
echo '<p>Date:'.$date_field.'</p>';
} 
});

You then use [custom_date] on where the date is supposed to display.

You can do this method on all the other custom fields.

Hi Elvin,

Thanks for your message. But unfortunately, that didn't work out.

I have three different types of custom fields.

1- Event Type event_type (Text)
2- Event Start Date event_start_date (Date Picker)
3- Event Registration Link event_registration_link (Url)

In the Header Element I try to retrieve them as follows but the format is not what I instructed the return format of ACF to display (20/04/2021). The date displays as 20210422 and the URL is not clickable even though I checked the ACF type as URL.

<b>Event Type: </b>{{custom_field.event_type}} | 
<b>Event Start Date: </b> {{custom_field.event_start_date}} 
<b>Event URL: </b>{{custom_field.event_registration_link}} <br>

And the snippet that generates the shortcode to skip empty field titles didn't work out.

For Event type: (use [custom_event_type] )

add_shortcode('custom_event_type',function(){
$event_type_field = get_field( "event_type", get_the_ID() );
if( !empty($event_type_field) ){ //if value exists
echo '<p><b>Event Type: </b>'.$event_type_field.'</p>';
} 
});

For Event Start Date: (use [custom_event_start_date] )

add_shortcode('custom_event_start_date',function(){
$event_start_date_field = get_field( "event_start_date", get_the_ID() );
if( !empty($event_start_date_field) ){ //if value exists
echo '<p><b>Event Type: </b>'.$event_start_date_field.'</p>';
} 
});

For Event Registration: (use [custom_event_registration_link] )

add_shortcode('custom_event_registration_link',function(){
$event_registration_link_field = get_field( "event_registration_link", get_the_ID() );
if( !empty($event_registration_link_field) ){ //if value exists
echo '<p><b>Event Type: </b>'.$event_registration_link_field.'</p>';
} 
});

Let us know how it goes.

Hi Elvin,

That didn't produce any output at all.

SNIPPET

add_shortcode('custom_event_type',function(){
$event_type_field = get_field( "event_type", get_the_ID() );
if( !empty($event_type_field) ){ //if value exists
echo '<p><b>Event Type: </b>'.$event_type_field.'</p>';
} 
});

add_shortcode('custom_event_start_date',function(){
$event_start_date_field = get_field( "event_start_date", get_the_ID() );
if( !empty($event_start_date_field) ){ //if value exists
echo '<p><b>Event Type: </b>'.$event_start_date_field.'</p>';
} 
});

add_shortcode('custom_event_registration_link',function(){
$event_registration_link_field = get_field( "event_registration_link", get_the_ID() );
if( !empty($event_registration_link_field) ){ //if value exists
echo '<p><b>Event Type: </b>'.$event_registration_link_field.'</p>';
} 
});

HEADER ELEMENT:

<div align="left" style="padding-bottom: 10px"> 
{{post_terms.content_type}}
</div>

<div class="hero-wrap">
   <div class="profileimg-wrap-column">
      {{custom_field._thumbnail_id}}
   </div>
	<div class="hero-wrap-column">
	<h1 align="left" class="page-title">
	{{post_title}}
	</h1>		
   </div>
	
</div>

	
 <div class="postmeta-row-profile" >
		[page_hero_gravatar] by {{post_author}} | {{post_date}} | {{post_terms.category}}
		</div>

----- <br>
Type: [custom_event_type]  <br>

Date: [custom_event_start_date]  <br>

Link: [custom_event_registration_link]  <br>
---- <br>
<b>Event Type: </b>{{custom_field.event_type}} | 
<b>Event Start Date: </b> {{custom_field.event_start_date}} | 
<b>Event URL: </b>{{custom_field.event_registration_link}} <br>

Did you add it to the header element area?

You're supposed to add the PHP snippet on a functions.php of a child theme or on code snippets plugin and add the shortcode to the header element code area like this.

<div align="left" style="padding-bottom: 10px"> 
{{post_terms.content_type}}
</div>

<div class="hero-wrap">
   <div class="profileimg-wrap-column">
      {{custom_field._thumbnail_id}}
   </div>
	<div class="hero-wrap-column">
	<h1 align="left" class="page-title">
	{{post_title}}
	</h1>		
   </div>
	
</div>

	
 <div class="postmeta-row-profile" >
		[page_hero_gravatar] by {{post_author}} | {{post_date}} | {{post_terms.category}}
		</div>

----- <br>
Type: [custom_event_type]  <br>

Date: [custom_event_start_date]  <br>

Link: [custom_event_registration_link]  <br>
---- <br>
[custom_event_type] | 
[custom_event_start_date] | 
[custom_event_registration_link] <br>

I did, but the shortcodes display the output not inside the header element but above it. See the link below. The date format is corrected but the URL is not clickable yet.

I see,

On all the shortcode snippets, can you try changing echo to return ?

Example: return '<p><b>Event Type: </b>'.$event_start_date_field.'</p>';

That works better Elvin, thanks, but the URL is not clickable yet.

That works better Elvin, thanks, but the URL is not clickable yet.

Is it for [custom_event_registration_link]? I guess your field is returning a string then.

Let's modify the snippet to add <a> tag.

add_shortcode('custom_event_registration_link',function(){
$event_registration_link_field = get_field( "event_registration_link", get_the_ID() );
if( !empty($event_registration_link_field) ){ //if value exists
return '<p><b>Event Type: </b> <a href="'.$event_registration_link_field.'">'.$event_registration_link_field.'</p>';
} 
});

Now it works! perfect, thanks Elvin. I'll try other types of ACF and see if all works.

No problem. Let us know how it goes. :)