How to Get Custom Field Value in WordPress (Display WordPress Custom Fields)
Have to quickly add content to a particular area of your post or page? You could add your articles using the WordPress editor but what if you wish to display this content outside the content area of a post or page? What if you wish to add different content in the same position but on a specific page only?
You could create a sidebar widget but the content you create will be display in sitewide. Not only that, the content is definitely the same when what you want is to display different content in the same location when you require to.
A more flexible and powerful solution is to make a custom field which you can use selectively on any post or site. You can also change the content that exhibits in the same area of your theme.
Today i want to show you How to Display WordPress Custom Fields value in the front page view.
How to Get Custom Field Value in WordPress
In this tutorial, we use a plugins call Advanced Custom Fields to make it easier for beginner to learn. Thus, before you dive into the below, please download the plugins.
A. Find the “Custom Fields” on WordPress left sidebar
When you click in to custom fields, create a fields and type the custom fields name. Here we use “ROOM TYPES” and click “Add Field” to create new fields.
B. Fill in the “New Field”
After you add “New Field”, fill in the field (see below). Field label and field name type the similar one, the first one is for display and the second one is used in attribute coding.
Field Type allow you to choose text, text-area, button, image or more. Here is depends on what you’re going to create.
Field instructions is actually descriptions, just for you to know what’s this fields about. (You can leave it empty)
Default value, placeholder text and more below are very obvious, you can leave it empty or you would like to custom it.
C. Display Location rule
Here allow you to choose where this custom fields to show up. If you like this custom fields to show up in your blog post, then you may set “Post Type” > is equal to > “post”.
D. Fill up the settings.
It also allow you to set the style, position and more.
There are two style options for you to choose.
You can also set the custom fields position is either sidebar, after title or after content.
If you choose the style as seamless and High (after title), the look will be like below.
The standard style options and Normal, the custom fields will be display at the bottom after content like this.
It also allow you to pre-hide some items on the edit page. (I’m just ignore it)
E. Display WordPress Custom Fields
Once you have setting up your custom fields, now you may want to display the data you have input on the editing page to show in front view.
To achieve it, we need to add some code to make it work.
Display on the page content area
This is easier just paste the code in the content area can i will showed.
<?php the_field('text'); ?>
Change “text” to your “field name” you created.
<?php the_field('room_types'); ?>
You can customize it by using simply html + Css.
<h2 style="color:red;"><?php the_field('text'); ?></h2>
Display on a template page (that outside content area)
To show the custom fields value outside the content area is much more complicate.
First you should find where to embed the code, so we need to find where they are located. Easiest way is to open your inspect (Press F12 on keyboard) and click the area you want to embed on.
Find some special id or class, and go to your themes > edit to find it. Here we target: <section id=”property-content” class……>
We also found it on “single” > “full-width.php”. To embed the custom fields value on here, we need to add the code in this area.
Make sure the code is under which <div>, and now you can create one <div> to separate your own custom code. Input your own html code and create your own style. In the middle, embed each custom fields code your want to embedded.
<?php the_field('xxxxxxxxx'); ?>
F. Modify Done
Now go to the page and refresh and you will see the result. Now keep modify and edit the html and css code to make it as you want. In-case you need more advanced options, you can check out the documentation to make your site even more powerful.
- How to Optimize Images size in kb RIGHT WAY.
- Add Author’s Profile Photo in WordPress Without Gravatar
- How to Display Last Updated Date Posts In WordPress (Stepbystep)
Maomaochia is now accept and welcome guest post, we're growing fast and it's now Free.