Using Global Blocks and ACF Pro to create a simple CPT Template

Plugins, X Theme and Pro Theme9 Comments

It’s been asked many times. “How can I use Cornerstone to create a page template for my custom post type?” Of course, there are many ways to achieve this. In this tip, I’ll show you how to leverage the power of Global Blocks for Cornerstone and ACF Pro to create a simple CPT template for any custom post type.

For this tutorial, I will use 3 plugins. Global Blocks for Cornerstone and Custom Post Type UI, both available from the WordPress.org repo. I will also use the official X addon ACF Pro.

Plugins Required

Creating the Custom Post Type

Custom Post Type UI allows for creating and editing custom post types and custom taxonomies with ease. It is not required, however, and you may code your CPT manually if that is your preference.

For this example, let’s create a post type called “widgets”. We will keep the default settings for now. On your site, you may want to enable “has archive” if you would like an archive page of these posts. You can also set the dashicons class on this screen. For supports, we only need the title and content for this tip. You may like the featured image as well for your archive, if applicable.

CPT Setup

CPT Supports

Save that, and head on over to the “Custom Fields” link in your admin cp.

Creating the ACF Pro fields

Now that you’re on the ACF Pro field group page, go ahead and add a new one. Name it anything you like. For this example, we will make 4 fields. An image field (with the return value set to URL, that’s important), a text field, a WYSIWYG field, and an email field. The names of the fields are shown below.

ACF Setup

The box on the bottom showing the location rules is where you will tell ACF Pro to only show these new fields on pages that have the page type “Widget”. Once you have saved the group, you’re ready to make the Global Block.

Creating a template with Global Blocks

This is the fun part. let’s spin up Cornerstone and create our page template. For this example, I’m going to make a simple layout so you can easily understand what I’m doing. I will also be using Cornerstone’s built in ACF integration for text-based fields. Remember when we set the image field to return a URL? That made it a text field! But there’s a catch, we have to use an ACF shortcode for values inside of HTML, like src or href attributes.

Add a new Global Block

Cornerstone has built in support in the form of double curly braces like so {{acf:field_name}}. Using that, you can echo the contents of any text field. Looking for more complicated examples? Don’t worry, those tips are coming soon šŸ˜‰

Let’s build our page with two simple columns and two text fields:

Our code inside is simple, here it is:

Text Field for the image

Widget for sale

Text Field for the other ACF fields

{{acf:widget_title}}

 

{{acf:widget_desc}}

 

Email me: {{acf:widget_email}}

 

Save that, make note of the ID in the URL, and head on over to your Widgets CPT in the admin menu, and add a new one.

Create your first CPT post

Now comes the easy part. Go to Widgets > Add new. Type in a title, type in your ACF values, and in the content editor, use the global_blocks shortcode and the ID of the Global Block you just created.

Create a new widget

Save the widget and view the post. What you will see on the front end is your Global Block layout and your ACF Pro field data from the widget post. Want to change the layout for your widgets? Just edit the Global Block. Want to change the layout on certain widgets? Create a new Global Block and set the ID in the widget content shortcode.

This is a simple example of the true power you can have over your own content. It doesn’t stop here. You can create actual php templates to apply the layout automatically. You can use a Post object ACF field in the field group to allow the user to select from multiple Global Blocks to apply to that post. We will try to cover those advanced examples in the near future. In the meantime, have fun playing around!

9
Leave a Reply

avatar
  Subscribe  
Notify of
Scott

This is an awesome tutorial, and I love Global Blocks!

I have site that has several Hotel listings, each hotel has it’s own “Booking” link. I set up 2 fields (both as text fields) one to act as the url to the booking page and the other to act as the link text. I inserted the following into the Global Block

{{acf:button_text}}

The link text works nicely but the url does not. Any suggestions? Thank you in advance!!!

Scott

I just commented on this but It appeared that the code I put in actually formed a link…
{{acf:button_text}}

roy@royanger.com

In the href of the sample you provided, you are missing the two opening {{. Is that just an error in what you pasted, or an error in your actual Global Block?

Diego Lucero

Hi guys! Great tutorial, this is great for me as I start to get further into PHP and the WP Core. I do have a question about variables within global blocks. I’m trying to get my custom post types (using global blocks) to be able to be inserted into Cornerstone/Pro Builder as they are built in Global Blocks. I know that I can call the post ID directly within the acf shortcode, but since I’m using Global Blocks it would display globally. Also, I’m not aware of a way to insert a variable into a shortcode, ie: [acf field='custom_field_title' post_id="$postid"],… Read more »

roy@royanger.com

I’m honestly confused by what you’re trying to accomplish. Specifically this: “Iā€™m trying to get my custom post types (using global blocks) to be able to be inserted into Cornerstone/Pro Builder as they are built in Global Blocks.”

If you outline what you’re trying to accomplish, rather than what you’re trying to do, perhaps we can provide ideas.

Jolene
Jolene

Hello! Thanks so much for what could be an extremely useful plugin. I’m a relative novice, so bear with me. I’m having trouble. When I insert a global block as instructed in a page or post using your instructions I’m seeing cornerstone code (below) and not the actual block on my pages. [cs_element_column _id="3"][cs_text _order="0"] [cs_acf field=”first_name”] [cs_acf field=”last_name”] Apologies in advance if this is something I’m doing wrong. I’m in an X child theme, v 5.2.2 and using classic text fields since it seems like there might be compatibility issue. I’ve tried this both with and without ACF fields… Read more »