How to Create Custom Fields in WordPress Without Plugin
WordPress administrators frequently look for ways to enhance the depth and versatility of their posts. The WordPress default editor comes with a standard format that includes features like titles and content. We customize content, but not completely, and every time we have to do extra work to format this data.
Sometimes, there is a need to associate specific data or additional information with specific posts. In these circumstances, custom fields can be a powerful tool to expand the standard content structure.
In this article, we will learn how to create custom fields in WordPress without plugin.
What are custom fields in WordPress?
A custom field is employed to add values apart from the title, excerpt, or content to a post or page. This information is stored by WordPress in the form of metadata. For example add metadata about products like product price, product model, etc.
Why Create Custom Fields in WordPress
Website administrators and owners can create more enriched, organized, and personalized content by adding custom fields to their WordPress posts.
Adding custom fields to a post or page on your WordPress site is a way to add metadata. You can add any kind of additional information to your content by adding custom fields.
it saves time and facilitates the presentation of output in a specific format.
How to Create Custom Fields in WordPress Without Plugin
We can create custom fields without a plugin by adding some code to the WordPress theme.
If you are not familiar with the technical aspects of WordPress themes, don’t worry. Just follow the steps. This guide makes it easy to add code for custom fields to WordPress posts without a plugin.
First, we will access the theme file and then we will add code for Custom Fields.
Accessing the Theme Files Editor in WordPress Dashboard.
In WordPress’s dashboard on the left side pan search for appearance, and then click Theme File Editor, See the image below.
Locating the function.php File
Now find the function.php file in the right sidebar under the Theme Files title.
Inserting a WordPress Custom field Code
Now we have to create a link for adding a post with a custom field. So insert the following code in the function.php file.
Creating a Link in the WordPress Dashboard for Post with the Custom Field
/**
*
* Custom Product Register
*
* */
function gsta_post_product_type()
{
register_post_type('product', array(
'rewrite' => array('slug' => 'products'),
'has_archive' => true,
'public' => true,
'show_in_rest' => true, // to use new version of post editior
'labels' => array(
'name' => 'Products List',
'add_new_item' => 'Add New Product',
'edit_item' => 'Edit Product',
'all_items' => 'All Products',
'singular_name' => 'product'
),
//'supports' => array('title','editor','excerpt','custom-fields'),
// 'supports' is used for adding defaullt custom field
// it is also called default metabox
'menu_icon' => 'dashicons-products',
'show_in_menu' => true,
'show_in_nav_menus' => true
));
}
add_action('init', 'gsta_post_product_type');
The above code will display a menu for product posts in the dashboard left pan as the title Products.
Adding a Filter to Customize the post title for the custom field.
/**
*
* Customize Title of post
*
* */
add_filter('enter_title_here', 'my_title_place_holder' , 20 , 2 );
function my_title_place_holder($title , $post){
if( $post->post_type == 'product' ){
$my_title = "Enter Product Name Here";
return $my_title;
}
return $title;
}
Creating Custom Fields for Forms to Capture Data for The Post
/**
*
* Display additional custom field for product to capture data
*
* */
function render_html_form_callback_fun_for_product_meta()
{
global $post;
$post_id = $post->ID;
wp_nonce_field(basename(__FILE__), 'gsta_product_nonce');
$product_price = (!empty(get_post_meta($post_id,'gsta_product_price',true))) ? get_post_meta($post_id,'gsta_product_price',true) : '';
$product_model = (!empty(get_post_meta($post_id,'gsta_product_model',true))) ? get_post_meta($post_id,'gsta_product_model',true) : '';
?>
<form>
<table>
<tr>
<td><label for="productqul">Product Price:</label></td>
<td><input type="name" id="gsta_product_price" name="gsta_product_price"
value="<?php echo $product_price ?>" /></td>
</tr>
<tr>
<td><label for="productModel">Model:</label></td>
<td><input type="name" id="gsta_product_model" name="gsta_product_model"
value="<?php echo $product_model ?>" /></td>
</tr>
</table>
</form>
<?php
}
/* add custom field to post editor*/
function gsta_product_meta_box_callback_func()
{
add_meta_box(
'product-id',// to recognige product
'Product Detail',// name of metabox
'render_html_form_callback_fun_for_product_meta',//callback funtion to render html form
// for capturing metabox data
'product',
'normal',// priority
'default'
);
}
// hook 'add_meta_boxes_{postName}' and 'callback function'
add_action('add_meta_boxes_product', 'gsta_product_meta_box_callback_func');Save Meta Data to Database
Here we will use hook add_action(‘save_post_{$post->post_type}’,’save_post_callback’);
this hook will save custom field as meta data in WordPress.
/**
*
* save meta data
*
* */
// callback function for save meta data
function gsta_save_post_product_meta($post_id, $post)
{
// Verify nonce
if( !isset( $_POST['gsta_product_nonce'] ) || !wp_verify_nonce( $_POST['gsta_product_nonce'], basename(__FILE__) ) ) {
return $post_id;
}
// get the post type object
$post_type = get_post_type_object($post->post_type);
// check if the current user has permission to edit the post
if( !current_user_can($post_type->cap->edit_post, $post_id) ) {
return $post_id;
}
// get the posted data and sanatize it
$product_price = (isset($_POST['gsta_product_price'])) ? sanitize_text_field($_POST['gsta_product_price']) : '';
$product_model = (isset($_POST['gsta_product_model'])) ? sanitize_text_field($_POST['gsta_product_model']) : '';
// update or save to database
update_post_meta($post_id, 'gsta_product_price', $product_price);
update_post_meta($post_id, 'gsta_product_model', $product_model);
}
// here we are using hook add_action('save_post_{$post->post_type}','save_post_callback');
add_action('save_post_product', 'gsta_save_post_product_meta', 10, 2);After inserting the code for the custom field, you will see a new menu Products List for a WordPress custom field in the dashboard left pan.
You can also see Menu options for All Products and Add New Post.
All Products link will display all products list.
To add new product posts with custom files click Add New Post.
Displaying Product Post With Custom Fields
After adding a few ‘products’, we would like them to be displayed on our page.
A list of all products will be displayed on the archive.php page template.
This default page does not show custom fields. So you have to create a custom archive page template.
Full Code to Create Custom Fields in WordPress Without Plugin
Paste this code in your WordPress theme function.php file.
/**
*
* Custom Product Register
*
* */
function gsta_post_product_type()
{
register_post_type('product', array(
'rewrite' => array('slug' => 'products'),
'has_archive' => true,
'public' => true,
'show_in_rest' => true, // to use new version of post editior
'labels' => array(
'name' => 'Products List',
'add_new_item' => 'Add New Product',
'edit_item' => 'Edit Product',
'all_items' => 'All Products',
'singular_name' => 'product'
),
//'supports' => array('title','editor','excerpt','custom-fields'),
// 'supports' is used for adding defaullt custom field
// it is also called default metabox
'menu_icon' => 'dashicons-products',
'show_in_menu' => true,
'show_in_nav_menus' => true
));
}
add_action('init', 'gsta_post_product_type');
/**
*
* Customize Title of post
*
* */
add_filter('enter_title_here', 'my_title_place_holder' , 20 , 2 );
function my_title_place_holder($title , $post){
if( $post->post_type == 'product' ){
$my_title = "Enter Product Name Here";
return $my_title;
}
return $title;
}
/**
*
* Display additional custom field for product to capture data
*
* */
function render_html_form_callback_fun_for_product_meta()
{
global $post;
$post_id = $post->ID;
wp_nonce_field(basename(__FILE__), 'gsta_product_nonce');
$product_price = (!empty(get_post_meta($post_id,'gsta_product_price',true))) ? get_post_meta($post_id,'gsta_product_price',true) : '';
$product_model = (!empty(get_post_meta($post_id,'gsta_product_model',true))) ? get_post_meta($post_id,'gsta_product_model',true) : '';
?>
<form>
<table>
<tr>
<td><label for="productqul">Product Price:</label></td>
<td><input type="name" id="gsta_product_price" name="gsta_product_price"
value="<?php echo $product_price ?>" /></td>
</tr>
<tr>
<td><label for="productModel">Model:</label></td>
<td><input type="name" id="gsta_product_model" name="gsta_product_model"
value="<?php echo $product_model ?>" /></td>
</tr>
</table>
</form>
<?php
}
/* add custom field to post editor*/
function gsta_product_meta_box_callback_func()
{
add_meta_box(
'product-id',// to recognige product
'Product Detail',// name of metabox
'render_html_form_callback_fun_for_product_meta',//callback funtion to render html form
// for capturing metabox data
'product',
'normal',// priority
'default'
);
}
// hook 'add_meta_boxes_{postName}' and 'callback function'
add_action('add_meta_boxes_product', 'gsta_product_meta_box_callback_func');
/**
*
* save meta data
*
* */
// callback function for save meta data
function gsta_save_post_product_meta($post_id, $post)
{
// Verify nonce
if( !isset( $_POST['gsta_product_nonce'] ) || !wp_verify_nonce( $_POST['gsta_product_nonce'], basename(__FILE__) ) ) {
return $post_id;
}
// get the post type object
$post_type = get_post_type_object($post->post_type);
// check if the current user has permission to edit the post
if( !current_user_can($post_type->cap->edit_post, $post_id) ) {
return $post_id;
}
// get the posted data and sanatize it
$product_price = (isset($_POST['gsta_product_price'])) ? sanitize_text_field($_POST['gsta_product_price']) : '';
$product_model = (isset($_POST['gsta_product_model'])) ? sanitize_text_field($_POST['gsta_product_model']) : '';
// update or save to database
update_post_meta($post_id, 'gsta_product_price', $product_price);
update_post_meta($post_id, 'gsta_product_model', $product_model);
}
// here we are using hook add_action('save_post_{$post->post_type}','save_post_callback');
add_action('save_post_product', 'gsta_save_post_product_meta', 10, 2);Customizing Post title
For code documentation of custom field visit WordPress Developer Resources
Conclusion
Custom Fields adds capabilities to WordPress to generate post fields according to our data, which is a feature that is missing at its core. Occasionally, a custom field can play a crucial role in the workflow.
In this article, we have explained how to create custom fields in WordPress without plugins adding code to the function.php file. We hope this article helps you to create custom fields in WordPress.