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 ?
- Create space where we want to have our extra fields
- Create input and text area.
- Save it into database.
- Retrieve the data from custom fields into the theme or frontage.
Step 1 – Create Space where we want to have our extra fields.
|
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.
|
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.
|
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.
Leave a Reply