Just Custom Fields

Creating components: Page additional menu

WordPress is the most usage cms. A lot of task has already been done. Sometimes you need additional menu printed on several pages of your site (for example section menu).

I’m going to show you easy-to-use way work with custom component based on the Just Custom Fields plugin. I will share with you simple process to create it.

Let’s go!

We are going to work with WordPress v 4.6.1, beforehand installed on Unix-based server. First we are going to unzip and upload Custom Fields (Version 3.0+)  to WordPress plugins directory. Don’t forget  activate it within your WordPress Dashboard :).

activate_jcf-640x252 Creating components: Page additional menu

To create new component we will need to do several easy steps:

  • Create your own plugin and include JCF files there
  • Create Component Class
  • Register Component Class

Create custom plugin.

If you never created your own plugins, please read WordPress documentation about How to create a plugin.  Once you find out where you need to place your code create a new file wp-content/plugins/jcf-components/jcf-components.php.

In this file we set plugin header comments and include JCF and new component extension file

Plugin Name: My Super Plugin
Description: Extension 0f Just Custom Fields
Version:     1
Author:      Me
License:     GPL2
License URI:

// including main JCF file
require_once WP_PLUGIN_DIR . '/just-custom-fields/just-custom-fields.php';

// including our new component
require_once WP_PLUGIN_DIR . '/jcf-components/JustField_Menu.php';

Create Custom Component class.

We will use separate file for each new component to keep code clean. In our example we’re going to create control to select WP Nav menu. So we call our file JustField_menu.php.

To create a component you need to write your own class and extend it from main \jcf\core\JustField class. It does all the magic itself, all you need is to make few easy methods inside. Very similar to WordPress Widgets API:

  • __construct() – this method registers field idBase and title.
  • field() – this method is called on post edit screen and creates HTML form control for your field
  • save() – this method processes data passed from the post edit screen and preprocesses them before saving to the post meta table
  • form() – this method generates field settings edit form (Shown on field create or update)
  • update() – this method preprocesses data passed from the fields settings form. They will be stored as the field settings.
  • shortcode() – this method process output of shortcode call inside post content or do_shortcode() function

Now let’s check each method one by one.


This method just set idBase property (used to identify the field type) and component name.

class JustField_MyField extends \jcf\core\JustField
	public function __construct()
		$field_ops = array( 'classname' => 'my_field_class' );
		parent::__construct('my_field', __('My Field Name', \JustCustomFields::TEXTDOMAIN), $field_ops);

form() and update()

Next step is to create field settings form, which allows you to create the field of new type.

 *	print settings form for field
public function form() 
	$title = esc_attr( $this->instance['title'] );
	$description = esc_html($this->instance['description']);
		<label for="<?php echo $this->getFieldId('title'); ?>"><?php _e('Title:', \JustCustomFields::TEXTDOMAIN); ?></label> 
		<input class="widefat" 
			id="<?php echo $this->getFieldId('title'); ?>" 
			name="<?php echo $this->getFieldName('title'); ?>" 
			type="text" value="<?php echo $title; ?>" />
		<label for="<?php echo $this->getFieldId('description'); ?>"><?php _e('Description:', \JustCustomFields::TEXTDOMAIN); ?></label> 
		<textarea name="<?php echo $this->getFieldName('description'); ?>" 
			id="<?php echo $this->getFieldId('description'); ?>" 
			cols="20" rows="4" class="widefat"><?php echo $description; ?></textarea>

 *	update instance (settings) for current field
public function update( $new_instance, $old_instance ) 
	$instance = $old_instance;
	$instance['title'] = strip_tags($new_instance['title']);
	$instance['description'] = strip_tags($new_instance['description']);
	return $instance;

If you do all things right – you can see such form when you try to create new component (you still need to register the component, so keep working to the next steps):

save_settings-640x216 Creating components: Page additional menu

field() and save()

As we wrote above, these methods show field on the edit post page and save the data on post save. This is the code example:

 *	draw field on post edit form
 *	you can use $this->instance, $this->entry
public function field() 

	$menus = get_terms('nav_menu');
	echo $this->fieldOptions['before_widget'];
	echo $this->fieldOptions['before_title'] . $this->instance['title'] . $this->fieldOptions['after_title'];
	echo '<div class="select-field">';
	echo '<select name="'.$this->getFieldName('val').'" id="'.$this->getFieldId('val').'" style="width: 47%;">';
		echo '<option value="" >None</option>';
		foreach( $menus as $menu ) {
			echo '<option value="'.esc_attr($menu->name).'" '.selected($menu->name, esc_attr($this->entry), false).'>'.esc_html(ucfirst($menu->name)).'</option>' . "\n";
	echo '</select>' . "\n";
	echo '</div>';
	if( !empty($this->instance['description']) )
		echo '<p class="description">' . $this->instance['description'] . '</p>';
	echo $this->fieldOptions['after_widget'];

 *	save field on post edit form
public function save( $values )
	$values = $values['val'];
	return $values;

This code shows such box on the edit post page and can remember your choice on post save.

admin_get_menu-640x141 Creating components: Page additional menu


 * print field values inside the shortcode
 * @params array $args	shortcode args
public function shortcodeValue( $args )
	$value = $this->entry;
	return $args['before_value'] . wp_nav_menu( array('menu' => $value )) . $args['after_value'];

Register components

Now let’s register the component. To do this JCF plugin has special hook. So at the end of the JustField_Menu.php file (after class end bracket) we just add jcf_register_fields action and call special method to register our class.

add_action('jcf_register_fields', 'register_justfield_menu');
function register_justfield_menu() {
	$jcf = JustCustomFields::run();
	$jcf->registerField( 'JustField_Menu' );

Our component is ready to use, let’s try it out.

Use new component.

On Just Custom Fields settings page create field with type menu.

create_field_menu-640x276 Creating components: Page additional menu

Create a new page and select some Nav Menu from the drop down.

select_menu_in_admin_page-640x357 Creating components: Page additional menu

Add shortcode call at the beginning of post content. (Press on “Question” icon near the field, copy the shortcode and paste into the page content.)

Screenshot_use-640x397 Creating components: Page additional menu

When we open the page we should see similar results:

Screenshot-640x280 Creating components: Page additional menu

In this example, we discussed how to create a custom component to print WP Nav Menu with Just Custom Fields plugin. You can create your desired fields using the same principles.
Good luck!