What you will build in this course
10:19
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
05:53
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.
Learn the basics of (non-advanced) custom fields
03:39
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
07:30
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.
Set up the “team member” custom post type
07:20
Register the custom post type we will later fill out with individual team members, and associated meta data.
Make your first “advanced” custom field
05:53
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
07:36
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
06:25
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.
Set your “flexible” homepage
06:49
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
11:24
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
16:07
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
08:58
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 an options page
02:27
Sometimes it helps to have a consistent options page that can be utilized for “sitewide” options.
Add a footer text option
07:00
No business client wants to put “Powered by WordPress” in their footer. Let’s give them a way to customize that text easily.
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.
Need Help?
No problem! It is okay to ask for help and we are glad to provide it!
If you have any questions, email [email protected] with the following subject line:
I have a question about lesson ID 3871
So we can tell which lesson you are referring to.
Be sure to include any relevant details such as video timestamps (i.e. at 1:35, you showed this) and what you have tried so far that did not work.