[Support request] Displaying CPT + ACF Portfolio

[Ian]

I am creating a Portfolio using CPT + ACF. What is the best way to display this client list on a page? Can we use Block Elements or would WP Showpost work better?

[Elvin]

Hi Ian,

It depends on which part of “Portfolio” are you pertaining.

If you’re pertaining to Portfolio’s content’s page (like single post pages), use Block Elements – Content template and set the layout to use dynamic data fetching ACF fields.

If you’re pertaining to Portfolio’s archive page, you can use Block Elements – Content template as well and change the post card’s styling to your preference like Leo did on this video – https://www.youtube.com/watch?v=-ZTQP_KA2xE

While you can use WPSP for the archive page, that will require a custom PHP snippet to replace the default archive page’s loop to a WPSP loop.

[Ian]

Thanks Elvin. I scrolled through Youtube videos and just realized why I could not locate Leo’s demo of Content Template. YT does not list all videos by default!

1. As I create a page with Portfolio items, what Dynamic Text type do I need to choose to output ACF fields?
2. I would like to display a grid of said Portfolio items on a page. How would I hook this into said page?

[Elvin]

1. As I create a page with Portfolio items, what Dynamic Text type do I need to choose to output ACF fields?

It depends on what this is for and where were the ACF fields assigned to.

Were the ACF fields assigned to a CPT “Portfolio” post? If yes and this for the template for Portfolio’s single page, you can use “Post Meta” from the dynamic value dropdown options and write the ACF’s slug on the meta field.

If the ACF fields were assigned to CPT “Portfolio”‘s taxonomy term, to be displayed on Portfolio term meta’s archive page, you use “Term meta” on a dynamic value dropdown options and write the ACF’s slug on the meta field.

2. I would like to display a grid of said Portfolio items on a page. How would I hook this into said page?

It depends on what type of page this is. Will this be a static page where you’ll be placing a custom post grid for the “Portfolio”

or,

Do you intend to modify an existing archive page for “Portfolio”?

[Ian]

Let me follow your instructions and use Term meta.

This page will be a default WordPress Page where I want to display the CPT Portfolio is displayed in a grid. A few text fields (some with links) and an image (with a link if possible). The above solution is using a Block Element > Content Template would not allow the Portfolio items to be displayed in a gird on a regular page, or would it?

[Elvin]

The above solution is using a Block Element > Content Template would not allow the Portfolio items to be displayed in a gird on a regular page, or would it?

Block Element – Content Template will change the styling and layout of a post item on a post list in an archive page. It won’t work on a post item in a post list grid placed by a post grid plugin in a regular static page. 🙂

That’s actually why I asked:

It depends on what type of page this is. Will this be a static page where you’ll be placing a custom post grid for the “Portfolio”

or,

Do you intend to modify an existing archive page for “Portfolio”?

Because static pages with custom post grid plugins need a different method for displaying ACF in its post items. You’ll need knowledge of the hooks and filters used by the post grid plugin you’ve used. (which is out our scope of support)

[Ian]

So this is interesting. Maybe I should ask this.

If I use CPT = Portfolio and ACF (text, image, URL) and associate these with Portfolio, what is the best way to display these on a default WP Page? If not on a regular page, what other method should we use?

I would think this would be a powerful way to display a list of team members as well using CPT + ACF?

[Elvin]

If I use CPT = Portfolio and ACF (text, image, URL) and associate these with Portfolio, what is the best way to display these on a default WP Page? If not on a regular page, what other method should we use?

If by saying default WP page, you meant the default single post page and/or archive pages WordPress generates for taxonomy post listing (example: category archive page, tag archive page), then I’d recommend using the Block Element – Content Template.

And I recommend going with creating layout templates for the WordPress generated archive page & single post page with Block element – Content Template as you don’t have to go use third party plugins. WordPress does the query for you.

As opposed to creating a page named “Portfolio” with a third-party post grid plugin in it where you still have to research what hooks it uses to add your ACF fields manually while doing styling using custom CSS(meaning manually styling as well).

[Ian]

Hi Elvin,

I agree trying to use the default WP post type to deliver this functionality. Here is the issue. It’s easy enough to display a “page” archive BUT, that would mean each page would only consist of a title, description and an image. Trying not to have to create a page with so little content as this gets pushed to the sitemap and then crawled by Google. With Block Elements ability to pull dynamic content, I am thinking there must be another way to utilize GP + GB to create a “team” / “portfolio” section of the website with or without CPT or ACF. Maybe using WordPress default custom fields? Any thoughts on this?

[David]

Hi there,

I would use the WP Show Posts plugin to display your Post List.
And you can use any of its hooks to add your fields:

wpsp_before_wrapper
wpsp_before_header
wpsp_before_title
wpsp_after_title
wpsp_before_content
wpsp_after_content
wpsp_after_wrapper

An example Hook with get_post_meta would be:

add_action('wpsp_after_title', function() {
    $my_variable = get_post_meta( get_the_ID(), 'my_meta_key', true );
    if ( !empty($my_variable) ) {
        echo '<p class="my-custom-variable-class">' . $my_variable . '</p>';
    }
});

[Ian]

Hi David,

Thanks for chiming in. This is indeed an interesting conversation and thank you for the tip on using WP SP to show the Post List. I wonder if it’s worthwhile for GP to create a detailed tutorial for us to follow. In fact, is there something that you can refer me to so I can re-create it on my end?

[David]

Are you using ACF for the Custom Fields ? Or plain old WP Custom Fields ?

[Ian]

Hi David,

I am using ACF to test but not mandatory. Whatever works and can be setup using GP / GB / WP Showposts is my preference. For this specific project, looking to use text description, title, image and link as custom fields to showcase a grid / list of portfolio items. Any other suggestions?

[David]

Looking at these requirements:

text description, title, image and link

Is there any need for ACF custom fields ?

If you consider a CPT would have a default title with link, and content ( aka description ) and the CPT could be set to Support Featured Images then you would have all the basics required in the CPT. Then it could simply be displayed using the WP Show Posts list set to display your Post type.

Anything i am missing ?

[Ian]

Hi David,

That makes a ton of sense actually. Let me set everything up without ACF. I think you are right it will work.

On a side note, I have included CPT to allow access for Custom Fields. Inside Gutenberg, going ot the 3 dots > Preferences > Panels, I tried enabling Custom Fields but it won’t take. Any ideas if I need to make any other tweaks? Also tried enabling Custom Fields for Posts and it still won’t take. Wonder if I need to add a function for this or if there is anything GP specific that I need to enable? Trying to enter a URL so I can link out for each Portfolio item.

UPDATE: Hey David, your suggestion worked. I was indeed able to use CPT without ACF and now have WP Showposts pulling Portfolio items into a regular page.

1. I think there was an announcement that WPSP will be merged into GB. I guess we can deal with that once that happens.
2. There was no way to enter a link of the title so that it goes to an offsite URL. Link defaults to the regular page item within WordPress. I was able to create a redirect off site but that seems like a hack solution as Google would crawl the item and be taken off site.
3. I don’t see a way to import page content or meta description. The only way was to use an Excerpt as I think WPSP only pulls this in? at least in the dropdown type. Guess I can use FULL instead.

Any thoughts on points #1 and #2?

UPDATE #2: It just dawned on me that if we end up entering each portfolio item as a custom post type, we could probably set CPT up with an archive page & slug and then use a Block Element > Content Template to display said grid?

[Author]

Posts