View Categories

Adding a Custom Tab Using a Hook

2 min read

This is an advanced feature. You will need a good working knowledge of PHP and HTML. Once you have added custom tabs, please ensure you flush permalinks to prevent 404 errors. We are unable to support custom code added via this method.

As well as adding custom tabs via the backend, you can also use a WordPress hook to create one. The benefit of this approach is that you can add anything you want into your new custom tab, instead of the backend approach which only allows you to add a shortcode.

Another huge benefit of this approach is that you can use your new tab to show content specific to the current Space. So you could use it to show products that this particular Space sells, a fundraising campaign created by the Owners of the Space, or even display podcast episodes this Space has produced.

The Filter

apply_filters( 'wpe_wps_primary_nav', $items );

The filter takes one parameter – the current tab items. To add a new tab item, simply add the filter in the normal way.

add_filter( 'wpe_wps_primary_nav', 'custom_tab', 10, 2 );
function custom_tab( $items ) {
	$items['pizza-shop'] = array(
		'id'       => 'pizza-shop',
		'title'    => __( 'Shop', 'wpe-wps' ),
		'callback' => callback(),
	);

	return $items;
}

Your new tab must have an identical key and ID, a title (this will be the actual tab title) and a callback function. This is where you create the content for the tab itself. A simple callback function could be a shortcode, with the addition of a nice title and disclaimer at the bottom.

function callback() {
	ob_start();

	echo '<h2>Please choose from one of our awesome pizzas</h2>';
	echo do_shortcode( '[products]' );
	echo '<p>We charge a fee of $2 for delivery</p>';

	return ob_get_clean();
}
From the image, you can see how we have used a shortcode, much as we could with the backend approach, but have been able to add more content. The possibilities are endless.