Below, you’ll find a detailed guide on how to add the The Events Calendar Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the The Events Calendar Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the The Events Calendar Plugin and the shortcodes it provides:
"The Events Calendar is an effective WordPress plugin designed to manage, organize and display any type of event on your website, ensuring a seamless user experience."
- [event]
- [the-events-calendar]
The Events Calendar [event] Shortcode
The-events-calendar plugin shortcode, event, is used to register a new shortcode and link it to a rendering function. It triggers the ‘render_shortcode’ function when the registered shortcode is used. This function checks if the shortcode is registered, creates a new instance of it, sets it up with provided arguments, and returns the HTML.
Shortcode: [event]
Examples and Usage
Basic example – A simple usage of the shortcode can be to render a specific event. Here, the shortcode is used to display event number 5.
[event id=5 /]Advanced examples
Displaying an event by referencing both ID and title. The event will first try to load by ID, but if not found, it will try to load by title.
[event id=5 title="Annual Meetup" /]Another advanced usage could be to display multiple events. This shortcode will display the events with IDs 3, 5 and 7.
[events ids="3,5,7" /]Lastly, you can use the shortcode to display all events from a particular category. Here, the shortcode is used to display all events from the “Music” category.
[events category="Music" /]PHP Function Code
In case you have difficulties debugging what causing issues with [add_shortcode] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( $shortcode, [ $this, 'render_shortcode' ] );Shortcode PHP function:
function render_shortcode( $arguments, $content, $shortcode ) {
$registered_shortcodes = $this->get_registered_shortcodes();
// Bail when we try to handle an unregistered shortcode (shouldn't happen)
if ( ! $this->is_shortcode_registered( $shortcode ) ) {
return false;
}
/** @var Shortcode_Interface $instance */
$instance = new $registered_shortcodes[ $shortcode ];
$instance->setup( $arguments, $content );
return $instance->get_html();
}
Code file location:
the-events-calendar/the-events-calendar/common/src/Tribe/Shortcode/Manager.phpThe Events Calendar [the-events-calendar] Shortcode
The-events-calendar shortcode is utilized to fetch and display event details based on the event ID. This shortcode aligns the event details to ‘left’, ‘center’, or ‘right’.
Shortcode: [the-events-calendar]
Parameters
Here is a list of all possible the-events-calendar shortcode parameters and attributes:
id– The unique identifier of the event post.align– Sets the alignment of the event details, can be ‘center’, ‘left’ or ‘right’.
Examples and Usage
Basic example – Displays the event details of a specific event by referencing its ID.
[event_details id=1 /]Advanced examples
Displays the event details of a specific event by referencing its ID and aligns the content to the center.
[event_details id=1 align=center /]Displays the event details of a specific event by referencing its ID and aligns the content to the right.
[event_details id=1 align=right /]Displays the event details without specifying an event ID. This will display the details of the most recent event and aligns the content to the left.
[event_details align=left /]PHP Function Code
In case you have difficulties debugging what causing issues with [the-events-calendar] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( $tag, array( $this, 'do_shortcode' ) );Shortcode PHP function:
function do_shortcode( $args ) {
$tag = $this->get_shortcode_tag();
$slug = $this->get_shortcode_slug();
$args = (object) shortcode_atts( array(
'align' => 'left',
'id' => null,
), $args, $tag );
if ( ! is_null( $args->id ) && is_numeric( $args->id ) ) {
$event = get_post( $args->id );
// Then If Event was fetch correctly we set the global
if ( $event ) {
global $post;
// Store the Original we will restore it later
$original_event = $post;
// Set the new Event for now
$post = $event;
// Use WP to config the Post Data
setup_postdata( $post );
}
}
// Set the Container Classes
$classes = array(
'tribe-shortcode',
'tribe-events-single-section',
'tribe-events-event-meta',
'tribe-clearfix',
);
// Add Alignment
if ( in_array( $args->align, array( 'center', 'left', 'right' ) ) ) {
$classes[] = 'tribe-shortcode-align-' . $args->align;
}
/**
* Use this hook to filter the classes for this shortcode container
*
* @since 4.1
*
* @param array Array of classes used on the Container
* @param object Arguments set on the shortcode
* @param string Shortcode tag
*/
$classes = apply_filters( 'tribe_events_shortcode_' . $slug . '_container_classes', $classes, $args, $tag );
// Ensure the expected CSS is available to style the shortcode output (this will
// happen automatically in event views, but not elsewhere)
tribe_asset_enqueue_group( 'events-styles' );
// Start to record the Output
ob_start();
echo '<div class="' . esc_attr( implode( ' ', $classes ) ) . '">';
// Print the Actual HTML
tribe_get_template_part( 'modules/meta/details' );
echo '</div>';
// Save it to a variable
$html = ob_get_clean();
if ( isset( $original_event ) ) {
$post = $original_event;
// Use WP method to restore it back to original
setup_postdata( $post );
}
return $html;
}
Code file location:
the-events-calendar/the-events-calendar/src/Tribe/Shortcode/Event_Details.phpConclusion
Now that you’ve learned how to embed the The Events Calendar Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply