How To Add and Display Category Image

Question

How To Add and Display Category Image

Jahangir Khattak

2022年2月2日 08:05

I have created a WordPress plugin to create a widget area to display category names (total nmbr of post) and description.Now I want to show the category image just after the category name and after the image I want to show category description. Although category names and description display successfully I just want the complete code of how to add feature image to category and how that will display in my category description widget area.

For Reference here is my complete Category Description Widget Area code.

?php
/*
Plugin Name: My Category Description Widget Plugin
Plugin URI: http://mkrdip.me/category-posts-widget
Description: Adds a widget that shows all categories along with their description.
Author: Muhammad Jahangir
Version: 1.0
Author URI: http://facebook.com/jahangirKhattakPk
*/
class categories_description extends WP_Widget
{
    function __construct()
    {
        $widget_ops = array( 
            'classname' = 'categoryDescription widget',
            'description' = 'Show all categories with their description.',
        );
        parent::__construct( 'categories_description', 'My Category Description', $widget_ops );
    }
    // end __construct()

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
        ?
        p
        label for="?php echo esc_attr( $this-get_field_id( 'title' ) ); ?"?php _e( esc_attr( 'Title:' ) ); ?/label 
        input class="widefat" id="?php echo esc_attr( $this-get_field_id( 'title' ) ); ?" name="?php echo esc_attr( $this-get_field_name( 'title' ) ); ?" type="text" value="?php echo esc_attr( $title ); ?"
        /p
        ?php 
    }
    // End form function

// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    return $instance;
}
// End update function
    function widget($args,$instance){
           echo $args['before_widget'];
            if ( ! empty( $instance['title'] ) )
            {


        ?
        div class="categoriesDescription bgWhite"
                div class="container innerContainer"
                    h2 class="widgetTitle"?php echo apply_filters( 'widget_title', $instance['title'] ); } ?/h2
                        ?php $categories = get_categories();
                        foreach ($categories as $cat)
                            { 

                                $cat_name = $cat-name;
                                $CategoryID = get_cat_ID( $cat_name );
                                $totalPosts = $cat-count;
                                $currentcatname = $cat_name;



                                ?

                              div class="category-image"

                              /div

                                div class="singleCategory col-lg-4"
                                    a href="?php echo get_category_link( $cat ); ?" class="uppercase categoryTitle"
                                        ?php echo $cat_name; ?/a
                                        span class="numberOfPosts"
                                        ?php 
                                            echo '( '.$totalPosts.' )'; 
                                        ?
                                /span                         
                                div class="CategoryImg"?php echo $cat-term_icon; ?
                                    // here I want to show category feature image...
                                div class="my-image"
                                ?php

 ?
                                header class="archive-header ?php if ($category_image==true) echo 'category-image'; ?"

                                 /div

                                /div
                                p class="CategoryDescription"?php echo $cat-description; ?/p
                                p?php echo $CategoryID; ?/p
                               /div
                            ?php 
                            } ?
                    div class="clearfix"/div
                /div
        /div
    /div
/div
        ?php

    }
    // End widget function
}
//end categories_description class
    add_action('widgets_init', function() {
        register_widget('categories_description');
    })
?

Topic thumbnails post-thumbnails categories Wordpress

Category Web

Mark Kaplun · Accepted Answer · 2018年2月23日 07:41

In general there is no such thing as a "featured image" for categories or other types of terms. The easiest thing to do is to integrate with existing plugins and themes that support this kind of functionality and/or supply an easy to use filter that for site owners to be able to customize where to get the information from.

majick · Accepted Answer · 2016年6月7日 02:08

I'd say register a custom post type, eg. cat_image, so the images can be uploaded to a post using the existing featured image metabox.

You could sync the data using wp_insert_post matching the widget ID to the custom post slug..?

// to match widget to an existing custom post
// similar to get_post but can use slug (if no post parents)
$slug = $instance['id']; // not sure on this?
$post = get_page_by_path($slug,OBJECT,'cat_image');

if (!$post) {
    // create fresh post from widget instance data
    $args = array('post_type' => 'cat_image'); // ...and all the rest
    $post = wp_insert_post($args);
}

$thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );  
$postthumbnailhtml = _wp_post_thumbnail_html( $thumbnail_id, $post->ID );

This will give you the upload element linked to the post ID... (plus you may need to make sure you have wp_enqueue_media enqueued on the widget page if it's not already?)

Anyway that is one suggestion, you would still have to build a form element around it the HTML metabox and see what happens... have not had time to test it out yet, hopefully the output is easy enough to access and insert as an attachment to the linked custom post.

How To Add and Display Category Image

About