{"id":1945753,"date":"2020-02-12T11:18:44","date_gmt":"2020-02-12T16:18:44","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1945753"},"modified":"2024-08-20T11:17:32","modified_gmt":"2024-08-20T15:17:32","slug":"customizing-template-files-2","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/customizing-template-files-2\/","title":{"rendered":"Customizing Template Files"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/_XwOHfEh904\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n<p>The Events Calendar comes with a number of template files that determine how the plugin looks and behaves. We call these <em>views<\/em>. You can customize these files by placing copies of them in your theme. <\/p>\n\n<p><strong>It\u2019s important that you don\u2019t edit the view files directly in the plugin.<\/strong> Instead, we recommend overriding the files in your theme, which is what we are going to cover in this guide. This ensures that any changes you make to the files will not be lost when new versions of the plugins are released. In fact, we strongly recommend keeping your custom calendar view templates in a <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">child theme<\/a>, especially if you use a third-party theme that releases new versions. <a href=\"https:\/\/wordpress.org\/plugins\/child-theme-configurator\/\" target=\"_blank\" rel=\"noreferrer noopener\">This plugin<\/a> can be helpful for creating child themes. The Events Calendar will ensure that your modified files, in the correct folder, will override the plugin files.<\/p>\n\n<p>OK, now that we&#8217;ve established some housekeeping rules, let&#8217;s dig into the process of customizing template files by overriding them in your theme.<br><\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/evnt.is\/1b8n\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/06\/evergreen-ad-events-calendar-1024x384.png\" alt=\"\" class=\"wp-image-1953182\"\/><\/a><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"h-locating-template-files\">Locating template files<\/h2>\n\n<p>Every plugin is located on your server where WordPress is installed in the&nbsp;<code>\/wp-content\/plugins<\/code>&nbsp;folder. Here\u2019s where you can find the template files for each plugin.<\/p>\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Plugin<\/th><th>Template Files<\/th><\/tr><\/thead><tbody><tr><td>The Events Calendar<\/td><td><code>\/the-events-calendar\/src\/views\/v2\/<\/code><\/td><\/tr><tr><td>Events Calendar Pro<\/td><td><code>\/events-calendar-pro\/src\/views\/v2\/<\/code><\/td><\/tr><tr><td>Event Tickets<\/td><td><code>\/event-tickets\/src\/views\/v2\/<\/code><\/td><\/tr><tr><td>Event Tickets Plus<\/td><td><code>\/event-tickets-plus\/src\/views\/v2\/<\/code><\/td><\/tr><tr><td>Community<\/td><td><code>\/the-events-calendar-community-events\/src\/views\/<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"h-exceptions\">Exceptions<\/h3>\n\n<p>There are a few exceptions to this. The single event pages still use the files from the legacy design, and there is both a classic editor and a block editor version. You can find those files here:<\/p>\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Plugin<\/th><th>Template Files<\/th><th>Override Location<\/th><\/tr><\/thead><tbody><tr><td><strong>Classic Editor<\/strong><\/td><td>Single event, single organizer, single venue pages<\/td><td>This can also be found at the top of each original PHP file.<\/td><\/tr><tr><td>The Events Calendar<\/td><td><code>\/the-events-calendar\/src\/views\/single-event.php<\/code><\/td><td><code>[your-theme]\/tribe-events\/single-event.php<\/code><\/td><\/tr><tr><td>The Events Calendar<\/td><td><code>\/the-events-calendar\/src\/views\/modules\/<\/code><\/td><td><code>[your-theme]\/tribe-events\/modules<\/code><\/td><\/tr><tr><td>Events Calendar Pro<\/td><td><code>\/events-calendar-pro\/src\/views\/pro\/modules\/<\/code><\/td><td><code>[your-theme]\/tribe-events\/pro\/modules\/<\/code><\/td><\/tr><tr><td><strong>Block Editor<\/strong><\/td><td>Single event page<\/td><td><\/td><\/tr><tr><td>The Events Calendar<\/td><td><code>\/the-events-calendar\/src\/views\/single-event-blocks.php<\/code><\/td><td><code>[your-theme]\/tribe\/events\/single-event-blocks.php<\/code><\/td><\/tr><tr><td>The Events Calendar<\/td><td><code>\/the-events-calendar\/src\/views\/single-event\/<\/code><\/td><td><code>[your-theme]\/tribe\/events\/single-event\/<\/code><\/td><\/tr><tr><td>Events Calendar Pro<\/td><td><code>\/events-calendar-pro\/src\/views\/blocks\/<\/code><\/td><td><code>[your-theme]\/tribe\/events-pro\/blocks\/<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n<p>To override these files the copy should be placed in <code>\/tribe-events<\/code> and <code>\/tribe-events\/pro<\/code> respectively. For further details please check out the <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/customizing-template-files\/\" target=\"_blank\" rel=\"noreferrer noopener\">guide to customizing template files for Views 1<\/a>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"h-block-editor\">Block Editor<\/h2>\n\n<p>When creating template overrides for the Block Editor, the file path will depend on whether you are using the blocks that are specific to the Events Calendar plugin vs the Events Calendar Pro plugin.<\/p>\n\n<p>When using The Events Calendar blocks, the copy should be placed here: <code>[your-theme]\/tribe\/events\/blocks\/<\/code><\/p>\n\n<p>Here are the Events Calendar blocks:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Classic Event Details Block<\/li>\n\n<li>Event Category Block<\/li>\n\n<li>Event Datetime Block<\/li>\n\n<li>Event Links Block<\/li>\n\n<li>Event Organizer Block<\/li>\n\n<li>Event Price Block<\/li>\n\n<li>Event Tags Block<\/li>\n\n<li>Event Venue Block<\/li>\n\n<li>Event Website Block<\/li>\n\n<li>Featured Image Block<\/li>\n<\/ul>\n\n<p>You can find all of The Events Calendar template files <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/calendar-template-files-v2\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n<p>When using Events Calendar Pro blocks, the copy should be placed here: <code>[your-theme]\/tribe\/events-pro\/blocks\/<\/code><\/p>\n\n<p>Here are the Events Calendar Pro blocks:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Additional Fields Block<\/li>\n\n<li>Recurrence Block<\/li>\n\n<li>Related Events Block<\/li>\n<\/ul>\n\n<p>You can find all of the Events Calendar Pro template files <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/events-calendar-pro-template-files\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"h-first-add-a-new-folder-in-your-theme\">First, add a new folder in your theme<\/h2>\n\n<p>Once you\u2019ve located the template file you want to customize, make a copy of it and save it somewhere for a moment, like your computer desktop.<\/p>\n\n<p>Next, let\u2019s head over to your theme folder and create a new folder. &nbsp;Not sure where your theme folder is located? It\u2019s where WordPress is installed in the&nbsp;<code>\/wp-content\/themes<\/code>&nbsp;folder. So if you are using the official Twenty Twenty theme, it would be at <code>\/wp-content\/themes\/twentytwenty<\/code>. Once you find it, create a new folder called <code>tribe<\/code>.<\/p>\n\n<p>So far, you should have a new folder in your theme located at:&nbsp;<code>\/wp-content\/themes\/your-theme\/tribe\/<\/code><\/p>\n\n<p>Now, which plugin or add-on does your copied template file belong to? You\u2019ll need to make another folder that correlates with the plugin you are customizing. That includes the following:<\/p>\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Plugin<\/th><th>Folder<\/th><\/tr><\/thead><tbody><tr><td>The Events Calendar (legacy views)<\/td><td><code>\/tribe\/events\/<\/code><\/td><\/tr><tr><td>The Events Calendar (new views)<\/td><td><code>\/tribe\/events\/v2<\/code><\/td><\/tr><tr><td>Events Calendar Pro<\/td><td><code>\/tribe\/events-pro\/v2<\/code><\/td><\/tr><tr><td>Event Tickets<\/td><td><code>\/tribe\/tickets\/<\/code><\/td><\/tr><tr><td>Event Tickets Plus<\/td><td><code>\/tribe\/tickets-plus\/<\/code><\/td><\/tr><tr><td>Community<\/td><td><code>\/tribe-events\/community\/<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n<p>With the new views, your folder structure should look like this:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/02\/Screen-Shot-2020-02-13-at-16.18.32.png\" alt=\"folder structure for creating template overrides\" class=\"wp-image-1945904\"\/><figcaption class=\"wp-element-caption\">Folder structure for overriding the new views templates.<\/figcaption><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"h-customize-the-template\">Customize the template<\/h2>\n\n<p>Now that you\u2019ve located the template you want to override make a copy of it, create a new&nbsp;<code>tribe\/<\/code> folder in your theme, and put the copied template file in its corresponding plugin folder, you can start customizing!<\/p>\n\n<p>If you\u2019re feeling stuck at any point in the process, we\u2019ve put together&nbsp;<a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/template-customization-example\/\" target=\"_blank\" rel=\"noreferrer noopener\">an example of a customization<\/a>&nbsp;that you can check out that walks through this process one step at a time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Events Calendar comes with a number of template files that determine how the plugin looks and behaves. We call these views. You can customize these files by placing copies of them in your theme. It\u2019s important that you don\u2019t edit the view files directly in the plugin. Instead, we recommend overriding the files in&#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":[12],"stellar-product-taxonomy":[161],"class_list":["post-1945753","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-theming-overview","tag-5-x-calendar-views","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":84,"label":"Templating &amp; Layout"}],"post_tag":[{"value":12,"label":"5.x calendar views"}],"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":"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":12,"name":"5.x calendar views","slug":"5-x-calendar-views","term_group":0,"term_taxonomy_id":12,"taxonomy":"post_tag","description":"","parent":0,"count":7,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945753","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=1945753"}],"version-history":[{"count":8,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945753\/revisions"}],"predecessor-version":[{"id":1962597,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945753\/revisions\/1962597"}],"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=1945753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1945753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1945753"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1945753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}