How to Add Custom Fields to WordPress Post

Many times you feel the need for custom fields for a WordPress post/page. You can assign custom fields to a post by creating meta-data. Yes, this is what WordPress calls these custom fields. This way your WordPress posts can be more than just posts.

So, let’s create some custom fields.

We will be adding following custom fields to our posts:

1. Image URL – Url of an image to show before the post content

2. Read also – Link of another post at our blog that we would like visitors to read

We will create a metabox for these two fields.

What is metabox

Metabox is a group of options for a specific functionality. You can see these at individual post, page, plugin and theme pages in admin panel of WordPress. Following is what a typical metabox looks like:

 

 

 

 

 

 

 

Let’s divide this tutorial in three sections:

1. Add Metabox
2. Save Custom Fields
3. Use meta-data to customize post at front-end

Note: You can place following code in functions.php file of your WordPress theme/child theme or create a plugin using this code and install it at your website.

Add Metabox

Following code will call custom_metabox_init function on admin_init hook which will call custom_meta_setup function to add metabox at “edit post” page and save_custom_meta function when you save post, to save the custom fields.

/**
 * Initialize custom meta-data functionality
 */
function custom_metabox_init(){
	// add metabox at post edit page
	add_meta_box('my_custom_meta', 'My Nifty Custom Fields', 'custom_meta_setup', 'post');
	// save meta-data on post save
	add_action('save_post', 'save_custom_meta');
}
add_action('admin_init', 'custom_metabox_init');

Following is the custom_meta_setup function which renders the HTML of the metabox.

/**
 * Show custom metabox options
 */
function custom_meta_setup(){
	global $post;
	$post_type = $post->post_type;
	$custom_meta = get_post_meta($post->ID, '_my_custom_meta', true);
	?>
	<p>
		<label for="custom_image_url">
			<?php _e('Image URL', 'example') ?>
			<input type="text" name="_my_custom_meta[image_url]" id="custom_image_url" value="<?php echo isset( $custom_meta['image_url'] ) ? esc_attr( $custom_meta['image_url'] ) : '' ?>" />
		</label>
		<br/>
		<label for="custom_read_also">
			<?php _e('Read Also', 'example') ?>
			<input type="text" name="_my_custom_meta[read_also]" id="custom_read_also" value="<?php echo isset( $custom_meta['read_also'] ) ? esc_attr( $custom_meta['read_also'] ) : '' ?>" />
		</label>
	</p>
	<?php
	echo '<input type="hidden" name="custom_meta_nonce" value="' . wp_create_nonce(__FILE__) . '" />';
}

Here I am specifying same name with different keys for the two options and saving this option as an associative array in database. You are free to use different names for these options and save these as two different options in database. Following is how our metabox looks like

Save Custom Fields

Following is save_custom_meta function which handles the custom meta-data saved with the post. Comments are describing the code, making it self-explanatory.

/**
 * Save custom meta fields.
 */
function save_custom_meta($post_id){
	// Bail if we're doing an auto save
	if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
	// Return if it's a post revision
	if(false !== wp_is_post_revision($post_id)) return;
    // make sure data came from our meta box
    
    if(!isset($_POST['custom_meta_nonce']) || !wp_verify_nonce( $_POST['custom_meta_nonce'], __FILE__ )){
		return $post_id;
 	}

    // check user permissions
    if(!current_user_can('edit_post', $post_id)){
		return $post_id;
	}

    if(isset($_POST['_my_custom_meta'])){
		$custom_meta = $_POST['_my_custom_meta'];
		update_post_meta($post_id, '_my_custom_meta', $custom_meta);
	}
	
    return $post_id;
}

Use meta-data to customize post at front-end

We have saved the custom fields in database. Now it’s time to make use of this custom meta-data.

/**
 * Customize post content using custom meta-data
 */
function customize_post_content($content){
	if(is_single()){
		global $post;
		$custom_meta = get_post_meta($post->ID, '_my_custom_meta', true);
		if($custom_meta){
			$image_url = isset($custom_meta['image_url']) ? $custom_meta['image_url'] : '';
			$read_also = isset($custom_meta['read_also']) ? $custom_meta['read_also'] : '';
			$content = '<img style="clear:both" src="' . $image_url . '" />' . $content . '<div style="clear:both"><strong>Read Also: </strong><a href="' . $read_also . '">' . $read_also . '</a></div>';
		}
	}

	return $content;
}
add_filter('the_content', 'customize_post_content');

Above code checks if custom meta-data is saved for a particular post, appends image at the saved Image url before post content and appends Read also link after the content as shown in the image below

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I hope you enjoyed the tutorial. Let me know how much. by commenting below 🙂

Advertisements