How to Change the Default Tag Meta Box to a Category Meta Box
Photo by Mikhail Nilov on Pexels
Hello Everyone, In this article, we will discuss how to modify the Meta Box in WordPress, specifically how to change the default tag meta box into a category-style meta box, making it look better and more elegant. Please take a look at the image below.
From Default Meta Box to Category Meta Box
As you can see, the new meta box displays all tags at once. Why do we need this replacement? Some users might find it more comfortable and useful if the Meta Box is designed like the one shown above. You can also do even more using jQuery.
We’ll show you how to make this change in just two simple steps. Just place the code from both steps into your functions.php file, and it will work. Let’s get started.
Step 1: Remove the Old Tag Meta Box
To create a new one, we first need to remove the old one. WordPress doesn’t provide filters or actions that allow changing the meta box content directly. Therefore, we must not edit core WordPress files.
/**
* Meta Box Removal
*/
function rudr_post_tags_meta_box_remove() {
$id = 'tagsdiv-post_tag'; // you can find it in a page source code (Ctrl+U)
$post_type = 'post'; // remove only from post edit screen
$position = 'side';
remove_meta_box($id, $post_type, $position);
}
add_action('admin_menu', 'rudr_post_tags_meta_box_remove');Step 2: Create a New One Like the Category Meta Box
We only use 3 WordPress functions, including:
- add_meta_box()
- get_terms() — to retrieve all existing tags
- get_the_terms()` — to get all tags assigned to the post
For more details, please see the code below:
/* Add */
function rudr_add_new_tags_metabox() {
$id = 'rudrtagsdiv-post_tag'; // it should be unique
$heading = 'Tags'; // meta box heading
$callback = 'rudr_metabox_content'; // the name of the callback function
$post_type = 'post';
$position = 'side';
$pri = 'default'; // priority, 'default' is good for us
add_meta_box($id, $heading, $callback, $post_type, $position, $pri);
}
add_action('admin_menu', 'rudr_add_new_tags_metabox');
/* Fill */
function rudr_metabox_content($post) {
// get all blog post tags as an array of objects
$all_tags = get_terms(array('taxonomy' => 'post_tag', 'hide_empty' => 0));
// get all tags assigned to a post
$all_tags_of_post = get_the_terms($post->ID, 'post_tag');
// create an array of post tags ids
$ids = array();
if ($all_tags_of_post) {
foreach ($all_tags_of_post as $tag) {
$ids[] = $tag->term_id;
}
}
// HTML
echo '<div id="taxonomy-post_tag" class="categorydiv">';
echo '<input type="hidden" name="tax_input[post_tag][]" value="0" />';
echo '<ul>';
foreach ($all_tags as $tag) {
// unchecked by default
$checked = "";
// if an ID of a tag in the loop is in the array of assigned post tags - then check the checkbox
if (in_array($tag->term_id, $ids)) {
$checked = " checked='checked'";
}
$id = 'post_tag-' . $tag->term_id;
echo "<li id='{$id}'>";
echo "<label><input type='checkbox' name='tax_input[post_tag][]' id='in-$id'" . $checked . " value='$tag->slug' /> $tag->name</label><br />";
echo "</li>";
}
echo '</ul></div>'; // end HTML
}You can use the code above not only for tags but also for any non-hierarchical taxonomy in Mangcoding. Please try implementing what Mangcoding has shared in the article above. Hopefully, this article is useful and can help solve your problem, especially regarding how to change the default tag meta box into a category meta box.
Source: Rudrastyh.com