How Do I Display ACF Pro Custom Fields, in a Single Custom Post?

I’m building a motorcycle workshops directory site; using a custom post-type with custom fields to order the information.
My question is what are the next steps that I need to take, in order to display ACF Pro custom fields on the front end of the site?

I’ve outlined my setup and the steps I’ve taken so far below:

Setup:
Wordpress Version 4.6.1
Upfront Theme = Issue
Significantly, I’m using ACF for custom field creation instead of CustomPress which I did in fact install; merely to replicate the custom post-type settings of the WPMDEV's 'Directory' plugin .
I'm using ACF Pro for custom field creation because it appears to have a greater variety of fields and primarily because I require the gallery and Google map field options for this post-type

Steps I’ve taken so far:
1. Created a custom post-type called [Workshop] as well as custom tag taxonomy and 2 x custom category taxonomies using CustomPress, which I’ve associated with the custom post-type.
?

2. Created a custom field group called Workshop Profile Page using ACF Pro and associated the field group with the post-type ‘workshop’
?

3. Created a template file for the custom post-type ‘workshop’ called single-workshop.php by checking the box in CustomPress and saving settings. This has been placed in the Upfront theme directory rather than 'Issue' theme directory.
?

4. Using ACF Theme code plugin I’ve copied and pasted the ACF front-end code to a text editor (Sublime Text) file; with <div> tags to separate the ACF fields for CSS styling later. I'm not certain which theme directory file and where in the file I'll need to paste this code. ACF's documentation is somewhat ambiguous for a WordPress novice.

?

FYI - I’m open to alternative suggestions plugins/methods for an easier way of achieving this.

  • Kasia Swiderska

    Hello Nate,

    If you would use standard WordPress theme, like TwentyTen then codes from step you would paste in to file you created in step 3 single-workshop.php. But I'm afraid this is not way for Upfront themes.
    You will need to use method with shortcode https://www.advancedcustomfields.com/resources/displaying-custom-field-values-in-your-theme/

    [acf field=&quot;{$field_name}&quot;]

    You will need to create template for your custom post type in Upfront. To do that first create new post workshop in WordPress admin dashboard, fill all the custom fields and then save. Open then that post on front end and open on that post Upfront editor (you can click on admin bar Upfront icon or add to url ?editmode=true - both ways will open that post in Editor).

    You will see that you have generic post layout that contains only basic elements of post like title, date and content.
    You can adjust it looks so it will fit your needs. Next step is to add ACF shortcodes - to add them use draggable text element or widget element (choose text widget in its settings).
    In text or text widget add shotcodes for all your fields - you can divide those for multiple elements. Don't worry if they stay shortcodes in editor - they will be parsed on front end and they will show right content.
    Next step is saving. You will be asked if save for one post or for all posts of that type

    Save for all - this was each new workshop post will use template you just created.

    Let me know if you have more questions.

    kind regards,
    Kasia

  • Nate

    Hi Kasia,
    Thank you for your response!

    I'll run through the steps you've outlined. In the meantime, I have a couple of questions related to specific fields.
    Looking at ACF's documentation suggests that shortcodes are limited only to simple text values.
    This could present a problem for displaying the following fields:

    Similar workshops field - Ideally, displays featured image and title of 3 to 4 workshops based on relationship i.e. post-type and taxonomy. How can I accomplish this using Upfront?

    <?php $similar_workshops = get_field( 'similar_workshops' ); ?>
    	<?php if ( $similar_workshops ): ?>
    	<?php foreach ( $similar_workshops as $post ):  ?>
    		<?php setup_postdata ($post); ?>
    			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    	<?php endforeach; ?>
    	<?php wp_reset_postdata(); ?>

    Gallery - Displays an array of images unique to each workshop. I suspect I can use Upfront's Gallery / Slider element to achieve this?

    Map - Displays the workshop location. Again, I can probably use Upfront's Map element to display this?

    Type Icon - Multi-select text field which I was going to style to display an icon based on the selection inputs in the post admin.

    <?php $type_icon_array = get_field( 'type_icon' ); ?>
    	<?php if ( $type_icon_array ): ?>
    	<?php foreach ( $type_icon_array as $type_icon_item ): ?>
    	 	<?php echo $type_icon_item; ?>
    	<?php endforeach; ?>
    	<?php endif; ?>

    Grateful for your help.

    Nate

  • Kasia Swiderska

    Hello Nate,

    Sorry for confusion here - but when you have shortcode like that [acf field="{$field_name}"] - it means that you have replace {$field_name} with field_name - so in Upfront it will look like [acf field="field_name"] (no brackets).

    Gallery - Displays an array of images unique to each workshop. I suspect I can use Upfront's Gallery / Slider element to achieve this?

    Map - Displays the workshop location. Again, I can probably use Upfront's Map element to display this?

    Yes, Upfront has elements for map and gallery, so that can be inserted directly to post in Upfront editor.

    Similar workshops field - Ideally, displays featured image and title of 3 to 4 workshops based on relationship i.e. post-type and taxonomy. How can I accomplish this using Upfront?

    Does it work automatically? I was convinced that in relationship in ACF you have to manually do that connection.
    If I'm right, wasn't be possible to create from Upfront elements those relations? You can place image element and link it to your post

    you can also do the same with text - write down list of title and link them to those other posts.

    Type Icon - Multi-select text field which I was going to style to display an icon based on the selection inputs in the post admin.

    Is type icon image? Can image element be used to place that icon on page?

    I checked few solution and it doesn't look that Upfront will allow to add any php code in editor.

    kind regards,
    Kasia

  • Nate

    Hey Kasia,
    Thanks for the follow-up.
    For similar workshops - I've scrapped the ACF Field and will use the Upfront 'Posts' element.
    Thanks for your suggestions on the type icon.

    Sorry for confusion here - but when you have shortcode like that [acf field="{$field_name}"] - it means that you have replace {$field_name} with field_name - so in Upfront it will look like [acf field="field_name"] (no brackets).

    My mistake... still new to Wordpress development. :blush:

    My shortcodes now looks this.

    [acf field="workshop_name"]
    [acf field="telephone_no"]
    [acf field="email"]
    [acf field="address"]
    [acf field="additional_information"]

    I hope that's correct?

    Many thanks,
    Nate

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.