Category listing with thumbnail and description on home page

Note: This is for older versions of WP < 3.9 prior to the new media upload being introduced

Here’s how to add fields and save the values on the category edit screen as well as a method of adding an image upload field.

Adding fields to category edit screen

To start we need to get some code showing up on the category edit screen.

add_action( 'edit_category_form_fields', 'my_category_custom_fields' );
add_action( 'edit_category', 'save_my_category_custom_fields' );

function my_category_custom_fields( $tag ) {
    // your custom field HTML will go here
    // the $tag variable is a taxonomy term object with properties like $tag->name, $tag->term_id etc...

    // we need to know the values of our existing entries if any
    $category_meta = get_option( 'category_meta' );
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="category-title"><?php _e("Title"); ?></label></th>
        <td>
            <input id="category-title" name="category_meta[<?php echo $tag->term_id ?>]Category listing with thumbnail and description on home page" value="<?php if ( isset( $category_meta[ $tag->term_id ] ) ) esc_attr_e( $category_meta[ $tag->term_id ]['title'] ); ?>" />
            <span class="description"><?php _e('Enter an alternative title for this category.'); ?></span>
        </td>
    </tr>
    <!-- rinse & repeat for other fields you need -->
    <?php
}

The simplest way to store our custom values is in the options table (there should be a taxonomy-meta table really but never mind). This way we only need to make one query to get the meta data for all of our categories. If anyone has a better idea for storage then speak up!

function save_my_category_custom_fields() {
    if ( isset( $_POST['category_meta'] ) && !update_option('category_meta', $_POST['category_meta']) )
        add_option('category_meta', $_POST['category_meta']);
}

For a checkbox you’re simply storing true or false so you’d use category_extras[$tag->term_id][show_on_home] for the name attribute and use the value stored in $category_meta to determine if it’s checked or not.

You may want to add some extra processing or sanitisation to the save function – mine is just a quick n dirty example.

The image field

This is a fair bit of code and quite complicated so I won’t explain it all here but the comments describe the purpose of each function. We can discuss in the comments if you want to.

The following functions add a link to the category edit screen which brings up the wordpress media library/image upload popup. You can then upload a picture and click to use it. You’ll then have the image ID and thumbnail url available to you with the other meta above.

// add the image size you need
add_image_size( 'category_thumb', 125, 125, true );

// setup our image field and handling methods
function setup_category_image_handling() {
    // add the image field to the rest
    add_action( 'edit_category_form_fields', 'category_image' );

    global $pagenow;
    if ( is_admin() ) {
    add_action( 'admin_init', 'fix_async_upload_image' );
    if ( 'edit-tags.php' == $pagenow ) {
        add_thickbox();
        add_action('admin_print_footer_scripts', 'category_image_send_script', 1000);
    } elseif ( 'media-upload.php' == $pagenow || 'async-upload.php' == $pagenow ) {
        add_filter( 'media_send_to_editor', 'category_image_send_to_editor', 1, 8 );
        add_filter( 'gettext', 'category_image_replace_text_in_thickbox', 1, 3 );
    }
    }
}
add_action( 'admin_init', 'setup_category_image_handling' );

