Developer info

In this tutorial, we will show you how to create your own plugin, so you can add a new block using the API method. The plugin we create in this example will create a shortcode that you can add to your posts or pages. We will show you how to create your plugin using the code examples below. Let’s begin!

First, create a folder and name it for example “td-creative-plugin”. Some developers choose a name that describes what the plugin actually does. Using our Newspaper theme you will be able to create a custom element using just 2 PHP files. The first file is the one where we map the shortcode and the other file is the shortcode itself. For more complex plugins you can integrate a stylesheet and js code but in this case, we will integrate the tagDiv Design Options, so we do not need a stylesheet file at the moment.

Inside the folder, there is usually at least one PHP file that is typically named after the plugin, so you can create a PHP file and name it “td-creative-plugin.php”. Edit the file and add the following code:

<?php
/*
Plugin Name: td-creative-plugin
Plugin URI: http://tagdiv.com
Description: tagDiv creative plugin for tagdiv composer pagebuilder
Author: tagDiv
Version: 1.0
Author URI: http://tagdiv.com
*/
class td_creative_plugin {

    var $plugin_url = '';
    var $plugin_path = '';

    function __construct() {
        $this->plugin_url = plugins_url('', __FILE__); // path used for elements like images, css, etc which are available on end user
        $this->plugin_path = dirname(__FILE__); // used for internal (server side) files

        add_action('td_global_after', array($this, 'hook_td_global_after')); // hook used to add or modify items via Api
    }

    function hook_td_global_after()    {

//add the api code for the new element

    }

}
new td_creative_plugin();

The code is fairly simple! There is a comment, so WordPress will use the data to output the plugin’s name and specific data in the Plugins section of the back-end. We set the plugin’s path for the other files which may be added and we will use the hook function to register our element. There are two variables which are used to define the path: $plugin_url and $plugin_path. For public content like images or css you have to use $this->plugin_url , for the php files you have to use $this->plugin_path.

Now let’s register a new block! For example, I need an extra block to add an image or banner and a link, similar to the functionality of a custom ad block.
So I register my block “td_block_creative” and map it to tagDiv composer. Just replace //add the api code for the new element with this code:

td_api_block::add('td_block_creative',
    array(
        'map_in_td_composer' => true,
        "name" => 'Creative Block',
        "base" => 'td_block_creative',
        "class" => '',
        "controls" => "full",
        'tdc_category' => 'Blocks',
        'icon' => '',
        'file' => $this->plugin_path . '/shortcodes/td_block_creative.php',
        "params" => array_merge(
            array(
                array(
                    "param_name" => "separator",
                    "type" => "horizontal_separator",
                    "value" => "",
                    "class" => ""
                ),
                array(
                    "param_name" => "image_url",
                    "type" => "textfield",
                    "value" => '',
                    "heading" => __( "Image link", 'td_composer' ),
                    "description" => "",
                    "holder" => "div",
                    "class" => "tdc-textfield-extrabig"
                ),
                array(
                    "param_name" => "url",
                    "type" => "textfield",
                    "value" => '',
                    "heading" => __("Custom url", 'td_composer'),
                    "description" => "",
                    "holder" => "div",
                    "class" => "tdc-textfield-extrabig"
                ),
                array(
                    "param_name" => "open_in_new_window",
                    "type" => "checkbox",
                    "value" => '',
                    "heading" => __( "Open in new window",  'td_composer' ),
                    "description" => "",
                    "holder" => "div",
                    "class" => "",
                ),
                array(
                    'param_name' => 'tdc_css',
                    'value' => '',
                    'type' => 'tdc_css_editor',
                    'heading' => '',
                    'group' => 'Design options',
                )
            )
        )
    )
);

In the next section we will map the shortcode to the tagDiv composer Page Builder. We also give it a name (Creative Block) and implement it into the group of elements we want to create.
I’ve specified above the plugin’s path, now is time to use it and target the shortcode’s path. I’ve created a /shortcodes folder where you can add more elements for a more complex project.

My element needs different types of parameters. I need the image url, a custom url and an option to open the image in a new window. In this case I’ve also added the Design Options.
New parameter to an existing block example: https://forum.tagdiv.com/add-new-parameter-existing-block/

You can find the most used parameters supported by the tagDiv Composer supports in the following table:

Now let’s create the shortcode php file and add it in /shortcodes folder. This is what we render on the page:

<?php
class td_block_creative extends td_block {
    function render($atts, $content = null) {
        parent::render($atts);

        //shortcode attributes
        $this->shortcode_atts = shortcode_atts(
            array(
                'image_url' => '',
                'url' => '#',
                'open_in_new_window' => '',
            ), $atts, 'td_block_creative' );

        $image = $this->get_shortcode_att( 'image_url' );
        $url = $this->get_shortcode_att( 'url' );
        $target = $this->get_shortcode_att( 'open_in_new_window' );

        if ( '' !== $target ) {
            $target = ' target="_blank" ';
        }

        if ( !empty($image) ) {

            // block HTML
            $buffy = '<div class="' . $this->get_block_classes() . '">';

            //get the block css
            $buffy .= $this->get_block_css();

            $buffy .= '<a href="' . $url . '" class="td-creative-image-holder"' . $target . '>';
            $buffy .= '<img src="' . $image . '">';
            $buffy .= '</a>';
            $buffy .= '</div>';

        } else {
            // error message when the image is not set
            $info = '';
            if ( td_util::tdc_is_live_editor_iframe() || td_util::tdc_is_live_editor_ajax() ) {
                $info = td_util::get_block_error('Creative Block', 'Render failed - no image is set' );
            }
            $buffy = '<div class="wpb_wrapper td_block_wrap td_block_creative">' . $info . '</div>';
        }
        return  $buffy;
    }

}

Let’s check the result in tagdiv composer pagebuilder. We can find our element through the theme’s blocks group:

You can download the sample plugin from here Download sample plugin

Have fun being creative!

The post Developer info appeared first on tagDiv support.