3 ways to use Advanced Custom Fields for WordPress [Quick Guide]

4:09 pm October 24, 201611054

Advanced Custom Fields plugin is a powerful free and intuitive tool that allows you to add recurring and special fields to your posts WordPress . According to the theme of your blog or your site, you might need these famous fields that will make your totally unique WordPress…

Usually “for developers”, I propose to discover three simple ways to use it. To do this, we will see:

part 1: how to set up ACF

part 2: how to view the Customs Fields in your site

Advanced Custom Fields Plugin WordPress

as a first step, we’re going to focus on the Advanced Custom Fields plugin and create our different fields in just four steps:

the first thing to do will be to install in your WordPress site.

Installer le plugin Advanced Custom Fields

To do this, go to the EXTENSION of your back-office tab, click ADD and search for Advanced Custom Fields . Because there are several, to select one of Elliot Condon . Then click on INSTALL NOW and turn it on.

Créer un groupe de champs avec ACF

Once installed, you’ll find ACF in your menu on the left. Go to ACF > FIELD GROUP > ADD. In the example case, I added a group of fields called “Real estate”.

Advanced Custom Fields offers a considerable amount of different fields for you to use including TEXT fields, MAIL, PASSWORD, PICTURE, LIST OF CHOICE, GOOGLE MAP etc…

Les différents types de champs ACF

You can then associate the fields with the group created in step 2 by clicking the button “+ ADD”. Be sure to follow different instructions. Once, the field is filled, you can click CLOSE THE FIELD and then add a new if necessary. You can create an unlimited number of fields. In my example, I created six (photo, price, area, district, number of pieces and description).

Créer les différents champs

Parametrer les nouveaus type de champs ACF
Now that your fields are created, you choose the places where to make them appear. Here it’s the display on the side of the administrator which will then depend on the side view visitor, as we will see later (part 2)…

The tab ASSIGN THIS GROUP OF FIELDS allows you to provide multiple through drop-down menus or simple conditions. This will allow you to decide whether you want the field group appear on an article on a page etc… You can add rules through the buttons AND and OR. In the case of my example, I assigned the Group of fields to a specific PAGE TEMPLATE that I named real ESTATE and we will see how to do (part 2 – Option 1).

