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'] ) );
}


Comments

Popular posts from this blog

Adobe Photoshop CS6 13.1.2 Extended Final Portable Download

Owl carousel slider shortcode in WordPress for Showing Posts or custom Posts

How to display related post by category