Home>Support>Can’t Enable My Widget?

Can’t Enable My Widget?

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?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 days, 18 hours ago Alex S Hi, I Work Here

    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.

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More