{"id":1957566,"date":"2019-10-18T13:19:50","date_gmt":"2019-10-18T20:19:50","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/add-a-list-of-category-links-below-the-search-bar\/"},"modified":"2024-09-06T12:04:51","modified_gmt":"2024-09-06T16:04:51","slug":"add-a-list-of-category-links-below-the-search-bar-2","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/add-a-list-of-category-links-below-the-search-bar-2\/","title":{"rendered":"List Event Categories Below the Calendar Search"},"content":{"rendered":"\n\n\n

Event views do not include a clickable list of categories by default. It’s possible to add this sort of functionality by installing Filter Bar<\/a> or, depending on your needs, The Events Calendar Category Colors<\/a>. Both are great but, sometimes, they may offer more than you need or you may prefer to start with a simpler custom solution that you can better adjust to fit your exact needs.<\/p>\n\n\n\n

In this snippet, we are going to add a list of clickable event category links below the event search bar. The code can easily be tweaked and adapted as needed. Here it is:<\/p>\n\n\n

\n\/**\n * Add a list of clickable category links below the event\n * search bar.\n *\n * Can be easily styled using the following selector:\n *\n * .the-events-calendar-category-list\n *\/\nadd_action(\n\t'tribe_template_after_include:events\/v2\/components\/events-bar',\n\tfunction() {\n\t\t$terms = get_terms( [ 'taxonomy' => Tribe__Events__Main::TAXONOMY ] );\n\n\t\tif ( empty( $terms ) || is_wp_error( $terms ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\techo '<div class="the-events-calendar-category-list"><ol>';\n\n\t\tforeach ( $terms as $single_term ) {\n\t\t\t$url  = esc_url( get_term_link( $single_term ) );\n\t\t\t$name = esc_html( get_term_field( 'name', $single_term ) );\n\n\t\t\techo "<li><a href='$url'>$name<\/a> <\/li>";\n\t\t}\n\n\t\techo '<\/ol><\/div>';\n\t}\n);\n<\/pre><\/div>\n\n\n
<\/p>\n\n\n\n
The code above displays only categories that have associated events. To show all categories, including those without events, update line 12 with the following code:<\/p>\n\n\n
\n$terms = get_terms( [ 'taxonomy' => Tribe__Events__Main::TAXONOMY, 'hide_empty' => false ] );\n<\/pre><\/div>\n\n\n
This code could be added either to a custom plugin<\/a> (preferred) or else to your theme’s functions.php<\/a> file. Note that the output will be unstyled at this point\u00a0\u2014 but here are some CSS rules that might help get you started on giving them a more aesthetically pleasing appearance (and these can be added using the Appearance \u2192\u00a0Customize \u2192\u00a0Additional CSS<\/strong> feature supported by most modern themes):<\/p>\n\n\n
\n.the-events-calendar-category-list {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  text-align: center;\n}\n\n.the-events-calendar-category-list ol li {\n  display: inline-block;\n  list-style: none;\n  padding: 0.5rem 1rem;\n}\n<\/pre><\/div>\n\n\n
Notes<\/h2>\n\n\n\n
    \n
  • Originally written in November 2018<\/li>\n\n\n\n
  • Tested with The Events Calendar 6.0.2<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Event views do not include a clickable list of categories by default. It’s possible to add this sort of functionality by installing Filter Bar or, depending on your needs, The Events Calendar Category Colors. Both are great but, sometimes, they may offer more than you need or you may prefer to start with a simpler custom solution…<\/p>\n","protected":false},"author":84,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[79],"tags":[23,25,58],"stellar-product-taxonomy":[161],"class_list":["post-1957566","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-snippets","tag-css","tag-customizations","tag-php","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":79,"label":"Snippets"}],"post_tag":[{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"},{"value":58,"label":"PHP"}],"stellar-product-taxonomy":[{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"The Events Calendar Team","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/the_events_calendar_team\/"},"comment_info":0,"category_info":[{"term_id":79,"name":"Snippets","slug":"snippets","term_group":0,"term_taxonomy_id":79,"taxonomy":"category","description":"","parent":0,"count":80,"filter":"raw","term_order":"0","cat_ID":79,"category_count":80,"category_description":"","cat_name":"Snippets","category_nicename":"snippets","category_parent":0}],"tag_info":[{"term_id":23,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":23,"taxonomy":"post_tag","description":"","parent":20,"count":33,"filter":"raw","term_order":"0"},{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":102,"filter":"raw","term_order":"0"},{"term_id":58,"name":"PHP","slug":"php","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":20,"count":78,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1957566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1957566"}],"version-history":[{"count":4,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1957566\/revisions"}],"predecessor-version":[{"id":1962793,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1957566\/revisions\/1962793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1957566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1957566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1957566"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1957566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}