How to customize the Categories on the Post(post.php)

This will customize way the Categories select to restrict on the Add New Post and Edit Post.

 

 

Over limit Categories alert

Over limit Categories alert

 

 

 

 

Step1 Remove the Categories Metabox of Core.

 

Please add code to the functions.php of your theme.

add_action( 'load-post.php' , 'custom_load_post' );
add_action( 'load-post-new.php' , 'custom_load_post' );

function custom_load_post() {

	remove_meta_box( 'categorydiv' , 'post' , 'side' );

}

 

It looks like this.

 

Remove Categories metabox of Core

Remove Categories metabox of Core

 

 

 

Step2 Add the new custom categories metabox.

 

Please add code to custom_load_post function.

add_meta_box( 'custom_category_div' , __( 'Custom Categories' ) , 'custom_category_metabox' , 'post' , 'side' );

 

And please add code to functions.php.

function custom_category_metabox( $post ) {
	
	?>
	<div id="custom-category" class="categorydiv">

		<div id="custom-category-all">

			<input type="hidden" name="post_category[]" value="0" />

			<ul id="custom-category-checklist" data-wp-lists="list:category" class="categorychecklist form-no-clear">
				<?php wp_terms_checklist( $post->ID , array( 'taxonomy' => 'category' ) ); ?>
			</ul>

		</div>

	</div>

	<?php
	
}

 

It looks like this.

 

Add Custom Categories metabox

Add Custom Categories metabox

 

 

 

 

If you want to be only one select

 

Please change the code to custom_category_metabox function.

	<div id="custom-category" class="categorydiv">

		<div id="custom-category-all">

			<input type="hidden" name="post_category[]" value="0" />

			<?php $args = array( 'type' => $post->post_type , 'hide_empty' => false , 'parent' => 0 ); ?>
			<?php $categories = get_categories( $args ); ?>

			<?php if( !empty( $categories ) ) : ?>

				<ul id="custom-category-checklist" data-wp-lists="list:category" class="categorychecklist form-no-clear">

					<?php $selected_cats = wp_get_post_categories( $post->ID , array( 'fields' => 'ids' ) ); ?>

					<?php foreach( $categories as $category ) : ?>
					
						<li id="category-<?php echo $category->term_id; ?>">
							<label class="selectit">
								<input value="<?php echo $category->term_id; ?>" type="radio" name="post_category[]" id="in-category-<?php echo $category->term_id; ?>" <?php checked( in_array( $category->term_id , $selected_cats ) , true ); ?> />
								<?php echo 	esc_html( apply_filters( 'the_category' , $category->name ) ); ?>
							</label>

							<?php $child_args = array( 'type' => $post->post_type , 'hide_empty' => false , 'parent' => $category->term_id ); ?>
							<?php $child_categories = get_categories( $child_args ); ?>
							
							<?php if( !empty( $child_categories ) ) : ?>
							
								<ul class="children">
								
									<?php foreach( $child_categories as $child_category ) : ?>
									
										<li id="category-<?php echo $child_category->term_id; ?>">
											<label class="selectit">
												<input value="<?php echo $child_category->term_id; ?>" type="radio" name="post_category[]" id="in-category-<?php echo $child_category->term_id; ?>" <?php checked( in_array( $child_category->term_id , $selected_cats ) , true ); ?> />
												<?php echo 	esc_html( apply_filters( 'the_category' , $child_category->name ) ); ?>
											</label>
										</li>
									
									<?php endforeach; ?>
									
								</ul>
							
							<?php endif; ?>

						</li>
					
					<?php endforeach; ?>

				</ul>

			<?php endif; ?>

		</div>

	</div>

 

It looks like this.

 

Choose to Categories of radio button

Choose to Categories of radio button

 

Or if you want to select box.

	<div id="custom-category" class="categorydiv">

		<div id="custom-category-all">

			<input type="hidden" name="post_category[]" value="0" />

			<?php $args = array( 'type' => $post->post_type , 'hide_empty' => false , 'parent' => 0 ); ?>
			<?php $categories = get_categories( $args ); ?>

			<?php if( !empty( $categories ) ) : ?>
			
				<?php $selected_cats = wp_get_post_categories( $post->ID , array( 'fields' => 'ids' ) ); ?>
			
				<select name="post_category[]">
				
					<?php foreach( $categories as $category ) : ?>
					
						<option value="<?php echo $category->term_id; ?>" <?php selected( in_array( $category->term_id , $selected_cats ) , true ); ?>><?php echo 	esc_html( apply_filters( 'the_category' , $category->name ) ); ?></option>

						<?php $child_args = array( 'type' => $post->post_type , 'hide_empty' => false , 'parent' => $category->term_id ); ?>
						<?php $child_categories = get_categories( $child_args ); ?>
						
						<?php if( !empty( $child_categories ) ) : ?>
						
							<?php foreach( $child_categories as $child_category ) : ?>
							
								<option value="<?php echo $child_category->term_id; ?>" <?php selected( in_array( $child_category->term_id , $selected_cats ) , true ); ?>>&#8212; <?php echo 	esc_html( apply_filters( 'the_category' , $child_category->name ) ); ?></option>

							<?php endforeach; ?>
						
						<?php endif; ?>
					
					<?php endforeach; ?>
				
				</select>

			<?php endif; ?>

		</div>

	</div>

 

It looks like this.

 

Choose to Categories of select box

Choose to Categories of select box

 

 

 

If you want to be only select the child categories

 

This will change the value of the parent of get_categories().

e.g.)

