Quick start
Ultimate Fields allows you to add fields to the back-end of WordPress and display their values in the front-end.
Fields can be displayed in various locations in the admin by associating a group of fields with that location. Those groups of fields are called containers in the plugin and documentation.
In this tutorial, we will create a new container container called "Post Data" and we will add the "Post Type" location to the container in order to show fields while editing posts. After that, we will add a field to the container and display its value in the front-end.
This article explains how to use the interface of Ultimate Fields in the admin to create fields.
If you prefer to define your fields with PHP, the same functionality is also available through the PHP API of the plugin. Please refer to the Using the PHP API article to learn how to do it.
First things first. None of the steps below will work if the plugin is not installed & activated.
If you have not installed Ultimate Fields or Ultimate Fields Pro yet, please make sure that you follow the instructions at the Installation page in order to do it. Ultimate Fields installs like any other plugin, while Ultimate Fields Pro comes as a .zip file.
The Administration Interface is the best way to familiarise yourself with the plugin, without having to reference the documentation in the process. To start, locate the "Ultimate Fields" section in the menu of the back-end of your website and click "Add New". You will be presented with a screen, looking like this:
All of the settings in the image are described in Administration Interface, but you should not worry about them right now.
The title of the container, based on its locations, can be displayed in multiple places. Normally, those would include the title of the meta-box, like "Fields", "Locations" and "Container" above. Use an appropriate name, which describes the purpose of the fields which you intend to add to the container.
For this example, please enter "Post Data" in the field at the beginning of the page.
To create your first field, click the "+Add Field" button. This will present you with a popup, where you need to set the field up.
Let's create a simple text field, called "Post Subtitle". We would use the field later to display its value underneath the post title.
So, enter "Post Subtitle" in the "Label" field. Once you remove the focus from the field, the next one, "Name" will be auto-filled with post_subtitle. If you need to, you can change the field name, but for now let's leave it like that.
"Type" determines the field type and based on that, the rest of the settings in the editor can change. All other fields and settings are explained in the Fields chapter.
Locations are the thing that links a container with a particular location/data type.
For this tutorial you need the Post Type location, because we want to add a new field to all posts and posts are a post type. Click the Post Type button next to Add location. This will present you with a new box, looking like this:
There are various settings of the location, which you can adjust, but the only thing you need to do right now is to check the box next to Posts in the Post Types field.
Once you have done that, the last step is to click the "Save" button and you will have created your first container ready and working!
In the administration menu, click the Add New sub-menu item in the Posts menu to create a new post. Once you open the screen, you should be presented with a new box called Post Data, which contains a single field, called Post Subtitle.
If you see the field, it means that your job in the back-end is done.
We will not cover all functions and ways to display values in the front-end: this will be done in the Functions and API chapter. For now let's just display the value of the field we just created.
Assuming that you are using Twenty Seventeen, the current default theme for WordPress, please open template-parts/post/content.php. Around line 35 you will see a call to the_title(). On the row after it, add the following code:
<p class="subtitle">
<?php the_value( 'post_subtitle' ) ?>
</p>the_value() displays data based on the currently loaded post/page, so it will automatically determine it's ID and show the value that you have entered in the field.
Great job! You just learned the basics of:
- Creating a container
- Creating a field
- Adding a location to a container
- Displaying data in the front-end
Ultimate Fields lets you do a lot more than this, but the basics always revolve around the same process.
Next: We recommend that you continue learning Ultimate Fields by getting to know the Administration Interface.