Displaying WordPress Custom Fields

Types plugin allows you to easily create custom fields in your WordPress site. Once you’ve created these custom fields, you’re probably wondering how to display them. This tutorial shows just that.

The simplest ways to display custom fields, created by Types, are:

  1. With PHP coding and Types API functions
  2. Without any coding, using Views plugin

If you are fluent in PHP and feel at home around WordPress API, you’ll enjoy using Types PHP API. To display custom fields and build templates without writing any code, you should look at Views.

1) Writing PHP code and using Types API to display custom fields

The easiest way to display custom fields, with just PHP, when you’re using Types plugin, is using Types fields API. A single API function called types_render_field will display all field types, using their correct output formatting.

Here is the function, with the different arguments it takes:

Types render field API basic structure
<?php

echo types_render_field("custom-field-slug-name", array("argument1"=>"value1","argument2"=>"value2","argument2"=>"value2"));

?>

custom-field-slug-name is the name of your custom field slug taken from the Types configuration such as this:

Custom field slug name

In the example above, the field slug is “coursename”. We will use the types_render_field call to display that field in the template.

Types plugin can create different kinds of custom fields. Types stores all of them in the database in the same way, but gives them different meanings. Field types include email, image, date, checkboxes and others. Each of these custom field types supports different arguments, that let you format it as you like. Read Types fields API to learn about the different options for different field types.

Example 1 – displaying formatted custom field values

To display the Trainer email, with the email-field formatting you can use the following code:

<?php

$trainer_email_address = types_render_field("email", array("output"=>"html"));

//Output the trainer email

printf("Trainer Email Address displayed using Types API: %s",$trainer_email_address);
?>

We’ve set the argument “output” to HTML to display the field as a mailto link. Types displays different custom fields with different formatting, based on their kind. See the full details about the email field in the email field documentation.

Note: The above code will automatically display all values of a repeating custom field.

Example 2 – displaying raw custom field values

If you want to display the custom field value as exactly as it is stored in the database (no formatting added by Types), you need to set raw=>true.

This is sometimes needed when you want to display things like image URLs without the <img> tags around them, or link destinations, without the <a> tags.

The following code displays all instances of the “email” field, separated by semicolons.

Setting Raw to TRUE in Types field API
<?php

$trainer_email_address = types_render_field("email", array("raw"=>"true","separator"=>";"));

//Output the trainer email

echo "Trainer Email Address displayed using Types API:".$trainer_email_address;
?>

We’ve added an additional “separator” parameter, with the value semicolon. This will separate the outputted email address by a semicolon. You can use any separator you like.


2) Displaying custom fields without coding using Views

Views plugin lets you display custom fields templates without writing any code.

You’ll be able to include custom fields in single pages or create you own content lists.

Views lets you create page templates right from within the WordPress GUI. You will design templates using regular HTML and CSS and insert fields into them.

Here is how it works:

I. Create Content Templates for your different content types

Inserting custom fields to templates via the WordPress GUI

II. Use Views dialog to insert any standard fields, custom fields or taxonomy

Inserting an image field into a template

III. Design template layouts using only HTML and CSS

Edit templates using HTML and CSS

Read more to learn how to build complete WordPress sites with Views without coding: