[resolved] Displaying custom fields when using the Advanced Custom Fields plugin (13 posts)

  1. wrightj2
    Posted 1 year ago #

    Hi - I have used the advanced custom fields plugin (suggested by Nicolas in a thread) to create some custom fields. But I cannot work out how I get them to display in my posts.

    According to the plugin I need to add <h1><?php the_field('custom_title'); ?></h1>, presumably to my functions.php child theme (changing 'custom_title' for the title of my field). I cannot work out though where exactly in the functions.php file I place it.

    I want the field to appear below the post title.

    Anyone able to help?


  2. ElectricFeet
    Posted 1 year ago #

    You might be better off posting in the plugin's forum.

    However, by the looks of things that <h1>...</h1> goes in your WordPress page. The <?php the_field('custom_title'); ?> breaks out into php in the middle and inserts your custom title.

    (You might need to substitute the value "custom_title" in there for your own custom title name; I don't know anything about the plugin.)

  3. wrightj2
    Posted 1 year ago #

    Thanks for the help ElectricFeet

  4. wrightj2
    Posted 1 year ago #

    @ElectricFeet follow up related question. If I forget about the plugin and just use the standard custom fields in wordpress, where/how would I add those to my child theme such that they appear below my post title?

  5. ElectricFeet
    Posted 1 year ago #

    Some details here.

  6. acub
    Posted 1 year ago #

    First off, you don't need a plugin to use custom fields. Go into any page/post edit screen (backend), click Screen Options (right upper corner) and check "Custom fields" if it's not already checked.

    Now look in the page for the box called "Custom Fields". You will see the list of existing custom fields related to your current post/page and their values. You may add, update or delete custom fields for the current page/post.

    In order to display the value of the field you need a custom php function. I'll name it custom_field_after_title(). Also, I will add an add_action to the __after_content_title hook that will tell the theme to run our custom function every time it prints a title. In this example I am assuming your custom field is called your_custom_field, but you need to change that with the actual name of your custom field for it to work.

    function custom_field_after_title() {
    /* Get out if not on singular page:
    	if (! is_singular()) return;
    /* Get value of the custom field:
    	$custom_field_value = get_post_meta(get_the_ID(), 'your_custom_field', true);
    /* Checking if your_custom_field is empty.
     * If it's not, wrap it in a div with a custom class
     * of ycf-class so we can style it via css
    	if (strlen($custom_field_value) > 0)
    		$output = '<div class="ycf-class">' .
    			$custom_field_value .
    	else return; /* get out if field is empty */
    	echo $output; /* print the result */
    /* Now we closed the function but we need to hook it
     * to __after_content_title
    add_action ('__after_content_title', 'custom_field_after_title');

    Everything enclosed in /* comment markup */ can be removed, I just put it there to explain the code. Just make sure you remove all the comment, not just part of it.

  7. wrightj2
    Posted 1 year ago #

    @electricfeet & @acub thank you both I am getting somewhere with this now. Couple of issues though.

    I have 3 custom fields I want to display; price, website & related_posts. And I want them to appear after the post title. I have this part working now thanks to your help.

    My code now looks like this:

    /**This adds custom fields to my pages*/
    add_action ( '__after_content_title' , 'price' );
    function price() {
    // Get custom field data for price
    	$custom_field_data = get_post_meta(get_the_ID(), 'price', true);
    	echo '<span class="price-label">Price: </span><span class="price">' . $custom_field_data . '</span>';
    add_action ( '__after_content_title' , 'website' );
    function website() {
    // Get custom field data for website
    	$custom_field_data = get_post_meta(get_the_ID(), 'website', true);
    	echo '<span class="website-label">Website: </span><span class="website">' . $custom_field_data . '</span>';
    }add_action ( '__after_content_title' , 'related_posts' );
    function related_posts() {
    // Get custom field data for related_posts
    	$custom_field_data = get_post_meta(get_the_ID(), 'related_posts', true);
    	echo '<span class="related_posts-label">Related Posts: </span><span class="related_posts">' . $custom_field_data . '</span>';

    I have three issues though:

    1) The all appear inline i.e. price:$199website: http://www.awebsite.com Related Posts: http://www.arelatedpost.com

    How do I make them so they each wrap onto a new line? e.g.
    Website: http://www.awebsite.com
    Related Posts: http://www.arelatedpost.com

    2) The labels appear across all my posts and pages even when I have not added a custom field to the post/page in question. How do I make it so that the labels only appear when I have added the custom field/s to a particular post/page?

    3) When one of my custom field values is a URL it is formatting as text not as URLs. How do I fix that?

    If you want to see what I mean here's one of my posts that does have custom fields http://ongrowthhacking.com/reviews/custom-post/ and here's one of my posts that doesn't http://ongrowthhacking.com/hello-world/

    Thank you

  8. acub
    Posted 1 year ago #

    The code I wrote above is checking to see if there is anything to display and exits the function if the custom field value is empty. So you are basically asking for a solution that has already been delivered to you, but your current level of understanding code is not high enough to see and use it.

    Also, not knowing how to display information on multiple lines indicates some serious gaps in your understanding of html and css. If you want to build this website alone, you really need to understand the basics of web development.

    Start here.

  9. wrightj2
    Posted 1 year ago #

    @acub - yes there are more than a few gaps in my CSS knowledge :) but I was figuring it would be better to do via tweaking the PHP script.

    Anyway, re not displaying when field is empty. Your right I don't know PHP but I can see your solution does what I'm after but I don't understand how I merge what you did with the script I have written.

    The reason I didn't use your script was because i could not see how I added more than one custom field. whereas the one written by electricfeet was easier for me to understand in that regard.

  10. acub
    Posted 1 year ago #

    add_action ('__after_content_title', 'display_custom_fields_block');
    function display_custom_fields_block() {
    	if ( ! is_singular()) return;
    	$custom_fields_array = array(
    		'price' => 'Price',
    		'website' => 'Website',
    		'related_posts' => 'Related Posts'
    	$output = custom_fields_iteration($custom_fields_array);
    	if (strlen($output) > 0 )
    		echo '
    		<div class="cf-wrap">'.
    function custom_fields_iteration ($custom_fields_array) {
    	$output = '';
    	foreach ($custom_fields_array as $custom_field => $label) :
    		$custom_field_value = get_post_meta(get_the_ID(), $custom_field, true);
    		$output .= (strlen($custom_field_value) > 0 ? '
    			<div class="'.$custom_field.'-wrap">
    				<span class="cf-label">'.$label.': </span>'.
    			</div>' : '');
    	return $output;
  11. wrightj2
    Posted 1 year ago #

    That's absolutely fantastic acub. Thank you so much for your help.

  12. M3N
    Posted 10 months ago #

    I have problems with custom fields and I appreciate if someone can help me on this.
    I created a Download Box using custom fields & styled it. the code is this :

    <div class="download-links">
      <?php $cf_var = get_post_meta( $post->ID, 'download', true );
       if( isset($cf_var) && !empty(cf_var) ) : ?>
        <li class="download">
         <a href="<?php echo get_post_meta( $post->ID, 'download', true ); ?>">Download HQ</a>
       <?php endif; ?>
     <?php $cf_var = get_post_meta( $post->ID, 'download2', true );
        if( isset($cf_var) && !empty(cf_var) ) : ?>
         <li class="download">
          <a href="<?php echo get_post_meta( $post->ID, 'download2', true ); ?>">Download HQ</a>
        <?php endif; ?>
     <?php $cf_var = get_post_meta( $post->ID, 'password', true );
        if( isset($cf_var) && !empty(cf_var) ) : ?>
         <li class="download">
           <p>Password: <span><?php echo $cf_var; ?></span></p>
        <?php endif; ?>
    </div><!-- end of .download-links -->

    So I styled them in styles.css .
    The problem is whether the post has custom field assigned, or not, the Download Box is showing.

    After reading this topic, I end up with this in my functions.php :

     * Download box using Custom Fields
    function display_download_box() {
    	if( !is_singular() ) {
    	$custom_fields_array() = array(
    		'download'	=>	'download',
    		'download2'	=>	'download2',
    		'password'	=>	'password',
    	$output = custom_fields_iteration( $custom_fields_array );
    	if( strlen($output) > 0 ) {
    		echo '<div class="download-links">' . $output . '</div>';
    function custom_fields_iteration( $custom_fields_array ) {
    	$output = '';
    	foreach( $custom_fields_array as $custom_field => $data ) :
    		$custom_field_value = get_post_meta( get_the_ID(), $custom_field, true );
    	$output .= ( strlen($custom_field_value) > 0 ? 'div class="download">
    		<span class="cf_label">' . $data . ': </span>' . $custom_field_value . '</div>' : '');
    	echo $output;
    add_action ('__after_content_title', 'display_download_box');

    But it didn't worked at all and cause Fatal Error.

    How can I find out if the post has custom field or not, and then the code run and styles applied ?
    I hope you guys can help me.

  13. klmathome
    Posted 8 months ago #

    OK. Acub's code above worked great.
    I have a wrapper around my custom field info and it makes a nice list.

    Now, how do I call these custom fields individually, so I can -
    1. use one custom field as a hyperlink for another custom field
    2. assign and adjacent image to one custom field - like a facebook icon.
    3. remove the : and group several custom fields together to make and address

    In the standard wordpress situation I would just get_post_meta for each custom field and wrap it with a div.

    Any help would be appreciated.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic