Skip to content

Shorcode system

Moisés Barrachina Planelles edited this page Oct 4, 2023 · 1 revision

It's easy create an manage shotcodes with BFT:

Defining a shortcode

The shortcodes on BFT are defined on public -> class-your-plugin-admin -> shortcodes_init_plugin()

The structure of a shortcode is:
    add_shortcode("shortcode-name", array($this, "shortcode_function_name"));

Defining a function

The structure of a shortcode function is:
    public function shortcode_function_name ( $atts = [], $content = null, $tag = '' ) {
	}
The variables of the function are:

* $atts: array with all the data specified on the shortcode
* $content: the content within the two tags, if the shortcode uses a clossing tag
* $tag: the shotcode tag

Shortcodes uses examples

A shortcode without data on $atts and $content
    [bft-shortcode-test]
Shortcode with data on $atts and $content
    [bft-shortcode-test atts_data_1="Lorem ipsum" atts_data_2="Dolor sit amet"]Content data[/bft-shortcode-test]

Complete example

    public function shortcodes_init_plugin() {
		add_shortcode("bft-shortcode-test", array($this, "bft_shortcode_test"));
	}
    public function bft_shortcode_test( $atts = [], $content = null, $tag = '' ) {

		$html_aux = "";

		if (isset($atts["additional_text"])) {
			$html_aux .= "<h4>".esc_html($atts["additional_text"])."</h4>";
		}

		if (!is_null($content)) {
			$html_aux .= "<p>".esc_html($content)."<p>";
		}

		ob_start();
		require plugin_dir_path( dirname( __FILE__ ) ) . "public/partials/your-plugin-shortcode-test.php";
		$html = ob_get_clean(); 

		return $html;
	}

Try it for yourself

Create a page, insert a shortcode block and put:
    [bft-shortcode-test]
Or:
    [bft-shortcode-test additional_text="This is an additional text"]The text inside de tags[/bft-shortcode-test]

Backend Frontend Template: client side: shortcode complete example

Client side: shortcode results Backend Frontend Template: client side: shortcode results