What you will build in this course
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
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
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.
Learn the basics of (non-advanced) custom fields
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.
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.
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 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.
Install starter theme
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).
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 3858
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.