Breakdance Builder ACF Service & Location Pages Template Creation
Want to create a single page template for different locations and services? This guide shows you how to design one template for all your service pages using Breakdance.

Christy Cañete
Updated October 1, 2023

create service and locations template on Breakdance
Reading Time: 5 minutes
Running a business in multiple locations? You might consider building a website with different pages for each location.
Now, think about the time spent designing pages for different locations. And what about when you expand to even more areas?
What if you can have a single, adaptable template that can be tailored to display specific details for each location?
With Breakdance, it should be easy to create one. All you need to do is design a single template and add the details dynamically. This includes the location name, services offered, and even images.
That’s exactly what we’re going to do in this tutorial. Follow the steps below to learn how to design a single yet flexible template for your business.

How to Build A Service & Location Template in Breakdance
1) Install the ACF Plugin
First off, we’ll need to create a custom post type. Each post will contain different details like the location title, service description, and images.
Traditionally, you’ll need to add some custom codes to your function file to do this. But thankfully, there are plugins available to make our life easier.
For this tutorial, we’re going to install the ACF (Advanced Custom Fields) plugin.
Go to your WordPress dashboard. Head over to Plugins > Add New. Install and activate Advanced Custom Fields.

2) Create a Custom Post Type
With the ACF plugin active, you should see ‘ACF’ added to the left navigation.
To create a post type, go to ACF > Post types. Click ‘Add New.’

On the settings page, you’ll need to enter a few details.
Input ‘Services’ for the plural label, ‘Service’ for the singular label, and ‘service’ for the post type key. Adding taxonomies is optional, so we’ll leave it for another time.

Click ‘Save Changes.’
You should now see ‘Services’ displayed on the left sidebar. But it’s currently empty. You can’t add any details. That’s because we haven’t defined any fields yet.
So, let’s go ahead and do that in the next step.
3) Add A Field Group
Go to ACF > Field Groups. Click ‘Add New.’
At the top of the page, enter a field group title.

Under the fields section, click the ‘Add Field’ button and choose a field type from the drop-down. Enter a field label and field name. Then, click close.

For this tutorial, I’ve added three fields:
- Image field for the location image
- Text field for the location name
- Text field for the services description

Next, go to the settings section to set the location rules. Here, we want to show the field group if the post type is equal to ‘Service.’

Once you’re done, click ‘Save Changes.’
4) Add A New Service
With the new fields in place, let's input a service.
Go to Services > Add New.
Fill in the service details like title, image, location, and services text. Save and publish.

As an example, I’ve added four new services for different locations, as shown below.

5) Create a Page Template
Now, to the fun part! We’re going to create a page template for our service and location page.
Head over to Breakdance > Templates. Click ‘Add Template’ and choose ‘Add Custom template.’
Enter the title of the new template. Here, I’ve named it ‘Service Template.’ Next, add a location where you want to apply the template. On the drop-down, choose the name of your custom post type, in this case, Single/ Service.

Assign a priority number. If you have multiple templates, give this page the highest number so that it loads first. Then, click ‘Add Template.’
6) Add Dynamic Data
For this guide, I’ve already created a header template.
If you need guidance, I suggest you read our separate tutorial on how to create a page header in Breakdance. Then, come back here when you’re ready.
To create the service template, I’m going to add a section with an image background, heading, and text. We’ll be using the image we’ve uploaded for the service post type. The heading will be for the title, and the text will be for the service description.

Remember in the previous step we’ve created four different service types. To display each using a single template, we’re going to make the image, heading, and text dynamic.
First, click the section. Then, go to the design tab. Click ‘Background’ and choose ‘Image’ as type. Hover your mouse over the ‘Image’ label and click the ‘dynamic’ icon. This will open a pop-up window.

Click the image under the ACF section. This will automatically fetch the images we’ve uploaded on our service post type.

Do the same for the heading and text. The heading should contain the location name or title. The text should have the service description.
Finally, add the style and layout that you want. Adjust the size and spacing.
7) Save and Preview
After the final touches, click save.
Now, every time you switch to a different service location, the page should automatically change its image, location title, and service description.

This means multiple services and locations can be showcased with one template.
Here’s what our final page template looks like.

What’s Next?
You’ve just learned how to create a single template for different service and location pages.
At this point, you might wonder - what’s next?
Breakdance has tons of features and libraries to help you level up your website.
For instance, consider adding a Google map element to your page. Most businesses find this feature helpful because it helps increase foot traffic. So, give it a try.
If this guide was helpful, please drop a comment. Your feedback drives us to create even better tutorials!
Want to Learn Even More?
If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.