Skip to content

Administration interface

Radoslav Georgiev edited this page Oct 21, 2018 · 3 revisions

Ultimate Fields comes with an awesome administration interface out of the box. It lets you create new containers, add fields to them, manage location rules and fine-tune their appearance. In the most intuitive way to learn and use Ultimate Fields.

admin-interface

Interface elements

The screen for managing containers is divided into three sections:

  1. Fields
  2. Locations
  3. Container

Each of those sections lets you tune different aspects of a container and its fields.

Fields

The Fields box is the place where you can manage the fields in your containers. Once you add a field, you will immediately be presented a preview of it, looking exactly the way it will look for your users.

sample-fields

You can read about all field types and their settings Fields chapter of the documentation. The articles in that chapter describe every single setting and option that you can find while configuring fields in the back-end.

Adding a new field

To add a new field you just need to click the "+Add Field" button. The button will open a new popup, where you can setup the new field. The documentation may refer to the popup as Field Editor.

Rearranging fields

To rearrange fields, you can just drag & drop them within the field editor. This will preserve all of their settings and styles (including their width) and only change their position.

Please keep in mind that in the preview you could see rows, which are not completely filled with fields. We are doing this to indicate to you that you have extra space on that row, but once you save the container and check the actual fields, the fields on that row will be expanded in order to fill it and not leave any gaps.

Manipulating fields

As you can see above, once you mouse-over a field, you get a small action bar with a few options:

  1. Edit will open the editor of that field to let you adjust its settings.
  2. Add field before allows you to add a new field immediately before the one you are hovering. Clicking the button will open a new field editor and once you save the field, you will see it next to the first one.
  3. Clone will append a clone of the focused field immediately after it. You will see a new popup, which lets you modifiy the settings of the new field or just save it.
  4. Copy field ID will open a new text area, which lets you quickly copy the name of the selected field.
  5. Delete will remove the field.

Locations

Locations determine where and when to display a container along with its fields.

To add a new location to a container, simply click the type of location that you need. This will add a basic location and present you with additional fields, letting you define various conditions on when to show the container.

locations-box

In this example you can see some of the settings for the Post Type location, which can instruct a container to be displayed when posts, pages and custom post types. To see what settings are available and understand them for each location, you can refer to the Locations chapter.

As you can see above, you can associate a container with multiple locations:

  • If you do not add more than one of each location type, you will simply see the containers on all selected places.
  • If you do add multiple locations of the same type, they will work in an OR relationship. This means that as long as all of the requirements of a single location are met, the container will be displayed in that location. The settings of the location on the other hand, work in an AND relationship. All of the rules within a single location must be met in order for the whole group to be applied.

Container

Containers have different appearance styles, which let you change the way the container looks, the arrangement of the fields inside and to even add a description, which instructs users on how to use the fields within it.

For a detailed explanation of each of those settings, please read the Container Settings article.

Storage

The containers, created through the administration interface are saved as a private custom post type.

When WordPress boots, all of these containers are loaded simultaneously through a minimal amount of database queries, which makes the default storage type optimal for small to mid-sized websites.

JSON Synchronization

If you create a folder named uf-json in your theme, the JSON Synchronization feature will automatically store all of your containers and fields in JSON files within that folder. This allows for:

  1. Faster loading times, because containers will be loaded from the local storage, rather than querying the database.
  2. The possibility to put the JSON files under version control (like GIT and SVN), in order to allow multiple developers to work on the same files without having to migrate the database constantly.

Please read the JSON Synchronization article in order to understand how the synchronization works.

Importing and Exporting

import-export-screen

The import/export screen allows you to export your containers and import them back. Both PHP and JSON are supported as export formats. Read the Import and Export article to read how and why this works.

Disabling the interface

As described in Using the PHP API and throughout the whole documentation, everything you can do with the administration interface, you can also do directly with PHP. If you prefer coding your fields, you will not need to use the administration interface at all and you can disable it.

Additionally, if you are using the JSON Synchronization feature, you might want to only enable the interface in your development environment, but not to show it in production.

In both of those cases you can define the ULTIMATE_FIELDS_DISABLE_UI constant.

<?php
define( 'ULTIMATE_FIELDS_DISABLE_UI', true );

Adding this constant to your code will disable the Ultimate Fields section in the backend. However, if you have any containers stored in your local JSON folder, they will still be loaded. This makes the UI-less interface also suitable for situations where you have already created your fields through the administration interface, but don't want to let your users edit them.

Clone this wiki locally