How To Add Category Image In Admin Side As Well As Fronted Side Without Using Plugin

Follow below steps to set custom category image option on category pages at admin side,

Step-1: Add this below code into functions.php.

if ( ! class_exists( 'code_hub_class' ) ) {
  class code_hub_class {
     public function __construct() {
     }
  }
}

Step-2: Add below hooks and filters into the initialize class.

/*
 * Add below hooks and filters into the initialize class
*/public function init() {
  add_action( 'category_add_form_fields', array ( $this, 'add_category_image' ), 10, 2 );
  add_action( 'created_category', array ( $this, 'save_category_image' ), 10, 2 );
  add_action( 'category_edit_form_fields', array ( $this, 'update_category_image' ), 10, 2 );
  add_action( 'edited_category', array ( $this, 'updated_category_image' ), 10, 2 );
  add_action( 'admin_enqueue_scripts', array( $this, 'load_media' ) );
  add_action( 'admin_footer', array ( $this, 'add_script' ) );
}
public function load_media() {
  wp_enqueue_media();
}

Step-3: Using the below code you can add a category image form into the category page of the admin page.

public function add_category_image ( $taxonomy ) { ?>
  <div class="form-field term-group">
    <label for="category-image-id"><?php _e('Image', 'hero-theme'); ?></label>
    <input type="hidden" id="category-image-id" name="category-image-id" class="custom_media_url" value="">
    <div id="category-image-wrapper"></div>
    <p>
      <input type="button" class="button button-secondary code_hub_media_button" id="code_hub_media_button" name="code_hub_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
      <input type="button" class="button button-secondary code_media_remove" id="code_media_remove" name="code_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
   </p>
  </div>
<?php
}

Step-4: Use the below code to save the form field.

/*
 * Use below code to save the form field,
*/public function save_category_image ( $term_id, $tt_id ) {
  if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
    $image = $_POST['category-image-id'];
    add_term_meta( $term_id, 'category-image-id', $image, true );
  }
}

Step-5:  Use the below code to edit the form field into a category page from the admin side.

/*
 * Use the below code to edit the form field into a category page from the admin side ,
*/public function update_category_image ( $term, $taxonomy ) { ?>
  <tr class="form-field term-group-wrap">
    <th scope="row">
      <label for="category-image-id"><?php _e( 'Image', 'hero-theme' ); ?></label>
    </th>
    <td>
      
      <input type="hidden" id="category-image-id" name="category-image-id" value="<?php echo $image_id; ?>">
      <div id="category-image-wrapper">
      <?php $image_id = get_term_meta ( $term -> term_id, 'category-image-id', true ); ?>
        <?php if ( $image_id ) { ?>
          <?php echo wp_get_attachment_image ( $image_id, 'thumbnail' ); ?>
          <?php print_r($image_id) ?>
        <?php } ?>
      </div>
      <p>
        <input type="button" class="button button-secondary code_hub_media_button" id="code_hub_media_button" name="code_hub_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
        <input type="button" class="button button-secondary code_media_remove" id="code_media_remove" name="code_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
      </p>
    </td>
  </tr>
<?php
}

Step-6: Use the below code to update the form field into a category page from the admin side.

/*
 * Use the below code to update the form field into a category page from the admin side ,
 */ public function updated_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
     $image = $_POST['category-image-id'];
     update_term_meta ( $term_id, 'category-image-id', $image );
   } else {
     update_term_meta ( $term_id, 'category-image-id', '' );
   }
 }

Step-7:  You need to add the below script code into functions.php.

public function add_script() { ?>
   <script>
     jQuery(document).ready( function($) {
       function code_media_upload(button_class) {
         var _custom_media = true,
         _code_send_attachment = wp.media.editor.send.attachment;
         $('body').on('click', button_class, function(e) {
           var button_id = '#'+$(this).attr('id');
           var send_attachment_bkp = wp.media.editor.send.attachment;
           var button = $(button_id);
           _custom_media = true;
           wp.media.editor.send.attachment = function(props, attachment){
             if ( _custom_media ) {
               $('#category-image-id').val(attachment.id);
               $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
               $('#category-image-wrapper .custom_media_image').attr('src',attachment.url).css('display','block');
             } else {
               return _code_send_attachment.apply( button_id, [props, attachment] );
             }
            }
         wp.media.editor.open(button);
         return false;
       });
     }
     code_media_upload('.code_hub_media_button.button'); 
     $('body').on('click','.code_media_remove',function(){
       $('#category-image-id').val('');
       $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
     });
     $(document).ajaxComplete(function(event, xhr, settings) {
       var queryStringArr = settings.data.split('&');
       if( $.inArray('action=add-tag', queryStringArr) !== -1 ){
         var xml = xhr.responseXML;
         $response = $(xml).find('term_id').text();
         if($response!=""){
           // Clear the thumb image
           $('#category-image-wrapper').html('');
         }
       }
     });
   });
 </script>
 <?php }

