Themetry is no longer operational. This site is here for archival purposes. See what Leland is working on at le.land.
Custom Field Command
Previous Lesson Next Lesson
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.
Install required plugins
03:42
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
02:56
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
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.
Display dynamic custom field data
03:19
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
06:58
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
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.
Display two “featured” images
13:09
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
13:35
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
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 your third flexible layout: the bold call to action
10:52
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
15:01
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
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.
Add a sitewide social media menu, the ACF way
07:22
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
10:22
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.

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.

Need Help?

No problem! It is okay to ask for help and we are glad to provide it!

If you have any questions, email support@themetry.com with the following subject line:

I have a question about lesson: Display two “featured” images

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.