In this article I am showing how you will create the tickets listings page with Beaver Builder plugin. Here I am making the listings with Book Now registration button. If you have any third party booking form or will want to add with WooCommerce product details page or checkout form, then this kind of layout is very helpful for your site.

Following tools I used:

1. Beaver Builder Plugin
2. PODS Plugin ( I used the PODS plugin for CPT and custom fields. You can use Advanced Custom Fields plugin & create the CPT with manual code)

Lets discuss about full steps here. Assuming that you already installed the above two plugins on your site.

Creating Tickets Post Type

I’m creating the ticket custom post type and some custom fields with PODS. If you have events data you can avoid this process and show them on listings page.

Now adding the tickets content one by one

1. Navigate to Dashboard-> Tickets->Add new
2. Enter the title
3. Enter the venue
4. Enter date & time
5. Enter price or you can leave it if it is free for users
6. Enter booking/payment details page URL or free registration URL
7. Click on Publish button

You will follow same process for rest of the tickets.

Creating Saved Row

Creating two saved rows with Beaver Builder plugin. See the video

Creating Shortcode

Creating the shortcode [my_event_tickets] for displaying the content. It is accepting the two attributes: paid ticket row’s ID and free ticket row’s ID. This shortcode is fetching the tickets content from ticket post type and rendering the above two saved rows with loop. I am creating the shortcode because I shall make the ticket listing page with Beaver Builder plugin and place the shortcode into HTML module.

Open the functions.php file and add the following PHP snippets

shortcode

add_shortcode('my_event_tickets', 'probb_event_tickets_shortcode');
function probb_event_tickets_shortcode( $atts )
{
	global $wp_query, $temp;

	$temp = $wp_query;

	$atts = shortcode_atts( array(
		'paidticket' => '',
		'freeticket' => ''
	), $atts, 'my_event_tickets');

	//* Creating the loop args. Optimizing the query loop
	$args = array(
		'post_type' 				=> 'ticket',
		'post_sttaus' 				=> 'publish',
		'fields' 					=> 'ids',
		'paged' 					=> FLBuilderLoop::get_paged(),
		'posts_per_page' 			=> get_option('posts_per_page'),
		'cache_results' 			=> false,
		'update_post_term_cache' 	=> false,
		'meta_key' 					=> 'event_date',
		'orderby' 					=> 'meta_value',
		'meta_type' 				=> 'DATE'
	);

	//* getting all tickets ids
	$tickets = new WP_Query( $args );
	if( $tickets->have_posts() )
	{
		$content = $free_ticket = $paid_ticket ='';

		// getting free ticket saved row layout
		if( ! empty($atts['freeticket'] ) )
		{
			// Enqueue styles and scripts for this post.
			FLBuilder::enqueue_layout_styles_scripts_by_id( $atts['freeticket'] );

			// Print the styles since we are outside of the head tag.
			wp_print_styles();

			ob_start();
			// Render the content.
			FLBuilder::render_content_by_id( $atts['freeticket'] );
			$free_ticket = ob_get_clean();
		}

		// getting paid ticket saved row layout
		if( ! empty($atts['paidticket'] ) )
		{
			// Enqueue styles and scripts for this post.
			FLBuilder::enqueue_layout_styles_scripts_by_id( $atts['paidticket'] );

			// Print the styles since we are outside of the head tag.
			wp_print_styles();

			ob_start();
			// Render the content.
			FLBuilder::render_content_by_id( $atts['paidticket'] );
			$paid_ticket = ob_get_clean();
		}

		// running the query loop
		while( $tickets->have_posts() )
		{
			$tickets->the_post();

			// fetching the custom fields data
			$title 		= get_the_title( get_the_ID() );
			$venue 		= get_post_meta( get_the_ID(), 'venue', true );
			$date 		= get_post_meta( get_the_ID(), 'event_date', true );
			$date 		= date( 'M jS, Y', strtotime( $date ) );
			$time 		= get_post_meta( get_the_ID(), 'event_time', true );
			$time 		= date( 'H:i A', strtotime( $time ) );
			$price 		= get_post_meta( get_the_ID(), 'price', true );
			$button_url = get_post_meta( get_the_ID(), 'booking_url', true );

			//* adding the cpt's original data into saved row template
			if( ! empty( $atts['paidticket'] ) && $free_ticket !== '' && ( empty($price) || $price == '0.00' ) )
			{
				$content .= str_replace('#TITLE#', $title, $free_ticket);
				$content = str_replace('#VENUE#', $venue, $content);
				$content = str_replace('#EVENTDATE#', $date, $content);
				$content = str_replace('#EVENTTIME#', $time, $content);
				$content = str_replace('#BOOKURL#', $button_url, $content);
			}

			if( ! empty( $atts['paidticket'] ) && $paid_ticket != '' && ( ! empty( $price ) && $price !== '0.00' ) )
			{
				$content .= str_replace('#TITLE#', $title, $paid_ticket);
				$content = str_replace('#VENUE#', $venue, $content);
				$content = str_replace('#EVENTDATE#', $date, $content);
				$content = str_replace('#EVENTTIME#', $time, $content);
				$content = str_replace('#BOOKURL#', $button_url, $content);
				$content = str_replace('#PRICE#', number_format($price, 2, '.', ''), $content);
			}
		}

		//* showing the pagination
		$wp_query = $tickets;
		$content .= get_the_posts_pagination( array(
			'mid_size' => 2,
			'prev_text' => __( '← Prev', 'textdomain' ),
			'next_text' => __( 'Next →', 'textdomain' ),
		) );
	}

	wp_reset_query();

	$wp_query = $temp;

	//* returning the ticket content
	return $content;
}

Creating the Tickets Page

Now I am creating the ticket page with Beaver Builder and putting the shortcode with HTML module. See the video at below

Note: you will replace the saved row’s IDs with yours row IDs.