Tabby Responsive Tabs vs Events Shortcodes For The Events Calendar

Adds a set of horizontal tabs which changes to an accordion on narrow viewports Tabs and accordion are created with jQuery Supports multiple sets of tabs on same page Uses semantic header and content markup Aria attributes and roles aid screen reader accessibility Tabs and content are accessible via keyboard The Tabby responsive tabs plugin is designed to be an easy and lightweight way to add responsive tabs to your content. Experienced developers should be able to easily customize how the tabs display on their site by replacing the built-in CSS rules with an edited version (see note below for more details of this). Optional Add-ons The Tabby responsive tabs customiser add-on adds a settings panel with several parameters to provide the easiest way to customise the display of your tabs without editing any code. You can use the default tabby styles or one of the included one-click presets as a starting point for customisation. It also enables you to easily add icons to your tab titles. The Tabby link to tab add-on provides a simple shortcode to create links to specific tabs which can appear anywhere on the same page as the tabgroup without the page reloading. The Tabby tab to URL link add-on enables you to set one or more of your tabs to act as a link to any URL. The Tabby load accordion closed add-on changes the default behaviour when the tabs are displayed as an accordion so that no accordion sections are open when the page initially loads. The Tabby reopen current tab on reload add-on enables the currently active tab to remain the active (open) tab after the page has been reloaded/refreshed. Usage: There are two shortcodes used to create the tab group: [tabby] and [tabbyending] both must be used as below to create a tab group. To start a new tab use a [tabby] shortcode, eg: [tabby title="tabname"] replace tabname with the name of your tab. Add the tab content after the shortcode. Add a [tabbyending] shortcode after the content of the last tab in a tabgroup. Example If you copy & paste this example into your own page instead of typing them, ensure that you delete any stray or tags that might have appeared. [tabby title="First Tab"] This is the content of the first tab. [tabby title="Second Tab"] This is the content of the second tab. This is the content of the second tab. [tabby title="Third Tab"] This is the content of the third tab. This is the content of the third tab. This is the content of the third tab. [tabbyending] note: To prevent stray paragraph tags being introduced by WordPress’s wpautop filter, ensure that there is a blank line above and below each tabby shortcode and the tabbyending shortcode. You can see the tabs on the demo page. You can add the shortcodes to a page made using the WordPress block editor by using WordPress’s shortcode block. If you want to change how the tabs and accordion display on your site, you have two options: Use the Tabby Responsive Tabs Customiser plugin which provides a very easy way to customise the display of your tabs without needing to edit any code. Copy the contents of the plugin’s stylesheet into your child theme or custom styles plugin and make the changes to that copy as required. If you do this you will also need to prevent the built-in styles from loading by going to the admin page at settings => tabby and unchecking the “Include the default tabby stylesheet” checkbox. Additional Shortcode attributes Open The first (leftmost) tab panel will be open by default in ‘tab view’ and in ‘accordion view’. If you want a specific tab other than the first tab to be open by default when the page first loads, you can add the parameter & value open=”yes” to the shortcode for that tab: [tabby title="My Tab" open="yes"] If you use the ‘open’ shortcode parameter in one of your tab shortcodes, ensure that you only add it to single tab as having more than one tab open within a tab group is not supported. Icon The markup required to show an icon alongside a tab title can be added by using the ‘icon’ attribute. Tabby responsive tabs does not add the icon files, you will also need to use a theme or plugin (such as the tabby responsive tabs customiser add-on) to add the icon files: [tabby title="My Tab" icon="cog"] This adds a pseudo element before the tab title with the classes “fa” and “fa-cog”. Other icon font sets can be used if you ensure the CSS rules target the classes added by the plugin. The Tabby Responsive Tabs Customiser plugin can be used to add the Font Awesome files required to display the icons in the tab titles. Class This allows a custom class to be added to each tab and tab content area. The class added to the tab will be the value of the class parameter and the class of the tab content area associated with that tab will be the class with the ‘-content’ suffix. Controlling which tab is open when linking to the page You can use a ‘target’ URL parameter in your link to set which tab will be open when the page initially loads. The value of this parameter is based on the tab title specified in the tabby shortcode which built the tab, but formatted with punctuation & special characters removed, accents removed, and with dashes replacing the spaces. If you want to link to a ‘contacts’ page with a tab titled ‘Phone Numbers’ open, the url you use to link to this page would look like: yoursite.com/contact/?target=phone-numbers If you want a tab with the title ’email addresses’ to be open, the url would look like: yoursite.com/contact/?target=email-addresses If you want a tab with the title ‘entrées’ to be open (with an acute accent over the second e), the url would look like: yoursite.com/contact/?target=entrees Using a target url parameter will override any open shortcode parameters used.

