Hello everyone, In this blog I will guide you "To add custom meta box for add css in every post?"

When we create a Gallery in wordpress normally it comes one by one, in other words all gallery photo are of same height and width. But if you want to make a zigzag gallery like some images are small and few are large so just copy mine code and put into your functions.php file, custom meta box comes into gallery post you can add position as left, right, top, and bottom css.

<?php

/* custom meta box for image location */

add_action( 'admin_init', 'image_metabox' );
function image_metabox()
{
    add_meta_box( 'image_meta_box',
        'Image Style Metabox',
        'image_review_meta_box',
        'gallery', 'normal', 'high'
    );    
}

//Add custom post meta boxes
function image_review_meta_box( $post ) {    
    $image_postion = get_post_meta( $post->ID, 'image_postion', true );
    $left = get_post_meta( $post->ID, 'left', true ); 
    $right = get_post_meta( $post->ID, 'right', true ); 
    $top = get_post_meta( $post->ID, 'top', true ); 
    ?>
    <table style="width:100%;">
        <tr>
            <td style="width: 30%">Image Postion</td>
            <td style="width: 10%"><input type="text" size="30" name="image_postion" value="<?php echo $image_postion; ?>" placeholder="Position" /></td>
            <td style="width: 10%"><input type="text" size="10" name="left" value="<?php echo $left; ?>" placeholder="Left" /></td>
            <td style="width: 10%"><input type="text" size="10" name="right" value="<?php echo $right; ?>" placeholder="Right" /></td>
            <td style="width: 10%"><input type="text" size="10" name="top" value="<?php echo $top; ?>" placeholder="Top" /></td>
        </tr>
    </table>
    <?php
}

// Save custom post meta values
add_action( 'save_post', 'image_metabox_fields', 10, 2 );
function image_metabox_fields( $video_metabox_id )
{
    if ( isset( $_POST['image_postion'] ) )    {
        update_post_meta( $video_metabox_id, 'image_postion', $_POST['image_postion'] );
    }
    if ( isset( $_POST['left'] ) ) {
        update_post_meta( $video_metabox_id, 'left', $_POST['left'] );
    }
    if ( isset( $_POST['right'] ) )    {
        update_post_meta( $video_metabox_id, 'right', $_POST['right'] );
    }
    if ( isset( $_POST['top'] ) )  {
        update_post_meta( $video_metabox_id, 'top', $_POST['top'] );
    }
}

?>

To fetch metabox value and add into in-line CSS. Put the below code into your loop

$postion  =  get_post_meta( $post->ID, 'image_postion', true);
$left     =  get_post_meta( $post->ID, 'left', true); 
$right    =  get_post_meta( $post->ID, 'right', true);
$top      =  get_post_meta( $post->ID, 'top', true);

Put the below code where you want to add the metabox value

style="position:<?php echo $postion;?>;top:<?php echo $top;?>;left:<?php echo $left;?>;right:<?php echo $right;?>;"