// the taxonomy edit screen image field
function category_image( $tag ) {
    // get our category meta data
    $category_meta = get_option('category_meta');
    ?>
           <tr class="form-field hide-if-no-js">
               <th scope="row" valign="top"><label for="taxonomy-image"><?php _e("Image"); ?></label></th>
               <td>
                   <div id="taxonomy-image-holder">
               <?php if( !empty($category_meta[$tag->term_id]['image']) ) { ?>
                   <img style="max-width:100%;display:block;" src="https://wordpress.stackexchange.com/questions/5955/<?php echo esc_attr( $category_meta[ $tag->term_id ]["image']['thumb'] ); ?>" alt="" />
                   <a id="taxonomy-image-select" class="thickbox" href="media-upload.php?is_term=true&amp;type=image&amp;TB_iframe=1"><?php _e('Change image'); ?></a>
                   <a class="deletion" id="taxonomy-image-remove" href="#remove-image">Remove image</a>
               <?php } else { ?>
                   <a id="taxonomy-image-select" class="thickbox" href="media-upload.php?is_term=true&amp;type=image&amp;TB_iframe=1"><?php _e('Choose an image'); ?></a>
               <?php } ?>
                   </div>
                   <input type="hidden" name="category_meta[<?php echo $tag->term_id ?>][image][id]" value="<?php if( isset($category_meta[ $tag->term_id ]['image']['id']) ) echo esc_attr($category_meta[ $tag->term_id ]['image']['id']); ?>" class="tax-image-id" />
                   <input type="hidden" name="category_meta[<?php echo $tag->term_id ?>][image][thumb]" value="<?php if( isset($category_meta[ $tag->term_id ]['image']['thumb']) ) echo esc_attr($category_meta[ $tag->term_id ]['image']['thumb']); ?>" class="tax-image-thumb" />
               <span class="description"><?php _e('A category image.'); ?></span></td>
           </tr>
    <?php
}

   // required for uploading images on non post/page screens
   function fix_async_upload_image() {
       if(isset($_REQUEST['attachment_id'])) {
           $GLOBALS['post'] = get_post($_REQUEST['attachment_id']);
       }
   }

   // are we dealing with the taxonomy edit screen?
   function is_category_context() {
       if ( isset($_SERVER['HTTP_REFERER']) && strpos($_SERVER['HTTP_REFERER'],'is_term') !== false ) {
           return true;
       } elseif ( isset($_REQUEST['_wp_http_referer']) && strpos($_REQUEST['_wp_http_referer'],'is_term') !== false ) {
           return true;
       } elseif ( isset($_REQUEST['is_term']) && $_REQUEST['is_term'] !== false ) {
           return true;
       }
       return false;
   }

   // replace Insert Into Post text with something more appropriate
   function category_image_replace_text_in_thickbox($translated_text, $source_text, $domain) {
       if ( is_category_context() ) {
           if ('Insert into Post' == $source_text) {
               return __('Use this image', MB_DOM );
           }
       }
       return $translated_text;
   }

   // output a script that sets variables on the window object so that they can be accessed elsewhere
   function category_image_send_to_editor( $html, $id, $attachment ) {
       // context check might not be necessary, and, might not work in all cases
       if ( is_category_context() ) {
           $item = get_post($id);
           $src = wp_get_attachment_image_src($id,'thumbnail',true); // 0 = url, 1 = width, 2 = height, 3 = icon(bool)
           ?>
           <script type="text/javascript">
               // send image variables back to opener
               var win = window.dialogArguments || opener || parent || top;
               win.TI.id = <?php echo $id ?>;
               win.TI.thumb = '<?php echo $src[0]; ?>';
           </script>
           <?php
       }
       return $html;
   }

   // write out the javascript that handles what happens when a user clicks to use an image
   function category_image_send_script() { ?>
       <script>
           self.TI = {};
           var tb_position;

           function send_to_editor(h) {
               // ignore content returned from media uploader and use variables passed to window instead
               jQuery('.tax-image-id').val( self.TI.id );
               jQuery('.tax-image-thumb').val( self.TI.thumb );

               // display image
               jQuery('#taxonomy-image-holder img, #taxonomy-image-remove').remove();
               jQuery('#taxonomy-image-holder')
                   .prepend('<img style="max-width:100%;display:block;" src="'+ self.TI.thumb +'" alt="" />')
                   .append('<a class="deletion" id="taxonomy-image-remove" href="#remove-image">Remove image</a>');

               jQuery('#taxonomy-image-select').html('Change image');

               // close thickbox
               tb_remove();
           }

           (function($){
               $(document).ready(function() {

                   tb_position = function() {
                       var tbWindow = $('#TB_window'), width = $(window).width(), H = $(window).height(), W = ( 720 < width ) ? 720 : width;

                       if ( tbWindow.size() ) {
                           tbWindow.width( W - 50 ).height( H - 45 );
                           $('#TB_iframeContent').width( W - 50 ).height( H - 75 );
                           tbWindow.css({'margin-left': '-' + parseInt((( W - 50 ) / 2),10) + 'px'});
                           if ( typeof document.body.style.maxWidth != 'undefined' )
                               tbWindow.css({'top':'20px','margin-top':'0'});
                       };

                       return $('a.thickbox').each( function() {
                           var href = $(this).attr('href');
                           if ( ! href ) return;
                           href = href.replace(/&width=[0-9]+/g, '');
                           href = href.replace(/&height=[0-9]+/g, '');
                           $(this).attr( 'href', href + '&width=" + ( W - 80 ) + "&height=" + ( H - 85 ) );
                       });
                   };
                   $(window).resize(function(){ tb_position(); });

                   $("#taxonomy-image-select').click(function(event){
                       tb_show("Choose an image:", $(this).attr("href"), false);
                       return false;
                   });
                   $('#taxonomy-image-remove').live('click',function(event){
                       $('#taxonomy-image-select').html('Choose an image');
                       $('#taxonomy-image-holder img').remove();
                       $('input[class^="tax-image"]').val("");
                       $(this).remove();
                       return false;
                   });
               });
           })(jQuery);
       </script>
       <?php
   }

