Below, you’ll find a detailed guide on how to add the Easy Textillate Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Easy Textillate Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Easy Textillate Plugin and the shortcodes it provides:
"Easy Textillate is a user-friendly WordPress plugin, designed to add a creative touch to your content. It offers dynamic text animation, making your posts engaging and eye-catching."
- [textillate]
- [textillate-group]
Easy Textillate [textillate] Shortcode
The ‘textillate’ shortcode from the Easy-Textillate plugin is designed to animate texts in WordPress posts. It offers customizable effects for text entry and exit, with options for sequence, shuffle, and reverse. This shortcode allows the user to specify a variety of parameters, including the animation type (‘effect_in’, ‘effect_out’), animation order (‘type_in’, ‘type_out’), and font styling. It also supports looping, delay settings, and compatibility with the [textillate-group] shortcode. The output is a span element with the animated text.
Shortcode: [textillate]
Parameters
Here is a list of all possible textillate shortcode parameters and attributes:
effect_in– Defines the animation effect for text entering.type_in– Determines the order of the incoming animation.effect_out– Defines the animation effect for text exiting.type_out– Determines the order of the outgoing animation.loop– Decides if the animation should loop continuously.mindisplaytime– Sets the minimum display time in milliseconds.initialdelay– Sets the initial delay before the animation starts.delay– Sets the delay between each animated letter.font_family– Specifies the font family for the text.font_color– Specifies the color of the text.font_size– Specifies the size of the text.font_weight– Specifies the weight of the font.letter_spacing– Sets the space between each letter in the text.
Examples and Usage
Basic example – The shortcode is used to apply a textillate effect on the given content. The default parameters are used in this case.
[textillate]Your Text Here[/textillate]Advanced examples
1. Using the shortcode to apply a specific textillate effect ‘fadeInLeftBig’ for the incoming text and ‘hinge’ for the outgoing text. The loop is set to false, which means the effect will only occur once. The minimum display time is set to 3000 milliseconds.
[textillate effect_in="fadeInLeftBig" effect_out="hinge" loop="false" mindisplaytime="3000"]Your Text Here[/textillate]2. Using the shortcode to apply a ‘shuffle’ type effect for the incoming text and a ‘reverse’ type effect for the outgoing text. The font size, color, and weight are also specified.
[textillate type_in="shuffle" type_out="reverse" font_size="20px" font_color="#ff0000" font_weight="bold"]Your Text Here[/textillate]3. Using the shortcode within the textillate-group shortcode to apply a ‘sync’ type effect for the incoming text and a ‘sequence’ type effect for the outgoing text. The delay for the effect is set to 100 milliseconds.
[textillate-group][textillate type_in="sync" type_out="sequence" delay="100"]Your Text Here[/textillate][/textillate-group]PHP Function Code
In case you have difficulties debugging what causing issues with [textillate] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'textillate', 'et_textillate_shortcode' );Shortcode PHP function:
function et_textillate_shortcode( $atts, $content ) {
//удаляем html-сущности символов " и ' (нужно из-за заголовков виджетов)
$atts = str_replace(array(''', '"'), '', $atts);
extract(shortcode_atts(array(
'effect_in' => 'fadeInLeftBig',
'type_in' => 'sequence',
'effect_out' => 'hinge',
'type_out' => 'shuffle',
'loop' => 'true',
'mindisplaytime' => '2000',
'initialdelay' => '0',
'delay' => '50',
'font_family' => 'inherit',
'font_color' => 'inherit',
'font_size' => 'inherit',
'font_weight' => 'inherit',
'letter_spacing' => 'inherit',
), $atts));
//засовываем в переменную все извлеченные параметры шорткода
$textillate_options['randomid'] = et_randomid(6);
$textillate_options['effect_in'] = $effect_in;
$textillate_options['type_in'] = $type_in;
$textillate_options['effect_out'] = $effect_out;
$textillate_options['type_out'] = $type_out;
$textillate_options['loop'] = $loop;
$textillate_options['mindisplaytime'] = $mindisplaytime;
$textillate_options['initialdelay'] = $initialdelay;
$textillate_options['delay'] = $delay;
$textillate_options['font_family'] = $font_family;
$textillate_options['font_color'] = $font_color;
$textillate_options['font_size'] = $font_size;
$textillate_options['font_weight'] = $font_weight;
$textillate_options['letter_spacing'] = $letter_spacing;
//этот блок выполняется только, если он внутри шорткода [textillate-group]
global $et_textillate_group;
if ( $et_textillate_group == true ) {
if ( $type_in == 'sync' ) $temp_in = ' data-in-sync="true"';
if ( $type_in == 'sequence' ) $temp_in = ' data-in-sequence="true"';
if ( $type_in == 'shuffle' ) $temp_in = ' data-in-shuffle="true"';
if ( $type_in == 'reverse' ) $temp_in = ' data-in-reverse="true"';
if ( ! $temp_in ) $temp_in = ' data-in-sequence="true"';
if ( $type_out == 'sync' ) $temp_out = ' data-out-sync="true"';
if ( $type_out == 'sequence' ) $temp_out = ' data-out-sequence="true"';
if ( $type_out == 'shuffle' ) $temp_out = ' data-out-shuffle="true"';
if ( $type_out == 'reverse' ) $temp_out = ' data-out-reverse="true"';
if ( ! $temp_out ) $temp_out = ' data-out-shuffle="true"';
$output = '<span data-in-delay="'.$delay.'" data-out-delay="'.$delay.'" data-in-effect="'.$effect_in.'"'.$temp_in.' data-out-effect="'.$effect_out.'"'.$temp_out.'>';
$output .= $content;
$output .= '</span>';
return $output;
}
//выводим разметку сразу (у каждого шорткода свой уникальный ID)
$output = '<span id="textillate-' . $textillate_options['randomid'] . '">';
$output .= $content;
$output .= '</span>';
//скрипты не выводим, а записываем в буферную переменную $et_scripts
//чтобы потом вывести их в footer секции функцией et_scripts_footer()
global $et_scripts;
ob_start();
et_print_scripts($textillate_options);
$et_scripts .= ob_get_contents();
ob_end_clean();
return $output;
}
Code file location:
easy-textillate/easy-textillate/easy-textillate.phpEasy Textillate [textillate-group] Shortcode
The Easy Textillate shortcode, ‘textillate-group’, is designed to animate text with various options. This shortcode allows you to customize text appearance and animation. It takes parameters like ‘loop’, ‘mindisplaytime’, ‘initialdelay’, ‘delay’, ‘font_family’, ‘font_color’, ‘font_size’, ‘font_weight’, and ‘letter_spacing’. The shortcode extracts these parameters, generates a unique ID for each instance, and applies the settings to the text. Also, it stores scripts for later output in the footer section.
Shortcode: [textillate-group]
Parameters
Here is a list of all possible textillate-group shortcode parameters and attributes:
loop– Determines if the text animation should repeat.mindisplaytime– Sets the minimum display time for each text in milliseconds.initialdelay– Sets the initial delay before the animation starts in milliseconds.delay– Sets the delay between each letter animation in milliseconds.font_family– Sets the font family for the text.font_color– Sets the color of the text.font_size– Sets the size of the text.font_weight– Sets the thickness or thinness of the text.letter_spacing– Sets the space between each letter in the text.
Examples and Usage
Basic example – A simple usage of the ‘textillate-group’ shortcode with default parameters.
[textillate-group]Advanced examples – The ‘textillate-group’ shortcode with custom parameters. In this example, we’re setting the ‘loop’ to false, ‘mindisplaytime’ to 3000 milliseconds, ‘initialdelay’ to 100 milliseconds, and ‘delay’ to 60 milliseconds.
[textillate-group loop=false mindisplaytime=3000 initialdelay=100 delay=60]Another advanced example of the ‘textillate-group’ shortcode where we’re customizing the font attributes. Here, we’re setting ‘font_family’ to Arial, ‘font_color’ to red, ‘font_size’ to 20px, ‘font_weight’ to bold, and ‘letter_spacing’ to 2px.
[textillate-group font_family=Arial font_color=red font_size=20px font_weight=bold letter_spacing=2px]Lastly, an example where we’re combining both timing and font attribute parameters for the ‘textillate-group’ shortcode. This will create a unique text animation with a customized look and feel.
[textillate-group loop=true mindisplaytime=2500 initialdelay=50 delay=75 font_family="Times New Roman" font_color=blue font_size=18px font_weight=normal letter_spacing=1px]PHP Function Code
In case you have difficulties debugging what causing issues with [textillate-group] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'textillate-group', 'et_textillate_group_shortcode' );Shortcode PHP function:
function et_textillate_group_shortcode( $atts, $content ) {
//удаляем html-сущности символов " и ' (нужно из-за заголовков виджетов)
$atts = str_replace(array(''', '"'), '', $atts);
extract(shortcode_atts(array(
'loop' => 'true',
'mindisplaytime' => '2000',
'initialdelay' => '0',
'delay' => '50',
'font_family' => 'inherit',
'font_color' => 'inherit',
'font_size' => 'inherit',
'font_weight' => 'inherit',
'letter_spacing' => 'inherit',
), $atts));
//засовываем в переменную все извлеченные параметры шорткода
$textillate_options['randomid'] = et_randomid(6);
$textillate_options['loop'] = $loop;
$textillate_options['mindisplaytime'] = $mindisplaytime;
$textillate_options['initialdelay'] = $initialdelay;
$textillate_options['delay'] = $delay;
$textillate_options['font_family'] = $font_family;
$textillate_options['font_color'] = $font_color;
$textillate_options['font_size'] = $font_size;
$textillate_options['font_weight'] = $font_weight;
$textillate_options['letter_spacing'] = $letter_spacing;
//выводим разметку сразу (у каждого шорткода свой уникальный ID)
//выполняем внутри шорткоды [textillate] по специальной схеме
//для этого ставим глобальный флаг $et_textillate_group
global $et_textillate_group;
$et_textillate_group = true;
$output = '<span id="textillate-' . $textillate_options['randomid'] . '">';
$output .= '<span style="visibility: hidden;"><span class="tlt-texts" style="display:none;">' . do_shortcode($content) . '</span> </span>';
$output .= '</span>';
$et_textillate_group = false;
//скрипты не выводим, а записываем в буферную переменную $et_scripts
//чтобы потом вывести их в footer секции функцией et_scripts_footer()
global $et_scripts;
ob_start();
et_print_scripts_group($textillate_options);
$et_scripts .= ob_get_contents();
ob_end_clean();
return $output;
}
Code file location:
easy-textillate/easy-textillate/easy-textillate.phpConclusion
Now that you’ve learned how to embed the Easy Textillate Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply