Available on: Newspaper V11+
I) The code
This section contains an example on how to add a new block and a new module using the theme API plugin method. First create a folder and name it for example “td-api-plugin”, inside the folder create a php file and name it “td-api-plugin.php”, edit the file and add the following code:
<?php
/*
Plugin Name: td-api-plugin
Plugin URI: http://tagdiv.com
Description: tagDiv API plugin
Author: tagDiv
Version: 1.0.3
Author URI: http://tagdiv.com
*/
add_action('tdc_init', function() {
new td_api_plugin();
}, 11);
class td_api_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
// frontend css
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style('td-plugin-framework', $this->plugin_url . '/css/style.css');
});
//hook used to add or modify items via Api
add_action( 'tdc_loaded' , function() { //add the api code inside this function
// Add a new module
td_api_module::add('td_module_flex_custom',
array(
'file' => $this->plugin_path . '/modules/td_module_flex_custom.php',
'text' => 'Module Flex Custom',
'img' => '',
'used_on_blocks' => array( 'td_module_flex_custom' ),
'excerpt_title' => 25,
'excerpt_content' => 25,
'enabled_excerpt_in_panel' => false,
'enabled_on_more_articles_box' => false,
'enabled_on_loops' => false,
'uses_columns' => false,
// if the module uses columns on the page template + loop
'category_label' => false,
'class' => 'td_module_wrap td-animation-stack',
'group' => ''
// '' - main theme, 'mob' - mobile theme, 'woo' - woo theme
)
);
// Add a new block
td_api_block::add( 'td_flex_block_custom',
array(
'map_in_visual_composer' => false,
'map_in_td_composer' => true,
"name" => 'Custom Flex Block',
"base" => 'td_flex_block_custom',
"class" => 'td_flex_block_custom',
"controls" => "full",
"category" => 'Blocks',
'tdc_category' => 'Blocks',
'icon' => 'icon-pagebuilder-td_flex_block_custom',
'file' => $this->plugin_path . '/shortcodes/td_flex_block_custom.php',
"params" =>
array_merge(
td_config::get_map_block_general_array(),
array(
array(
"param_name" => "mc_tl",
"type" => "textfield",
"value" => '',
"heading" => 'Title length',
"description" => "",
"holder" => "div",
"class" => "tdc-textfield-small",
"placeholder" => '25',
"info_img" => "https://cloud.tagdiv.com/help/title_length.png",
),
),
td_config::get_map_filter_array(),
array(
array(
"param_name" => "modules_height",
"type" => "textfield-responsive",
"value" => '',
"heading" => 'Modules height',
"description" => "",
"holder" => "div",
"class" => "tdc-textfield-small",
"placeholder" => "460",
"group" => "Layout",
),
array(
"param_name" => "image_size",
"type" => "dropdown",
"value" => array(
'Small - 696px' => '',
'Large - 1068px' => 'td_1068x0',
'Full - 1920px' => 'td_1920x0'
),
"heading" => 'Image size',
"description" => "",
"holder" => "div",
"class" => "tdc-dropdown-big",
"group" => "Layout",
"info_img" => "https://cloud.tagdiv.com/help/module_image_size.png",
),
),
td_config::get_map_block_ajax_filter_array(),
td_config::get_map_block_pagination_array()
)
)
);
});
}
}
The array keys (file, name, class, etc.) are explained on td_api_block and td_api_module sections, we will not go into details about their functionality in this section.
II) The files
The plugin from this example adds a new block and module (77) and as you can see it requires some files, so you have to open the plugin folder and create the corresponding folders and files:
/css/style.css /modules/td_module_flex_custom.php /shortcodes/td_flex_block_custom.php td-api-plugin.php
As a start you can copy the file(s) of a theme existing block or module and modify the code inside it to create a new element.
The theme modules are located inside ..\td-composer\legacy\Newspaper\includes\modules and the theme blocks files are located inside ..\td-composer\legacy\Newspaper\includes\shortcodes.
When you create a new block or module you also need the css, as you can see in the code we added some style here. to load the css used on the new custom elements:
/css/style.css
/***************
* Flex Block Custom css *
****************/
.td_module_flex_custom.td_module_wrap {
padding-bottom: 0;
}
.td_module_flex_custom .td-module-container {
position: relative;
}
.td_module_flex_custom .td-module-thumb {
overflow: hidden;
}
.td_module_flex_custom .td-image-wrap {
display: block;
height: 100%;
}
.td_module_flex_custom .td-thumb-css {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
}
.td_module_flex_custom .td-module-meta-info {
position: absolute;
background-color:rgba(9, 8, 9, 0.39);top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: table; text-align: center; width: 100%; padding: 10px 20px; } .td_module_flex_custom .entry-title a { color: #fff; }
Details and download:
v1.0.3 – Latest version – download
