Advanced Custom Fields (ACF) is the most popular and most downloaded custom fields WordPress Plugin.
Period.
And there are good reasons behind that.
The above screenshot is the result of creating Custom Fields using the default WordPress Custom Fields functionality.
It’s simple and does the job pretty well.
However, I only have one complaint.
The default functionality is not that client-friendly and it only allows us to create a text area custom field.
Most of my clients are habituated to a WYSIWYG content editor like WordPress Block Editor.
If I ask them to put content inside those text boxes, they would just freak out.
Also, But what if we need an image or a file custom field?
Plus, it’s really hard for them to create default custom fields because my clients don’t understand a lot of things.
These days WordPress pages has a diverse pieces of content.
This is Advanced Custom Fields comes to rescue. It comes action packed with a lot of goodies.
First, it has a client-friendly interface. It’s really easy to create custom fields using Advanced Custom Fields.
And, you are not limited to the basic Textarea field at all. You have more than a dozen different field types like image field, file field, etc.
Second, it’s really easy to output those custom fields inside a plugin or a theme.
Third, it’s reliable. It just works and it has a pretty solid documentation which covers majority of the scenarios.
Fourth, The author of the plugin Elliot Condon is super friendly and gives meaningful support even for the free version.
Finally, if you care about the performance of your WordPress site, it is not in the list of Slowest WordPress plugins list.
I guess the above reasons are enough for me to use it on my client sites with out a hesitation.
Also, Advanced Custom Fields plugin comes in Free and Premium versions.
For the purposes of this guide, I will be going with the free version. I only bought the Premium version for the Repeater Field.
Once you are done with mastering the free plugin, If you want to some more luxury, you can go with the premium version.
So, let’s install the free plugin.
Go to Admin Dashboard -> Plugins -> Add new
Then search for “Advanced Custom Fields”.
You’ll get tons of results. Most of them are plugins that extend The ACF plugin itself. So, look for the Author Name: Elliot Condon and install the plugin. At the time creating this article, the Logo has a Green Background Color.
This plugin adds a new panel called “Custom Fields” to the Main Menu of the Admin Dashboard. So, Click on it to start creating the Custom Fields.
Advanced Custom Fields plugin divides the Custom Fields into Groups.
So, we have to create a Field Group first and then create Custom Fields inside this Field Group.
To create a Field Group, click on the “Add New” button.
Next, we have to enter a Title for the Field Group. You can name it whatever you want.
Because we are creating a Field Group for our imaginary Homepage, I would love to name this field Group “Homepage”.
But before we add Homepage related custom fields to this Group, we have to decide what fields we need in the first place by taking a look at the mockup design of the Third Section of the imaginary Homepage.
By taking a look at the above mockup, I came to the conclusion that we need to create six custom fields to build this content so that it is easier for the Client / Content Editor.
So, click on the “Add Field” button to add a new Custom Field to this Field Group.
As soon as you click on this button, the ACF plugin will slide down a bunch of Field Options to help us configure the new Custom Field.
Common, let’s go through them one by one.
For the Field Label option, we have to provide a name in such a way that a Client/Content editor should be able to figure out where this particular field is being put to use.
In our case, we are creating this field for Section Three Title of our Homepage. So, I went “Section Three Title”.
As soon as you enter the Field Label and move out of it, the ACF Plugin will generate the Field Name automatically. And If you observe the Field Name, it is the same as Field Label except with underscores instead of spaces and all letters are lowercased.
The value we provide here is used as the $key parameter inside the get_post_meta() WordPress function to display this field’s content on the frontend. To be precise, Field Name is equivalent to the “Name” Field inside the default Custom Fields section.
But, if the automatically generated Field Name ( Meta Key ) doesn’t fit your needs, you can always change it to whatever you want.
I went with Text Field because we don’t need a Textarea or WYSIWYG field for a Headline.
Here are other field types that we can use.
Other Field Options: Rest of the options are self-descriptive and honestly, except for the Default Value field, I never used any one of them. But feel free to explore them.
Now that you understand How to create a custom field using ACF, go ahead and create the other Custom Fields with the following Meta Keys and Field Types:
Tip: Click on the Edit link of Individual Custom Fields to hide and show their respective configuration options.
Field Label: Section Three Content
Field Name: section_three_content
Field Type: WYSIWYG Editor
Field Label: App Feature One Image
Field Name: app_feature_one_content
Field Type: Image
Return Value: Image URL
Maximum: File Size: 0.4mb
Preview Size: Full
When it comes to Image Field Type, we also need to configure the “Return Value” that we output to the frontend using the get_post_meta() function.
Most of the time, I will go with the “Image URL” for “Return Value” option because I always end up using just the URL. If we select “Image Array” we will get a bunch of other data about the image which we almost never use.
But this doesn’t mean the “Image ID” is never used by us. I use Image ID for return value when I need more control over the Image Dimensions. Because when we acquire the ID of an Image, we can display the Image at any size we want. This option helps us to keep Page load speed in check!
Special Mention: Preview Size Setting: When we upload the Image on the Homepage Edit screen, we better display the complete image. If not, some clients could get confused by seeing half image like this:
Also, Some clients upload high-resolution images and then asks me to optimize the site for the Page load speed, so as a precaution I only let clients upload an image with less than 401kb size with the help of Maximum option.
Field Label: App Feature One Content
Field Name: app_feature_one_content
Field Type: WYSIWYG Editor
Field Label: App Feature Two Image
Field Name: app_feature_two_content
Field Type: Image
Return Value: Image URL
Maximum: File Size: 0.4mb
Field Label: App Feature Two Content
Field Name: app_feature_two_content
Field Type: WYSIWYG Editor
Here are the Final Set of Custom Fields and their Meta keys for Homepage Field Group:
Next, we have to assign these custom fields to the Homepage or Any other page using the “Locations” section of the “Add New Field Group” screen.
This section is located right underneath the “Add Field” button.
ACF plugin allows us to create rules which help us control the appearance of a particular Field Group in the Admin Dashboard.
For example, if we want to display Field Group on all the Pages, we can create saying:
Show this Field Group if Post Type is equal to Page, like this:
We can further control its appearance by adding another “AND”, “OR” Rule.
These booleans rules are just Like PHP Conditional Operators &&, || etc. Except, instead of writing code, we use the Rules interface here.
Let’s just say I want to show this Field Group only on pages and only when the site Administrator is accessing the Pages. To achieve this, I add “And” rule by clicking on the “And” button at the right-hand side of the existing rule, like this:
The “AND” rule is particularly helpful if you want all the conditions to be true. If even one of the condition is false, This Field Group will not showup on the Edit Page screen of a particular page.
If we want to show this Field Group both on Pages and Blog Posts, We need to create a new “Rule Group” by clicking on “Add Rule Group” button saying:
If you want to remove a certain rule, you can put your mouse cursor at the end of the rule to get “Remove” button.
In our case, we only want to display this Field Group on the Homepage. So, configure the Location rule to say:
Show this field group if: Page is equals to Home (Make sure this page exists on your site)
Again, Feel free to explore other settings. Play around with them. Once you are done with your play, go ahead and publish the Field Group by clicking on the “Publish” button located at the Top Right-hand side of the screen.
Your Homepage design might look different. I have created this article as a complement to my another complete guide to called Developing a WordPress Theme From Scratch.
Anyway, Go to:
Pages -> Home -> Edit Screen
You can see all the new added Custom Fields if you scroll down a bit.
Now, if you are not seeing the custom fields section on your page, don’t panic.
WordPress hides custom fields by default. Be it plugin based custom fields or the default custom fields that WordPress ships with.
If you are seeing the custom fields, Here is how you can bring it back:
1) Click on the “Three Vertical Dots” icon located at the top right corner of the screen to access Page Action Links dropdown and then click on “Options” link located at the end of the dropdown.
2) Next, you will get an Options Popup and inside this Popup, you’ll find a section dedicated to Advanced Panels. And, because we did not install any plugins yet, the only option you’ll find in this section is “Custom Fields”.
3) Finally, go ahead click on the “Custom Fields” option and as soon as you click on it, WordPress will get rid of the Options Popup and reloads the page.
4) If you now scroll down, you’ll find the Custom Fields section at the bottom of the Page.
Now that you can see the custom fields section, we need to fix a problem that I am facing right now.
The problem is, The ACF plugin hides the default WordPress Custom Fields section. You can see the “Default Custom Fields” section only if you have created any custom fields using it.
You did not create them.
But before writing this guide, I have created two custom fields for the “Section Two” of my imaginary Homepage using the default WordPress Custom Fields functionality.
If you remember, we are currently building the “Section Three” of my imaginary Homepage.
Since you did not create them, here is the screenshot of those fields when they used to appear.
One field is for the headline and the other field is for a Youtube Video in the form of an embed.
And, as you can see my working Homepage, the “Section Two” custom fields are still getting outputted to the frontend. It’s just that I can not access them on the Homepage Edit screen. Simply put, they are hidden.
“Why? and How?”
ACF plugin is the Culprit here. From version 5.6.0, this plugin automatically hides the default Custom Field section. They mentioned it clearly on their blog post about version 5.6.0 release:
https://www.advancedcustomfields.com/blog/acf-pro-5-6-0-ui-ux/
Be it for a good reason or a bad reason. Any plugin you install can hide any section of your Admin Dashboard.
And this is what I meant when I said a third party plugin breaks the content of the site. If you are not aware of the fact that the plugins can do this to your site, you’ll end up banging your head every time a plugin releases a new version of it.
“I understand that this is a serious problem. But, What is the solution now? Can’t we bring this section back?”
Yes, we can bring it back. They also provided the solution about how to bring it back on the following link:
https://www.advancedcustomfields.com/resources/acf-settings/
But, we are not going to do that. Instead, I will show you a neat little trick that works fine with the ACF plugin.
“What’s that? Recreating those fields again ACF?”
You’re are spot on! Let’s do just that. The surprise will come at the end.
Create the following custom fields inside Homepage Field Group of ACF plugin:
Field Label: Second Section Headline
Field Name: second_section_headline
Field Type: Text
Field Label: Section Two Content
Field Name: section_two_content
Field Type: WYSIWYG Editor
Here is the update Homepage Field Group:
Every time we add a new field to the field group, it gets added after the existing the fields.
But we need Section Two related fields at the top of the Section Three fields.
I might have OCD 😛
So, reorder them by putting your cursor on the field-specific numbers located on the left-hand side of the individual field.
These digits represent the order of the Fields and it is important that we display these fields in the correct order on the Edit Screen.
It helps the Clients/ Content Editors and even us when entering the content.
Once you are done with reordering, don’t forget to update the Field group by clicking on the “Update” button.
Here is the updated order of the Custom Fields:
Also, if you notice, the Meta Keys of these “Section Two” related fields in the above screenshot, are the same as Meta Keys I entered while creating the Old “Section Two” related fields using the Default Custom Fields.
Now see what happens when we visit the Homepage Edit Screen in the Dashboard! Common, let’s switch to it by going to.
Admin Dashboard -> Pages -> Home -> Edit Screen
“Hey! The content we entered previously is back!!!!!!!!!”
Haha yes. This is the surprise I am talking about previously. We used the same Meta Keys to experiment whether we can still access and display the old values we entered at the beginning of this lesson.
And this experiment is indeed successful because of ACF plugin using the WordPress provided functions to create the custom fields.
The thing is, when we are creating Custom Fields in WordPress, if we use an existing Meta Key ( Name ) for a new field, WordPress just overwrites the old one. But it keeps content the intact.
Also, it doesn’t throw any errors. So, be careful.
Anyway, now that have everything in place, let’s enter content for the rest of the Sections.
You can add any content that you want or just follow the content from the screenshots. Feel free to experiment with content.
If you observe the mockup, Section Content is center aligned. So, I am center aligning the content using the WYSIWYG options instead of using CSS.
I am doing this because I want to give the client complete control of the text alignment whenever or wherever it is possible.
AH! I really love it when I see a full preview of the Uploaded image. It is just so peaceful 😛
That’s all. Now that we have entered the content, it is time to output it to the frontend.
From here on, I am gonna assume that you have some kind of experience with WordPress based PHP code and WordPress Theme Development in general.
Always Remember, Custom Fields created with ACF plugin are nothing but WordPress Custom Fields at the end of the day. So we can still use the same get_post_meta() function.
Now, if you are a theme developer and if you are not familiar with the get_post_meta() function, we use it to output the custom fields in WordPress.
You can read more about it here:
https://developer.wordpress.org/reference/functions/get_post_meta/
If you want a visual guide, please read more about it here:
https://www.usablewp.com/wordpress-theme-development-the-loop/#get-post-meta
But please proceed forward only when you understand the get_post_meta() function because you’ll understand the Advanced custom fields plugin more deeply when you understand the default way of outputting the custom fields in WordPress.
Open up the front-page.php file or any other template file based on the Page that you have selected while creating the ACF field Group.
If you are following along with, I have added advanced custom fields to the “Home” page of my website and since it is a static page, so, I am using the front-page.php file.
If your set up is not similar to mine, and if you are following along, you could also use the page.php file to output the below code.
From here on, I am gonna assume that you are using the front-page.php file for displaying the Home page of your site.
And here the current code of my front-page.php file:
<?php get_header(); ?> <?php while( have_posts() ): ?> <?php the_post(); ?> <div class="actual-content above-the-fold"> <div class="container"> <div class="row"> <div class="col-sm-12"> <?php the_content(); ?> </div> </div> </div> </div> <section id="watch-dosth-in-action"> <h2><?php echo get_post_meta(get_the_ID(), 'second_section_headline', true ); ?></h2> <div class="section-content"> <?php echo get_post_meta(get_the_ID(), 'section_two_content', true ); ?> </div> </section> <?php endwhile; ?> <?php get_footer(); ?>
Nothing much going on in the above code. It’s just a basic WordPress template file with the Loop.
If you don’t understand the above code, you are not a WordPress Theme Developer and you should probably learn it or Hire a WordPress Professional to get the job done for you.
Now, I am gonna show you how to output the “Section Three” custom fields using the get_post_meta() function.
Place the following code inside the Loop of your page template file.
<section id="section-three">
<h2><?php echo get_post_meta(get_the_ID(), 'section_three_title', true ); ?></h2>
<div class="section-content">
<?php echo get_post_meta(get_the_ID(), 'section_three_content', true ); ?>
</div>
</section>As you can see, we are providng the current Page/Post ID along with the name of the Custom Field to the get_post_meta() function.
That’s all you have to do to output a Custom Field created the using ACF plugin or default WordPress interface.
Now, let’s check out the output of the Homepage in the browser.
Next, let’s output the App Feature Image and its content.
Put the following code right after the <div class="section-three"> element and within the Loop.
<section id="app-feature-one">
<img src="<?php echo get_post_meta(get_the_ID(), 'feature_one_image', true ); ?>" />
<div class="section-content">
<?php echo get_post_meta(get_the_ID(), 'app_feature_one_content', true ); ?>
</div>
</section>
Again, let’s check out the output of the Homepage in the browser.
“Ooh hoo! There is a broken Image icon instead of the Image. What’s happening?”
Oh yeah! The problem is we did not get the URL of the Feature One Image from the database. Instead, we got the ID of the image from the get_post_meta() function.
And, obviously, the browser cannot render an image from a number, right?
So, it is just showing the broken Image Icon.
“Did ACF plugin mess it up?”
No. The thing is, If it is an ACF related Image custom field, the get_post_meta() function returns just the ID of the Image.
“But we did specify to return the URL, right?”
Yes, but, ACF Return Value settings for the Image Field doesn’t work with the get_post_meta() function.
“Ahhh! How do we fix it?”
Simple, we can fix this in two ways:
1) Because we have the ID of the image, we can get the URL of the image with the help of wp_get_attachment_image_src() like this:
$image_data = wp_get_attachment_image_src( $image_id , 'full' );
$image_url = $image_data[0];We can use the following ACF plugin specific functions, to make our life easier.
1) the_field(): This function allows us directly output the value of the custom field to the frontend. So, technically:
This following code:
<?php the_field('feature_one_image'); ?>
Is equivalent to:
<?php echo get_post_meta(get_the_ID(), 'feature_one_image', true ); ?>We don’t have to specify the Post ID. This function will take care of everything if we specify the Meta Key of the Custom Field.
2) get_field(): This function just returns the value of the custom field instead of outputting it. It is totally up to us whether to output the value returned by this function. So technically:
This following code:
<?php echo get_field('feature_one_image'); ?>Is equivalent to:
<?php echo get_post_meta(get_the_ID(), 'feature_one_image', true ); ?>“Oye! Why did you put us through all the trouble of learning the default GetPostMeta function instead of showing the easy method?”
I have good reason to put you through hell!
According to my tests while writing this article, the default get_post_meta() function is much more performant than the ACF functions.
So, if you care about the performance of the website, you should still consider going the hard way.
Anyway, since this article is about ACF and not about WordPress site performance:
Let’s fix our problem by using the_field() function. Replace the existing src of the App Feature One Image with the following code:
<img src="<?php the_field('feature_one_image'); ?>" />
If we now refresh the Homepage in the Frontend, the App Feature One Image is indeed getting outputted.
This time, we will output both image and content using ACF’s the_field() function.
Go back to the front-page.php file and place the following code after the <div class="app-feature-one"> element and within the Loop.
<section id="app-feature-two">
<img src="<?php the_field('app_feature_two_image'); ?>" />
<div class="section-content">
<?php the_field('app_feature_two_content'); ?>
</div>
</section>Here is the output in the Browser:
And, here is the front-page.php file’s final code of the Loop for this guide:
<?php while( have_posts() ): ?>
<?php the_post(); ?>
<div class="actual-content above-the-fold">
<div class="container">
<div class="row">
<div class="col-sm-12">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
<section id="watch-dosth-in-action">
<h2><?php echo get_post_meta(get_the_ID(), 'second_section_headline', true ); ?></h2>
<div class="section-content">
<?php echo get_post_meta(get_the_ID(), 'section_two_content', true ); ?>
</div>
</section>
<section id="section-three">
<h2><?php echo get_post_meta(get_the_ID(), 'section_three_title', true ); ?></h2>
<div class="section-content">
<?php echo get_post_meta(get_the_ID(), 'section_three_content', true ); ?>
</div>
</section>
<section id="app-feature-one">
<img src="<?php the_field('feature_one_image'); ?>" />
<div class="section-content">
<?php echo get_post_meta(get_the_ID(), 'app_feature_one_content', true ); ?>
</div>
</section>
<section id="app-feature-two">
<img src="<?php the_field('app_feature_two_image'); ?>" />
<div class="section-content">
<?php the_field('app_feature_two_content'); ?>
</div>
</section>
<?php endwhile; ?>
This is how we pretty much use the ACF plugin inside a WordPress Theme.
And this pretty much what Plugin Integration means.
Finally, add the following CSS to the end of the style.cssfile to style all the newly added sections:
/*-------------------------------------------------------------------------------
10.Homepage Section Three and App Feature Styles
-------------------------------------------------------------------------------*/
.home #section-three,
.home #app-feature-one,
.home #app-feature-two{
padding:30px 15px;
}
.home #section-three h2{
text-align: center;
}
.home #section-three p,
.home #app-feature-one p,
.home #app-feature-two p{
font-size:18px;
margin-bottom:0;
}
.home #app-feature-one h3,
.home #app-feature-two h3{
margin-bottom:15px;
font-size:28px;
}
.home #app-feature-two h3{
margin-top:40px;
}
.home #app-feature-two .section-content{
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
}
.home #app-feature-two img{
-webkit-box-ordinal-group:3;
-ms-flex-order:2;
order:2;
}
@media only screen and (min-width:768px){
.home #app-feature-one,
.home #app-feature-two{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.home #section-three,
.home #app-feature-one,
.home #app-feature-two{
max-width:800px;
margin:0 auto;
padding:60px 15px;
}
.home #section-three h2{
font-size:45px;
}
.home #app-feature-one .section-content,
.home #app-feature-two .section-content{
margin:15px 70px;
}
}
@media only screen and (max-width:767px){
.home #app-feature-one h3{
margin-top:40px;
}
.home #app-feature-one img,
.home #app-feature-two img{
margin:0 auto;
max-width:300px;
display: block;
}
.home #app-feature-one .section-content,
.home #app-feature-two .section-content{
text-align:center;
}
}
And here is the Frontend Output:
Hammayyaaa! Our Homepage has finally taken its original shape from the Mockup!
Advanced Custom Fields a.k.a ACF plugin is a well coded custom fields plugin.
Now, that you have learned how to use it, don’t add too many custom fields using it.
It is kind of abusing the custom fields functionality in WordPress and may lead to performance issues on the site.
Having said that, feel free to play around and try different things with the plugin.
You’ll run into a lot of issues or unique scenarios, but ACF documentation is pretty deep and thoughtful. So, it will answer most of your questions when you run into a problem.
I will see you see in my next in-depth guide.
Until then, have a good time 🙂