<?php $args = array( 'type' => $post->post_type , 'hide_empty' => false , 'parent' => 3 ); ?>
<?php $categories = get_categories( $args ); ?>

 

The code looks like this.

 

	<div id="custom-category" class="categorydiv">

		<div id="custom-category-all">

			<input type="hidden" name="post_category[]" value="0" />

			<?php $args = array( 'type' => $post->post_type , 'hide_empty' => false , 'parent' => 12 ); ?>
			<?php $categories = get_categories( $args ); ?>

			<?php if( !empty( $categories ) ) : ?>

				<ul id="custom-category-checklist" data-wp-lists="list:category" class="categorychecklist form-no-clear">

					<?php $selected_cats = wp_get_post_categories( $post->ID , array( 'fields' => 'ids' ) ); ?>

					<?php foreach( $categories as $category ) : ?>
					
						<li id="category-<?php echo $category->term_id; ?>">
							<label class="selectit">
								<input value="<?php echo $category->term_id; ?>" type="checkbox" name="post_category[]" id="in-category-<?php echo $category->term_id; ?>" <?php checked( in_array( $category->term_id , $selected_cats ) , true ); ?> />
								<?php echo 	esc_html( apply_filters( 'the_category' , $category->name ) ); ?>
							</label>

							<?php $child_args = array( 'type' => $post->post_type , 'hide_empty' => false , 'parent' => $category->term_id ); ?>
							<?php $child_categories = get_categories( $child_args ); ?>
							
							<?php if( !empty( $child_categories ) ) : ?>
							
								<ul class="children">
								
									<?php foreach( $child_categories as $child_category ) : ?>
									
										<li id="category-<?php echo $child_category->term_id; ?>">
											<label class="selectit">
												<input value="<?php echo $child_category->term_id; ?>" type="checkbox" name="post_category[]" id="in-category-<?php echo $child_category->term_id; ?>" <?php checked( in_array( $child_category->term_id , $selected_cats ) , true ); ?> />
												<?php echo 	esc_html( apply_filters( 'the_category' , $child_category->name ) ); ?>
											</label>
										</li>
									
									<?php endforeach; ?>
									
								</ul>
							
							<?php endif; ?>

						</li>
					
					<?php endforeach; ?>

				</ul>

			<?php endif; ?>

		</div>

	</div>

 

Show only child Categories

Show only child Categories

 

 

 

If you want to limit the category check number

 

Categories check number validation to Javascript.

Please add code to custom_load_edit function.

add_action( 'admin_print_scripts' , 'custom_admin_print_scripts' );

 

And please add code to functions.php.

function custom_admin_print_scripts() {
	
	wp_enqueue_script( 'custom-categories' , get_stylesheet_directory_uri() . '/custom-categories.js' , array( 'jquery' ) , '1.0' );
	
	$translations = array( 'invalid_max' => __( 'Choose 3 or less categories.' ) );
	wp_localize_script( 'custom-categories' , 'custom_categories' , $translations );
	
}

 

And please add code to create the  custom-categories.js of your theme directory.

jQuery(document).ready(function($) {

	var max_category_count = 3;
	var $custom_categories = $('#custom-category-all');
	
	$custom_categories.find('input[type=checkbox]').on('click', function() {
		
		var check_count = 0;
		
		$custom_categories.find('input[type=checkbox]').each( function( index , el ) {
			
			if( $(el).prop('checked') ) {
				
				check_count++;
				
			}
			
		});
		
		if( max_category_count < check_count ) {
			
			$(this).prop('checked', false );
			alert( custom_categories.invalid_max );
			
		}
		
	});
	
});

 

It look like this.

 

Over limit Categories alert

Over limit Categories alert

 

 

This is complete! 🙂

 

Full code is here.

 

PHP

add_action( 'load-post.php' , 'custom_load_post' );
add_action( 'load-post-new.php' , 'custom_load_post' );

function custom_load_post() {

	remove_meta_box( 'categorydiv' , 'post' , 'side' );
	add_meta_box( 'custom_category_div' , __( 'Custom Categories' ) , 'custom_category_metabox' , 'post' , 'side' );
	
	add_action( 'admin_print_scripts' , 'custom_admin_print_scripts' );

}

function custom_category_metabox( $post ) {
	
	?>
	<div id="custom-category" class="categorydiv">

		<div id="custom-category-all">

			<input type="hidden" name="post_category[]" value="0" />

			<ul id="custom-category-checklist" data-wp-lists="list:category" class="categorychecklist form-no-clear">
				<?php wp_terms_checklist( $post->ID , array( 'taxonomy' => 'category' ) ); ?>
			</ul>

		</div>

	</div>

	<?php
	
}

function custom_admin_print_scripts() {
	
	wp_enqueue_script( 'custom-categories' , get_stylesheet_directory_uri() . '/custom-categories.js' , array( 'jquery' ) , '1.0' );
	
	$translations = array( 'invalid_max' => __( 'Choose 3 or less categories.' ) );
	wp_localize_script( 'custom-categories' , 'custom_categories' , $translations );
	
}

 

Javascript

jQuery(document).ready(function($) {

	var max_category_count = 3;
	var $custom_categories = $('#custom-category-all');
	
	$custom_categories.find('input[type=checkbox]').on('click', function() {
		
		var check_count = 0;
		
		$custom_categories.find('input[type=checkbox]').each( function( index , el ) {
			
			if( $(el).prop('checked') ) {
				
				check_count++;
				
			}
			
		});
		
		if( max_category_count < check_count ) {
			
			$(this).prop('checked', false );
			alert( custom_categories.invalid_max );
			
		}
		
	});
	
});

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*