Blog

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 :).

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

<?php
/*
Plugin Name: My Super Plugin
Description: Extension 0f Just Custom Fields
Version:     1
Author:      Me
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

// 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.

__contruct()

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

<?php
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() 
{
	//Defaults
	$title = esc_attr( $this->instance['title'] );
	$description = esc_html($this->instance['description']);
	
	?>
	<p>
		<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; ?>" />
	</p>
	<p>
		<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>
	</p>
	<?php
}

/**
 *	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):

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.

shortcode()

/**
 * 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 a new page and select some Nav Menu from the drop down.

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.)

When we open the page we should see similar results:

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!