What you will build in this course
Free Sample
Skip ahead and demo the final result of this course, complete with the “page builder” custom-tailored to site’s needs.
Set up a local development environment
Free Sample
Download and install free software (Windows, Mac, or Linux!) so you can follow along and run WordPress on your own computer without needing to buy a hosting account.
Install required plugins
Free Sample
Install the four required plugins to get started, all available free on WordPress.org. IMPORTANT NOTE: Later on we’ll need to buy one premium plugin, costing $49.
Install starter theme
Free Sample
Download and install the starter theme with functional WordPress menus, and static content that you will be “clientproofing” (i.e. developing a bespoke and structured CMS for said content).
Learn the basics of (non-advanced) custom fields
Free Sample
Contrary to popular belief, custom fields are a core WordPress feature and you do not need a plugin to manage them. We’ll make a “job title” field in this example.
Edit theme code to add custom field placeholders
Time to start writing code. We’ll start slow by editing the theme files to add some placeholder code, that will be later used to house dynamic custom field data.
Display dynamic custom field data
Custom field data is not necessarily going to display automatically on the frontend. We’ll write some code to start displaying it.
Be aware of uncommon use cases
Sometimes CMS users will use the custom fields you set up in an uncommon way. It’s your job to make sure the theme displays any, all, or none of that data in a sensible way.
Set up the “team member” custom post type
Register the custom post type we will later fill out with individual team members, and associated meta data.
Make your first “advanced” custom field
It is time to start using ACF to make fields! We’ll start with a simple one, a text field to store job title for each team member.
Display your first “advanced” custom field
You have set up your first “advanced” custom field, although you still need to display it on the frontend. We’ll do that in this lesson.
Set up two “featured” images
WordPress core has a “Featured image” feature. However, what if you need two or more images associated with a single piece of content? You keep it simple with ACF.
Display two “featured” images
We’ll take the two “featured” images we set in the previous lesson and display them properly on the frontend. Don’t forget about alternative text for accessibility.
Display “years at company” on the frontend
With a twist. We won’t store the data like that in the backend. We’ll store a “start date” instead. This is an important concept that will save hours of maintenance time in the future.
Set your “flexible” homepage
At this point, we’re into the “Pro” (paid) ACF features. We’ll start by setting our “flexible” page template on our homepage, currently containing static components.
Add a fixed “hero” section above the flexible layout field
Not all layout fields need to be flexible. Before we begin with flexible layouts, we’ll make “hero” section that is always up top.
Add your first flexible layout: featured left or right
Say hello to your first flexible layout! This “featured left or right” layout will have fields for an image, a section heading, some text, a call to action link, and an option to align the image to the left or right.
Add your second flexible layout: the benefit repeater
This is the introduction to the ACF Pro “Repeater” field. This flexible layout will include a repeater that will allow your clients to input “unlimited” benefits.
Add your third flexible layout: the bold call to action
This flexible layout will allow your clients to insert a bold call-to-action into their flexible landing pages. Buy now? Book a call? Whatever you want.
Add your fourth flexible layout: testimonial relationships
While this could easily be a repeater field, we’d like to store our testimonials in a more pragmatic way that could potentially be used elsewhere. Relationship fields to the rescue!
Add an options page
Sometimes it helps to have a consistent options page that can be utilized for “sitewide” options.
Add a footer text option
No business client wants to put “Powered by WordPress” in their footer. Let’s give them a way to customize that text easily.
Add a sitewide social media menu, the ACF way
While we could use WordPress’s built-in menu functionality for this, let’s let your client manage their social media menu from their options page.
Add a sitewide accent color option
Sometimes when building themes for your own personal use, it helps to have an easy-to-use “accent color” option alongside all your other ACF-powered options.

Protected Content

Whoa there! This lesson is part of a paid course: Custom Field Command

Already bought the course?

If you have already purchased the course, use our smart login form that will redirect you back to this very page with lesson materials revealed.

Still thinking about it?

Head on back to the Custom Field Command landing page to learn more about it, or email [email protected] with any questions you have!

Ready to buy?

Awesome! Here's a quick checkout link. You can invest in Custom Field Command for a one-time payment of [Insert Price Here].

One-time payment meaning: no recurring fees. Don’t you have enough subscription charges to worry about?