CodeIn House

  • Laravel
  • WordPress
  • jQuery
  • Javascript
  • Contact
Home   WordPress   How to Add Custom Meta Box/Field in WordPress Post Admin ?

How to Add Custom Meta Box/Field in WordPress Post Admin ?

January 22, 2022 by SNK

add custom meta field in wordpress post admin

In this short tutorial we will see how can we add custom field in WordPress post admin. Best thing about the WordPress is that, you dont have touch anything in the database in order to create an add new field into your WordPress admin dashboard inside your post or any other custom post types.

WordPress has made very easy in order to create or add new field into the WordPress posts. There are basically two ways to do it.

  • Using Advanced Custom Fields Plugin.
  • WordPress Create Custom field Programmatically.

If you want to use the plugin then go head and use. Its no hard to use it by using a plugin.

If you are programming fancy or do not want to use the plugin then, follow the steps below :-

I always want to create a new file and name it as custom_meta_fields.php and require it in functions.php just to be more cleaner and to separate your logic and features properly.

You can use the codes directly inside the functions.php if you do not want to keep it separately.

Lets get Started

What are we going to do ?

  1. Create space where we want to have our extra fields
  2. Create input and text area.
  3. Save it into database.
  4. Retrieve the data from custom fields into the theme or frontage.

 

Step 1 – Create Space where we want to have our extra fields.

functions.php
PHP
1
2
3
function cin_create_empty_space() {
add_meta_box('empty_box','Extra Fields','empty_box_callback','posts');
}

Note :- Parameters that is taken by add_meta_box() function are :

Id : unique name.

Label : It could be anything.

Post Type : Post / Page / Any Custom Post Type that you have made. by Default i have set it to post.

Step 2 – Create Input and Text area.

add_new_fields
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function empty_box_callback() {
 
wp_nonce_field('save_fields_data','empty_box_nonce');
 
$input_field = get_post_meta($post->ID,'input_field_key',true);
$texarea_field = get_post_meta($post->ID,'textarea_field_key',true);
 
?>
<label for="">Title :  </label>
<input type="text" name="input_field_name" id="input_field_name" value="<?php echo esc_attr( $input_field );?>">
<!-- You can normally add textarea but if youwant to have wordpress like editor then you can use wp_editor function to do it -->
<label for="">Description : </label>
<?php
wp_editor( $texarea_field, 'second_editor', $post->ID, array(
'wpautop'             => true,
'media_buttons'       => false,
'default_editor'      => '',
'drag_drop_upload'    => false,
'textarea_name'       => 'textarea_field_name',
'textarea_rows'       => 5,
'tabindex'            => '',
'tabfocus_elements'   => ':prev,:next',
'editor_css'          => '',
'editor_class'        => '',
'teeny'               => false,
'dfw'                 => false,
'_content_editor_dfw' => false,
'tinymce'             => true,
'quicktags'           => true
) );
 
}

Step 3 – Saving it into database.

Saving into database
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function cih_save_fields_data() {
 
// These are just security measures to make sure that user is actually posting a post not othe users
if( ! isset($_POST['empty_box_nonce'])) {
return;
}
 
if( ! wp_verify_nonce( $_POST['empty_box_nonce'], 'cih_save_fields_data') ) {
return;
}
 
if( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
return;
}
 
if( ! current_user_can('edit_post', $post_id)) {
return;
}
 
if( ! isset($_POST['input_field_name'])) {
return;
}
 
if( ! isset($_POST['textarea_field_name'])) {
return;
}
// END of Security Measures
$input_field_data = $_POST['input_field_name'];
$textarea_field_data = $_POST['textarea_field_name'];
 
update_post_meta($post_id,'input_field_key',$input_field_data);
update_post_meta($post_id,'textarea_field_key',$textarea_field_data);
}
 
add_action('add_meta_boxes','cin_create_empty_space');
add_action('save_post','cih_save_fields_data');

That’s it, If you now check your inside posts. New field called “Extra Fields” is displayed with one title label and text area as an WordPress editor. The data is saved into database upon update.

How to Fetch The Custom Post Fields Value in the Frontend ?

It is very easy to fetch the data that you just saved from your custom fields. Just call the get_post_meta() function. It takes 3 parameters,

ID => Post Id of the page are you in which can be obtained by using get_the_ID()

Key => In out case it would be input_field_key,

Boolean => If single or multiple value to be returned. In our case it would be just true.

Finally,

Calling $input_field_values = <?php echo get_post_meta(get_the_ID,'input_field_key',true); ?> will display the value of input field of the post you are currently viewing.

I got this idea from this page. If you want to check its reference click this link to sample file If you have any problem regarding adding custom fields into WordPress posts admin or custom post type. Feel free to comment below.

SHARE ON
Buffer

Enjoyed this article?

Like us on

WordPress wordpress create custom field programmatically wordpress custom fields tutorial wordpress custom meta box wordpress meta box tutorial

Avatar for SNK

About SNK

Hello Welcome to my Blog. I develop Websites Using Laravel Framwork & WordPress. Get Latest updates on Facebook | Twitter

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Connected !! With Us

TOP POSTS

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

TUTORIALS TILL DATE

  • September 2022 (6)
  • June 2021 (7)
  • October 2020 (5)
  • September 2020 (6)
  • September 2018 (14)
  • August 2018 (3)
  • July 2018 (4)
  • March 2018 (8)
  • February 2018 (5)
  • January 2018 (1)
  • December 2017 (2)
  • August 2017 (8)
  • May 2017 (1)
  • April 2017 (1)
  • March 2017 (4)
  • February 2017 (3)
  • January 2017 (4)

CATEGORIES

  • Angular (2)
  • CSS3 (3)
  • D3 (3)
  • HTML5 (7)
  • JAVA (11)
  • Javascript (20)
  • jQuery (8)
  • Laravel (35)
  • Others (3)
  • PHP (11)
  • Spring (2)
  • WordPress (10)

Top Categories

  • Angular
  • CSS3
  • D3
  • HTML5
  • JAVA
  • Javascript
  • jQuery
  • Laravel
  • Others
  • PHP
  • Spring
  • WordPress

Get in Touch

DMCA.com Protection Status

Recent Articles

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

© 2012-22 CodeIn House.  •  All Rights Reserved.