• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours

By Jeff Cohan, October 26, 2015

How to use Advanced Custom Fields with Genesis

Last updated October 10th, 2018 at 08:04 am

Do you want to use Advanced Custom Fields with Genesis? This article will show you one simple method for displaying the values of those custom fields in your Genesis framework child theme.

(I can’t explain why I’ve waited so long to try out the Advanced Custom Fields plugin. All I can say is I’m glad I finally did. Today.)

Setting up the Advanced Custom Fields plugin

This article does not cover the process for installing and configuring Advanced Custom Fields. Frankly, that process is so intuitive and straightforward — and well-documented elsewhere — that I couldn’t do better if I tried. Instead, what I’ll describe here is my particular use case.

Use Case: Web Site for Artist

The Web site in question (still in development) is for an artist who makes paintings and photographs. We’re using the Modern Portfolio Pro child theme with Genesis. Each blog post consists of a large image of either a painting or a photograph. Posts are categorized accordingly, either as ‘painting’, ‘photography’ or ‘infrared-photography’ (a subcategory of ‘photography’).

km-web-advanced-custom-fields

Photographers often like to share details about their photographs. And while my client could have entered these details free-form in the body of the post-edit box, there are a couple of problems with that approach:

  1. It’s easy to forget to enter some of the details.
  2. Doing it free-form isn’t the best way to display the details for those interested in them.

Therefore, I created (what Advanced Custom Fields refers to as) a field group called “Photography” with Location rules for displaying the custom fields on posts in either the ‘photography’ or ‘infrared-photography’ categories. The fields in this field group are the following:

  • Camera
  • Lens
  • Lighting
  • Aperture
  • Shutter Speed
  • Processing Details

Here’s the field group setup screen:

Advanced Custom Fields
Advanced Custom Fields setup for the “Photography” field group (Click to enlarge)

And here is what the post-edit screen looks like when adding or editing a post whose category is either “photography” or “infrared-photography”:

km-web-advanced-custom-fields-edit-screnn

I went ahead and populated all of these custom fields for one of the blog posts in the ‘photography’ category. (Note: We’re at the “demo” stage as of this writing, and the fields and filled-in values are all preliminary and for demo purposes only.)

Displaying the Values of the Advanced Custom Fields in Genesis

End Result

Here’s the end result, with the photo meta information in a box below the image and any caption and/or basic descriptive content (click to enlarge):

screen capture of Advanced Custom Fields with Genesis

Display Advanced Custom Fields data on the front end using a Genesis Action Hook

I chose to use the genesis_entry_content action hook, calling a custom function named ‘nwb_acf_photography’. The way this works is that anything the custom function echoes to the screen will appear after the main entry content.

Add this line to the child theme’s functions.php file:

add_action ('genesis_entry_content', 'nwb_acf_photography' );

Custom Function

And here is the code for the custom function, with spacing and line breaks for readability (also added to the child theme’s functions.php file):

function nwb_acf_photography() {
	if ( ! ( is_single() && in_category(array(2, 7, 15)) ) ) {
		return;
	}
	// else
	
	// These are the custom field keys JC defined in the dashboard
	$metas_photo = array(
		'camera', 
		'lens', 
		'lighting', 
		'aperture', 
		'shutter_speed', 
		'processing_details');
	
	// If ANY of these fields is filled in, 
	// then we'll proceed and start the div.
	$has_meta = false; // init
	foreach ($metas_photo as $test ) {
		if ( get_field($test) ) {
			$has_meta = true;
			continue; // Just need one meta field filled to create the div.
		}
	}
	if ( $has_meta ) {
		echo '<div class="custom-data photography-custom-data">';
		echo '<h2>Photo Details:</h2>';
		foreach ( $metas_photo as $meta_photo ) {
			$$meta_photo = get_field($meta_photo);
			if ( $$meta_photo ) {
				$f_object = get_field_object($meta_photo);
				$label = $f_object['label'];
				echo '<div class="' . $meta_photo . '"><span class="label">' . 
				$label . ':</span> ' . 
				'<span class="value">' . $$meta_photo . '</span></div>';
			}
		}
		echo '</div><!-- /.custom-data -->';
	}
}

