Adding Custom Meta Boxes in Wordpress

Add below code into wordpress functions.php file

add_action( 'add_meta_boxes', 'custom_header_img' );
function custom_header_img() {
$post_types = get_post_types();
foreach ( $post_types as $post_type ) {
if ($post_type == 'ad_post_type') {$post_type = 'page';}
add_meta_box( 'custom_header_img_url', 'Custom Header Image URL', 'custom_header_img_add', $post_type, 'normal', 'high' );
    }
}


function custom_header_img_add( $post )
{
$values = get_post_custom( $post->ID );
$chi_url = isset( $values['custom_header_img'] ) ? esc_attr( $values['custom_header_img'][0] ) : '';
wp_nonce_field( 'custom_header_img_add_nonce', 'meta_box_nonce_chi' );
?>

<span style="font-size:11px; color:#999; line-height:1.3;">Header Image will only work if "Custom Header Element" chosen.<br/>
Enter image full URL (include http://)</span>
<p><input type="text" name="custom_header_img" id="custom_header_img" value="<?php echo $chi_url; ?>" style="width:100%;" /> </p>

<?php
}


add_action( 'save_post', 'chi_meta_box_save' );
function chi_meta_box_save( $post_id )
{
// Bail if we're doing an auto save
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

// if our nonce isn't there, or we can't verify it, bail
if( !isset( $_POST['meta_box_nonce_chi'] ) || !wp_verify_nonce( $_POST['meta_box_nonce_chi'], 'custom_header_img_add_nonce' ) ) return;

// if our current user can't edit this post, bail
if( !current_user_can( 'edit_post' ) ) return;

// now we can actually save the data
$allowed = array(
'a' => array( // on allow a tags
'href' => array() // and those anchords can only have href attribute
)
);


if( isset( $_POST['custom_header_img'] ) )
update_post_meta( $post_id, 'custom_header_img', esc_attr( $_POST['custom_header_img'] ) );
}

After adding this above code, check .//wp-admin/post-new.php, You can see a custom meta box by Custom Header Image URL named.

To show this on front end, add this code where you want to show
<?php echo get_post_meta($post->ID, 'custom_header_img', true); ?>
or
If you want add style then   <div style="color: red;float:left;"> <?php echo get_post_meta($post->ID, 'custom_header_img', true); ?></div>
or
<img class="custom_header_img" src="<?php echo get_post_meta($post->ID, 'custom_header_img', true); ?>">


You can add more custom meta boxes by only changing the red color portions. Suppose I want to add a custom field for word, So , I only change the all red color  custom_header_img  by custom_header_word

such as:
/*********************************************** CUSTOM meta Box for  word ***************************************************/

add_action( 'add_meta_boxes', 'custom_header_word' );
function custom_header_word() {
$post_types = get_post_types();
foreach ( $post_types as $post_type ) {
if ($post_type == 'ad_post_type') {$post_type = 'page';}
add_meta_box( 'custom_header_word_url', 'Custom Header Image Word', 'custom_header_word_add', $post_type, 'normal', 'high' );
    }
}


function custom_header_word_add( $post )
{
$values = get_post_custom( $post->ID );
$chi_url = isset( $values['custom_header_word'] ) ? esc_attr( $values['custom_header_word'][0] ) : '';
wp_nonce_field( 'custom_header_word_add_nonce', 'meta_box_nonce_chi' );
?>

<span style="font-size:11px; color:#999; line-height:1.3;">Header Image will only work if "Custom Header Element" chosen.<br/>
Enter image full URL (include http://)</span>
<p><input type="text" name="custom_header_word" id="custom_header_word" value="<?php echo $chi_url; ?>" style="width:100%;" /> </p>

<?php
}


add_action( 'save_post', 'chi_meta_boxword_save' );
function chi_meta_boxword_save( $post_id )
{
// Bail if we're doing an auto save
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

// if our nonce isn't there, or we can't verify it, bail
if( !isset( $_POST['meta_box_nonce_chi'] ) || !wp_verify_nonce( $_POST['meta_box_nonce_chi'], 'custom_header_word_add_nonce' ) ) return;

// if our current user can't edit this post, bail
if( !current_user_can( 'edit_post' ) ) return;

// now we can actually save the data
$allowed = array(
'a' => array( // on allow a tags
'href' => array() // and those anchords can only have href attribute
)
);


if( isset( $_POST['custom_header_word'] ) )
update_post_meta( $post_id, 'custom_header_word', esc_attr( $_POST['custom_header_word'] ) );
}