In this full tutorial on Advanced Custom Fields, I’ll let you know that it’s not too difficult, because the people behind the scenes who created this plugin have done a great job of making it easier to use the WordPress dynamic functionality.
Let’s start by creating a list, this list will show you the main features that you can use via the advanced custom fields plugin.
Advanced custom field types in ACF plugin:
field type | field type |
Date Picker Date Time Picker Google Map Time Picker Accordion Flexible Content Repeater Tab Layout Clone Layout Select True / False Choice File | Range Text Text Area Button Group Choice Checkbox Radio Button Gallery Image oEmbed Wysiwyg Editor Color Picker |
How to use advanced custom fields in a WordPress theme?
First, you need to know where and when to use advanced custom field types, for this, I will give you some examples to understand how they work.
Let’s say you want to create a real estate website, and to enable you to submit property information, you’ll need to use the custom fields in your post type which you can name Sites… Learn more here about the custom post type and how to make it.
Building a real estate website using the ACF extension
You will need to register five custom fields now using the ACF plugin named as follows:
field type | field type |
Address City Name Price Rooms Number Living Space | Text Select Number Number Number |
Now go to your ACF plugin in WordPress, click on New and give it the name Location…. Then do the custom fields as shown above… When you’re done, set the site to be displayed in sites of another type.
Now go to the sites, type the post and press add new, fill in the fields and save…
Display custom fields in your website using the plugin
Now to display custom fields you have two options, use either the plugin or with some code in your template file…
To display advanced custom field fields using a plugin, the best plugin to do this is Elementor Pro…
Go to Elementor Pro Templates, make a new template called Sites and assign it to Pot type sites and hit Create Template..
Now drag the text widget from the left or right side based on the language of your website and click on the dynamic icon as you can see in the image below

Now you just need to select the first ACF field called Address, that is…..but what if you want to use this field to display Adres in Gooele Maps?
No problem, pull up the Google Maps widget and as you can see, click on the dynamic icon and repeat the process as we explained above…
Now to display the city name field, in Elementor you also have options to use it, TEXT WIDGET or Post info, and do the same.. Click on the dynamic icon and choose the field….
Repeat to display all of the above custom fields with Elementor.
Show custom fields in your website without a plugin
First to do this you will need to know a little PHP – HTML – CSS
The code to be used is for each field as written below:
Address field
<p><?php the_field('address'); ?></p>
And to display the address field using Google Maps, you will need to change the field type, instead of the text field to Google Maps and you need to do some other things.
First you need to follow the instructions of Google an API Key. The Google Maps field requires the following APIs; Maps API, JavaScript, Geocoding API, and Places API.
Once you have registered Google an API Key , go back to your theme folder and paste the code in Functions.php
لتسجيل مفتاح Google API الخاص بك ، يرجى استخدام إحدى الطرق التالية. // Method 1: Filter. function my_acf_google_map_api( $api ){ $api['key'] = 'xxx'; return $api; } add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
To view the saved location in Google Map, please use the API code
Paste it now
<style type="text/css"> .acf-map { width: 100%; height: 400px; border: #ccc solid 1px; margin: 20px 0; } // Fixes potential theme css conflict. .acf-map img { max-width: inherit !important; } </style> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> <script type="text/javascript"> (function( $ ) { /** * initMap * * Renders a Google Map onto the selected jQuery element * * @date 22/10/19 * @since 5.8.6 * * @param jQuery $el The jQuery element. * @return object The map instance. */ function initMap( $el ) { // Find marker elements within map. var $markers = $el.find('.marker'); // Create gerenic map. var mapArgs = { zoom : $el.data('zoom') || 16, mapTypeId : google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map( $el[0], mapArgs ); // Add markers. map.markers = []; $markers.each(function(){ initMarker( $(this), map ); }); // Center map based on markers. centerMap( map ); // Return map instance. return map; } /** * initMarker * * Creates a marker for the given jQuery element and map. * * @date 22/10/19 * @since 5.8.6 * * @param jQuery $el The jQuery element. * @param object The map instance. * @return object The marker instance. */ function initMarker( $marker, map ) { // Get position from marker. var lat = $marker.data('lat'); var lng = $marker.data('lng'); var latLng = { lat: parseFloat( lat ), lng: parseFloat( lng ) }; // Create marker instance. var marker = new google.maps.Marker({ position : latLng, map: map }); // Append to reference for later use. map.markers.push( marker ); // If marker contains HTML, add it to an infoWindow. if( $marker.html() ){ // Create info window. var infowindow = new google.maps.InfoWindow({ content: $marker.html() }); // Show info window when marker is clicked. google.maps.event.addListener(marker, 'click', function() { infowindow.open( map, marker ); }); } } /** * centerMap * * Centers the map showing all markers in view. * * @date 22/10/19 * @since 5.8.6 * * @param object The map instance. * @return void */ function centerMap( map ) { // Create map boundaries from all map markers. var bounds = new google.maps.LatLngBounds(); map.markers.forEach(function( marker ){ bounds.extend({ lat: marker.position.lat(), lng: marker.position.lng() }); }); // Case: Single marker. if( map.markers.length == 1 ){ map.setCenter( bounds.getCenter() ); // Case: Multiple markers. } else{ map.fitBounds( bounds ); } } // Render maps on page load. $(document).ready(function(){ $('.acf-map').each(function(){ var map = initMap( $(this) ); }); }); })(jQuery); </script>
Next, you need to display the Adreess field just below the last icon, and paste the following:
<?php $address = get_field('address '); if( $address ): ?> <div class="acf-map" data-zoom="16"> <div class="marker" data-lat="<?php echo esc_attr($address ['lat']); ?>" data-lng="<?php echo esc_attr($address ['lng']); ?>"></div> </div> <?php endif; ?>
CITY . field
In this case we have two options, if you give only one value use this code
<?php $name= get_field( 'city_name' ); // Create a comma-separated list from selected values. if( $name): ?> <p>City : <?php echo implode( ', ', $name); ?></p> <?php endif; ?>
But if more than one value is provided, you need to use this code
<?php $name= get_field( 'city_name' ); ?> <p>City : <span class="city-<?php echo esc_attr($name['value']); ?>"><?php echo esc_html($name['label']); ?></span></p>
Price . field
<p>Price : <?php the_field('price'); ?></p>
Field Rooms Number
<p>Rooms Number: <?php the_field('rooms_number'); ?></p>
Field Living Space
<p>Living Space: <?php the_field('living_space'); ?></p>
That’s it, is it hard to use ACF (Advanced Custom Fields)
You can achieve more and more with this awesome plugin, just meet me in other tutorials to teach you how to create more than this