How to add your own field type

In this blog post I want to demonstrate how you can create your own field types in SNIP so that you can calculate and integrate custom code into any field.

This is a walk-through tutorial. If want to see the full example, please scroll down to the end of the page.

Step 1: Create a custom WordPress Plugin

First I create a new file and save it in the wp-content/plugins/ folder. The content looks like this at this point in time:

<?php
/*
Plugin Name: SNIP Basic Field Type Example
Description: A plugin that adds a new Field Type in SNIP.
Author: Florian Simeth
Version: 0.1.0
Author URI: https://rich-snippets.io
Plugin URI: https://rich-snippets.io/how-to-add-your-own-field-type/
*/

if ( ! defined( 'ABSPATH' ) ) {
	exit;
} // Exit if accessed directly

/**
 *
 * PHP Version check.
 *
 */
if ( version_compare( PHP_VERSION, '7.0', '<' ) ) {
	add_action( 'admin_notices', 'snip_fte_old_php_notice' );

	function snip_fte_old_php_notice() {

		printf(
			'<div class="notice error"><p>%s</p></div>',
			sprintf(
				__( 'Hey mate! Sorry for interrupting you. It seem\'s that you\'re using an old PHP version (your current version is %s). You should upgrade to at least 7.0 or higher in order to use the SNIP Field Type Example plugin. Thank you!', 'snip-fte' ),
				esc_html( PHP_VERSION )
			)
		);
	}

	# sorry. The plugin will not work with an old PHP version.
	return;
}

Step 2: Hook into the select box

To create a new entry in the Field Type select box, we use the wpbuddy/rich_snippets/fields/internal_subselect/values filter. So we add this code to the above code:


add_filter( 'wpbuddy/rich_snippets/fields/internal_subselect/values', 'snip_fte_subselects' );

/**
 * Adds new field to use in Global Snippets in the SNIP plugin.
 *
 * @param array $values
 *
 * @return array
 * @since 0.1.0
 *
 */
function snip_fte_subselects( $values ) {

	$values['http://schema.org/Number'][] = [
		'id'     => 'snip_fte_rating_value',
		'label'  => esc_html_x( 'My Custom rating value', 'subselect field', 'snip-fte' ),
		'method' => 'snip_fte_rating_value_callback',
	];

	$values['http://schema.org/Integer'][] = [
		'id'     => 'snip_fte_rating_count',
		'label'  => esc_html_x( 'My Custom rating count', 'subselect field', 'snip-fte' ),
		'method' => 'snip_fte_rating_count_callback',
	];

	return $values;
}

Let’s take a closer look what we’ve done above:

$values['http://schema.org/Number'][] = [
	'id'     => 'snip_fte_rating_value',
	'label'  => esc_html_x( 'My Custom rating value', 'subselect field', 'snip-fte' ),
	'method' => 'snip_fte_rating_value_callback',
];
  • In the first line we need to choose when this new field type is selectable. We’ve chosen that it should show up when http://schema.org/Number is expected.
  • In line 2 we’ve issued a unique ID.
  • Line 3 is the label that should be displayed in the select box.
  • Line 4 is the PHP callback function that is called when this field is added.

Let’s clarify the whole thing by working with an example. Let us assume that we want to calculate the values for an AggregateRating. Namely the values for the ratingCount and the ratingValue properties.

If we look at what schema.org lists about it, we see that ratingCount needs to be a Integer and ratingValue needs to be a Number:

schema.org lists the expected types of each property.
schema.org lists the expected types of each property.

That is the reason why we’ve added the value for ratingCount to the array of http://schema.org/Integer and the ratingValue to the array of http://schema.org/Number.

Step 3: The actual code

Because we’ve added two new fields we can select them in the Structured Data Generator:

schema.org properties with the newly created field types selected.
schema.org properties with the newly created field types selected.

What’s still missing is the code that it should output. That is what we do now:

/**
 * Returns the value.
 *
 * @param                                     $val
 * @param \wpbuddy\rich_snippets\Rich_Snippet $rich_snippet
 * @param array                               $meta_info
 *
 * @return int|float
 */
function snip_fte_rating_value_callback( $val, \wpbuddy\rich_snippets\Rich_Snippet $rich_snippet, array $meta_info ) {

	/**
	 * Load and/or calculate something here.
	 */
	$value = 5;

	return $value;
}

/**
 * Returns the count.
 *
 * @param                                     $val
 * @param \wpbuddy\rich_snippets\Rich_Snippet $rich_snippet
 * @param array                               $meta_info
 *
 * @return int
 */
function snip_fte_rating_count_callback( $val, \wpbuddy\rich_snippets\Rich_Snippet $rich_snippet, array $meta_info ) {

	/**
	 * Load and/or calculate something here.
	 */
	$count = 100;

	return $count;
}

Of course you need to add your own PHP code into the functions so that it fits your needs.

Full Code

You can find the full code on Github. You can also download it directly as a ZIP file from this source.