{"id":2533,"date":"2026-10-20T08:34:14","date_gmt":"2026-10-20T07:34:14","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/style-category-icons-under-search-bar\/"},"modified":"2026-10-20T08:41:01","modified_gmt":"2026-10-20T07:41:01","slug":"style-category-icons-under-search-bar","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/style-category-icons-under-search-bar\/","title":{"rendered":"How to style the category icons under the search bar"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The row of categories you often see under a directory search bar is the GD &gt; Categories block (<code>&#091;gd_categories&#093;<\/code>). Its design options handle most layouts without CSS, including your own image icons and hiding the listing counts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use your own icon images<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each category has three image settings at Places &gt; Categories:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Category Icon<\/em>: a Font Awesome icon. When this is set, it is used in the categories list.<\/li>\n\n\n\n<li><em>Map Icon<\/em>: an uploaded image used for map markers. When no Category Icon is set, the list shows this image instead.<\/li>\n\n\n\n<li><em>Default Listing Image<\/em>: a larger image. Tick <em>Use category image<\/em> in the block to show this instead of the icons.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">To show your own transparent PNG icons, leave Category Icon empty and upload the PNG as the Map Icon, or use Default Listing Image with <em>Use category image<\/em>. See <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/first-steps\/create-a-category\/\">Create a Category<\/a> for the category screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Layout options in the block<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Design Type<\/em>: Icon Left, Icon Top or Image Background.<\/li>\n\n\n\n<li><em>Row Items<\/em>: how many categories sit on one row on desktop.<\/li>\n\n\n\n<li><em>Icon Size<\/em>, card colour, card shadow and inside padding.<\/li>\n\n\n\n<li><em>Hide Count<\/em>: removes the number of listings. In the shortcode use <code>hide_count=&quot;1&quot;<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">An example for a row of six categories with the icon on top and no counts:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-text\">&#091;gd_categories post_type=&quot;gd_place&quot; design_type=&quot;icon-top&quot; row_items=&quot;6&quot; hide_count=&quot;1&quot;&#093;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The full list is in <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/gd-categories\/\">GD &gt; Categories<\/a>. To restyle the search bar above it, see <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/advanced-search\/how-to-adjust-the-gd-search-bar-with-css\/\">How to Adjust the GD Search Bar with CSS<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The row of categories you often see under a directory search bar is the GD &gt; Categories block (&#091;gd_categories&#093;). Its design options handle most layouts without CSS, including your own image icons and hiding the listing counts. Use your own icon images Each category has three image settings at Places &gt; Categories: To show your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[213,422],"class_list":["post-2533","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-extensions-features","gd_placecategory-core-widgets"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=2533"}],"version-history":[{"count":1,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2533\/revisions"}],"predecessor-version":[{"id":2711,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2533\/revisions\/2711"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=2533"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=2533"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=2533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}