Events Shortcodes extends the functionality of The Events Calendar plugin by adding shortcode and Gutenberg block support for displaying events anywhere on your website. This events calendar extension allows you to insert event listings into pages, posts, landing pages, or custom sections using simple shortcode attributes or the integrated block editor interface. If you are looking for The Events Calendar shortcode, this addon provides a simple and flexible solution. It helps you present events created with The Events Calendar plugin in multiple layouts including list view, timeline format, and minimal list styles that help visitors quickly understand event schedules and details. For users who need more advanced options, the Pro version adds additional layouts such as grid displays, carousels, sliders, and other dynamic event showcase styles that help create engaging event sections across different pages of your website. 👉 View Plugin Demos: (FREE) Events List | Events Timeline | Events Minimal List 👉 View Plugin Demos: (PRO) Events Grid | Events Accordion | Events Masonry | Highlighted Layout Events Carousel | Events Slider | Events Filter Bar | View All Demos Events Shortcodes Plugin Features The Events Calendar Shortcode & Block Insert events into any content area of your website using a dedicated Gutenberg events block or a simple shortcode for The Events Calendar. You can place an event feed inside posts, landing pages, or widgets without modifying your theme files. [events-calendar-templates category="all" template="default" style="style-1" date_format="default" start_date="" end_date="" limit="10" order="ASC" hide-venue="no" time="future" socialshare="no"] Multiple Event Layouts & Styles Choose between list, timeline, and minimal list layouts to showcase a list of events in different visual styles. These layouts help organize event dates, titles, and details in a structured format that works well for event pages, schedules, and activity listings. The Pro version adds additional layouts such as grid, carousel, slider, accordion, and masonry views. Date Filters in Shortcode Filter events by date range or event type such as future events, past events, or all event archives. This allows you to create separate sections for upcoming schedules or previous event archives. You can also choose any date format to match your website’s regional settings. Event Category, Sorting & Limit Display events from specific categories and control how they appear on the page. You can sort events in ascending or descending order and limit how many events are shown in each listing. This helps create focused event sections such as featured events, category-based listings, or homepage event highlights. Events Shortcodes Pro Features The Pro version extends the core functionality of the plugin by providing additional layouts, filtering options, and advanced display controls. These features help website owners create more interactive event sections and present event information in visually engaging formats. Events Search Filter Bar Add an advanced filter bar on the frontend that allows visitors to search and filter events directly from the page. Users can quickly search events based on categories, venues, organizers, or other available filters. This feature is useful for websites that publish a large number of events and want to provide an easy way for visitors to explore schedules and program listings. Advanced Event Layouts Access premium event layouts designed for modern websites. These layouts help present event information in different visual formats that can fit various page designs and website structures. Available layouts include Grid for structured event cards, Carousel for sliding event showcases, Masonry for dynamic grid arrangements, Accordion for compact event listings, and Calendar style displays for schedule-based views. Display Events by Venue, Organizer, or Tag The Pro version provides advanced filtering options that allow you to display specific groups of events based on event metadata. This helps you organize event listings across multiple pages and create more targeted event sections. List of Events by Venue Show events happening at a particular location. This is useful for venues, conference halls, coworking spaces, or community centers that host multiple events. List of Events by Organizer Display events organized by a specific organizer or organization. This allows event platforms or multi-organizer websites to create dedicated event sections for each organizer. List of Events by Tag Filter events using tags to create topic-based event lists such as workshops, webinars, meetups, or training sessions. Show Only Featured Events Highlight selected events that you want to promote on your homepage or landing pages. Featured event lists help draw attention to important announcements, upcoming conferences, or special events. Why Use Events Shortcodes with The Events Calendar? Many websites need a quick way to highlight upcoming activities on the front page. With this plugin, you can create homepage event sections that show the latest schedules, upcoming sessions, or featured programs to help visitors stay informed. Content creators and bloggers can embed schedule blocks inside articles, announcements, or event recap posts using shortcode. This makes it easy to connect written content with relevant schedules or upcoming activities. Upgrade The Events Calendar from a simple display to a modern events calendar. Instead of relying only on the default calendar view, this plugin introduces structured layouts such as lists and timelines that make event information easier to read and navigate. Since the plugin uses a shortcode, it works with almost any WordPress theme. You can show list of events on websites built with popular themes such as Astra, GeneratePress, OceanWP, Kadence, Blocksy, and Neve, as well as custom-developed themes. Using Events Shortcodes addon alongside The Events Calendar plugin gives you more control over how event information appears across your website. It improves your site’s event management and event display in an easy way. Who Can Use Events Shortcodes? This plugin is useful for many types of WordPress websites, including: Non-profit and charity websites that need to promote public events Business websites that publish workshops, webinars, or training sessions Conference and summit websites that need structured program listings Schools, colleges, and universities that share academic events Community groups that manage local meetups and activities Agencies and developers who need flexible event output inside custom layouts More Addons For The Events Calendar If you are building an event-based website using The Events Calendar plugin, you may also benefit from these additional addons developed by Cool Plugins. These addons help improve event presentation, create custom layouts, and integrate events with popular WordPress page builders. Together they allow you to build a more flexible and professional event management website without custom development. Event Single Page Builder Create fully customized single event pages. This addon allows you to control how event details appear on individual event pages, including sections for event descriptions, schedules, venue information, ticket details, and other event metadata. It helps website owners design event pages that match their branding, typography, and overall website layout. Event Speakers & Sponsors Add dedicated sections for speakers and sponsors within event pages or event listings. This addon is especially useful for conferences, workshops, summits, and professional events where speaker profiles and sponsor information need to be presented clearly. It helps highlight guest speakers and showcase sponsor logos. Events Widgets for Elementor Use Elementor widgets designed specifically for The Events Calendar to display event listings inside Elementor layouts. The widgets allow you to present events in list, grid, or carousel formats while taking advantage of Elementor’s visual page builder controls. This integration makes it easier for Elementor users to create dynamic event sections. Events Calendar Modules for Divi Display event information inside Divi Builder layouts using dedicated event modules. These modules allow Divi users to insert event lists and other event-based elements directly within their page designs. It provides a seamless way to integrate event content into Divi-powered websites while maintaining full design control within the builder interface. Other Plugins by Cool Plugins Cool Plugins develops a range of WordPress plugins designed to extend popular tools and simplify website functionality without complex configuration. These plugins are used by website owners, developers, and agencies to add new features, automate tasks, and improve the overall user experience of WordPress websites. Cool Timeline – Create visually engaging vertical or horizontal timelines to present company history, project milestones, product journeys, or storytelling content on WordPress websites. The plugin allows you to organize chronological information in a structured timeline layout that improves readability and presentation. Cool FormKit – Extend Elementor forms with advanced features such as additional input fields, conditional logic, calculations, multi-step forms, and enhanced form styling options. This plugin helps Elementor users create more dynamic and functional forms without needing custom scripts or complex form builders. AutoPoly – Automate multilingual website translation for WordPress sites using Polylang. The plugin integrates AI-powered translation services to help convert content into multiple languages quickly, making it easier to manage multilingual websites. LocoAI – Enhance the Loco Translate plugin with AI-assisted translation capabilities. It allows users to translate WordPress themes and plugins more efficiently by using intelligent translation tools that help speed up localization workflows and improve translation accuracy. Third-Party Services: To improve user experience this plugin offers optional usage tracking and optional feedback submission on deactivation. Data is sent only after explicit user consent. No hidden tracking is performed, and no frontend visitor or site user data is collected. For more details, please review our Data Usage Policy, TOS, and Privacy Policy. This plugin also utilizes the Codestar Framework (licensed under GPL) and Google Fonts to provide integrated typography options. Disclaimer: Events Shortcodes For The Events Calendar plugin is developed and maintained by the Cool Plugins team and is not affiliated with, endorsed by, or officially connected to The Events Calendar plugin or its parent company, StellarWP. Some links in this plugin and readme file may be affiliate links, which means we may earn a commission at no additional cost to you. Special thanks to the famous The Events Calendar ⇗ plugin authors for creating an awesome event plugin for events management. ✍ 200+ Reviews by Happy Users ★★★★★ Great Plugin and Great Support Makes shortcodes so much easier to display. I’ve had to contact support in the past for a plugin, but Vishali with Cool Plugins went above and beyond to help me out with my issues. I highly suggest using their products. ★★★★★ Block based I used it several years ago. Now I needed it again for a client. The best thing: It’s already block based with lot’s of customization. Great job, thanks! (It would be perfect to be able to select custom fonts that are being added through Kadence Custom Fonts plugin) ★★★★★ Highly recommended Very fast and helpful support. The translation issue was resolved quickly, competently, and without complications. I am very satisfied with the plugin and the service. Highly recommended! 🙂 ★★★★★ Great Plug-in : Simple & Efficient Great plug-in, so simple to use, with huge effect! Event Calendar is great but really to poor in its free version. Great but I was about to stop it because of the lack of possibilities to make custom layouts. “Events Shortcodes For The Events Calendar” plug-in solved part of this pb and I kept going with Event Cal. and now, I’m finaly willing to buy Events Calendar full version! ★★★★★ Great addon for the Events Calendar Great tool to simplify and shorten your design/dev time ★★★★★ Great addon With this addon it’s easy to create a modern and good looking view at your calendar events!