{"id":1945759,"date":"2020-02-12T12:35:43","date_gmt":"2020-02-12T17:35:43","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1945759"},"modified":"2024-02-07T13:17:06","modified_gmt":"2024-02-07T18:17:06","slug":"template-customization-example","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/template-customization-example\/","title":{"rendered":"Template Customization Example"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/43vTN5fFBHw\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<p>The Events Calendar allows you to customize any of the calendar views, including events, venues, and organizers. It uses template overrides, which is a way of modifying templates without touching the source code of the plugins and add-ons. If you&#8217;re unsure what template overrides are or how they work, then you&#8217;ll want to <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/customizing-template-files-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">read up on it<\/a> before proceeding.<\/p>\n\n\n\n<p>We&#8217;re going to look at an example of a template override. In this case, we&#8217;re going to customize the calendar&#8217;s list view template.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/02\/list-view-template-1.png\" alt=\"template override example\" class=\"wp-image-1945770\"\/><figcaption class=\"wp-element-caption\">The calendar in list view<\/figcaption><\/figure>\n\n\n\n<p>Let&#8217;s say we really like the layout in general, but would prefer to get rid of the featured image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/02\/list-featured-image.png\" alt=\"template override example\" class=\"wp-image-1945768\"\/><figcaption class=\"wp-element-caption\">Featured images in the calendar list view<\/figcaption><\/figure>\n\n\n\n<p>Here&#8217;s how we can make that happen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-locate-the-template-file\">Locate the template file<\/h2>\n\n\n\n<p>First off, we need to find where the event template file is located in the plugin files. In this case, we&#8217;re customizing a template in The Events Calendar. That means we can head over here to start looking: <code>\/wp-content\/plugins\/the-events-calendar\/src\/views\/v2<\/code>.<\/p>\n\n\n\n<p>Inside that folder is another one that is called <code>list<\/code> which is perfect because it contains the template files we need to customize the calendar&#8217;s list view.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/02\/list-view-template-directory.png\" alt=\"locating the correct template to override in the code\" class=\"wp-image-1945771\"\/><\/figure>\n\n\n\n<p>The <code>event<\/code>&nbsp;folder appears to be the most relevant we&#8217;re looking for, so let&#8217;s go there. Now, we see there&#8217;s a <code>featured-image.php<\/code> file that looks super promising.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2020\/02\/list-view-event-folder-1024x515.png\" alt=\"finding the correct file path to create a template override\" class=\"wp-image-1945772\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-add-the-copied-template-to-your-theme\">Add the copied template to your theme<\/h2>\n\n\n\n<p>The key part of overriding a template is that we need a place to put our customized template. That&#8217;s what we&#8217;re going to do next.<\/p>\n\n\n\n<p>Head over to your server and open up your theme folder. That&#8217;s located where WordPress is installed in the <code>\/wp-content\/themes<\/code>&nbsp;folder. Your theme will be in there, so let&#8217;s open it up and add a new folder in it called <code>tribe<\/code>. We&#8217;ll want to nest more folders in there so that the exact same folders that are in the plugin folder are in the theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2020\/02\/template-new-folder-1024x443.png\" alt=\"create a new folder in the theme to create a template override\" class=\"wp-image-1945782\"\/><figcaption class=\"wp-element-caption\">We&#8217;ve created a new folder in the theme located at <code>\/tribe\/events\/v2\/list\/event\/<\/code>.<\/figcaption><\/figure>\n\n\n\n<p>That&#8217;s where we can drop in the<code>featured-image.php<\/code> file we copied earlier.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2020\/02\/template-override-example-1024x389.png\" alt=\"add the copied featured image file to create a template override\" class=\"wp-image-1945781\"\/><figcaption class=\"wp-element-caption\">We&#8217;ve added the copied <code>featured-image.php<\/code> template to the theme located at <code>\/tribe\/events\/v2\/list\/event\/<\/code>.<\/figcaption><\/figure>\n\n\n\n<p>Not bad so far? Let&#8217;s move to the next step.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-customize-the-template\">Customize the template<\/h2>\n\n\n\n<p>Now that the <code>featured-image.php<\/code>&nbsp;file is safely in our theme, we can modify it to suit our needs. In this case, we want to remove the featured image. That means we can open up the file and literally erase everything in it. Seriously, select everything and delete it until you&#8217;re left with a blank file, then save your work.<\/p>\n\n\n\n<p>Here&#8217;s what we get when we revisit the event page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2020\/02\/list-featured-image-removed-1024x735.png\" alt=\"how the page appears after the template override\" class=\"wp-image-1945783\"\/><\/figure>\n\n\n\n<p>Heck yeah, the featured image has been removed, which is exactly what we want! <\/p>\n\n\n\n<p>Note that the event description is still not using 100% width as the original CSS class reserves some space for the image, but you can change that by adding the following CSS snippet at <em>wp-admin > Appearance > Customizer > Additional CSS<\/em> section:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-details {\n    width: 100%;\n}\n<\/pre><\/div>\n\n\n<p>Although this is a fairly simple example of what&#8217;s possible with template overrides, the same process applies to every other template file in The Events Calendar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Events Calendar allows you to customize any of the calendar views, including events, venues, and organizers. It uses template overrides, which is a way of modifying templates without touching the source code of the plugins and add-ons. If you&#8217;re unsure what template overrides are or how they work, then you&#8217;ll want to read up&#8230;<\/p>\n","protected":false},"author":3,"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":[84],"tags":[25],"stellar-product-taxonomy":[158,161],"class_list":["post-1945759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-theming-overview","tag-customizations","stellar-product-taxonomy-events-calendar-pro","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":84,"label":"Templating &amp; Layout"}],"post_tag":[{"value":25,"label":"Customizations"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"},{"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":"Jaime Marchwinski","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":84,"name":"Templating &amp; Layout","slug":"theming-overview","term_group":0,"term_taxonomy_id":84,"taxonomy":"category","description":"","parent":24,"count":59,"filter":"raw","term_order":"0","cat_ID":84,"category_count":59,"category_description":"","cat_name":"Templating &amp; Layout","category_nicename":"theming-overview","category_parent":24}],"tag_info":[{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1945759"}],"version-history":[{"count":2,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945759\/revisions"}],"predecessor-version":[{"id":1959346,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945759\/revisions\/1959346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1945759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1945759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1945759"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1945759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}