[Support request] How to use custom field values as dynamic data in shortcodes and HTML

[Takeru]

I want to use the values of custom fields as dynamic data in shortcodes and HTML.

I don’t think Headline currently supports that, but is there any way to handle this?

[Fernando]

Hi Marumoro,

Here is something that may assist you regarding this: https://stackoverflow.com/questions/14006909/add-php-inside-the-short-code

Basically, you can try creating a Hook Element, then retrieve the specific post_meta through get_post_meta() function: https://developer.wordpress.org/reference/functions/get_post_meta/

For instance, if I have a post_meta field testid, I can retrieve it and place it in a shortcode parameter as such:

<?php 
echo do_shortcode( '[wp_show_posts id="'.get_post_meta(get_the_ID(),'testid')[0].'"]' ); 
?>

I can then place this in a Hook Element and place it in my preferred location.

For further assistance regarding this, kindly reach out to the support of ACF as this is out of our scope.

Hope this clarifies. 🙂

[Takeru]

Thank you so much for your kind attention!
I am not able to write the code description, so please let me know if you can help me.

If the custom Post Meta field is “fruits” and the input value is “apple”, what code should I write to get [apple] in the shortcode?

[Elvin]

Hi Marumoro,

It will depend on the custom field’s return value format.

If a custom field is returning a single value (string or integer) then you can do some PHP as simple as this:

add_shortcode('display_custom_field', function ($atts){
	ob_start();
	
        $atts = shortcode_atts( array(
            'field_name' => 'no foo'
        ), $atts, 'display_custom_field' );

	$customfield = get_post_meta( get_the_ID(), $atts['field_name'] , true );
	if( $customfield ){ 
		$output = $customfield;
	} 
	echo $output;
	return ob_get_clean();
});

If you’re unsure how to run PHP snippets, here’s a brief documentation on how to do it – https://docs.generatepress.com/article/adding-php/

with this code, you can use the shortcode [display_custom_field field_name="fruits"] and it should display the value of the custom field “fruits” of the current post.

If you’re using ACF plugin, they already have a shortcode for this. You can read more about it here –
https://www.advancedcustomfields.com/resources/shortcode/

[Takeru]

Thank you.

I added the above code to the code snippet and got a 501 error.

Am I making a mistake in some way?

[Takeru]

By the way, we use Metabox, not ACF.

https://metabox.io/

[Elvin]

Am I making a mistake in some way?

Let’s try simplifying it.

Try this one instead.

add_shortcode('display_custom_field', function ($atts){
	ob_start();
	
        $atts = shortcode_atts( array(
            'field_name' => 'no foo'
        ), $atts, 'display_custom_field' );

	$customfield = get_post_meta( get_the_ID(), $atts['field_name'] , true );
	echo $customfield;
	
	return ob_get_clean();
});

I’ve tested this one. See it in action here – http://elvin.wppluginsupport.net/?p=1
https://share.getcloudapp.com/RBunLywP

In the context of metabox.io, they already have shortcodes as well – https://docs.metabox.io/shortcode/

[Takeru]

I also received a 501 error.

Could the server or another plugin be affecting this?

[Elvin]

I also received a 501 error.

It’s definitely something isolated within the site you’re working on but I can’t be sure w/c one.

Could the server or another plugin be affecting this?

This is worth testing. You can try disabling ALL plugins except GP Premium and Metabox and see if its still occurs.

If it doesn’t, consider contacting your web hosting’s support for server config assistance. 🙂

You can also try doing some basic fixes suggested here – https://kinsta.com/knowledgebase/501-not-implemented-error/#:~:text=The%20501%20not%20implemented%20error%20indicates%20that%20the%20server%20does,2).

[Takeru]

It seems to be a server-side issue, so I’ll try different things.

[Elvin]

You can check the debug log for clues.

Let us know how it goes. 🙂

[Takeru]

A few server-side configuration changes and it worked!
Thank you very much.

I would like to use the following plugin to automatically reflect the values of the fields, can you please provide me with additional code?

I would like to automatically generate a shortcode and display a Google Map on the front end by simply entering an address in the field.

https://wordpress.org/plugins/simple-google-maps-short-code/

[Elvin]

I would like to use the following plugin to automatically reflect the values of the fields, can you please provide me with additional code?

Since it’s metabox.io you’re using, you can use this shortcode – https://docs.metabox.io/shortcode/

The shortcode usage is quite simple. It’s basically something like [rwmb_meta id="fruits"].

I would like to automatically generate a shortcode and display a Google Map on the front end by simply entering an address in the field.

https://wordpress.org/plugins/simple-google-maps-short-code/

This plugin is outside of our scope of support unfortunately.

But I believe we can insert dynamic values with the shortcode itself.

Example:

add_shortcode('display_gmap', function ($atts){
	ob_start();
	
        $atts = shortcode_atts( array(
            'address' => 'no foo'
        ), $atts, 'display_gmap' );

	$address = get_post_meta( get_the_ID(), $atts['field_name'] , true );
	do_shortcode( '[pw_map address="'.$address.'" key="YOUR API KEY"]' );
	
	return ob_get_clean();
});

Which basically can work like [display_gmap address="New York"]. Just make sure to replace YOUR API KEY w/ an API key from Google.

[Takeru]

Thank you very much.

I got an error pasting into the code snippet below, what am I doing wrong?

add_shortcode(‘display_gmap’, function ($atts){
ob_start();

$atts = shortcode_atts( array(
‘address’ => ‘no foo’
), $atts, ‘display_gmap’ );

$address = get_post_meta( get_the_ID(), $atts[‘field_name’] , true );
do_shortcode( ‘[pw_map address=”‘.$address.'” key=”YOUR API KEY”]’ );

return ob_get_clean();
});
?>

[Elvin]

Ah that’s my bad. I forgot to format the code so ‘ doesn’t change to '.

I’ve formatted it. You can try it again and let us know how it goes.

Reminder: You must change the YOUR API KEY line within the code to match your Google API key.
https://developers.google.com/maps/documentation/javascript/get-api-key

[Author]

Posts