;
SERVICE

Using Advanced Custom Fields

shadow
Advanced Custom Fields is a plugin that can be used for WordPress development

Author :  

shadow
Advanced Custom Fields is a plugin that can be used for WordPress development
  • Recruit
  • Recruit

Ever wanted to have special fields added to your posts? ACF, or Advanced Custom Fields, is a plugin created by Elliot Condon that gives you the ability to add custom fields to your posts. These fields, after publishing your post, will display the information that you inserted into your custom field. For example, you can have a custom text field that shows users your mood while writing your post. It may also be one of the most popular WordPress plugins to date. You can read the documentation by clicking here. Let’s get started!

Features

  • Visually create your Fields
  • Select from multiple input types (text, textarea, wysiwyg, image, file, page link, post object, relationship, select, checkbox, radio buttons, date picker, true / false, repeater, flexible content, gallery and more to come!)
  • Assign your fields to multiple edit pages (via custom location rules)
  • Easily load data through a simple and friendly API
  • Uses the native WordPress custom post type for ease of use and fast processing
  • Uses the native WordPress metadata for ease of use and fast processing

Step 1: Download and Install

You can install Advanced Custom Fields in two ways: Dashboard Install:

  1. Click on Plugins
  2. Click on Add New
  3. In the search bar, type ‘Advanced Custom Fields’
  4. Click on Install Now
  5. Click on OK
  6. Click on Activate Plugin on the new page

Manual Install:

  1. Download the plugin here
  2. Unzip the zip file
  3. Copy the plugin into your /wp-content/plugins directory
  4. Click on Plugins
  5. Click on Active under ‘Advanced Custom Fields

Step 2: Creating Custom Fields

After activating the plugin, you will see this:

 

You should see this menu after activating the plugin

 

Let’s click on Custom Fields. You should see this screen:

 

You will see this screen after clicking the 'Advanced Custom Fields' menu item.

 

Click on Add New at the top. Enter a new field into the field marked in red:

 

You should input the field name here

 

Let’s use ‘tutorial’ as an example. Afterwards, click on the Add Field button.

 

Click on this button to add the field

 

Take a look at the options below:

 

Take a look at some of the options available to you in this plugin

 

There are three required fields, ‘Field Label’, ‘Field Name’ and ‘Field Type’. The ‘Field Label’ field is shown when you are editing your post. For example, if you are writing a post, the word ‘Tutorial’ will show up. The ‘Field Name’ is the name that Advanced Custom Field uses to grab the data within this field. Finally, the Field Type, is the type of data that will be stored and displayed. It can be a text, an image, or a video. Here’s the Field Types supported by ACF:

 

This is all of the different data types that you can use with Advanced Cusotm Fields

 

Let’s click on the ‘Publish’ button:

 

Click on the Publish button to save your changes

Step 3: Adding the Code

You have now created your custom field! Let’s display it on a blog page. To display the information in your post, just add the following line into the WordPress Loop:

or

You can find code examples here. After saving your file, let’s take a look at the Edit Post screen:

You should now be able to see the Tutorial field added to your Add New Post screen

(Hint: the field is located towards the bottom of the screen)

If you have typed in ‘this is a test for a tutorial’, after publishing, you should see this:

This is what you should see after publishing your post

If so, you have just added a custom field to your post! Great job! As always, if you have any questions, feel free to leave a comment below.

SERVICE
  • sns