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

Jul 24, 2021 0 1.4K

Tarun Thummar

I'm a JR. WordPress Developer at Vision Infotech.Skilled in HTML,CSS,PHP, WordPress, and jQuery.

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.

Tarun Thummar

I'm a JR. WordPress Developer at Vision Infotech.Skilled in HTML,CSS,PHP, WordPress, and jQuery.
Read More

Submit a Comment

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

Subscribe

Select Categories