{"id":39,"date":"2012-06-04T14:37:11","date_gmt":"2012-06-04T14:37:11","guid":{"rendered":"http:\/\/zahlan.net\/blog\/?p=39"},"modified":"2025-12-20T18:59:35","modified_gmt":"2025-12-20T16:59:35","slug":"categories-images","status":"publish","type":"post","link":"https:\/\/zahlan.net\/blog\/2012\/06\/categories-images\/","title":{"rendered":"Categories Images"},"content":{"rendered":"<p><a href=\"https:\/\/wordpress.org\/plugins\/categories-images\/\">Categories Images<\/a> is a <a href=\"http:\/\/www.wordpress.org\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress<\/a> plugin which allow you to add an image for each category (or term), it is so easy to user. This plugin will create a new text input that will had the image url of the category, in both forms when adding a new category or edit an existing one, you can put a url for the image or upload it bu click on the text input.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Installation:<\/strong><\/span><\/p>\n<ol style=\"font-family: monospace;\">\n<li>Open your wordpress admin panel, then plugins menu &gt; Add New and search for &#8216;Categories Images&#8217;.<\/li>\n<li>Click to install.<\/li>\n<li>Once installed, activate and it is functional.<\/li>\n<\/ol>\n<p style=\"font-family: monospace;\">Or you can install in manual:<\/p>\n<ol>\n<li><span style=\"font-family: monospace;\">Download the plugin from <a title=\"Wordpress Plugins\" href=\"http:\/\/wordpress.org\/extend\/plugins\/categories-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Plugins<\/a>.<\/span><\/li>\n<li><span style=\"font-family: monospace;\">Extract it, then upload the extracted folder &#8216;categories-images&#8217; to &#8216;\/wp-content\/plugins\/&#8217;.<\/span><\/li>\n<li><span style=\"font-family: monospace;\">Go to your wordpress plugins menu, then activate it.<\/span><\/li>\n<\/ol>\n<div><span style=\"font-family: monospace;\">\u00a0<\/span><\/div>\n<div>You are done! And the plugin is ready to use.<\/div>\n<div><\/div>\n<div><span style=\"text-decoration: underline;\"><strong>Usage and\u00a0documentation:<\/strong><\/span><\/div>\n<div><\/div>\n<div>after installing and activating the plugin, just use the following code:<\/div>\n<div><\/div>\n<div><strong>Default usage:<\/strong><\/div>\n<div><\/div>\n<div>use the following code in category or taxonomy template,put it in any &lt;img \/&gt; tag :<\/div>\n<div>\n<pre class=\"lang:php decode:true\">&lt;?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?&gt;<\/pre>\n<p>or simply:<\/p>\n<pre class=\"lang:php decode:true\">&lt;?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?&gt;<\/pre>\n<\/div>\n<div>Difference between the two methods are as following:<\/div>\n<ul>\n<li>z_taxonomy_image_url() return the taxonomy image url as a string so you can put it in any &lt;img \/&gt; tag with support of the following parameters:\n<ul>\n<li>$term_id, the category or taxonomy ID, default NULL<\/li>\n<li>$size, default &#8216;full&#8217;<\/li>\n<li>$return_placeholder, default FALSE<\/li>\n<\/ul>\n<\/li>\n<li>z_taxonomy_image() return category or taxonomy image as html with support of the following parameters:\n<ul>\n<li>$term_id, the category or taxonomy ID, default NULL<\/li>\n<li>$size, image size (check\u00a0<a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/wp_get_attachment_image_src\">here<\/a>\u00a0for more about WordPress image resizing), default &#8216;full&#8217;<\/li>\n<li>$attr, array of some html img tag attributes like: (default NULL)\u00a0please check parameter $attr <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_get_attachment_image\">here<\/a>\n<ul>\n<li>alt, default is the image\u00a0file name<\/li>\n<li>class, default is &#8216;attachment-$size&#8217;<\/li>\n<li>height, default\u00a0none<\/li>\n<li>width, default none<\/li>\n<li>title, default none<\/li>\n<\/ul>\n<\/li>\n<li>$echo, to enable or disable printing out\u00a0the html, default TRUE.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div><strong>Using inside a loop:<\/strong><\/div>\n<div><\/div>\n<div>use the following code in anywhere at your wordpress theme, here is an example:<\/div>\n<div><\/div>\n<div>If \u00a0looping for categories:<\/div>\n<pre class=\"lang:php decode:true\">&lt;ul&gt;\n&lt;?php foreach (get_categories() as $cat) : ?&gt;\n&lt;li&gt;\n&lt;img src=\"&lt;?php echo z_taxonomy_image_url($cat-&gt;term_id); ?&gt;\" \/&gt;\n&lt;a href=\"&lt;?php echo get_category_link($cat-&gt;term_id); ?&gt;\"&gt;&lt;?php echo $cat-&gt;cat_name; ?&gt;&lt;\/a&gt;\n&lt;\/li&gt;\n&lt;?php endforeach; ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>or<\/p>\n<pre class=\"lang:php decode:true\">&lt;ul&gt;\n&lt;?php foreach (get_categories() as $cat) : ?&gt;\n&lt;li&gt;\n&lt;?php z_taxonomy_image($cat-&gt;term_id); ?&gt;\n&lt;a href=\"&lt;?php echo get_category_link($cat-&gt;term_id); ?&gt;\"&gt;&lt;?php echo $cat-&gt;cat_name; ?&gt;&lt;\/a&gt;\n&lt;\/li&gt;\n&lt;?php endforeach; ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>If looping for taxonomies:<\/p>\n<pre class=\"lang:php decode:true\">&lt;ul&gt;\n&lt;?php foreach (get_terms('your_taxonomy') as $cat) : ?&gt;\n&lt;li&gt;\n&lt;img src=\"&lt;?php echo z_taxonomy_image_url($cat-&gt;term_id); ?&gt;\" \/&gt;\n&lt;a href=\"&lt;?php echo get_term_link($cat-&gt;slug, 'your_taxonomy'); ?&gt;\"&gt;&lt;?php echo $cat-&gt;name; ?&gt;&lt;\/a&gt;\n&lt;\/li&gt;\n&lt;?php endforeach; ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>or<\/p>\n<pre class=\"lang:php decode:true \">&lt;ul&gt;\n&lt;?php foreach (get_terms('your_taxonomy') as $cat) : ?&gt;\n&lt;li&gt;\n&lt;?php z_taxonomy_image($cat-&gt;term_id); ?&gt;\n&lt;a href=\"&lt;?php echo get_term_link($cat-&gt;slug, 'your_taxonomy'); ?&gt;\"&gt;&lt;?php echo $cat-&gt;name; ?&gt;&lt;\/a&gt;\n&lt;\/li&gt;\n&lt;?php endforeach; ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>If your post had more than one category and you want to loop for all post categories use the following example:<\/p>\n<pre class=\"lang:php decode:true\">&lt;ul&gt;\n&lt;?php foreach (get_the_category() as $cat) : ?&gt;\n&lt;li&gt;\n&lt;img src=\"&lt;?php echo z_taxonomy_image_url($cat-&gt;term_id); ?&gt;\" \/&gt;\n&lt;a href=\"&lt;?php echo get_category_link($cat-&gt;term_id); ?&gt;\"&gt;&lt;?php echo $cat-&gt;cat_name; ?&gt;&lt;\/a&gt;\n&lt;\/li&gt;\n&lt;?php endforeach; ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>or<\/p>\n<pre class=\"lang:php decode:true \">&lt;ul&gt;\n&lt;?php foreach (get_the_category() as $cat) : ?&gt;\n&lt;li&gt;\n&lt;?php z_taxonomy_image($cat-&gt;term_id); ?&gt;\n&lt;a href=\"&lt;?php echo get_category_link($cat-&gt;term_id); ?&gt;\"&gt;&lt;?php echo $cat-&gt;cat_name; ?&gt;&lt;\/a&gt;\n&lt;\/li&gt;\n&lt;?php endforeach; ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>And if your post had more than one taxonomy and you want to loop for all post taxonomies use the following example:<\/p>\n<pre class=\"lang:php decode:true \">&lt;ul&gt;\n&lt;?php foreach (get_the_terms(get_the_ID(), 'your_taxonomy') as $cat) : ?&gt;\n&lt;li&gt;\n&lt;img src=\"&lt;?php echo z_taxonomy_image_url($cat-&gt;term_id); ?&gt;\" \/&gt;\n&lt;a href=\"&lt;?php echo get_term_link($cat-&gt;term_id, 'your_taxonomy'); ?&gt;\"&gt;&lt;?php echo $cat-&gt;name; ?&gt;&lt;\/a&gt;\n&lt;\/li&gt;\n&lt;?php endforeach; ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>or<\/p>\n<pre class=\"lang:php decode:true \">&lt;ul&gt;\n&lt;?php foreach (get_the_terms(get_the_ID(), 'your_taxonomy') as $cat) : ?&gt;\n&lt;li&gt;\n&lt;?php z_taxonomy_image($cat-&gt;term_id); ?&gt;\n&lt;a href=\"&lt;?php echo get_term_link($cat-&gt;term_id, 'your_taxonomy'); ?&gt;\"&gt;&lt;?php echo $cat-&gt;name; ?&gt;&lt;\/a&gt;\n&lt;\/li&gt;\n&lt;?php endforeach; ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p><strong>Using resizing feature:<\/strong><\/p>\n<p>To resize category image simply add the size as a second parameter, for example:<br \/>\nif in category or taxonomy template:<\/p>\n<pre class=\"lang:php decode:true \">&lt;img src=\"&lt;?php echo z_taxonomy_image_url(NULL, 'thumbnail'); ?&gt;\" \/&gt;<\/pre>\n<p>or<\/p>\n<pre class=\"lang:php decode:true \">&lt;?php z_taxonomy_image(NULL, 'thumbnail'); ?&gt;<\/pre>\n<p>or if inside a loop:<\/p>\n<pre class=\"lang:php decode:true \">&lt;ul&gt;\n&lt;?php foreach (get_the_terms(get_the_ID(), 'your_taxonomy') as $cat) : ?&gt;\n&lt;li&gt;\n&lt;img src=\"&lt;?php echo z_taxonomy_image_url($cat-&gt;term_id, 'medium'); ?&gt;\" \/&gt;\n&lt;a href=\"&lt;?php echo get_term_link($cat-&gt;term_id, 'your_taxonomy'); ?&gt;\"&gt;&lt;?php echo $cat-&gt;name; ?&gt;&lt;\/a&gt;\n&lt;\/li&gt;\n&lt;?php endforeach; ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>you can choose to resize from these (thumbnail, medium, large, full) or any custom sizes, also you can use it as array with dimensions for example:<\/p>\n<pre class=\"lang:default decode:true \">&lt;img src=\"&lt;?php echo z_taxonomy_image_url(NULL, array(300, 250)); ?&gt;\" \/&gt;<\/pre>\n<p>or<\/p>\n<pre class=\"lang:php decode:true \">&lt;?php z_taxonomy_image(NULL, array(300, 250)); ?&gt;<\/pre>\n<p>Please check WordPress codex <a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/wp_get_attachment_image_src\">here<\/a> for more information about resizing.<\/p>\n<p>To display image with support for alt, class, width and height, you can do as this example:<\/p>\n<pre class=\"lang:php decode:true\">&lt;?php\n$attr = array(\n'class' =&gt; 'category_image',\n'alt' =&gt; 'image alt',\n'height' =&gt; 200,\n'width' =&gt; 300,\n'title' =&gt; 'category title',\n);\nz_taxonomy_image(NULL, 'full', $attr); ?&gt;<\/pre>\n<h3>Shortcode Usage Guide<\/h3>\n<p>Use these shortcodes to display taxonomy images anywhere on your site.<\/p>\n<hr \/>\n<h4>1. Single Term Image:\u00a0 <code>[z_taxonomy_image]<\/code><\/h4>\n<p>Displays the image for a specific term (Category, Tag, etc).<\/p>\n<table class=\"widefat striped\">\n<thead>\n<tr>\n<th>Attribute<\/th>\n<th>Description<\/th>\n<th>Default<\/th>\n<th>Example<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>term_id<\/code><\/td>\n<td>ID of the term. Auto-detects on archive pages.<\/td>\n<td>Current<\/td>\n<td><code>term_id=\"12\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>taxonomy<\/code><\/td>\n<td>Taxonomy slug (category, post_tag).<\/td>\n<td>category<\/td>\n<td><code>taxonomy=\"post_tag\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>size<\/code><\/td>\n<td>Image size (thumbnail, medium, full).<\/td>\n<td>full<\/td>\n<td><code>size=\"thumbnail\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>link<\/code><\/td>\n<td>Link image to term archive? (yes, no, custom_url)<\/td>\n<td>no<\/td>\n<td><code>link=\"yes\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>class<\/code><\/td>\n<td>Custom CSS class for the image.<\/td>\n<td>Empty<\/td>\n<td><code>class=\"my-style\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>default<\/code><\/td>\n<td>Fallback image URL if none exists. Set\u00a0<code>default=\"\"<\/code>\u00a0or just\u00a0<code>default<\/code>\u00a0for plugin placeholder.<\/td>\n<td>None<\/td>\n<td><code>default<\/code>\u00a0or\u00a0<code>default=\"https:\/\/...\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>format<\/code><\/td>\n<td>Output format (img, url).<\/td>\n<td>img<\/td>\n<td><code>format=\"url\"<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Example:<\/strong>\u00a0<code>[ z_taxonomy_image term_id=\"5\" size=\"medium\" link=\"yes\" ]<\/code><\/p>\n<p><strong>Example (with placeholder):<\/strong>\u00a0<code>[ z_taxonomy_image default ]<\/code><\/p>\n<p><strong>PHP Example:<\/strong><\/p>\n<pre><code>&lt;?php echo do_shortcode('[ z_taxonomy_image term_id=\"5\" size=\"medium\" link=\"yes\" ]'); ?&gt;<\/code><\/pre>\n<hr \/>\n<h4>2. Taxonomy List:\u00a0 <code>[ z_taxonomy_list ]<\/code><\/h4>\n<p>Displays a list of terms with their images.<\/p>\n<table class=\"widefat striped\">\n<thead>\n<tr>\n<th>Attribute<\/th>\n<th>Description<\/th>\n<th>Default<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>taxonomy<\/code><\/td>\n<td>Taxonomy to list terms from.<\/td>\n<td>category<\/td>\n<\/tr>\n<tr>\n<td><code>post_id<\/code><\/td>\n<td>Get terms assigned to this Post. Use &#8216;current&#8217; for active post.<\/td>\n<td>Empty<\/td>\n<\/tr>\n<tr>\n<td><code>include<\/code><\/td>\n<td>Comma-separated list of Term IDs to include.<\/td>\n<td>Empty<\/td>\n<\/tr>\n<tr>\n<td><code>exclude<\/code><\/td>\n<td>Comma-separated list of Term IDs to exclude.<\/td>\n<td>Empty<\/td>\n<\/tr>\n<tr>\n<td><code>parent<\/code><\/td>\n<td>Parent Term ID (0 for top-level).<\/td>\n<td>Empty<\/td>\n<\/tr>\n<tr>\n<td><code>orderby<\/code><\/td>\n<td>Sort by (name, count, id, slug).<\/td>\n<td>name<\/td>\n<\/tr>\n<tr>\n<td><code>order<\/code><\/td>\n<td>Sort order (ASC, DESC).<\/td>\n<td>ASC<\/td>\n<\/tr>\n<tr>\n<td><code>hide_empty<\/code><\/td>\n<td>Hide terms with no posts? (yes\/no)<\/td>\n<td>yes<\/td>\n<\/tr>\n<tr>\n<td><code>size<\/code><\/td>\n<td>Image size name.<\/td>\n<td>full<\/td>\n<\/tr>\n<tr>\n<td><code>style<\/code><\/td>\n<td>Layout style:\u00a0<code>list<\/code>,\u00a0<code>grid<\/code>,\u00a0<code>inline<\/code>.<\/td>\n<td>list<\/td>\n<\/tr>\n<tr>\n<td><code>columns<\/code><\/td>\n<td>Number of columns (for grid style).<\/td>\n<td>3<\/td>\n<\/tr>\n<tr>\n<td><code>show_name<\/code><\/td>\n<td>Show term name? (yes\/no)<\/td>\n<td>no<\/td>\n<\/tr>\n<tr>\n<td><code>show_count<\/code><\/td>\n<td>Show post count? (yes\/no)<\/td>\n<td>no<\/td>\n<\/tr>\n<tr>\n<td><code>format<\/code><\/td>\n<td>Output format (img, array).<\/td>\n<td>img<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Example (Grid):<\/strong>\u00a0<code>[ z_taxonomy_list style=\"grid\" columns=\"4\" show_name=\"yes\" ]<\/code><\/p>\n<p><strong>Example (Current Post Tags):<\/strong>\u00a0<code>[ z_taxonomy_list taxonomy=\"post_tag\" post_id=\"current\" style=\"inline\" ]<\/code><\/p>\n<p><strong>PHP Example:<\/strong><\/p>\n<pre><code>&lt;?php echo do_shortcode('[ z_taxonomy_list style=\"grid\" columns=\"4\" show_name=\"yes\" ]'); ?&gt;<\/code><\/pre>\n<p>if there were any bugs or you faced any problems please reply to this post, if I had more time I will update this plugin and add more features.<\/p>\n<p><strong>Update 06-10-2012:<\/strong> Finally I got some time to test the plugin in WordPress MU and now I confirm that the plugin works so fine whether you choose to activate the plugin by blog or using network activation from your network control panel<\/p>\n<p><strong>Update 25-01-2013:<\/strong> A great update had been made to this plugin, and hope you liked it, Thank so much to Joe Tse\u00a0<a href=\"http:\/\/tkjune.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/tkjune.com<\/a><\/p>\n<p><strong>Update 14-06-2013:<\/strong> I had updated the plugin with some new features like using WordPress new media uploader and new sub menu (Categories Images) in Settings menu allowing you to exclude any taxonomies from the plugin, this for fixing and avoiding any conflicts with another plugins like WooCommerce plugin, hope you all like the last update.<\/p>\n<p><strong>Update 20-12-2013:<\/strong> I had updated the plugin with new features like resizing images please check the docs above for more help about using this new feature, and also adding support for Spanish language. Thanks so much to\u00a0<a href=\"http:\/\/webhostinghub.com\">Maria Ramos<\/a>\u00a0and to\u00a0Rahil Wazir for their help.<\/p>\n<p><strong>Update 2.5 28-03-2015:\u00a0<\/strong>A nice\u00a0update\u00a0which introduce a new function to display category or taxonomy image directly with support for size and alt\u00a0and more attributes, please check the documentation above. Also adding support for\u00a0Ukrainian language, thanks so much to\u00a0<a href=\"http:\/\/getvoip.com\">Michael Yunat<\/a>.<\/p>\n<p><strong>Update 3.3.0 19-12-2025:<\/strong> A major and significant update that introduce several major features like wordpress api support, new shortcodes, and elementor integration<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Categories Images is a WordPress plugin which allow you to add an image for each category (or term), it is so easy to user. This plugin will create [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,10,6,9],"tags":[14,18,16,19,15,17],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-general","category-plugins","category-programming","category-wordpress","tag-categories-images","tag-category-image","tag-plugins-2","tag-taxonomy-image","tag-wordpress-2","tag-wordpress-plugins"],"_links":{"self":[{"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":80,"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/posts\/39\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahlan.net\/blog\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}