Notes

  • Lines 2 – 4: The function should invoke only for single blog posts in the ‘photography’ (catgegory ID 2) or ‘infrared-photography’ (category ID 7) categories.
  • Lines 7 – 14: I’m lazy, so I define a simple numeric array whose elements are the keys of the custom fields. This will allow me to iterate through a foreach loop to display the label and value for each custom field used for the post.
  • Lines 17 – 23: I want to assemble a container div for the meta content, but only if there’s actually some meta content to display. So I initialize a custom $has_meta variable to false and then switch it to true if any of the six custom fields has any stored value. I’m using the ACF get_field function for this test. The continue statement kicks me out of the loop if/when the condition is true.
  • Lines 25 – 39: This is where the content for the meta data is assembled. Line 29 stores the value of each custom field key in a variable variable whose name is the key (using the $$ double dollar sign method). For each custom field that has been defined for the post, I use the ACF get_field_object function, which returns an associative array of values for the given field key, so that I can get the key’s label (line 32). The rest of the code block simply echoes out the photo’s meta data.

The CSS

And here is the pertinent CSS:

.custom-data {
	padding: 2em;
	margin-top: 2em;
	margin-bottom: 3em;
	border: 1px solid #333;
}

.custom-data .label {
	color: #999;
	margin-right: 1em;
}

.custom-data .value {
	color: #000;
	font-weight: 500;
}

Comments Welcome

I hope you found this article helpful. If so, feel free to share. If you have questions or comments, including suggestions for improvements, please comment below.

Related Posts

  1. Making Sense of WordPress Post Formats
  2. Dynamic Linear Gradients for Background Images in Genesis
  3. Use Custom Fields to Hide Stale Posts
  4. Dive Into WordPress Custom Post Types – Part 1
  5. Dive Into WordPress Custom Post Types – Part 2
  • Choose the best match.

Written by Jeff Cohan · Categorized: Techniques · Tagged: Advanced Custom Fields, Genesis, Plugins, WordPress

  • Choose the best match.

Reader Interactions

