Tag Archives: metabox

Create and display custom post type with Texonomy, Metabox and Tag

function.php


/***** Adding custom post type - Portfolios *****/
function portfolios_custom_init() {
$labels = array(
'name' => __('Portfolios','themename'),
'singular_name' => __('portfolios','themename'),
'add_new' => __('Add New','themename'),
'add_new_item' => __('Add New Portfolio','themename'),
'edit_item' => __('Edit Portfolio','themename'),
'new_item' => __('New Portfolio','themename'),
'all_items' => __('All Portfolios','themename'),
'view_item' => __('View Portfolios','themename'),
'search_items' => __('Search Portfolio','themename'),
'not_found' => __('No Portfolios found','themename'),
'not_found_in_trash' => __('No Portfolios found in Trash','themename'),
'parent_item_colon' => '',
'menu_name' => __('Portfolios','themename')
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'portfolios' ),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array( 'title', 'editor','thumbnail')

);
register_post_type( 'portfolios', $args );
register_taxonomy("portfolio-categories",
array("portfolios"),
array("hierarchical" => true,
'show_admin_column'   => true,
"label" => "Portfolio Categories",
"singular_label" => "Portfolio Categories",
"rewrite" => array( 'slug' => 'portfolio_category' ,

)));

register_taxonomy("portfolio-tag",
array("portfolios"),
array("hierarchical" => false,
'show_admin_column'   => true,
"label" => "Portfolio Tag",
"singular_label" => "Portfolio tag",
"rewrite" => array( 'slug' => 'portfolio_tag' ,

)));

}
add_action( 'init', 'portfolios_custom_init' );

/*****  Custom Meta Box - portfolios *****/

add_action( 'add_meta_boxes', 'meta_box_portfolio' );
function meta_box_portfolio()
{
add_meta_box( 'meta_box_portfolio_id', 'Enter Portfolio info', 'portfolio_website_info', 'portfolios', 'normal', 'high' );
}
function portfolio_website_info( $post )
{
$values = get_post_custom( $post->ID );
$portfolio_url = isset( $values['portfolio_url'] ) ? esc_attr( $values['portfolio_url'][0] ) : '';
$portfolio_text = isset( $values['portfolio_text'] ) ? esc_attr( $values['portfolio_text'][0] ) : '';
$portfolio_image = isset( $values['portfolio_image'] ) ? esc_attr( $values['portfolio_image'][0] ) : '';

wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>
<p>Portfolio URL</p>
<input type="text" name="portfolio_url" value="<?php echo esc_url( $portfolio_url ); ?>" class="widefat" placeholder="Portfolio Url" />
<p>Portfolio Text</p>
<input type="text" name="portfolio_text" value="<?php echo esc_attr( $portfolio_text ); ?>" class="widefat" placeholder="Portfolio Text" />
<p>Portfolio Image</p>
<input id=""  type="text" class=" mytheme_media_url upload" name="portfolio_image" value="<?php echo esc_attr( $portfolio_image ); ?>" placeholder="No file chosen"  />
<?php if(!empty($instance['image'])) { ?><img src="<?php echo $instance['image']; ?>"  /><?php } ?>
<input id="mytheme_image_uploader"  class="button mytheme_media_upload" type="button" value="Upload" />

<?php
}
add_action( 'save_post', 'portfolio_meta_box_save' );
function portfolio_meta_box_save( $post_id )
{
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;
if( isset( $_POST['portfolio_url'] ) ) update_post_meta( $post_id, 'portfolio_url', esc_url( $_POST['portfolio_url'] ) );
if( isset( $_POST['portfolio_text'] ) ) update_post_meta( $post_id, 'portfolio_text', esc_attr( $_POST['portfolio_text'] ) );
if( isset( $_POST['portfolio_image'] ) ) update_post_meta( $post_id, 'portfolio_image', esc_attr( $_POST['portfolio_image'] ) );
}
/*** end ***/

Enque media-uploader-post.js.js file for upload image by metabox.


wp_enqueue_script('media-uploader', get_template_directory_uri() . '/js/media-uploader-post.js', array('jquery'));

Display in page template


<div class="row">
<?php
$legal_portfolio_args = array(
'paged' => $paged,
'orderby' => 'post_date',
'order' => 'ASC',
'post_type' => 'portfolios',
'post_status' => 'publish'
);
$legal_portfolio = new WP_Query( $legal_portfolio_args );
while ( $legal_portfolio->have_posts() ) { $legal_portfolio->the_post();
?>
<div class="col-md-6 col-sm-6 attorneys">
<div class="our-section-box">
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>" target="_blank">
<div class="col-md-12 no-padding our-box-left">
<?php the_post_thumbnail( 'legal-ourteam-thumbnail-image', array( 'alt' => get_the_title(), 'class' => 'img-responsive') ); ?>
</div>
</a>
<?php } ?>
<div class="col-md-12 our-box-right">
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
<?php
echo 'URL: '.  get_post_meta( get_the_ID(), 'portfolio_url', true );
echo '<br>text: '. get_post_meta( get_the_ID(), 'portfolio_text', true );
echo '<br>Image: '. get_post_meta( get_the_ID(), 'portfolio_image', true );
echo '<br>Category: '; foreach((get_the_terms($post->ID, 'portfolio-categories')) as $term) { echo $term->name. ' ,'  ; }
echo '<br>tag: '; foreach((get_the_terms($post->ID, 'portfolio-tag')) as $term) { echo $term->name. ' ,'  ; }
?>
</div>
</div>
</div>
<?php } ?>
</div>

media-uploader-post.js.js


