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

Michael BourneUpdated:

Tags:

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

<img src="[acf field='widget_image']" alt="Widget for sale" />

Text Field for the other ACF fields

<h4>{{acf:widget_title}}</h4>
<p>{{acf:widget_desc}}</p>
<p>Email me: {{acf:widget_email}}</p>

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!

Have a question or a comment about this article? Click here!
About the Author

Michael Bourne

Facebook

Hey, I'm Michael, and I've been making websites since the mid 90s! These days I focus on Wordpress and would call myself quite handy in PHP, JS, and CSS. Outside of coding and web design, I'm quite fond of craft beer and backpacking around the world.

Share this Tip!

There are 5 comments

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