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

7
  • I just tried your code that save the image and it works on my test site.
    – Kaperto
    Nov 13, 2019 at 8:45
  • I am not getting the image option? Where did you get that option? Nov 13, 2019 at 9:14
  • @Kaperto, check this image while adding the category prnt.sc/pwadap Nov 13, 2019 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, 2019 at 9:29
  • @Kaperto, I checked on edit but it's not showing prnt.sc/pwal7j Nov 13, 2019 at 9:31

1 Answer 1

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
}
14
  • give me sometime to check Nov 14, 2019 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? Nov 14, 2019 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, 2019 at 11:45
  • Where should I use category_edit_form_fields hook? Nov 14, 2019 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, 2019 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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