Here you can see the full code of add images into the category page without the plugin.

if ( ! class_exists( 'code_hub_class' ) ) {

class code_hub_class {

  public function __construct() {
    //
  }
 public function init() {
   add_action( 'category_add_form_fields', array ( $this, 'add_category_image' ), 10, 2 );
   add_action( 'created_category', array ( $this, 'save_category_image' ), 10, 2 );
   add_action( 'category_edit_form_fields', array ( $this, 'update_category_image' ), 10, 2 );
   add_action( 'edited_category', array ( $this, 'updated_category_image' ), 10, 2 );
   add_action( 'admin_enqueue_scripts', array( $this, 'load_media' ) );
   add_action( 'admin_footer', array ( $this, 'add_script' ) );
 }

public function load_media() {
 wp_enqueue_media();
}
public function add_category_image ( $taxonomy ) { ?>
   <div class="form-field term-group">
     <label for="category-image-id"><?php _e('Image', 'hero-theme'); ?></label>
     <input type="hidden" id="category-image-id" name="category-image-id" class="custom_media_url" value="">
     <div id="category-image-wrapper"></div>
     <p>
       <input type="button" class="button button-secondary code_hub_media_button" id="code_hub_media_button" name="code_hub_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
       <input type="button" class="button button-secondary code_media_remove" id="code_media_remove" name="code_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
    </p>
   </div>
 <?php
 }
public function save_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
     $image = $_POST['category-image-id'];
     add_term_meta( $term_id, 'category-image-id', $image, true );
   }
 }
public function update_category_image ( $term, $taxonomy ) { ?>
   <tr class="form-field term-group-wrap">
     <th scope="row">
       <label for="category-image-id"><?php _e( 'Image', 'hero-theme' ); ?></label>
     </th>
     <td>
       
       <input type="hidden" id="category-image-id" name="category-image-id" value="<?php echo $image_id; ?>">
       <div id="category-image-wrapper">
       <?php $image_id = get_term_meta ( $term -> term_id, 'category-image-id', true ); ?>
         <?php if ( $image_id ) { ?>
           <?php echo wp_get_attachment_image ( $image_id, 'thumbnail' ); ?>
           <?php print_r($image_id) ?>
         <?php } ?>
       </div>
       <p>
         <input type="button" class="button button-secondary code_hub_media_button" id="code_hub_media_button" name="code_hub_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
         <input type="button" class="button button-secondary code_media_remove" id="code_media_remove" name="code_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
       </p>
     </td>
   </tr>
 <?php
 }
public function updated_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
     $image = $_POST['category-image-id'];
     update_term_meta ( $term_id, 'category-image-id', $image );
   } else {
     update_term_meta ( $term_id, 'category-image-id', '' );
   }
 }
public function add_script() { ?>
   <script>
     jQuery(document).ready( function($) {
       function code_media_upload(button_class) {
         var _custom_media = true,
         _code_send_attachment = wp.media.editor.send.attachment;
         $('body').on('click', button_class, function(e) {
           var button_id = '#'+$(this).attr('id');
           var send_attachment_bkp = wp.media.editor.send.attachment;
           var button = $(button_id);
           _custom_media = true;
           wp.media.editor.send.attachment = function(props, attachment){
             if ( _custom_media ) {
               $('#category-image-id').val(attachment.id);
               $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
               $('#category-image-wrapper .custom_media_image').attr('src',attachment.url).css('display','block');
             } else {
               return _code_send_attachment.apply( button_id, [props, attachment] );
             }
            }
         wp.media.editor.open(button);
         return false;
       });
     }
     code_media_upload('.code_hub_media_button.button'); 
     $('body').on('click','.code_media_remove',function(){
       $('#category-image-id').val('');
       $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
     });
     $(document).ajaxComplete(function(event, xhr, settings) {
       var queryStringArr = settings.data.split('&');
       if( $.inArray('action=add-tag', queryStringArr) !== -1 ){
         var xml = xhr.responseXML;
         $response = $(xml).find('term_id').text();
         if($response!=""){
           // Clear the thumb image
           $('#category-image-wrapper').html('');
         }
       }
     });
   });
 </script>
 <?php }
} 
$code_hub_class = new code_hub_class();
$code_hub_class -> init(); 
}

You can add the below code into archive.php and category.php.

$code_term_id = get_term_meta( get_queried_object_id(), 'category-image-id', true);
echo wp_get_attachment_image ( $code_term_id, 'full' );

I hope you guys found something useful.

Please give your valuable feedback.