0

I have categories on my website. I have to add a background image to each category while creating the category without using any plugin.

I tried some code in function.php and I refer this link. but it's not working.

function my_category_module() {
 add_action ( 'edit_category_form_fields', 'add_image_cat');
 add_action ( 'edited_category', 'save_image');
 }
add_action('init', 'my_category_module');
function add_image_cat($tag){
 $category_images = get_option( 'category_images' );
 $category_image = '';
 if ( is_array( $category_images ) && array_key_exists( $tag->term_id, $category_images ) ) {
 $category_image = $category_images[$tag->term_id] ;
 }
 ?>
 <tr>
 <th scope="row" valign="top"><label for="auteur_revue_image">Image</label></th>
 <td>
 <?php
 if ($category_image !=""){
 ?>
 <img src="<?php echo $category_image;?>" alt="" title=""/>
 <?php
 }
 ?>
 <br/>
 <input type="text" name="category_image" id="category_image" value="<?php echo $category_image; ?>"/><br />
 <span>This field allows you to add a picture to illustrate the category. Upload the image from the media tab WordPress and paste its URL here.</span>
 </td>
 </tr>
 <?php
 }

function save_image($term_id){
 if ( isset( $_POST['category_image'] ) ) {
 //load existing category featured option
 $category_images = get_option( 'category_images' );
 //set featured post ID to proper category ID in options array
 $category_images[$term_id] =  $_POST['category_image'];
 //save the option array
 update_option( 'category_images', $category_images );
 }
 }

Displaying on category.php page

if(is_category()){
 $category_images = get_option( 'category_images' );
 $category_image = '';
 if ( is_array( $category_images ) && array_key_exists( get_query_var('cat'), $category_images ) ){

$category_image = $category_images[get_query_var('cat')] ;
 ?>
 <img src="<?php echo $category_image;?>"/>
 <?php
 }
 }

enter image description here enter image description here

  • I just tried your code that save the image and it works on my test site. – Kaperto Nov 13 '19 at 8:45
  • I am not getting the image option? Where did you get that option? – Naren Verma Nov 13 '19 at 9:14
  • @Kaperto, check this image while adding the category prnt.sc/pwadap – Naren Verma Nov 13 '19 at 9:19
  • the image option is at the bottom of the page when you edit a category. the form for a new category is different from the form for editing a category, this wordpress part is not well optimised. – Kaperto Nov 13 '19 at 9:29
  • @Kaperto, I checked on edit but it's not showing prnt.sc/pwal7j – Naren Verma Nov 13 '19 at 9:31
1

You can try this code. It will add a media button which will get the image url. I have commented the parts that I have deleted or added.

function my_category_module()
{
    // this action is deprecated
    //add_action('edit_category_form_fields', 'add_image_cat');

    // Add these actions for edit and add
    add_action('edited_category', 'save_image');
    add_action('create_category', 'save_image');
    add_action('category_edit_form_fields', 'edit_image_cat');
}
add_action('init', 'my_category_module');


function edit_image_cat($tag)
{
    $category_images = get_option('category_images');
    $category_image = '';
    if (is_array($category_images) && array_key_exists($tag->term_id, $category_images)) {
        $category_image = $category_images[$tag->term_id];
    }
    ?>
    <tr>
        <th scope="row" valign="top"><label for="auteur_revue_image">Image</label></th>
        <td>
            <?php
                if ($category_image != "") {
                    ?>
                <img src="<?php echo $category_image; ?>" alt="" title="" />
            <?php
                }
                ?>
            <br />
            <!-- Add this html here -->
            <input type="text" class="regular-text" id="custom_category_image" name="category_image" value="<?php echo $category_image; ?>">
            <button class="set_category_image button">Set Image url</button>

            <!--
                <input type="text" name="category_image" id="category_image" value="<?php echo $category_image; ?>"/><br />
                <span>This field allows you to add a picture to illustrate the category. Upload the image from the media tab WordPress and paste its URL here.</span>
            -->
        </td>
    </tr>

<?php
}

function save_image($term_id)
{
    if (isset($_POST['category_image'])) {
        //load existing category featured option
        $category_images = get_option('category_images');
        //set featured post ID to proper category ID in options array
        $category_images[$term_id] =  $_POST['category_image'];
        //save the option array
        update_option('category_images', $category_images);
    }
}


// Enquey media elements
add_action('admin_enqueue_scripts', function () {
    if (is_admin())
        wp_enqueue_media();
});

// Add JS using admin_footer or enque thorugh hooks
add_action('admin_footer', 'my_footer_scripts');
function my_footer_scripts()
{
    ?>
    <script>
        jQuery(document).ready(function() {
            if (jQuery('.set_category_image').length > 0) {
                if (typeof wp !== 'undefined' && wp.media && wp.media.editor) {
                    jQuery('.set_category_image').on('click', function(e) {
                        e.preventDefault();
                        var button = jQuery(this);
                        var url_input = jQuery("#custom_category_image");
                        wp.media.editor.send.attachment = function(props, attachment) {
                            url_input.val(attachment.url);
                        };
                        wp.media.editor.open(button);
                        return false;
                    });
                }
            }
        });
    </script>
<?php
}
  • give me sometime to check – Naren Verma Nov 14 '19 at 11:23
  • Yes, It's working as expected. I have two doubts. First why used the script at the bottom? Second, How can I show the same button on the add category page? – Naren Verma Nov 14 '19 at 11:41
  • The script is to enable media button interaction through JS. You can add the code to a JS file and include it through admin_enqueue_scripts hook. To add the same button when adding a new category use category_edit_form_fields hook. – Kalimah Nov 14 '19 at 11:45
  • Where should I use category_edit_form_fields hook? – Naren Verma Nov 14 '19 at 11:51
  • Sorry. I meant category_edit_form_fields. You can add to my_category_module like add_action('category_edit_form_fields', 'add_image_cat');. Then create add_image_cat and add your html code. – Kalimah Nov 14 '19 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.