{"id":25854,"date":"2021-06-19T17:00:24","date_gmt":"2021-06-19T15:00:24","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=25854"},"modified":"2021-06-17T11:44:56","modified_gmt":"2021-06-17T09:44:56","slug":"how-to-display-wordpress-category-description","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-display-wordpress-category-description\/","title":{"rendered":"How to Display a Category Description in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress categories and tags are one the most effective ways of grouping posts into a more logical structure. They have the added benefit of making the posts more accessible to readers and improving the overall user experience on the website. Most WordPress owners use categories and tags for these purposes daily, but they rarely take advantage of their full potential. Even though we will only focus on categories in this article, the same principle applies to the tags as well.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, category pages naturally help with your website\u2019s SEO by providing content that matches certain keywords and phrases. They also serve as a form of navigation through a specific selection of posts that your visitors might be interested in reading. Even so, categories have one feature that is often underutilized on WordPress websites\u2014the description.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Category descriptions complement the category title, providing an insight into the subject matter of the articles within the category. By displaying a description, you can improve traffic to the category pages that have vague or uninteresting titles or those that would otherwise be overlooked by readers. However, despite its usefulness, this feature is underutilized because it isn\u2019t enabled by default in WordPress and depends on the theme you are using. So, in this article, we\u2019ll dig deeper into the subject of WordPress category descriptions and we\u2019ll answer the following questions:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-a-category-description\">How to add a category description in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#display-a-category-description-on-category-archive-pages\">How to display a category description on category archive pages<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#display-a-category-description-across-the-whole-wordpress-website\">How to display a category description across the whole WordPress website<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to display a category description in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]In this article, we will discuss two possible methods of displaying category descriptions in WordPress. Both methods require the use of custom code snippets. The first will enable you to display descriptions on category archive pages\u2014where most users would expect them to be. While the second will provide you with the flexibility to display them on any page of your WordPress website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But, before going any further, you should <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">make a backup of your website<\/a> just in case. Additionally, brushing up on your <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">knowledge of FTP<\/a> is a good idea, as FTP will be necessary for inserting the code correctly. Finally, it is important to note that this article is geared more towards intermediate and advanced WordPress users. Meaning, even though we tried to clarify all the points in this article, depending on your WordPress knowledge, you might need to do additional research. And with that out of the way, let\u2019s begin.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"add-a-category-description\"><\/a>How to add a category description in WordPress<\/h3>\n<p>[\/vc_column_text][vc_column_text]Before we can explore how to display a WordPress category description, we need to explain how this description is added. To add a description to a category, <strong>navigate to Posts &gt; Categories<\/strong> first. There, you will see two sections \u2013 one for adding new categories and the other that displays the list of your existing categories.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>To add a new category, fill out the <em>Add New Category<\/em> form<\/strong> on the left. This includes adding a name, category slug, assigning a parent category (if needed), and adding the description within the Description field. <strong>When you\u2019re done, press the <em>Add New Category<\/em> button<\/strong> below to create your new category.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"621\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Category-Description.jpg\" class=\"attachment-full size-full\" alt=\"Adding Category Description\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Category-Description.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Category-Description-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Category-Description-768x492.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Category-Description-620x397.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the other hand, if you want to add or edit the description for an existing category, you need to <strong>find it within the list of existing categories on the right<\/strong>, first. You\u2019ll need to<strong> hover over it to reveal the additional options<\/strong>. Finally, to add a new description or edit the existing one, <strong>press the <em>Edit<\/em> option<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category.jpg\" class=\"attachment-full size-full\" alt=\"Edit Post Category\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open the edit screen of your chosen category, where you can <strong>edit its description in the Description field<\/strong>. To save the information you inserted, <strong>press the <em>Update<\/em> button<\/strong> at the bottom.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"593\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Category.jpg\" class=\"attachment-full size-full\" alt=\"Edit Category\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Category.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Category-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Category-768x470.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Category-620x379.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"display-a-category-description-on-category-archive-pages\"><\/a>How to display a category description on category archive pages<\/h3>\n<p>[\/vc_column_text][vc_column_text]Even though you may expect a category archive page to show a category description after you\u2019ve added it in the previous step, this won\u2019t happen. Displaying category descriptions is not the default WordPress behavior and it depends entirely on the theme you are using. Some themes choose to display the description on category archive pages, while others do not. Therefore, the first method that we\u2019ll cover is how to show a category description on a category archive page regardless of the theme you are using.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In general, to display the category description, you only need to use <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_archive_description\/\" target=\"_blank\" rel=\"noopener\">the_archive_description()<\/a> function. As you can see on the linked page, the function displays the description for archives (category, tag, term, or author) if they\u2019ve been inserted previously. Meaning, the code can also be used to display descriptions for other archives, if they\u2019ve been added. Additionally, it allows you to specify the HTML element that wraps that description.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The following code would display the archive description wrapped with a div HTML element that has the class <strong>qodef-category-description.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">the_archive_description( '&lt;div class=\"qodef-category-description\"&gt;', '&lt;\/div&gt;' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For it to display the archive description, you would need to insert it inside the appropriate theme template file. That file could be the category.php file or the archive.php file, or some other template file, depending on the file structure of your theme. However, as directly changing the template files of your theme isn\u2019t good coding practice, we\u2019ll explain how you can achieve the same result using hooks.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The reason you shouldn\u2019t be editing the template files of your theme, apart from possibly breaking your website, is that any edits will be lost after you <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-update-a-wordpress-theme-without-losing-customization\/\">update the theme<\/a>. Instead, the custom code that you create should be \u201chooked\u201d onto an appropriate <a href=\"https:\/\/developer.wordpress.org\/plugins\/hooks\/\" target=\"_blank\" rel=\"noopener\">hook<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To help you understand this concept, think of hooks as small code placeholders that developers leave inside the files. By \u201chooking\u201d your code onto them, you will achieve the same functionality as if the code was directly placed inside the template file in the same location as the placeholder hook. The benefit of doing this is that you can insert the whole hooked code via FTP inside the functions.php file of your child theme or a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>, thus making it safe against theme updates.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are two types of hooks\u2014action hooks, used for adding new features, and filter hooks, used for changing existing features. Since our goal is to display the category description, which wasn\u2019t displayed previously, we would need to use an action hook. With that in mind, we created the example code you can see below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( ! function_exists( 'your_function_name' ) ) {\r\nfunction your_function_name() {\r\nif ( is_category() ) {\r\nthe_archive_description( '&lt;div class=\"qodef-category-description\"&gt;', '&lt;\/div&gt;' );\r\n}\r\n}\r\nadd_action( 'your_hook_name', 'your_function_name' );\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s break this code down.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It represents a function called <strong>your_function_name()<\/strong> which is called using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener\">add_action()<\/a> function onto the hook called<strong> your_hook_name<\/strong>. The function is only executed if a function with the same name doesn\u2019t already exist. As for the main part of the code, it displays the archive description using the the_archive_description() function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since we only want to display the description of category pages, we wrapped the code with an <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/is_category\/\" target=\"_blank\" rel=\"noopener\">is_category()<\/a> conditional statement. Meaning, the description will only be shown on the category archive page. Needless to say, to properly use this code, you need to replace the <strong>your_function_name<\/strong> and <strong>your_hook_name<\/strong> parts accordingly.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While coming up with a name for the function isn\u2019t hard (you can use any name that you find fitting), picking the appropriate hook to use can be quite challenging. You will need to either review the files of your theme to find the most suitable hook or consult with your theme authors about this matter.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For this article, we decided to use <strong>display_description_on_category_archive_pages<\/strong> as the function\u2019s name and <strong>lekker_action_before_page_content_holder<\/strong> as the action hook. The code we ended up using is shown below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( ! function_exists( 'display_description_on_category_archive_pages' ) ) {\r\nfunction display_description_on_category_archive_pages() {\r\nif ( is_category() ) {\r\nthe_archive_description( '&lt;div class=\"qodef-category-description\"&gt;', '&lt;\/div&gt;' );\r\n}\r\n}\r\nadd_action( 'lekker_action_before_page_content_holder', 'display_description_on_category_archive_pages' );\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, since it contains a hook specific to <a href=\"https:\/\/lekker.qodeinteractive.com\/\" target=\"_blank\" rel=\"noopener\">the Lekker theme<\/a>, this code can\u2019t be copy-pasted to other themes. You need to alter the example given above with your unique function name and a hook specific to the theme you are using. <strong>After you create the code, it should be inserted either in the functions.php file of your child theme or inside a site-specific plugin.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019ve inserted the code into an appropriate location, you will see the category description displayed on the category archive pages. Often, this description requires additional CSS code to style it so it matches the theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, CSS code like that is created on a case-by-case basis. Therefore, you will need to create a unique piece of CSS code that fits your theme design and your website as a whole. To help you style the description, you can use a helpful CSS selector. The one we added to the code so we can use it for stylization now is the <strong>qodef-category-description<\/strong> class that was inserted in the wrapping div HTML element.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, we used the following CSS code:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-category-description {\r\nmargin: 40px 0;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And this has created the following result on an archive page from the Lekker theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"538\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-1.jpg\" class=\"attachment-full size-full\" alt=\"Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-1-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-1-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-1-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"display-a-category-description-across-the-whole-wordpress-website\"><\/a>How to display a category description across the whole WordPress website<\/h3>\n<p>[\/vc_column_text][vc_column_text]While it\u2019s quite an improvement to be able to display the category description at all, some WordPress users may be constrained if it\u2019s only displayed on category archive pages. This method is for all of you who want to display the description across the whole of your website, including pages and posts.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We enabled this functionality by creating the following code:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( ! function_exists( 'qodef_categories_with_descriptions_list' ) ) {\r\nfunction qodef_categories_with_descriptions_list( $atts ) {\r\n$default_atts = array(\r\n\"cat_ids\" =&gt; ''\r\n);\r\n$params = shortcode_atts( $default_atts, $atts );\r\n$categories = array();\r\nif ( ! empty( $params['cat_ids'] ) ) {\r\n$categories = explode( ',', $params['cat_ids'] );\r\n}\r\n$output = \"&lt;div class='category-list'&gt;\";\r\nif ( ! empty( $categories ) ) {\r\nforeach ( $categories as $category_id ) {\r\nif ( ! is_wp_error( get_the_category_by_ID( $category_id ) ) ) {\r\n$output .= \"&lt;div class='list-item'&gt;&lt;h4&gt;&lt;a href='\" . esc_url( get_category_link( $category_id ) ) . \"' class='category-link'&gt;\" . get_the_category_by_ID( $category_id ) . \"&lt;\/a&gt;&lt;\/h4&gt;\";\r\n$output .= category_description( $category_id ) . \"&lt;\/div&gt;\";\r\n} else {\r\n$output .= \"&lt;div class='not-valid'&gt;\" . esc_html__( 'Not a valid ID.', 'textdomain' ) . \"&lt;\/div&gt;\";\r\n}\r\n}\r\n} else {\r\n$output .= \"&lt;div class='no-value'&gt;\" . esc_html__( 'No category IDs were inserted.', 'textdomain' ) . \"&lt;\/div&gt;\";\r\n}\r\n$output .= \"&lt;\/div&gt;\";\r\nreturn $output;\r\n}\r\nadd_shortcode( 'categories_with_descriptions', 'qodef_categories_with_descriptions_list' );\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s consider this code more closely.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It represents a custom shortcode called <strong>categories_with_descriptions<\/strong>. It was created using the <strong>qodef_categories_with_descriptions_list()<\/strong> function and registered as a shortcode using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\" target=\"_blank\" rel=\"noopener\">add_shortcode()<\/a> function. Instead of going any further into details about every part of the code, we\u2019ll give you a general overview of what the expected outcomes of this shortcode are and how it should be used.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This custom shortcode accepts only one parameter called <strong>cat_ids<\/strong>, which has an empty string as the default value. The <strong>cat_ids<\/strong> parameter represents the list of category IDs you should insert, separated only by a comma (,). Based on the values you insert, three different outcomes are possible.<strong> If nothing was inserted, a message stating <em>No category IDs were inserted.<\/em> is displayed. Otherwise, for every invalid entry, be it an invalid ID or something that isn\u2019t ID at all, a message stating <em>Not a valid ID<\/em>. is shown. Finally, for every valid category ID, its name and description are shown, with the category name linking to the category archive page.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you understand what this shortcode is supposed to do, let\u2019s see how you can use it. As we mentioned above, it accepts a list of category IDs as the only parameter. Therefore, to use it you need to know how to find the ID of a given post category.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do that, <strong>navigate to the Post &gt; Categories section<\/strong> and<strong> click on the <em>Edit<\/em> button next to one of your categories<\/strong> to figure out its ID.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category.jpg\" class=\"attachment-full size-full\" alt=\"Edit Post Category\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Post-Category-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open the categories\u2019 edit screen. You\u2019ll be able to find the ID of the category by <strong>reviewing the URL of the page. The ID is the number located after the part of the URL with <em>category&amp;tag_ID=<\/em><\/strong>. In our example below, the category ID is 16.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Category-ID.jpg\" class=\"attachment-full size-full\" alt=\"Category ID\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Category-ID.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Category-ID-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Category-ID-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Category-ID-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Afterward, you can simply return to the Dashboard, without editing anything on the previous screen.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019ve found the IDs of all the categories you wish to display using this shortcode, we can take a look at how such a shortcode is used.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use a custom shortcode, you need to insert its call within an appropriate shortcode for adding text. Depending on which page builder plugin you\u2019re using, these shortcodes for adding text can have different names. For Elementor, it is the Text Editor. For WP Bakery, it is the Text Block. And for Gutenberg, it is a specialized Shortcode block.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Similarly, <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-shortcode-to-wordpress-widget\/\">shortcodes can be used as widgets<\/a> as well. To use them as widgets, you will need to insert the shortcode call inside a Text widget. We covered this in detail in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/\">custom shortcodes<\/a>, so you can read through it if you\u2019d like to learn more. However, for this current article, we\u2019ll focus on showing you how to use a shortcode inside a Text widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Navigate to Appearance &gt; Widgets.<\/strong> Then <strong>find a widget area where you wish to show your shortcode,<\/strong> and<strong> add a Text widget to it.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To display the shortcode, <strong>you need to insert its shortcode call inside the Visual tab of the Text widget.<\/strong> For widgets that don\u2019t accept any parameters inserting<strong> [shortcode_name]<\/strong> is sufficient. Please note, the shortcode_name text should be replaced with the actual name of your shortcode. In our case, since our shortcode is named categories_with_descriptions, that shortcode call would be <strong>[categories_with_descriptions]<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, since our shortcode accepts a parameter, that means we need to add it as well, alongside the value(s) we want to be used as the parameter value(s). As we mentioned earlier, our shortcode accepts a single parameter called <strong>cat_ids<\/strong>, which should be a list of category IDs, separated only by commas(,). This list of category IDs should be placed in quotes and, if you only add a single category ID, no comma is needed.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Possible examples:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>shortcode call with a single category ID<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[categories_with_descriptions cat_ids = \u201c16\u201d]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>shortcode call with multiple category IDs<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[categories_with_descriptions cat_ids = \u201c18,35,120,185\u201d]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As you can see, example a) shows how to insert a shortcode call for a single category whose ID is 16. On the other hand, example b) shows how to insert a shortcode call for multiple categories whose IDs, in this case, are 18, 35, 120, and 185. Keep in mind, you need to replace these example IDs with appropriate category IDs found on your website. Also, you can add as many category IDs as you see fit, as long as they follow the structure shown in the examples above.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After inserting the appropriate shortcode call inside the Visual tab of the Text widget, <strong>press the <em>Save<\/em> button<\/strong> to save your input.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"653\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Insert-in-a-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Insert in a Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Insert-in-a-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Insert-in-a-Widget-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Insert-in-a-Widget-768x518.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Insert-in-a-Widget-620x418.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, examine a page where this widget area is displayed to observe the output. Similar to the case from the previous section\u2014this shortcode enables a new functionality but its design might need additional styling with CSS code. This CSS is also created on a case-by-case basis. Meaning, you will need to create it yourself so that it suits your website\u2019s current design. You can use some of the CSS classes we left in the HTML markup of the shortcode to help you create suitable CSS selectors for that CSS.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For our example, we only needed a little bit of CSS, and it\u2019s shown below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.category-list .list-item {\r\npadding-bottom: 5px;\r\nborder-bottom: 1px dotted black;\r\n}\r\n.category-list .list-item h4 {\r\nfont-size: 26px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After adding it, we got the following result.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"513\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-2.jpg\" class=\"attachment-full size-full\" alt=\"Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-2-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-2-768x407.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Result-2-620x328.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Since properly styling the output of this shortcode requires additional CSS code, it is also important to know<strong> where to place that CSS code<\/strong>. Most WordPress users can simply insert it under Appearance &gt; Customize &gt; Additional CSS. The alternative is inserting it within a suitable plugin for adding CSS code, provided you\u2019ve tested the plugin\u2019s compatibility before.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, more advanced WordPress users should place it in a separate file and enqueue it using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_style()<\/a> function. If you\u2019d like to learn more about <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enque-scripts-wordpress\/\">enqueueing scripts and styles<\/a>, you can take a look at the linked article for more information.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With this, we conclude our article on displaying category descriptions in WordPress.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]WordPress category descriptions reveal more information about a category and attract visitors to access posts they might have missed if they only had the category title to go off of. However, WordPress doesn\u2019t have a default feature for showing category descriptions. Instead, you\u2019ll need to use custom code to display them.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we provided some code examples you can use and covered two different ways to show category descriptions. It\u2019s up to you whether you want to show the descriptions on category archive pages alone, or if you want to show them on any page. Additionally, we covered important intermediate and advanced WordPress topics like the creation of custom shortcodes and their use, as well as the use of WordPress hooks. We hope you found this article useful for adding a WordPress category description as well as expanding your existing WordPress knowledge.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Help keep your visitors informed and engaged by showing a WordPress category description on archive pages or across your whole site.<\/p>\n","protected":false},"author":11229,"featured_media":25856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,4,13],"class_list":["post-25854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=25854"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25854\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/25856"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=25854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=25854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=25854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}