Comments

  1. Louise says

    November 1, 2015 at 4:18 pm

    Hi,
    Thanks for this… I apologise for the very basic question but…
    Where are you adding the first two sets of code? Is it to your child theme’s functions.php file?

    Reply
    • Jeff Cohan says

      November 2, 2015 at 1:40 pm

      No need to apologize. An excellent question. Yes, both segments of code should be added to the child theme’s functions.php file. (Thanks for the question; I updated the article accordingly.)

      Reply
  2. Sandee Jackson says

    November 5, 2015 at 11:45 am

    Great post! Thanks for sharing it — saw it in the GenesisWP Facebook group.

    Reply
  3. Adam Rubinstein says

    February 12, 2016 at 11:59 am

    Thanks, Jeff! It’ll probably be another week before I can put your code into action, but you probably just saved my hairline, and my client a lot of money. 🙂

    Reply
    • Jeff Cohan says

      February 16, 2016 at 9:32 am

      Nice to hear, Adam. Thanks for your comment.

      Reply
      • Adam Rubinstein says

        February 16, 2016 at 12:17 pm

        Actually, never mind! I got it!

        Reply
        • Jeff Cohan says

          February 16, 2016 at 12:44 pm

          Kewl! I was just about to reply. What was your solution?

          If I understood your question, then I think all you need to do is enter valid html in the box for band link, like this:
          <a href="http://soundcloud.com/band-link-here">Band 99<a>

          Reply
          • Adam Rubinstein says

            April 27, 2016 at 11:28 am

            Hi Jeff,

            Sorry for my late reply; I didn’t see a note that you’d replied. 🙂

            My solution was this:


            if ( $has_meta ) {
            echo '';
            echo '' ?>
            <?php
            foreach ( $metas_links as $meta_links ) {
            $$meta_links = get_field($meta_links);
            if ( $$meta_links ) {
            $f_object = get_field_object($meta_links);
            $label = $f_object['label'];
            echo '' .
            '' . $label . '' .
            '';
            }
            }
            echo '';
            }
            }

  4. Adam Rubinstein says

    February 16, 2016 at 12:10 pm

    Hi again, Jeff,

    As I thought, I’m just getting to this. Could you throw me a quick bone, as my aptitude for php isn’t that great? I’ve tried a few things, and I’m just getting a white page of death.

    I need to link field labels to their inputs. I’ve changed your photography metadata to band links, so in my case, I need to link the Soundcloud label to http://www.soundcloud.com. Is that easy? Thanks again!

    Adam

    Reply
  5. Lynne Jones says

    July 19, 2016 at 6:54 am

    Hi Jeff

    Sorry to resuscitate an older thread but I have used your code and all is working perfectly – apart from the fact that I want to add an image for each entry. How did you add your image as there isn’t an image field in your code? (As far as I can see)

    I am aiming to have an image aligned left with the fields on the right. Any help would be very much appreciated. I have combed through every article on the topic on Google with no luck!

    Thanks!

    Best…
    Lynne

    Reply
    • Jeff Cohan says

      July 19, 2016 at 8:37 am

      In my case, the image is in the post itself, not part of the custom fields. The only custom fields in my illustration are the ones that show up in the “Photo Details” box. You could do the same. To achieve your desired presentation, you could try this CSS markup (and experiment):

      • add a rule for the image, giving it a width (e.g. 40%), setting display to block, and setting float to left
      • add a width declaration to the .custom-data selector (e.g., 40%)

      Does that help?

      Reply
  6. MarK Hemmingson says

    August 21, 2016 at 12:45 pm

    Thanks. I really appreciate you sharing this code. Hooked into genesis_entry_header so my fields display after the title, but before the content. Doing a gardening website which is in development. Used it like this…
    ———–
    Agastache rugosa – Honey Bee Blue – Anise Hyssop
    —————–
    Zone: 4
    Height: 24″
    Spread: 24″
    Light: Full Sun
    Moisture: Dry
    Type: Perennial
    ————-
    Feature Image
    ————-
    Content

    Reply
    • Jeff Cohan says

      August 21, 2016 at 3:41 pm

      I’m glad it helped, Mark.

      Reply
  7. Paul Douglas says

    August 30, 2016 at 11:48 am

    Jeff,

    Great post and very easy to understand walk-through. This is also applicable in a template page. I have used it here: http://pastoradamsummers.org/musical-specials/the-potter-knows-the-clay/ but also have YouTube video being injected by using only the url end code.

    Great stuff!

    Reply
    • Jeff Cohan says

      August 30, 2016 at 4:16 pm

      Thanks, Paul. I’m glad it helped. Nice implementation at Pastor Adam Summer site.

      Reply
  8. Joni Mueller says

    September 3, 2016 at 11:13 am

    I would be willing to hit your PayPal link on this one. I am using the Advanced Custom Fields plugin with a Genesis theme. I have organized the data into field groups. The code seems to only want to display one group (and it doesn’t appear to matter which one). Even if I stack all the fields into one array, it won’t work, Then I get a 500 internal server error. Thoughts? Do I ditch the field groups completely and just have one group?

    Reply
    • Jeff Cohan says

      September 3, 2016 at 11:35 am

      Hey, Joni –
      Can you provide more information about your use-case, the field groups you’re using, and the code you’re using for the output?

      PS: I do think your problem may be that you’re using the get_field() ACF function, which is for a single field group.

      PPS: When I have time, I plan to update my post to show how I’d accomplish the same result using native WordPress functions for meta data. Bill Erickson makes a very good case for NOT using ACF’s front-end functions in this post of his.

      Reply
  9. Mark Buskbjerg says

    September 22, 2016 at 9:35 am

    Hi

    This looks like a great solution. I use repeater fields from ACF a lot. Would these work as well with this approach?

    Reply
    • Jeff Cohan says

      September 26, 2016 at 9:35 am

      Mark: I have not worked with ACF repeater fields yet, but I can think of no reason why the approach I’ve described would not work with them. When you have things working, please feel free to come back here and post a link so we can see what you’ve done. Thanks.

      Reply
  10. Trevor E says

    October 1, 2016 at 12:07 pm

    Feeling a bit like a dummy, but how would you change the style of one specific value in one of the fields?

    Reply
    • Jeff Cohan says

      October 3, 2016 at 10:11 am

      Not a dumb question at all.

      Using the example in my post, suppose you want the shutter speed value to display italicized, bold, and green.

      The loop in lines 28-37 will generate HTML for the shutter speed custom field as follows:

      <div class="shutter_speed">
      	<span class="label">Shutter Speed:</span>
      	<span class="value">1/250</span>
      </div>
      

      The span whose class is “value” is a descendant of the div whose class is “shutter_speed”. So now add a rule to your CSS stylesheet as follows:

      .shutter_speed .value {
      	font-style: italic;
      	font-weight: bold;
      	color: green;
      }
      

      The above rule uses what is known as a descendant (or contextual) selector. It reads as follows: “Apply these rules to any element with a class name of “value” that is found within any element with a class name of “shutter speed”.”

      HTH!

      Reply
  11. Trevor E says

    October 3, 2016 at 5:22 pm

    Brilliant! I was so close. Thanks a million for the tips.

    Reply
  12. Scott Pinkelman says

    October 14, 2016 at 11:50 am

    Jeff:

    Very helpful, thank you. I this as a basis for my own functions; in my case I tested for different post types using switch statements but I’m using the core of the logic you have here.

    One question: wouldn’t it be slightly more efficient to use to use break instead on continue on L22, since the only purpose of the loop is to set $has_meta ?

    Reply
    • Jeff Cohan says

      October 14, 2016 at 12:07 pm

      Hey, Scott. Thanks for your comments. And I think you’re right about using break instead of continue.

      Reply
  13. Amy says

    October 29, 2019 at 9:56 am

    Just found this, great stuff! Can’t you just put this in a custom page template made for the post type instead of all of adding all that code to your functions.php file?

    Reply
    • Jeff Cohan says

      October 29, 2019 at 10:41 am

      Hello, Amy –

      I’m glad you liked.

      As for your question: I’m not using a custom page template for this. I think that’s part of the “beauty” of the approach. The post type is simply ‘post’. In other words, it’s a blog article.

      By adding the action (hooked to the ‘genesis_entry_content’ hook) in functions.php, it forces WordPress to reads the nwb_acf_photography() function. If the current post is a single blog post and its category ID is one of the specified IDs and the author actually added the meta data, then the meta data will be displayed. Otherwise, WordPress does a quick return and ignores the rest of the function.

      Does that make sense?

      Reply
      • Amy says

        October 30, 2019 at 8:49 am

        Yes it does, thank you so much for your speedy reply! Am I correct in seeing that you don’t even need to make a custom post type for this and that’s why you didn’t need to add extra support in an array for ‘custom-fields’ ?? This is simply adding custom fields to designated categories, do I have that right?
        Thank you!!

        Reply
        • Jeff Cohan says

          October 30, 2019 at 4:15 pm

          You’re right, Amy. Custom fields can be used with standard posts and pages and any custom post type. In this case, I’m using custom fields with blog posts that are assigned any of three categories: Photography, Infrared Photography, and Multimedia (category IDs 2, 7, and 15, respectively.

          It’s understandable that people think custom fields are for custom post types because (if you ask me) there’s no reason to create a custom post type if you’re not planning to associate custom fields with it. So you’re pretty much always using custom fields when you’re using custom post types.

          I will admit, though, that there’s a minor workflow problem with my implementation, and I hope this explanation makes sense. Namely, since WordPress does not “know” that a blog post belongs to one of the applicable categories when first adding the post, the custom fields do not appear in the editing screen until after the post is saved once. In practice, this means that you’d have to start creating the post, assign it to the appropriate category, and then save as draft before finishing and publishing. After saving as draft, the custom fields will appear in the editing screen.

          Are you trying to incorporate custom fields somewhere? If so, please tell me about it. I’m always interested in learning how others use this feature of WordPress.

          Reply
          • Amy says

            October 30, 2019 at 4:40 pm

            I am making a page that will display ‘reviews’, I’m trying to decide if I want to do a custom post type and just show the archive page in the nav bar or make a page template and pull the reviews in with the loop. It is nice how the CPR archive page kind of ‘makes itself’ (not sure how to say that, but if you have Custom Post Types then the archive page will just ‘work’ if you just use the slug at the end of the archive url to see the archive page), but I may go for the page template so that I can bring in the review on one page so they just show but aren’t ‘clickable’ to their own single post page… does that make sense?

          • Jeff Cohan says

            October 30, 2019 at 5:08 pm

            Yes, an archive page for a custom post type “makes itself”; but without coding, any custom fields wouldn’t show up.

            Have you started this yet? Can you point me to a URL?

            Here’s a link to a series of pages I created on one of my domains for “Useful Plugins”. If you click around, you’ll see that you can:

            – view the details for a specific plugin
            – view an archive of all plugins that are assigned a specific category
            – view an archive of all plugins that are assigned a specific tag

            But each of those pages needed coding to bring in custom fields.
            HTH.

  14. Amy says

    October 31, 2019 at 10:20 am

    Ok yep, I understand. No that page is in my Local version at this point. Thank you I will check out your link! Thank you so much!!

    Reply
  15. Amy says

    October 31, 2019 at 10:44 am

    Wow you link shows some great stuff! Those extra details were all made with custom fields and no CPT’s then – the ones in the main content area?

    Reply
    • Jeff Cohan says

      October 31, 2019 at 10:54 am

      Those extra details were all made with custom fields…?

      Yes, custom fields applied to the “uplug” custom post type.

      Reply
      • Amy says

        October 31, 2019 at 12:50 pm

        Nice, that’s great! You offer a lot of information on your site! Esp luv the Genesis info!

        Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Use Case for Custom Post Type: “In The News” March 10, 2023
  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (38)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×