In the context of WordPress, custom fields are used to store additional information about a post type. Be it a default post type (blog post), page, or custom post type. Advanced Custom Fields a.k.a ACF is the most popular WordPress plugin to create custom fields in WordPress. It supports a wide range of field types from text, image, file, radion button, and so on.
Creating a custom field using ACF is pretty easy. What’s more difficult is displaying the fields you have created on a page (frontend).
There are two options to display a field you have created with ACF on a page: manually and via a plugin. In this article, we will show you how to display an ACF field on a page using those two methods. If you are new to ACF, you can read our previous article to learn how to create custom fields with ACF.
Method 1: Displaying an ACF field on a Page Manually
Gutenberg (the default block editor of WordPress) has no block to display an ACF field. To display an ACF field on a page, first, you need to specify the post type you want to display the ACF field on, then edit the template file that is responsible to display the associated post type. For instance, if you want to display the ACF field on a default post type (blog post), you can edit the single.php file of your theme.
Go to Appearance -> Theme Editor on your WordPress dashboard and find the single.php file. The location can be vary depending on the theme you use. In the Hello Elementor theme, for instance, the file lies under the template-parts folder. Click the file to edit it.
Add the following code to the file and replace the text ‘genre’ with the field name you want to display.
<p><?php the_field('genre'); ?></p>Here is the example of the placement of the code above.
The example above will display the ACF field right above the content area of the page. Don’t forget to click the Update File after adding the code to update the file.
If you want to display the custom field on a page instead of a blog post, you can edit the file that is responsible to display the page. In most cases, the file would be page.php.
Method 2: Displaying an ACF Field on a Page Using a page Builder
Page builder is the best solution if you don’t want to deal with PHP code to display an ACF field on a page. A page builder plugin comes with a visual editor to allow you to display an ACF field without coding. You can even set the location within the page where you want the custom field to be displayed.
Also, you can customize the text such as setting the typography and text color. Another advantage, you can display the ACF field on an individual page or blog post. Some page builder plugins that have the capability to display ACF fields are:
- Elementor
- Divi Builder
- Brizy
In this article, we will show you how to display an ACF field using Elementor. You need to use the pro version of Elementor to be able to display ACF fields as the feature to do so is only available on the pro version. If you are new to Elementor, you can read the article on wppabuilders.com to learn how to use Elementor.
First, create a new page or blog post (or edit an existing one) and edit it with Elementor. On the Elementor editor, add a Text Editor widget to the canvas area.
Once the Text Editor widget is added to the canvas area, go to the left panel and click the database icon on the content editor. Select ACF Field.
Next, click the wrench icon on the ACF Field and select the field (key) you want to display. You can also add a prefix and suffix in by clicking the Advanced block.
To style up the text, you can go to the Style tab on the settings panel. From this tab, you can set the text alignment, text color, and typography (font family, font size, font style, and so on).
Once you are done editing the page, you can click the PUBLISH/UPDATE button to publish/update it.
