{"id":1964911,"date":"2025-04-22T14:12:20","date_gmt":"2025-04-22T18:12:20","guid":{"rendered":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/?p=1964911"},"modified":"2025-04-22T14:12:22","modified_gmt":"2025-04-22T18:12:22","slug":"how-to-create-a-shortcode-for-a-google-add-to-calendar-button","status":"publish","type":"post","link":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/how-to-create-a-shortcode-for-a-google-add-to-calendar-button\/","title":{"rendered":"How to Create a Shortcode for a Google \u201cAdd to Calendar\u201d Button"},"content":{"rendered":"\n

Want to display a compact event preview and<\/em> include an \u201cAdd to Calendar\u201d button? You can combine The Events Calendar\u2019s built-in [tribe_event_inline]<\/code> shortcode with a custom [add_to_calendar]<\/code> shortcode that links the event to Google Calendar.<\/p>\n\n\n\n

This is great for promoting upcoming events inside blog posts, sidebars, or landing pages.<\/p>\n\n\n\n

What You\u2019ll Need<\/strong><\/h4>\n\n\n\n
    \n
  1. The Events Calendar and Events Calendar Pro plugins<\/li>\n\n\n\n
  2. The [tribe_event_inline]<\/code> shortcode (built-in via Events Calendar Pro)<\/li>\n\n\n\n
  3. A custom shortcode for the “Add to Calendar” button (see below)<\/li>\n<\/ol>\n\n\n\n

    Step 1: Add the Custom Shortcode<\/strong><\/p>\n\n\n\n

    Add this code to your theme\u2019s functions.php<\/code> file or using the Code Snippets plugin<\/a>:<\/p>\n\n\n\n

    function custom_add_to_calendar_button($atts) {\n    $atts = shortcode_atts(array(\n        'post_id' => get_the_ID(),\n    ), $atts, 'add_to_calendar');\n\n    $event_id = intval($atts['post_id']);\n\n    if (!$event_id || get_post_type($event_id) !== 'tribe_events') {\n        return '';\n    }\n\n    $title = get_the_title($event_id);\n    $start = tribe_get_start_date($event_id, false, 'Ymd\\THis');\n    $end = tribe_get_end_date($event_id, false, 'Ymd\\THis');\n    $location = tribe_get_venue($event_id);\n    $description = get_the_excerpt($event_id);\n\n    $google_calendar_url = \"https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE\" .\n        \"&text=\" . urlencode($title) .\n        \"&dates=\" . $start . \"\/\" . $end .\n        \"&details=\" . urlencode($description) .\n        \"&location=\" . urlencode($location) .\n        \"&sf=true&output=xml\";\n\n    ob_start(); ?>\n    <a href=\"<?php echo esc_url($google_calendar_url); ?>\" target=\"_blank\" class=\"add-to-calendar-button\">\n        Add to Calendar\n    <\/a>\n    <style>\n        .add-to-calendar-button {\n            display: inline-block;\n            padding: 10px 15px;\n            background-color: #0073aa;\n            color: #fff;\n            text-decoration: none;\n            border-radius: 5px;\n        }\n    <\/style>\n    <?php\n    return ob_get_clean();\n}\nadd_shortcode('add_to_calendar', 'custom_add_to_calendar_button');\n<\/code><\/pre>\n\n\n\n
    Step 2: Use the Combined Shortcodes<\/strong><\/h4>\n\n\n\n
    You can now use [tribe_event_inline]<\/code> to display a mini event preview, and insert the [add_to_calendar]<\/code> button right below it like this:<\/p>\n\n\n\n
    [tribe_event_inline id=\"167\"]\n\n{thumbnail}\n\n{title:linked}\n\nTime: {start_date} @ {start_time} \u2013 {end_date} @ {end_time}\n\n{excerpt}\n\n[\/tribe_event_inline]\n\n[add_to_calendar post_id=\"167\"]\n<\/code><\/pre>\n\n\n\n
    Make sure to replace 167<\/code> with the actual post ID of your event.<\/p>\n\n\n\n
    Example Output<\/strong>:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
    Want to display a compact event preview and include an \u201cAdd to Calendar\u201d button? You can combine The Events Calendar\u2019s built-in [tribe_event_inline] shortcode with a custom [add_to_calendar] shortcode that links the event to Google Calendar. This is great for promoting upcoming events inside blog posts, sidebars, or landing pages. What You\u2019ll Need Step 1: Add…<\/p>\n","protected":false},"author":48,"featured_media":1954561,"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":"kb-single","_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":[93],"tags":[85],"stellar-product-taxonomy":[161],"class_list":["post-1964911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-errors","tag-testing","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":93,"label":"Troubleshooting"}],"post_tag":[{"value":85,"label":"testing"}],"stellar-product-taxonomy":[{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/08\/kb-guide-banner-virtual-events-1024x224.jpeg",1024,224,true],"author_info":{"display_name":"Paul Acido","author_link":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/author\/paulacido\/"},"comment_info":0,"category_info":[{"term_id":93,"name":"Troubleshooting","slug":"errors","term_group":0,"term_taxonomy_id":93,"taxonomy":"category","description":"","parent":0,"count":67,"filter":"raw","term_order":"0","cat_ID":93,"category_count":67,"category_description":"","cat_name":"Troubleshooting","category_nicename":"errors","category_parent":0}],"tag_info":[{"term_id":85,"name":"testing","slug":"testing","term_group":0,"term_taxonomy_id":85,"taxonomy":"post_tag","description":"","parent":0,"count":11,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1964911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1964911"}],"version-history":[{"count":2,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1964911\/revisions"}],"predecessor-version":[{"id":1964915,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1964911\/revisions\/1964915"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1954561"}],"wp:attachment":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1964911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1964911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1964911"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1964911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}