By default there are some basic input fields and options for your wordpress posts when you want to publish a post, such as title and the post text itself, categories and the rest. These basic fields is only useful for making simple blog by adding a title and content for a post, that’s all. But, what if you want to make more advanced website? You need more imput fields and you want to show the saved values of them when a user see your blog post.
For example, let’s say we are making a website about a list of registered local companies in a our city. If we are a newbie website webmaster, we can simply add company name as title of the blog post, and put everything from company information, address, etc on the content field. That will do but it will cause problem to you someday, as your posts won’t be look professional, unorganised and hard to edit them correctly.
To do this professionally, you will need custom fields of your blog post publishing inputs.
To be more specific, here are our fields should be:
- Title
- Description
- Address
- Phone Number
Then we can fill those fields to submit a post. Then if we go back editing the published post, we can update each field info with the new values.
In the other hands, our website visitors should see the blog post that is showing all the information saved in our database, from title, description, address to phone number.
To achieve this thing, we need to make our own plugin that programmatically adds two additional meta boxes, one for Address and one for Phone Number. For title, we will be using default blog post title field, and the description will be the existing blog post content textarea of WordPress.
So, in other words, this blog post is about how to make your own plugin to add custom meta boxes for your blog post editor, and how to display the values of that custom fields to your website by tweaking your WordPress theme.
Let’s start by making the plugin
How to make a plugin to add custom input fields in your WordPress post publishing page? Follow these steps:
1. Prepare your plugin file including basic plugin information header texts
We are going to name this plugin: “WP Companies List”. So the header text of our plugin can be like this:
/*
* Plugin Name: WP Companies List
* Description: A plugin for listing companies.
* Version: 1.0.0
* Author: Habibie
* Author URI: https://webappdev.my.id/
* License: GPL2
* Requires at least: 2.9
* Requires PHP: 5.2
* Text Domain: wp-companieslist
* Domain Path: /languages
*/Make a plugin file wp-companies-list.php and have that code in it.
If you are not sure about what is it and did not try to make your own plugin yet, please take a look on how to make your very first simple WordPress plugin in this tutorial.
2. Registering custom meta box to the post editor page inside WordPress dashboard
We are going to make a meta box with two text input fields in it. So inside our plugin file, add this code:
//Adding Custom Meta Box
function wp_companieslist_custom_meta_box() {
$screens = [ 'post' ];
foreach ( $screens as $screen ) {
add_meta_box(
'wp_companieslist_companymetabox', // Unique ID
'More Information', // Title
'wp_companieslist_metaboxcontent', // Content callback, must be of type callable
$screen // Post type
);
}
}
add_action( 'add_meta_boxes', 'wp_companieslist_custom_meta_box' );3. Building the form
Meta box is just like a block of placeholder that you need to fill it with your code, in this case an HTML form code such as input fields, text areas and so on. So wp_companieslist_metaboxcontent is a content callback that we need to create it, then it can be displayed inside meta box.
Here is the function that will be called by above metabox, it will show two input fields for Address and Phone Number:
//Meta Box Form
function wp_companieslist_metaboxcontent( $post ) {
$wp_companieslist_postmeta_address = get_post_meta( $post->ID, 'wp_companieslist_postmeta_address', true );
$wp_companieslist_postmeta_phonenumber = get_post_meta( $post->ID, 'wp_companieslist_postmeta_phonenumber ', true );
?>
<div>
<label>Company Address</label>
<input name="wp_companieslist_postmeta_address" placeholder="Company Address" value="<?php echo $wp_companieslist_postmeta_address ?>">
</div>
<div>
<label>Phone Number</label>
<input name="wp_companieslist_postmeta_phonenumber" placeholder="Phone Number" value="<?php echo $wp_companieslist_postmeta_phonenumber ?>">
</div>
<?php
}4. The we need a way to save our custom field information on database along the current post content and title
This last step for making this plugin is to add a capability to our plugin to save entered custom input fields to WordPress database. So we need to add this function to our plugin:
//Saving Meta Box Values
function wp_companieslist_save_customfields( $post_id ) {
if ( array_key_exists( 'wp_companieslist_postmeta_address', $_POST ) ) {
update_post_meta(
$post_id,
'wp_companieslist_postmeta_address',
$_POST['wp_companieslist_postmeta_address']
);
}
if ( array_key_exists( 'wp_companieslist_postmeta_phonenumber', $_POST ) ) {
update_post_meta(
$post_id,
'wp_companieslist_postmeta_phonenumber',
$_POST['wp_companieslist_postmeta_phonenumber']
);
}
}
add_action( 'save_post', 'wp_companieslist_save_customfields' );And how to display it to our visitors? Let’s modify the theme to show custom fields information
Plugin making is done. Now we need another last thing, it is needed so we can show the saved values of custom fields alongside the original post contents to our users.
To achieve this matter, we need to tweak our current theme.
Find your single post theme file, usually it’s named single.php then paste this code inside the loop:
echo get_post_meta( $post->ID, 'wp_companieslist_postmeta_address', true );That one is php code to retrieve the current company address. And this one below to retrieve the phone number:
echo get_post_meta( $post->ID, 'wp_companieslist_postmeta_phonenumber', true );If this tutorial confused you much, let me know, maybe I can help.