AOW >> How Add WordPress Category Image
WordPress Category Image

How Add WordPress Category Image

Adding WordPress category image is the primary elements of some WordPress plugins and themes. S0 WordPress developer needs to implement the category image.

Add WordPress category image is not very difficult. Now we will show you how you will quickly insert the image field integrate with media files very easily.

How add image in category in WordPress | add image in category form | WordPress category | word press plugin | Plugin for add image in cat…how add image in category in WordPress, add image in category form, WordPress category, WordPress plugin, plugin for add image in category, WordPress category images, free plugin, free tutorial

The very important thing in our this tutorial we show you add image field in add category form and edit category form. Because in WordPress both forms are different and sometimes developers and coders of WordPress confuse in it.

adding category image WordPress

Below code for adding the image field in add category form:

//add upload image button in the category form
add_action ( 'categories_add_form_fields', 'extra_categories_fields');

function extra_categories_fields( $tags ) {    

    $tag_id = $tags->term_id;
    $cat_metas = get_option( "category_$tag_id");
  wp_enqueue_script('jquery');
  wp_enqueue_media();
  ?>
    <div>
    <label for="image_path">Uploading Image</label>
    <input type="text" name="image_path" id="image_path" class="regular-text" style="display:none;">
    <input type="button" name="upload-button" id="upload-button" class="button-secondary" value="Upload Image">
  </div><br /><br />
  <script type="text/javascript">
    jQuery(document).ready(function($){
      $('#upload-button').click(function(e) {
        e.preventDefault();
        var image = wp.media({ 
          title: 'Uploadimg Image',
          // if want to upload more than one image
          multiple: false
        }).open()
        .on('select', function(e){
         
          var uploaded_image = image.state().get('selection').first();
         
          console.log(uploaded_image);
          var image_path = uploaded_image.toJSON().url;
          // Assign the path value
          $('#image_path').val(image_path);
        });
      });
    });
  </script>
<?php
}

WordPress Category Image Button

The upper given code will add the “Add Image” button in the add OR create category form, and this button will also integrate with WordPress media files.

The following code for save the category image path when category created:

// saving the category image
add_action( 'creating_category', 'saving_category_fileds', 10, 1 ); 
function saving_category_fileds( $terms_id ) {
  alog('string',$terms_id,__FILE__,__LINE__);
  $args = array(
    "type" => "post",
    "orderby" => "id",
    "order" => "DESC",
    "number" => "1",
    "taxonomy" => "category",
    "hide_empty" => FALSE, // TRUE or FALSE depending what you want
  );

  $categories = get_categories($args);
  $last_category_id=$categories[0]->terms_id;
  alog('string',$last_category_id,__FILE__,__LINE__);
  add_option( "category_$last_category_id", $_POST['image_url']);
    
}

 

Adding WordPress Category Image

The upper given code will save the path of the image which you select from media files when category created.

The given below code will add the “Add Image” button/field in the edit category form:

//add upload button in edit category form
add_action ( 'edit_category_form_fields', 'edit_category_image');
function edit_category_image( $tag ) {    
    $t_id = $tag->term_id;
  
    $cat_meta = get_option( "category_$t_id");
  wp_enqueue_script('jquery');
  wp_enqueue_media();
  ?>
  <table class="form-table">
    <tr>
      <th><label for="image_url">Upload Image For Category</label></th>
      <td><input type="text" name="img_url" id="image_url" class="regular-text" style="display:none;" value="">
      <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image"></td>
    </tr>
    <?php if(!empty($cat_meta)) {  ?>
    <tr>
      <td>
      <b>OR</b> <br />
      Keep using previous image <input type="checkbox" name="kupci" value="1" />
      <img src="<?php echo $cat_meta?>" alt="cat_image" width="90" />
      </td>
      <td></td>
    </tr>
    <?php
    }
    ?>
  </table><br /><br />
  <script type="text/javascript">
    jQuery(document).ready(function($){
      $('#upload-btn').click(function(e) {
        e.preventDefault();
        var image = wp.media({ 
          title: 'Upload Image',
          // mutiple: true if you want to upload multiple files at once
          multiple: false
        }).open()
        .on('select', function(e){
          // This will return the selected image from the Media Uploader, the result is an object
          var uploaded_image = image.state().get('selection').first();
          // We convert uploaded_image to a JSON object to make accessing it easier
          // Output to the console uploaded_image
          console.log(uploaded_image);
          var image_url = uploaded_image.toJSON().url;
          // Let's assign the url value to the input field
          $('#image_url').val(image_url);
          
        });
      });
    });
  </script>
  <?php
}

 

The following code will update the edited wordpress category image path:

//update edited category image
add_action ( 'edited_category', 'save_edited_category_fileds');
function save_edited_category_fileds( $term_id ) {
    if ( isset( $_POST['img_url'] ) ) {
    alog('string',$term_id,__FILE__,__LINE__);
        $t_id = $term_id;
        $cat_meta = get_option( "category_$t_id");
            if (!isset($_POST['kupci'])){
                $cat_meta = $_POST['img_url'];
        update_option( "category_$t_id", $cat_meta );
            }
       
    }
}

 

Hope you enjoy this.

If you have any question and if you want further information about it, we are here for your help.

Thanks!

Likes(1)Dislikes(0)
Please follow and like us:

Leave a Reply

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


*