jQuery(document).ready( function(){
function media_upload( button_class) {
var _custom_media = true,
_orig_send_attachment = wp.media.editor.send.attachment;
jQuery('body').on('click',button_class, function(e) {
var button_id ='#'+jQuery(this).attr('id');
/* console.log(button_id); */
var self = jQuery(button_id);
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = jQuery(button_id);
var id = button.attr('id').replace('_button', '');
_custom_media = true;
wp.media.editor.send.attachment = function(props, attachment){
if ( _custom_media  ) {
jQuery('.mytheme_media_url').val(attachment.url);
} else {
return _orig_send_attachment.apply( button_id, [props, attachment] );
}
}
wp.media.editor.open(button);
return false;
});
}
media_upload( '.mytheme_media_upload');
});

Create Meta box and display on single.php

functions.php


/***** Adding custom metabox on post type  *****/

add_action("add_meta_boxes", "listing_meta_box");
function listing_meta_box(){
add_meta_box('contact_info',__( 'Practice Information', 'realestate' ), 'contact_info', 'practice-areas', 'normal', 'low');
}

function contact_info() {
global $post;
$detail1 = get_post_meta($post->ID,'detail1',true)?get_post_meta($post->ID,'detail1',true):'';
$detail2 = get_post_meta($post->ID,'detail2',true)?get_post_meta($post->ID,'detail2',true):'';
$detail3 = get_post_meta($post->ID,'detail3',true)?get_post_meta($post->ID,'detail3',true):'';
$detail4= get_post_meta($post->ID,'detail4',true)?get_post_meta($post->ID,'detail4',true):'';
$detail5= get_post_meta($post->ID,'detail5',true)?get_post_meta($post->ID,'detail5',true):'';
?>

<table class="form-table">
<tr>
<th><label for="name">
<?php _e('Detail 1','realestate'); ?>
</label></th>
<td><input type="text" name="detail1" value="<?php echo $detail1; ?>" class="listing_input" /></td>
</tr>

<tr>
<th><label for="email">
<?php _e('Detail 2','realestate'); ?>
</label></th>
<td><input type="text" name="detail2" value="<?php echo $detail2; ?>" class="listing_input" /></td>
</tr>
<tr>
<th><label for="phone">
<?php _e('Detail 3','realestate'); ?>
</label></th>
<td><input type="text" name="detail3" value="<?php echo $detail3; ?>" class="listing_input" /></td>
</tr>
<tr>
<th><label for="mobile">
<?php _e('Detail 4','realestate'); ?>
</label></th>
<td><input type="text" name="detail4" value="<?php echo $detail4; ?>" class="listing_input" /></td>
</tr>
<tr>
<th><label for="fax">
<?php _e('Detail 5','realestate'); ?>
</label></th>
<td><input type="text" name="detail5" value="<?php echo $detail5; ?>" class="listing_input" /></td>
</tr>

</table>
<?php
}
add_action('save_post', 'realestate_property_save_details');
function realestate_property_save_details(){
global $post;
if(!empty($_POST))
{
//contact info
update_post_meta($post->ID, "detail1", $_POST["detail1"]);
update_post_meta($post->ID, "detail2", $_POST['detail2']);
update_post_meta($post->ID, "detail3", $_POST["detail3"]);
update_post_meta($post->ID, "detail4", $_POST["detail4"]);
update_post_meta($post->ID, "detail5", $_POST["detail5"]);
}
}

Display single.php


if ( is_singular('practice-areas') ) {
$key_1_value = get_post_meta( get_the_ID(), 'detail1', true );
$key_2_value = get_post_meta( get_the_ID(), 'detail2', true );
$key_3_value = get_post_meta( get_the_ID(), 'detail3', true );
$key_4_value = get_post_meta( get_the_ID(), 'detail4', true );
$key_5_value = get_post_meta( get_the_ID(), 'detail5', true );
}

Create and Display Metabox

functions.php


add_action( 'add_meta_boxes', 'practice_metabox' );
function practice_metabox(){
add_meta_box( 'practice_info', 'Practice Information', 'practice_detail_func', 'practice-areas', 'normal', 'high' ); //You can also use normal to side
}

function practice_detail_func( $post ){
$values = get_post_custom( $post->ID );
$detail1 = isset( $values['detail1'] ) ? esc_attr( $values['detail1'][0] ) : '';
$detail2 = isset( $values['detail2'] ) ? esc_attr( $values['detail2'][0] ) : '';
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>
Detail 1 :-
<input type="text" name="detail1" value="<?php echo esc_attr( $detail1 ); ?>" placeholder="" class="box-size" />
Detail 2 :-
<input type="text" name="detail2" value="<?php echo esc_attr( $detail2 ); ?>" placeholder="" class="box-size" />
<?php
}

add_action( 'save_post', 'practice_meta_box_save' );
function practice_meta_box_save( $post_id )
{
if( isset( $_POST['detail1'] ) ) update_post_meta( $post_id, 'detail1', esc_attr( $_POST['detail1'] ) );
if( isset( $_POST['detail2'] ) ) update_post_meta( $post_id, 'detail2', esc_attr( $_POST['detail2'] ) );
}

display


$args_gallery = array('post_type' => 'imagegallery', 'posts_per_page' => -1);
$loop_gallery = new WP_Query($args_gallery);

while ($loop_gallery->have_posts()) : $loop_gallery->the_post();
$img_url = get_post_meta(get_the_ID(),'img_url',true);
echo '<li> <a target="_blank" href="'.$img_url.'">'. get_the_post_thumbnail().' </a> </li>';
endwhile;

%d bloggers like this: