Custom fields in wordpress and related issues – Learn WordPress from a to z

Continuing with the series of articles on wordpress theme programming tutorials today, I will introduce you to a pretty cool and important feature that is custom fields in wordpress.

The custom field feature combined with the custom post type feature makes wordpress an unrivaled CMS as it is today. Today we will find out about this divine function of wordpress.

What are custom fields in wordpress?

By default, each article in wordpress will have fields such as: Title, content, thumbail, description, path … The above components are provided by wordpress.

In addition to the fields on wordpress, it also allows us to add 1 or more new fields to serve the advanced functionality of the website. Adding those new fields is called a custom field in wordpress.

The feature not only applies to posts and pages, but also to custom post types.

Instructions for creating custom fields in wordpress

Create custom fields

To make it easier to imagine we will do the function for example: Under each article, display the link to the original article.

With the requirements of this function, we have to create in the new article frame an area to enter the original article link . The steps to make this function are as follows:

Step 1: Go to the new post area and click on the display option  and click on the custom field

Step 2: Scroll down to the custom field location click on “enter new” then enter the name and value

• The name field here is the slug form, you must enter it immediately and unsigned, later they will use it to display it out. This field is set by you here, I set it as link-goc (According to the above example)
• The value field is the original link of the article (following the example above).

Step 3: Click on add custom field to complete

So we add custom field in wordpress successfully.

Display the custom field outside the front end

To display the custom field outside the front end we use the following code, insert this code into the area to be displayed in the single.php file .

<?php echo get_post_meta(get_the_ID(), 'link-goc', true); ?><div><span>1</span></div>

Where link-goc is the name when we put it in the custom field input.

At this point, you will wonder, the above way can only create fields that are in the form of text, how to create fields in the form of images or advanced objects? Surely doing the above method is quite boring and banana :))

So wordpress has dozens of plugins to help create custom fields in wordpress. One of them is the ACF (Advanced Custom Fields) plugin or you can also take a look at how to create a custom field using the toolset types plugin.

Create custom fields in WordPress using the ACF (Advanced Custom Fields) plugin

ACF is one of the leading custom field creation plugins available today. With an easy to use interface that supports many fields, so today I will recommend it to everyone.

Create custom fields with ACF

First we have to install this plugin, go to the add new plugin and search for the keyword “Advanced Custom Fields”

Find and install the plugin as shown below

After installing the admin menu, a custom fields menu will appear,  click on add new to create a new custom field.

It will display the interface to add a custom field as shown above, click on add field to add a new field in it:

• Field label => is the field name displayed in the new post area
• Field name => is the slug of the custom field, this part will be used to get the custom field outside the front end
• Field type => are the types that acf supports such as: Text, textarea, image (image), …
• The rest of the other parts are not important, you can leave them as default or customize more.

You can add 1 or more fields depending on the function’s requirements.

Next to the field’s display options is the locations section :

In this section, you can customize the display of custom fields in WordPress, you can display it in the post, on the page or in a certain custom post type.

After you have filled in all the information, you save it and go to the add new post section, you will see the field displayed as shown below is successful.

Display fields outside the front end

To display custom fields in wordpress using acf plugin we use the following code:

<?php the_field('link-goc'); ?><div><span>1</span></div>

For fields that are arrays or objects we need to do the following:

<?php $field = get_field('array'); ?><?php foreach ($field  as $key => $value) {
    echo $value;
} ?&gt;<div>
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>

Advanced Custom Fields Pro plugin

This plugin has a pro version that adds many great and powerful fields such as:

• Group
• Repeat content
• Gallery
• …

By the way, I also have a pro plugin so I can share it with you, if you find it necessary, you can download it

summary

Today I showed you the custom field function in wordpress as well as using the acf plugin to create custom fields quickly and conveniently. This is one of the most important functions in wordpress.

Hopefully, this little knowledge will help you learn wordpress theme programming more easily.

Hello friends