Assign an Image to a Category

How can I link an image to a category? Something similar to FrameMarket for the products, but do the same for categories? Essentially have a grid layout for the categories and then link to the grid category for the products like it does in FrameMarket.

  • DavidM
    • DEV MAN’s Mascot

    Hi Dana,

    That would require some customization and to help with that, you can take a look at the following file in the MarketPress folder for more extensive customization instructions:

    Basically, you can create MarketPress templates such as mp-category.php and include those templates in your theme's folder. MarketPress will use those templates to render those respective pages (ie. category listings). You could include images in those templates however you like.

    There's also the following thread where there's some awesome instructions given on achieving that through the use of another plugin. Looks like all the necessary code's provided too! :slight_smile:


  • tad
    • Site Builder, Child of Zeus

    I have tried this and still get an error. Am not sure where to put the second part of the code that was supplied in the link you shared. I posted a question there and haven't gotten a response. Do you have any ideas?

    Thanks David!

  • ThePath
    • The Bug Hunter

    @Dana I have updated the other thread with something that works but here is the solution again:

    1) Install the Wordpress plugin "Category Icons Lite"

    2) Update this plugin. File: caticonslite.php line 173.

    Add the code:
    taxonomy' => 'product_category', to the array.

    It should now look like this:
    $array = wp_dropdown_categories(array('taxonomy' => 'product_category', 'hide_empty' => 0, 'name' => 'categoryiconliteid', 'echo' => 0, 'orderby' => 'name', 'selected' => $category_id, 'hierarchical' => true, 'show_option_none' => __('None')));

    3) Now what I did was to create a custom store front template you do this buy creating a file call mp_store.php in YOUR theme directory. For more info see: Themeing_MarketPress.txt in plugins/marketpress/marketpress-includes/themes

    In your mp_store.php add this code (probably within your #content div):

    				.mp-catbox{ float:left; display:block; text-align:center; width:150px; height:auto; margin:10px; padding:0;}
    				.mp-catbox-title{ float:left; display:block; width:150px; height:auto; margin:5px 0 0; padding:0;}
    				.mp-catbox-desc{ float:left; display:block; width:150px; height:auto; margin: 5px 0 0; padding:0;}
    				<?php $args=array(
                          'taxonomy' => 'product_category',
                          'title_li' => '',
                          'hide_empty' => 'false',
                          'child_of' => '',
                          'hierarchical' => false
                        foreach($categories as $category) {
                            if ($category->parent > 0) { continue; }  //hide sub categories
                            //This code uses the images selected in the Media menu (using Category Icons Lite plugin)
                            $query = "SELECT wp_posts.guid from wp_posts, wp_postmeta WHERE wp_posts.ID = wp_postmeta.post_id AND wp_postmeta.meta_key = '_wp_attachment_category' AND wp_postmeta.meta_value = " . $category->cat_ID;
                            global $wpdb;
                            $myrows = $wpdb->get_results($query);
                                foreach ($myrows as $image){
                                    echo '<div class="mp-catbox"><a href="' . get_bloginfo('url') . '/shop/products/category/' . $category->slug . '"><img height="150" width="150" src="'. $image->guid . '" alt="'. $category->name .'" /></a>';
                                //default images
                              echo '<div class="mp-catbox"><a href="' . get_bloginfo('url') . '/shop/products/category/' . $category->slug . '"><img height="150" width="150" src="' . get_bloginfo('template_directory') . '/images/placeholder.jpg" alt="" /></a>';
    						<?php echo '<h2 class="mp-catbox-title"><a href="' . get_bloginfo('url') . '/shop/products/category/' . $category->slug . '">' . $category->name .'</a></h2>' ?>
                            <?php echo '<p class="mp-catbox-desc">'.$category->description . '</p></div>' ?>
    					<?php } ?>

    Ive even added some CSS so it goes grid-like.

    PLEASE NOTE: I have used get_bloginfo('url') . '/shop/products/category/' as my stores url as I changed this in the MP settings you will probably want: get_bloginfo('url') . '/store/products/category/'

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.