Add ACF Custom Fields WordPress Full Tutorial

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