Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hey,
So I have a text-animation-widget that utilises the Animate.css lib.
I have this file-tree:
|-wp-content |-----plugins |---------extend-widgets-bundle |-------------extra-widgets |-----------------text-animation-widgets |---------------------tpl |-------------------------text-animation-widget-template.php |---------------------text-animation.widget.php
Here, I have this code:
text-animation-widget-template.php
<div>
<?php
$textToAnimate = $instance['text'];
$animation = $instance['animation'];
$delay = $instance['delay'];
$infinite = $instance['infinite'];
var_dump($textToAnimate);
var_dump($animation);
var_dump($delay);
var_dump($infinite);
?>
</div>
text-animation.widget.php
<?php
/*
* Widget Name: Text Animation Widget
* Description: A widget which adds animate.css
* Author: Trey Taylor
*/
class Text_Animation_Widget extends SiteOrigin_Widget
{
function __construct()
{
parent::__construct(
'text-animation-widget',
__('Text Animation Widget', 'text-animation-widget-text-domain'),
[
'description' => __(
'Create Text Animation with the Text Animate Widget',
'text-animation-widget-text-domain')
],
[],
[
'text' => [
'type' => 'text',
'label' => __('Text to Animate', 'text-animation-widget-text-domain'),
'default' => ''
],
'animation' => [
'type' => 'select',
'label' => __('Animation', 'text-animation-widget-text-domain'),
'default' => '',
'options' => $this->get_animation_options()
],
'delay' => [
'type' => 'select',
'label' => __('Delay (in seconds)', 'text-animation-widget-text-domain'),
'default' => '',
'options' => $this->get_delay_options()
],
'infinite' => [
'type' => 'checkbox',
'label' => __('Infinite?', 'text-animation-widget-text-domain'),
'default' => ''
]
],
plugin_dir_path(__FILE__)
);
}
function get_template_name($instance)
{
return 'text-animation-widget-template';
}
function get_style_name($instance)
{
return 'text-animation-widget-style';
}
public function get_animation_options()
{
return [
'bounce' => __('Bounce', 'widget-form-fields-text-domain'),
'bounceIn' => __('Bounce In', 'widget-form-fields-text-domain'),
'bounceInDown' => __('Bounce In Down', 'widget-form-fields-text-domain'),
'bounceInLeft' => __('Bounce In Left', 'widget-form-fields-text-domain'),
'bounceInRight' => __('Bounce In Right', 'widget-form-fields-text-domain'),
'bounceInUp' => __('Bounce In Up', 'widget-form-fields-text-domain'),
'bounceOut' => __('Bounce Out', 'widget-form-fields-text-domain'),
'bounceOutDown' => __('Bounce Out Down', 'widget-form-fields-text-domain'),
'bounceOutLeft' => __('Bounce Out Left', 'widget-form-fields-text-domain'),
'bounceOutRight' => __('Bounce Out Right', 'widget-form-fields-text-domain'),
'bounceOutUp' => __('Bounce Out Up', 'widget-form-fields-text-domain'),
'fadeIn' => __('Fade In', 'widget-form-fields-text-domain'),
'fadeInDown' => __('Fade In Down', 'widget-form-fields-text-domain'),
'fadeInLeft' => __('Fade In Left', 'widget-form-fields-text-domain'),
'fadeInRight' => __('Fade In Right', 'widget-form-fields-text-domain'),
'fadeInUp' => __('Fade In Up', 'widget-form-fields-text-domain'),
'fadeInDownBig' => __('Fade In Down Big', 'widget-form-fields-text-domain'),
'fadeInLeftBig' => __('Fade In Left Big', 'widget-form-fields-text-domain'),
'fadeInRightBig' => __('Fade In Right Big', 'widget-form-fields-text-domain'),
'fadeInUpBig' => __('Fade In Up Big', 'widget-form-fields-text-domain'),
'fadeOut' => __('Fade Out', 'widget-form-fields-text-domain'),
'fadeOutDown' => __('Fade Out Down', 'widget-form-fields-text-domain'),
'fadeOutLeft' => __('Fade Out Left', 'widget-form-fields-text-domain'),
'fadeOutRight' => __('Fade Out Right', 'widget-form-fields-text-domain'),
'fadeOutUp' => __('Fade Out Up', 'widget-form-fields-text-domain'),
'fadeOutDownBig' => __('Fade Out Down Big', 'widget-form-fields-text-domain'),
'fadeOutLeftBig' => __('Fade Out Left Big', 'widget-form-fields-text-domain'),
'fadeOutRightBig' => __('Fade Out Right Big', 'widget-form-fields-text-domain'),
'fadeOutUpBig' => __('Fade Out Up Big', 'widget-form-fields-text-domain'),
'flash' => __('Flash', 'widget-form-fields-text-domain'),
'flipInX' => __('Flip In X', 'widget-form-fields-text-domain'),
'flipInY' => __('Flip In Y', 'widget-form-fields-text-domain'),
'flipOutX' => __('Flip Out X', 'widget-form-fields-text-domain'),
'flipOutY' => __('Flip Out Y', 'widget-form-fields-text-domain'),
'headShake' => __('Head Shake', 'widget-form-fields-text-domain'),
'heartBeat' => __('Heartbeat', 'widget-form-fields-text-domain'),
'hinge' => __('Hinge', 'widget-form-fields-text-domain'),
'jackInTheBox' => __('Jack in the Box', 'widget-form-fields-text-domain'),
'jello' => __('Jello', 'widget-form-fields-text-domain'),
'lightSpeedIn' => __('Light Speed In', 'widget-form-fields-text-domain'),
'lightSpeedOut' => __('Light Speed Out', 'widget-form-fields-text-domain'),
'pulse' => __('Pulse', 'widget-form-fields-text-domain'),
'rollIn' => __('Roll In', 'widget-form-fields-text-domain'),
'rollOut' => __('Roll Out', 'widget-form-fields-text-domain'),
'rotateIn' => __('Rotate In', 'widget-form-fields-text-domain'),
'rotateInDownLeft' => __('Rotate In Down Left', 'widget-form-fields-text-domain'),
'rotateInDownRight' => __('Rotate In Down Right', 'widget-form-fields-text-domain'),
'rotateInUpLeft' => __('Rotate In Up Left', 'widget-form-fields-text-domain'),
'rotateInUpRight' => __('Rotate In Up Right', 'widget-form-fields-text-domain'),
'rotateOut' => __('Rotate Out', 'widget-form-fields-text-domain'),
'rotateOutUpLeft' => __('Rotate Out Up Left', 'widget-form-fields-text-domain'),
'rotateOutUpRight' => __('Rotate Out Up Right', 'widget-form-fields-text-domain'),
'rotateOutDownLeft' => __('Rotate Out Down Left', 'widget-form-fields-text-domain'),
'rotateOutDownRight' => __('Rotate Out Down Right', 'widget-form-fields-text-domain'),
'rubberBand' => __('Rubber Band', 'widget-form-fields-text-domain'),
'shake' => __('Shake', 'widget-form-fields-text-domain'),
'slideInDown' => __('Slide In Down', 'widget-form-fields-text-domain'),
'slideInLeft' => __('Slide In Left', 'widget-form-fields-text-domain'),
'slideInRight' => __('Slide In Right', 'widget-form-fields-text-domain'),
'slideInUp' => __('Slide In Up', 'widget-form-fields-text-domain'),
'slideOutDown' => __('Slide Out Down', 'widget-form-fields-text-domain'),
'slideOutLeft' => __('Slide Out Left', 'widget-form-fields-text-domain'),
'slideOutRight' => __('Slide Out Right', 'widget-form-fields-text-domain'),
'slideOutUp' => __('Slide Out Up', 'widget-form-fields-text-domain'),
'swing' => __('Swing', 'widget-form-fields-text-domain'),
'tada' => __('Tada', 'widget-form-fields-text-domain'),
'wobble' => __('Wobble', 'widget-form-fields-text-domain'),
'zoomIn' => __('Zoom In', 'widget-form-fields-text-domain'),
'zoomInDown' => __('Zoom In Down', 'widget-form-fields-text-domain'),
'zoomInLeft' => __('Zoom In Left', 'widget-form-fields-text-domain'),
'zoomInRight' => __('Zoom In Right', 'widget-form-fields-text-domain'),
'ZoomInUp' => __('Zoom In Up', 'widget-form-fields-text-domain'),
'zoomOut' => __('Zoom Out', 'widget-form-fields-text-domain'),
'zoomOutDown' => __('Zoom Out Down', 'widget-form-fields-text-domain'),
'zoomOutLeft' => __('Zoom Out Left', 'widget-form-fields-text-domain'),
'zoomOutRight' => __('Zoom Out Right', 'widget-form-fields-text-domain'),
'zoomOutUp' => __('Zoom Out Up', 'widget-form-fields-text-domain'),
];
}
public function get_delay_options()
{
return [
'default' => __('Default', 'widget-form-fields-text-domain'),
'delay-2s' => __('Delay 2 Seconds', 'widget-form-fields-text-domain'),
'delay-3s' => __('Delay 3 Seconds', 'widget-form-fields-text-domain'),
'delay-4s' => __('Delay 4 Seconds', 'widget-form-fields-text-domain'),
'delay-5s' => __('Delay 5 Seconds', 'widget-form-fields-text-domain')
];
}
public function get_speed_options()
{
return [
'default' => __('Default', 'widget-form-fields-text-domain'),
'slow' => __('Slow', 'widget-form-fields-text-domain'),
'slower' => __('Slower', 'widget-form-fields-text-domain'),
'fast' => __('Fast', 'widget-form-fields-text-domain'),
'faster' => __('Faster', 'widget-form-fields-text-domain')
];
}
}
siteorigin_widget_register('text-animation-widget', __FILE__, 'Text_Animation_Widget');
I then go to Plugins > SiteOrigin Widgets where, I see my widget. I click enable and it stays lit up. However, when I refresh the page, the widget is still disabled .. What am I doing wrong in my code?
Hi Trey,
I suspect the issue your widget is the file name. Please rename the text-animation.widget.php file to text-animation-widget.php. Does that help? If not, try: text-animation-widgets.php.