Accessing the information

In your my_function bit taken from your own answer you would then access the metadata like so:

function my_function(){
    $args=array(
    'orderby' => 'name',
    'order' => 'ASC'
    );
    $categories=get_categories($args);

    // get our category meta data and exit out if there isn't any
    $category_meta = get_option('category_meta');
    if ( !$category_meta )
        return;

    echo '<ul style="list-style-type:none;margin:0;padding:0">';
    foreach($categories as $category) {
        // skip unticked categories & categories with no meta data
        if ( !isset( $category_meta[ $category->term_id ] ) || ( isset( $category_meta[ $category->term_id ] ) && !$category_meta[ $category->term_id ]['show_on_home'] ) )
            continue;
        echo '<li><a style="display:block;margin-top:20px;" href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category_meta[ $category->term_id ]['title'].'</a>';
        if ( "" != $category_meta[ $category->term_id ]['image']['id'] )
            echo wp_get_attachment_image( $category_meta[ $category->term_id ]['image']['id'], 'category_thumbnail', false, array( 'alt' => $category->name, 'class' => '' ) );
        echo $category->description . '</li>';
        } 
    echo '</ul>';
}

Related Posts:

  1. Change the_title() of a page dynamically
  2. Adding more options to the instance of an image. (Attachment Display Settings)
  3. Plugin – create a page without it appearing in the side menu
  4. Is wp-content/install.php a Drop-in?
  5. Trouble with Transient API when W3TC is activated [closed]
  6. Using wp_filesystem in Plugins
  7. How to write testable classes in WordPress
  8. get_template_part from plugin
  9. Edit or Remove Plugin .htaccess Using The Admin Panel
  10. WordPress REST API call generates nonce twice on every call
  11. WordPress scheduled task is called but not executed
  12. How to create collections that are edited in admin?
  13. Plugin to Consume a Web Service
  14. Copy Tags from one post type to another post type
  15. Multisite, sharing content by URL
  16. How to Add Page Template from Plugin without Losing $this
  17. Extend plugin options page
  18. Backslashes being stripped from CSS
  19. Uploading images from a custom page using blueimp uploader?
  20. Extending WP_List_Table seems getting wrong with $this->get_columns() – what’s wrong?
  21. Why doesn’t flush_rewrite_rules run on plugin activation?
  22. Finding posts containing matching array elements in a meta field usign WP_Query
  23. how to use hook deleted_user into custom function to delete user from custom table
  24. Namespaced action and filter tags
  25. Adding Dropbox dropin js using wp_enqueue_script
  26. Proper way to pass credentials in a custom login form to avoid “headers already sent”
  27. Show User’s Current Time
  28. Single sanitization callback for multiple fields
  29. How to filter users list on user_status field with get_users()
  30. WordPress Multisite with Azure B2C redirect_urls after Login
  31. Where did the ability to edit a plugin go?
  32. How to add custom fields to the all users page
  33. Can Page Templates be Applied to Archive and Post Templates?
  34. WooCommerce Admin Reports : Get custom product report based on date range
  35. Auto gallery from folder contents
  36. Adding (blog-specific) links to “My Sites” admin page
  37. Is there a plugin that will allow a tag cloud to be created from any mysql field?
  38. How to enable sorting in custom media uploader in plugin
  39. Custom login doesn’t work properly
  40. Unit testing a plugin with a theme dependency
  41. automatic change post date when post is 30 days old
  42. Translate slug in WPMU with PO files
  43. Allow users to add / remove settings in plugin
  44. Update problem with update_option() in combination with register_setting()
  45. Why does my widget break other widgets?
  46. How do I add a text field under the activity texarea? [closed]
  47. Help writing custom function with rewrite endpoint that generates a page from dynamic content
  48. Plugin – Make sure jquery is loaded in my settings page plus my JS file
  49. wp_editor add media button not working
  50. Function/Class to list categories with checkboxes
  51. Is it possible to enable and disable wp debug from functions.php?
  52. Default settings aren’t used
  53. Alternative functions for mysql_free_result and mysql_ping in wordpress functions
  54. Getting a WordPress Debug Strategy
  55. Best way to include and use Zoho SDK in a wordpress plugin
  56. How to change WooCommerce loop product title HTML output in single product page and archive page
  57. Is hint for translator compulsory while internationalizing a string containing variables?
  58. How remove trashed WooCommerce orders from wc_get_orders() result?
  59. How to use nonce
  60. WP Still Generating 150×150 Thumbnail Size Even After Un-Setting Small Size in Functions.php
  61. Does WordPress default CSS have Grids?
  62. Unexpected T_FUNCTION
  63. How to avoid conflicts with db.php / $wpdb and other plugins that decide to use them?
  64. Plugin can’t be activated [closed]
  65. Is there an action_filter hook to add content before the post title?
  66. CSS not being applied using wp_enqueue_style
  67. Make a php array load faster
  68. Count products with custom metadata field in an order
  69. setTimeout not working in jquery
  70. Add quick edit functionnality to plugin table
  71. Hide / show settings field based on other field’s value
  72. Woocommerce Product finder feature on home page
  73. How do I show the HTML descrption in wordpress photo gallery for my individual gallery pages?
  74. $_SESSION inside php function executed by AJAX
  75. Two same AJAX calls – one is working, other doesn’t
  76. add pagination to wp_remote_get
  77. Adding and handling custom settings tab to fusion element
  78. WordPress Reset password Strength set to medium
  79. Add language localisation to javascript alert?
  80. redirect_to how to make it simply work with get parameter or similar?
  81. How to get option values without requiring wp-load?
  82. How I can give access to my custom plugin for editor roles user?
  83. Problem with baseurl and interaction with plugin
  84. Why setcookie function redirecting to home page in wordpress?
  85. Should all roles be allowed CRUD operation on the database?
  86. Associating special meaning with user id 0
  87. Filter get_user_by instead of replace function
  88. Downloading Generated XML File
  89. How to create a custom search form and handler?
  90. How to use permalink query to go to specific tabs in posts
  91. Conditional query tags do not work before the query is run. Before then, they always return false
  92. Method to retrieve category names and IDs only as an array?
  93. Send Webhook when post-status is publish or trash
  94. Using “add_image_size” to register custom image sizes inside plugins not working
  95. How do I access the contents of WordPress Classic editor in admin area with JavaScript?
  96. Need someone to help you want to manage points for members to code interface functions? thank you
  97. Call API on post save/update and show the result in admin area
  98. Is there any other ways to replicating changes on live from staging without pushing from git
  99. Run different permission_callback depending on HTTP method of custom REST API endpoint
  100. upload image to wordpress media library failed for custom post type

Leave a Comment

tech