The Types plugin allows you to create custom post types and fields. This document explains how to then display these custom types and fields using PHP. To avoid PHP coding, you can use the Toolset suite of plugins to build entire sites without programming.

In WordPress, post contents are usually displayed using the loop. The loop simply searches through the database entries relevant to the post that we want to display, and renders all of the related elements such as post title, post body, post fields – anything we specify inside the loop.

In the following, we explain what guides the loop about which entries from the database to load.

By default, WordPress does this itself, based on the page you visit. If you visit a single post, it automatically “tells” the loop to load only the contents of this single post. Moreover, if you are on an archive page, it “tells” the loop to load a list of posts belonging to that archive.

When you want to load specific content on a specific part of your site, you need to “tell” the loop exactly what content to load.

Loading single items

At times, you may want to load a single post or a page and display it somewhere on your site. For example, you may want to display an excerpt of your “About Us” page on your site’s sidebar, or a footer.

Loading custom page in the sidebar
Loading custom page in the sidebar

When loading single items, you do not need to use the loop. It is enough to use the get_post() and get_post_meta() functions, to load the contents of a specific post or a page, directly.

There are three steps to loading and displaying single items:

  1. Load the contents of a specific post, using the get_post() function.
  2. Load the contents of post’s custom fields, using the get_post_meta() function.
  3. Display the contents of the post and its custom fields.

Let us consider your “About Us” page again, and say that, for example, it has an id of “20.” The following code will load its post contents, custom field contents, and display them.

Load single page 
$post_id = 20;	// Define the ID of the page
$queriedPost = get_post($post_id);	// Load contents of the page


$field_slug="wpcf-author";		// Define the slug of the custom field
$field_contents = get_post_meta($queriedPost->ID, $field_slug, true);	// Load the contents of the custom field


echo '<h3>' . $queriedPost->post_title . '</h3>';
echo $queriedPost->post_excerpt;
echo '<p>Author: ' . $field_contents . '</p>';

As mentioned above, the get_post_meta() function is used for loading custom fields. Please note that when using the native WordPress functions, you must use the “wpcf-” prefix for all custom fields created with Types.

This is why, in the example above, for an “Author” custom field created with Types, we defined our $field_slug as wpcf-author.

Loading a list of items

To display a list of posts, you have to use the WordPress loop. There are two main steps to this process:

  1. Load the items from the database using the WP_Query function.
  2. Run the loop and display all necessary posts and custom fields.

The following is an example of a typical WordPress loop structure.

Example of a typical WordPress loop structure 
<?php
   $query = new WP_Query($args);


   if($query->have_posts()) : 
      while($query->have_posts()) : 
         $query->the_post();
?>
         <h1><?php the_title() ?></h1>
         <div class='post-content'><?php the_content() ?></div> 
  <?php 
		$current_post_id = get_the_ID();
		echo get_post_meta($current_post_id , 'wpcf-author', true); ?></h4>
<?php
	wp_reset_postdata();
endwhile;
   endif;
?>

As you can see, we can pass arguments to the WP_Query function to specify exactly which items to load. You can filter posts by post type, taxonomy, date, and many other parameters. You can also use the order and orderby arguments, to specify how to order the list.

Note that, similar to when loading a single item, we used the get_post_meta() function to output the value of a custom field belonging to the “Book.”

List of custom posts loaded in the site's sidebar
List of custom posts loaded in the site’s sidebar

Filtering by post type and taxonomy

There are many parameters to filter your content by, with post type and taxonomy often being the most important ones.

Let us consider an example where you have a custom post type “Books,” which has a taxonomy called “Genres.” The following example loads a list of books, but only those that belong to the “Fiction” genre.

Custom query for loading "Books" belonging to a "Fiction" genre 
$args = array(
	'post_type' => 'book',
	'tax_query' => array(
		array(
			'taxonomy' => 'genres',
			'field'    => 'slug',
			'terms'    => 'fiction',
		),
	),
);
$query = new WP_Query( $args );

Filtering by custom fields

You can also filter your list of contents by custom fields created with Types. Let us consider two classic cases.

Displaying posts that feature a custom field

Let us say that we want to show only posts (“Books”) with the “Author” custom field.

$query = new WP_Query( array( 'meta_key' => 'wpcf-author' ) );

Displaying posts with specific value of a custom field

Now, let us say we want to show only posts where the author is Stephen King.

Display posts with specific values set for a custom field 
$args = array(
	'meta_key'   => 'wpcf-author',
	'meta_value' => 'Stephen King'
);
$query = new WP_Query( $args );

How to use this in your template files

Now that we have seen the basics of loading content, the question is how to use this in the theme template files.

In fact, you can display posts like this in basically any template file, you only need to take a few precautions:

  • Load the contents before or after the main loop in your template file(s).
  • Never use the WP_Query function inside a loop.
  • Use the wp_reset_postdata() function to restore query to the current post in the main query.

What’s next?

This document should provide you with an initial overview of how to load the contents and display them in your custom PHP templates.

Since this is a complex topic, we suggest reading the following official WordPress documentation:

Loading WordPress content from the database and displaying it anywhere in your site affords powerful possibilities. However, non-programmers will likely not find it easy to use. It is also a time-consuming process for most people.

This is exactly where Toolset can help you. Toolset loads any custom content automatically and allows you to filter the data in any possible way without writing any PHP code.