The OPTION tab allows you to set the order number , position in your post side backoffice, the [le[19459018 style and fields to hide .

Finally, remember to click PUBLISH as you used to do for a page or an article.

Once the creation of your Customs Fields is over, you naturally want to go in your new page or new article to fill in all your new fields… Unfortunately you will be disappointed! Indeed, at the moment you just created, we now need to make them visible on the visitor side.

To achieve this, you will need to create a file using a text editor such as Sublim Text for example. You can name this file as you wish, for my example, I named it HAPPY real ESTATE. PHP

Créer un fichier de contenu

this file should include:

  • tags PHP including the GET_FIELDS function as shown by lines 1 to 11 of the screenshot above
  • HTML tags (lines 13 to 26) that will allow you to order your content. For my example, I put a title tag (

    ), an image tag (), (

      ) list and a few paragraphs (

      )

    • ACF PHP functions named “the_field” that will allow you to insert each field created previously. Typically, you insert in your tags HTML in the following way:

      . For more information, see the ACF resources

    then, you need to save your file and send it via FTP to the folder of your theme.

    Note: in order to better customize the final visual rendering, you can add classes to your HTML tags you will use in your style file. CSS thereafter.

    Now that your Customs Fields and “base filename” are created, we will see three different ways to appear on your site:

    a Page Template, or Page template in french , is a specific page type which translates a different presentation of the other pages in your theme. If you use a premium theme, it may well be that this one offers two or three different models. There are often specific models for the home page or the contact page… But did you know you can create your own template from page to two times less time than it takes to say? here, I propose to create a specific page template to appear your Advanced Custom Fields:

    1. go to the folder of your theme (via FTP) to find the file named PAGE. PHP.
    2. Duplicate and rename PAGE-real estate. PHP for example.
    3. Using a text editor, change the lines between / * and * / at the top of the file just below the tag <? php : here, replace the content with Template Name: real ESTATE . Learn more about HIERARCHY OF TEMPLATES , and PAGES PAGES TEMPLATES
    4. but also the line get_template_part (‘template-parts/content’, ‘page’); by get_template_part (‘content-real estate’); . more on the function GET_TEMPLATE_PART
    5. Créer une nouvelle template de page

    6. complete by saving the file and sending in your theme at the same level as the PAGE file. PHP
    7. now, go back to the back office of your site, add a new page that should allow you to set the MODEL on real ESTATE (see in the ATTRIBUTE tab OF the sidebar located on the right PAGE) as you can see in the screenshot below. Customs Fields will then appear on your page to the place where you’ll get parameter during part 1 – step 4 (OPTION tab > POSITION).
    8. Paramétrer la page côté admin

    9. Once you have published your page, you can then get side visitor in order to check the display of the Custom Fields. From there on, everything is a matter of HTML and CSS to make your page a little more attractive!
    10. Rendu visuel côté visiteur

    by default, WordPress offers four types of post, namely: POSTS (articles), the PAGES, the ATTACHMENTS and REVISIONS. However, this may be limited depending on the type of site you want to build. Depending on your activity or your passion, you may want to create new types of content that you want to differentiate your pages and your articles, for example: a portfolio, advertising, promotions, recipes, tests of products etc… I propose you to discover how to create your own content types to make appear your Advanced Custom Fields:

    step 1: create a Custom Post Type

    this way requires the installation and setup of the plugin CUSTOM POST TYPE UI (CPTUI) . This plugin, proposed by WebDevStudio , is free and ideal to make your totally unique site. custom Post Type UI and Advanced Custom Fields are completely compatible and complementary although they can be used independently of the other.

    CPTUI allows, among other things, to create new types of post and taxonomies, and I propose to fly quickly over how to use it:

    1. first of all, you will install the plugin and then you activate it. Then, in your administration panel, you will find the CPT UI menu that will allow you to start the settings.
    2. Plugin Custom Post Type UI

    3. Then click on ADD/EDIT POST TYPES
    4. in the BASIC SETTINGS, fill in the POST SLUG, the LABEL PLURAL and the SINGULAR LABEL TYPE. Attention, please follow the recommendations listed in each champ, this is very important, especially for the POST TYPE SLUG which must not contain accent or number and which areas need to be replaced by dashes (-) and underscores (_).
    5. In the ADDITIONAL LABELS, you can find out all the information that will be used in your administration panel.
    6. Setting CPTUI partie 1

    7. On the SETTINGS tab, you can set the various options to TRUE or FALSE without forgetting to check the SUPPORT option: CUSTOM FIELDS. Finally you’ll click the ADD POST TYPE located at the bottom left.
    8. Setting CPTUI partie 2

    9. Following the creation of the Post Type, you will get a success message and you will see a new menu in your dashboard. For my example, this is the tab ADS.
    10. Custom Post Type ajouté

    Step 2: assign ACF to the new Custom Post Type

    Parametrer ACF pour accueillir CPTUI

    now that your new type of post was created via CPTUI, I invite you to return to the menu of Advanced Custom Fields to change the assignment of your group of fields (those created in part 1 / step 2 of this article). You have to add a rule where the PUBLICATION TYPE is equal to ANNONCE_IMMOBILIERE (in the case of my example).

    Step 3: create a new file based on the SINGLE. PHP

    Dupliquer le fichier single.php

    1. go to the folder of your theme, locate the SINGLE file. PHP that you duplicate and change using a text editor.
    2. Name this file SINGLE-le_nom_de_votre_post_type_slug. PHP: POST TYPE SLUG is the ID that you entered when creating your Custom Post Type. In my example, it’s annonce_immobiliere.
    3. Just replace the line get_template_part (‘template-parts/content’, ‘page’); by get_template_part (‘content-real estate’); (line 19 in the screenshot above).
    4. Send via FTP, this file in your theme at the same level as the SINGLE file. PHP

    step 4: publish a new ad

    1. back in the ADMIN of your website part.
    2. Add a new AD as you do when you add a new article.
    3. Fill in the customized fields created with ACF then publish.
    4. Créer une annonce avec CPTUI et ACF

    5. Check the Visual rendering you will certainly have to improve to make it more “sexy” side visitor.
    6. Rendu visuel annonce côté visiteur

    it may well be that you need only custom fields in items with a specific category. For example, if you are a food blogger, you might need to different fields depending on whether your items are in the RECIPE category or in the TASTING category. Logical, no? Then I suggest you see your Advanced Custom Fields only in one category:

    1. in your ADMIN section, start by creating a new category of articles by going to ARTICLE > CATEGORY > ADD (in my example, I added a category called SALES real ESTATE).
    2. Go back to the ACF tab, give a new rule to your group of fields where CATEGORY is equal to SALES real ESTATE (in the case of my example). Remember to update your field group.
    3. Paramètres ACF selon catégorie

    4. Go to the folder of your theme, locate the SINGLE file. PHP that you change using a text editor. Not to duplicate it, let’s change it only… Just replace the line get_template_part (‘template-parts/content’, ‘single’); by if (in_category(‘ventes-immobilieres’)) {get_template_part (‘content-real estate’)}; else {get_template_part (‘template-parts/content’, ‘single’)}; as you can see in the screenshot below. Don’t forget to save it.
    5. Modifier le fichier single

    6. Finally, create a new article from the back office of your site and assign the category where the ACF are assigned (in my example, it is the “sales-real estate” category).
    7. Appointment side visitor to check that ACF fields appear in article just to create. As you can see in the screenshot below, the display is different depending on the category of article.
    8. ACF selon un type de catégorie spécifique

    in

    conclusion

    this article is just a taste of what can be achieved by using Advanced Custom Fields (and its association with CPTUI). The plugin is very broad and very flexible conditions and functions of creations that you need is a little imagination to use it wisely.

    However, for not to burden the explanations of this tutorial, I voluntarily failed to talk about required creating a child theme . Indeed, you are not without knowing that when you change a theme, it is recommended to put the changes in a child theme, this will protect you from the loss of your data in a next update!