How to add extra features or content into Page Builders.

Add extra features or extra content to a page builder if that page builder “module” does not have that functionality you are looking for by the means of code via the WordPress’s shortcode API.

Page builders are not my preferred tool and I would rather code templates than use a page builder. For the novice WordPress user, it gives a sense of control and flexibility to bring on content layout changes and add fancy features to a page via a drag-and-drop system. For example, want to display a counter in the middle of the page? No problem drag the counter module to the page and you are set. You just need to fill in the values. Page builders can have an advantage in the right hands, but in the wrong hands can cause havoc as the user can destroy the intended design. No matter if we like it or don’t, its here to stay.

So as a developer you know its a nightmare to extend functionality as the page builders only come with limited functionality. For every feature in a plugin like WooCommerce, for example, a module needs to be created for that page builder with that specific feature you are looking for. When page builder came out it could only support single and variable products, not subscriptions or bookable products. I am using WooCommerce here as an example 🙂

You either have two choices. Add a new module to the page builder that support the feature you are looking for. This would mean that you need to write a custom module just for that page builder. Who has the time for that? The second option that I have found successful is to add custom shortcodes and call that shortcode with either an HTML block, Text Block or Code block in the page builder. Each page builder support only certain blocks.

Here is an example of a very simple shortcode that calls a specific category class. Don’t look at the code, but rather the “possibility of what you can do”. A shortcode is a function with a callback function in WordPress. Inside that Callback function, the World is your oyster.:

 *	Designer Category
 *	@param 		$atts 	shortcode parameters
 *	Shortcode: [product_designer]
function tax_designer($atts) {

	$a = shortcode_atts( array(
 	       'style' => '
 	       text-transform: uppercase;
    	   color: #000;
    	   font-style: italic;
    	   letter-spacing: 2px;
    	   font-size: 11px;
 	   ), $atts );
    $style = $a['style'];

	global $post;
	$post_id = $post->ID;
	$terms = get_the_terms( $post_id, 'obj_product_des' );

	if ($terms) {
		$term_link = get_term_link( $terms[0]->term_id );
		ob_start(); ?>

		<p><a style="<?php echo $style?>" href="<?php echo $term_link; ?>"><?php echo $terms[0]->name; ?></a></p>

		<?php return ob_get_clean();



add_shortcode( 'product_designer', 'tax_designer' );

This is a shortcode function in its basic form.:

function callback_function($atts) {

	// preset default attributes
	$a = shortcode_atts( array(
 	       'somePresetAttribute' => 'value',
 	   ), $atts );


	return $some_content;

add_shortcode( 'shortcode_name', 'callback_function' );