WordPress: How to get field values in Advanced Custom Fields?
February 21, 2021

Advanced Custom Fields is one of the most popular WordPress plugins. It is loved by developers as well as content managers as it makes editing the pages and posts very easy. It is very flexible and works easily with custom post types as well.

These are some basic examples of ACF fields retrieval using code.

How to display a simple ACF field?

There is a function in ACF that we can use to retrieve and display the field. It’s the_field($field_name). We just need to pass the field name to get the value of it and print it.

<p><?php the_field('field_name'); ?></p>

How to save a simple ACF field in a variable?

We can also save the field into a variable and then use it anywhere in the file. For that we ACF has a function get_field(‘field_name’). We just need to pass the field name just like the previous function.


$variable = get_field('field_name');

echo $variable * $variable; // assuming it's a number


How to use conditional statements on a simple ACF field?

We can use the same function get_field(‘field_name’) and use it with different conditions.


	echo '<p>' . get_field('field_name') . '</p>';


The example above basically checks if get_field has any value in it. It returns false if the field is empty (value == “”) OR the value == null OR the value == false.

How to get Image field saved as URL return?

If we set the Image field as a basic URL return then it’s basically like creating a simple text variable and adding an URL to it. Though, ACF is NOT exactly doing that.

<img class=lazy src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="<?php class=lazy the_field('image_acf_field'); ?>" alt="" />

We can not dynamically set the alt since we are not setting the return value as an object. Let’s see how we can do that.

How to get Image field saved as an Object return?

The difference between the previous example and this example is that in this example, we are setting the return for the Image field as an image object. The image object will have all image attributes like alt, src, title, description and other element attributes.

<?php $image = get_field('image_acf_field');?>
<img class=lazy src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="<?php class=lazy $image['url']; ?>" alt="<?php $image['alt']; ?>" />

By using the ID, we can also retrieve any crop size of the image and even get the name of the file!

<?php $image = get_field('image_acf_field');?>
<?php $image = wp_get_attachment_image_src(get_field('image_acf_field'), 'full'); ?>
<img class=lazy src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="<?php class=lazy echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('image_acf_field')) ?>" />

You can read more on ACF Docs


Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

Introduction to components and templates Part 1: Component MetadataAngularHow to add a Line Chart in Angular App?AngularSolution to Precision Problem in JavaScript NumbersJavaScriptHow to Remove PHP File Extensions From Your Website URLs?PHPSQL Inner JoinSQL/MySQLSimple Page Hit Counter in PHPPHPIN and BETWEEN Operators in SQLSQL/MySQLHow to concatenate variable with string in Swift?SwiftWP_Query Class in WordPressWordPressValues and Types Basics in JavaScriptJavaScriptDROP DATABASE (remove a database) from PostgresPostgresCREATE DATABASE in PostgreSQLPostgres