{"id":1896633,"date":"2019-10-18T13:19:42","date_gmt":"2019-10-18T17:19:42","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/embedding-single-events-with-the-tribe_event_inline-shortcode\/"},"modified":"2024-04-02T16:32:20","modified_gmt":"2024-04-02T20:32:20","slug":"embedding-single-events-with-the-tribe_event_inline-shortcode","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/embedding-single-events-with-the-tribe_event_inline-shortcode\/","title":{"rendered":"Single Event Shortcode"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Oe3j0N0-yAE\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n\n\n\n<p>WordPress&#8217; <a href=\"https:\/\/codex.wordpress.org\/Embeds\" target=\"_blank\" rel=\"noopener noreferrer\">built-in oEmbed features<\/a> allow you to embed single events by simply pasting an event&#8217;s permalink into post or page content; you can learn more about this functionality <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/embedding-calendar-views-with-the-tribe_events-shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n\n\n\n<p>While that feature is useful, it doesn&#8217;t let you customize what event details to display, or in what order to display them. Furthermore, the oEmbed features only work within post or page content\u2014what if you want to display a single event somewhere <em>outside<\/em> of that type of content, like in a sidebar, footer, or custom template?<\/p>\n\n\n\n<p>The <kbd>[tribe_event_inline]<\/kbd> shortcode provides this extra functionality and more\u2014it allows for the <strong>embedding of single events <em>anywhere<\/em> shortcodes can be parsed on your site<\/strong>, and <strong>with much more control<\/strong> than the oEmbed method.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Basics<\/h3>\n\n\n\n<p>To use the <kbd>[tribe_event_inline]<\/kbd> shortcode, you need The Events Calendar <em>and<\/em> Events Calendar Pro on your site, with both plugins at version 4.4 or higher.<\/p>\n\n\n\n<p>Once you\u2019re ready to use the shortcode, there are two main things to keep in mind:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>You must always supply an event\u2019s ID<\/strong> via the <kbd>id<\/kbd> shortcode attribute.<\/li>\n\n\n\n<li><strong>You must always use<\/strong> at least one of the <strong>shortcode\u2019s variables<\/strong> to generate content. (More on this below.)<\/li>\n<\/ul>\n\n\n\n<p>Something like this, for example, is the absolute minimum amount of information you could supply for an event to render:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#x5B;tribe_event_inline id=&quot;167&quot;]\n{title}\n&#x5B;\/tribe_event_inline]\n<\/pre><\/div>\n\n\n<p>If you were to write just this, meanwhile, <strong>no event content will be generated<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#x5B;tribe_event_inline id=&quot;167&quot;]\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"finding-id\">Finding an Event&#8217;s ID<\/h3>\n\n\n\n<p>An event ID is required for the <kbd>[tribe_event_inline]<\/kbd> shortcode to work\u2014but how do you <em>find<\/em> an event&#8217;s ID, exactly? The process is, fortunately, quite simple.<\/p>\n\n\n\n<p>First head to the wp-admin edit screen of an event you want to embed. If you look in the URL bar of your web browser, you should see a URL that looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">http:\/\/example.com\/wp-admin\/post.php?post=167&amp;action=edit<\/pre>\n\n\n\n<p>Do you notice the part that says <kbd>post=167<\/kbd>? This indicates that <kbd>167<\/kbd> is the ID for that specific event. The following screenshot demonstrates this well.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2016\/12\/Screen-Shot-2016-12-09-at-4.35.01-PM.png\" alt=\"Finding an Event's ID \"\/><figcaption class=\"wp-element-caption\">An event&#8217;s ID seen in the URL for its wp-admin edit screen.<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"variables\">Using Shortcode Variables<\/h3>\n\n\n\n<p>With the <kbd>[tribe_event_inline]<\/kbd> shortcode, <strong>you<\/strong> decide what event data shows, and where. Let&#8217;s take the following shortcode, for example:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#x5B;tribe_event_inline id=&quot;167&quot;]\n{title:linked}\n&#x5B;\/tribe_event_inline]\n<\/pre><\/div>\n\n\n<p>\u261d This shortcode selects the event whose ID is 167 and displays its title. The addition of <kbd>:linked<\/kbd> to <kbd>title<\/kbd> will make that title be a link that links to the permalink of the event.<\/p>\n\n\n\n<p>Here is the output of the above shortcode:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2016\/12\/Screen-Shot-2016-12-09-at-4.40.19-PM.png\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2016\/12\/Screen-Shot-2016-12-09-at-4.40.19-PM.png\" alt=\"screen-shot-2016-12-09-at-4-40-19-pm\"\/><\/a><\/figure>\n\n\n\n<p>Let&#8217;s say you wanted to add the event&#8217;s thumbnail image, too\u2014and other details, likes its start date\/time, end date\/time, and an excerpt of the event&#8217;s description. You could do all of that with a shortcode that looked like this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#x5B;tribe_event_inline id=&quot;167&quot;]\n\n{thumbnail}\n\n{title:linked}\n\nTime: {start_date} @ {start_time} \u2013 {end_date} @ {end_time}\n\n{excerpt}\n\n&#x5B;\/tribe_event_inline]\n<\/pre><\/div>\n\n\n<p>\u261d Here is the output of <em>this<\/em> shortcode:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2016\/12\/Screen-Shot-2016-12-09-at-16.50.11-fullpage.png\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2016\/12\/Screen-Shot-2016-12-09-at-16.50.11-fullpage.png\" alt=\"screen-shot-2016-12-09-at-16-50-11-fullpage\"\/><\/a><\/figure>\n\n\n\n<p><strong>\u26a0\ufe0fPlease Note:<\/strong> Depending on how shortcodes are handled by your theme \/ page builder \/ plugin you might need to use some HTML tags to add line breaks and paragraphs. The formatting of those depends on your theme most of the time.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#x5B;tribe_event_inline id=&quot;167&quot;]\n\n&amp;lt;h2&gt;{title:linked}&amp;lt;\/h2&gt;\n\n&amp;lt;p&gt;Time: {start_date} @ {start_time} \u2013 {end_date} @ {end_time}&amp;lt;\/p&gt;\n\n&amp;lt;p&gt;{excerpt}&amp;lt;\/p&gt;\n\n&#x5B;\/tribe_event_inline]\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"all-variables\">All Shortcode Variables<\/h3>\n\n\n\n<p>A few variables were demonstrated above. What follows is a <strong>full list<\/strong> of all of the variables you can use in your <kbd>[tribe_event_inline]<\/kbd> shortcodes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"event-vars\">Events<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Field<\/th><th>Variable<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>Event Permalink<\/td><td>{url}{\/url}<\/td><td><em>Example:<\/em> {url}This text between the tags will be a link to the event.{\/url}<\/td><\/tr><tr><td>Event Title<\/td><td>{title}<\/td><td>&nbsp;<\/td><\/tr><tr><td>Event Title (Linked)<\/td><td>{title:linked}<\/td><td>Displays the event title as a link to the event.<\/td><\/tr><tr><td>Event Content<\/td><td>{content}<\/td><td>Displays the content of the event through <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/the_content\/\" target=\"_blank\" rel=\"noopener noreferrer\">the <kbd>the_content<\/kbd> filter<\/a>.<\/td><\/tr><tr><td>Event Content (Unfiltered)<\/td><td>{content:unfiltered}<\/td><td>Displays the content of the event <em>without going through<\/em> <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/the_content\/\" target=\"_blank\" rel=\"noopener noreferrer\">the <kbd>the_content<\/kbd> filter<\/a>.<\/td><\/tr><tr><td>Event Excerpt<\/td><td>{excerpt}<\/td><td>Displays an excerpt of the event content.<\/td><\/tr><tr><td>Thumbnail (a.k.a. Featured Image)<\/td><td>{thumbnail}<\/td><td>&nbsp;<\/td><\/tr><tr><td>Start Date<\/td><td>{start_date}<\/td><td>Dates display in the format you specify in your <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/setting-dates-and-times\/\" target=\"_blank\" rel=\"noopener noreferrer\">date settings for events<\/a>.<\/td><\/tr><tr><td>Start Time<\/td><td>{start_time}<\/td><td>Times display in the time format you specify in your <a href=\"https:\/\/codex.wordpress.org\/Settings_General_Screen\" target=\"_blank\" rel=\"noopener noreferrer\">general WordPress settings<\/a>.<\/td><\/tr><tr><td>End Date<\/td><td>{end_date}<\/td><td>Dates display in the format you specify in your <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/setting-dates-and-times\/\" target=\"_blank\" rel=\"noopener noreferrer\">date settings for events<\/a>.<\/td><\/tr><tr><td>End Time<\/td><td>{start_time}<\/td><td>Times display in the time format you specify in your <a href=\"https:\/\/codex.wordpress.org\/Settings_General_Screen\" target=\"_blank\" rel=\"noopener noreferrer\">general WordPress settings<\/a>.<\/td><\/tr><tr><td>Event Website<\/td><td>{event_website}<\/td><td>The event website will display as a link.<\/td><\/tr><tr><td>Event Cost<\/td><td>{cost}<\/td><td>The cost will display as a number without formatting<\/td><\/tr><tr><td>Event Cost (Formatted)<\/td><td>{cost:formatted}<\/td><td>The cost will display with the cost formatting settings you&#8217;ve specified in <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/settings-overview-the-events-calendar-and-events-calendar-pro\/#general\" target=\"_blank\" rel=\"noopener noreferrer\">your events settings<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"venue-vars\">Venues<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Field<\/th><th>Variable<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>Venue Name<\/td><td>{venue:name}<\/td><td>&nbsp;<\/td><\/tr><tr><td>Venue Name (Linked)<\/td><td>{venue:linked}<\/td><td>Displays the venue name as link to the single-venue page.<\/td><\/tr><tr><td>Venue Address<\/td><td>{venue_address}<\/td><td>&nbsp;<\/td><\/tr><tr><td>Venue Phone<\/td><td>{venue_phone}<\/td><td>&nbsp;<\/td><\/tr><tr><td>Venue Website<\/td><td>{venue_website}<\/td><td>&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"organizer-vars\">Organizers<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Field<\/th><th>Variable<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>Organizer Name<\/td><td>{organizer}<\/td><td>&nbsp;<\/td><\/tr><tr><td>Organizer Name (Linked)<\/td><td>{organizer:linked}<\/td><td>Displays the venue name as link to the single-venue page.<\/td><\/tr><tr><td>Organizer Phone<\/td><td>{organizer_phone}<\/td><td>&nbsp;<\/td><\/tr><tr><td>Organizer Email<\/td><td>{organizer_email}<\/td><td>&nbsp;<\/td><\/tr><tr><td>Organizer Website<\/td><td>{organizer_website}<\/td><td>&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>\u26a0\ufe0fPlease Note:<\/strong> Events support having multiple organizers. With this in mind, the above variables for organizers as written will get the data for the <strong>first<\/strong> organizer attached to an event.<\/p>\n\n\n\n<p>If you have two organizers, for example, and wanted to display data related to the <em>second<\/em> organizer, you would just add <kbd>2<\/kbd> right before the closing <kbd>}<\/kbd> bracket for any variable.<\/p>\n\n\n\n<p>So you could use <kbd>{organizer:linked}<\/kbd> to show the linked name of the first organizer, <kbd>{organizer:linked2}<\/kbd> to show the linked name of the second organizer, <kbd>{organizer:linked85}<\/kbd> to show the linked name of the eighty-fifth organizer, and so on. This applies to all organizer-related variables listed above in exactly the same way.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress&#8217; built-in oEmbed features allow you to embed single events by simply pasting an event&#8217;s permalink into post or page content; you can learn more about this functionality here. While that feature is useful, it doesn&#8217;t let you customize what event details to display, or in what order to display them. Furthermore, the oEmbed features&#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":[77],"tags":[25,58,76],"stellar-product-taxonomy":[161],"class_list":["post-1896633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shortcodes","tag-customizations","tag-php","tag-shortcodes","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":77,"label":"Shortcodes"}],"post_tag":[{"value":25,"label":"Customizations"},{"value":58,"label":"PHP"},{"value":76,"label":"Shortcodes"}],"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":77,"name":"Shortcodes","slug":"shortcodes","term_group":0,"term_taxonomy_id":77,"taxonomy":"category","description":"","parent":61,"count":16,"filter":"raw","term_order":"0","cat_ID":77,"category_count":16,"category_description":"","cat_name":"Shortcodes","category_nicename":"shortcodes","category_parent":61}],"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"},{"term_id":58,"name":"PHP","slug":"php","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":20,"count":128,"filter":"raw","term_order":"0"},{"term_id":76,"name":"Shortcodes","slug":"shortcodes","term_group":0,"term_taxonomy_id":76,"taxonomy":"post_tag","description":"","parent":0,"count":17,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896633","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=1896633"}],"version-history":[{"count":3,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896633\/revisions"}],"predecessor-version":[{"id":1959653,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896633\/revisions\/1959653"}],"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=1896633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896633"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}