Share

Continuing from the previous tutorial of creating a wordpress plugin, In this part we will complete our plugin code. To go to the previous tutorial click here.

Plugin Setting Page

If you continue from the previous tutorial we created the plugin page but it’s empty for now. Let’s add the code to render the form:

Open wp-content/plugins/animate-logo/admin/admin.php and add the below code:

<?php

$effect_groups = array(
    'Attention Seekers' => array(
        'bounce',
        'flash',
        'pulse',
        'rubberBand',
        'shake',
        'swing',
        'tada',
        'wobble',
        'jello'
    ),

    'Bouncing Entrances' => array(
        'bounceIn',
        'bounceInDown',
        'bounceInLeft',
        'bounceInRight',
        'bounceInUp'
    ),

    'Bouncing Exits' => array(
        'bounceOut',
        'bounceOutDown',
        'bounceOutLeft',
        'bounceOutRight',
        'bounceOutUp'
    ),

    'Fading Entrances' => array(
        'fadeIn',
        'fadeInDown',
        'fadeInDownBig',
        'fadeInLeft',
        'fadeInLeftBig',
        'fadeInRight',
        'fadeInRightBig',
        'fadeInUp',
        'fadeInUpBig'
    ),

    'Fading Exits' => array(
        'fadeOut',
        'fadeOutDown',
        'fadeOutDownBig',
        'fadeOutLeft',
        'fadeOutLeftBig',
        'fadeOutRight',
        'fadeOutRightBig',
        'fadeOutUp',
        'fadeOutUpBig'
    ),

    'Flippers' => array(
        'flip',
        'flipInX',
        'flipInY',
        'flipOutX',
        'flipOutY'
    ),

    'Lightspeed' => array(
        'lightSpeedIn',
        'lightSpeedOut'
    ),

    'Rotating Entrances' => array(
        'rotateIn',
        'rotateInDownLeft',
        'rotateInDownRight',
        'rotateInUpLeft',
        'rotateInUpRight'
    ),

    'Rotating Exits' => array(
        'rotateOut',
        'rotateOutDownLeft',
        'rotateOutDownRight',
        'rotateOutUpLeft',
        'rotateOutUpRight'
    ),

    'Sliding Entrances' => array(
        'slideInUp',
        'slideInDown',
        'slideInLeft',
        'slideInRight'
    ),

    'Sliding Exits' => array(
        'slideOutUp',
        'slideOutDown',
        'slideOutLeft',
        'slideOutRight'
    ),

    'Zoom Entrances' => array(
        'zoomIn',
        'zoomInDown',
        'zoomInLeft',
        'zoomInRight',
        'zoomInUp'
    ),

    'Zoom Exits' => array(
        'zoomOut',
        'zoomOutDown',
        'zoomOutLeft',
        'zoomOutRight',
        'zoomOutUp'
    ),

    'Specials' => array(
        'hinge',
        'jackInTheBox',
        'rollIn',
        'rollOut'
    )
);

?>

<div>
    <h2>Animate logo settings</h2>

    <form method="post" action="#">
        <p>Please choose the transition effect you want to apply on your logo!</p>
        <table>
            <tr valign="top">
                <th scope="row"><label for="animate_logo_transition_name">Transition Effect</label></th>
                <td>
                    <select class="input input--dropdown" id="animate_logo_transition_name" name="animate_logo_transition_name">
                        <option value="">---select---</option>

                        <?php foreach ($effect_groups as $group => $effects): ?>

                        <optgroup label="<?php echo $group ?>">

                            <?php foreach ($effects as $effect): ?>

                                <option value="<?php echo $effect ?>" <?php echo get_option('animate_logo_transition_name')==$effect?"selected":""; ?>><?php echo $effect ?></option>

                            <?php endforeach; ?>

                        </optgroup>

                        <?php endforeach; ?>

                    </select>
                </td>
                <td valign="top" width="500px" align="right">
                    <h3 style="text-align: center">Preview</h3>
                    <div class="preview" style="background: #1ab7ea; padding: 10px;border: 1px solid #000">
                        <h2>Mouse over this text to preview your changes</h2>

                    </div>
                </td>
            </tr>
        </table>
        <?php submit_button(); ?>
    </form>

    <script type="text/javascript">
        jQuery(function () {

            jQuery("#animate_logo_transition_name").change(function () {

                jQuery(".preview h2").removeClass().addClass(jQuery(this).val() + " animated");

            });

            jQuery(".preview h2").mouseover(function (e) {
                jQuery(this).attr('class', '').addClass("<?php echo get_option('animate_logo_transition_name') ?>" + " animated");
            });

            jQuery(".preview h2").mouseleave(function (e) {
                jQuery(this).attr('class', '');
            });


        });
    </script>
</div>

The above code will display a form that will be used to save the css animation effect for our logo. First we set an array that will represent all the css classes for our animation. These css classes already defined in animate.css library.

Next we created a table and insert a form into it. Inside that form we iterate over the array and display in select tag as options and option groups. Also we created a preview text so when the user selects specific effect from dropdown we animate it immediately.

Then we created the jquery code that will handle the listener for onchange on the dropdown and display the effect as shown:

<script type="text/javascript">
        jQuery(function () {

            jQuery("#animate_logo_transition_name").change(function () {

                jQuery(".preview h2").removeClass().addClass(jQuery(this).val() + " animated");

            });

            jQuery(".preview h2").mouseover(function (e) {
                jQuery(this).attr('class', '').addClass("<?php echo get_option('animate_logo_transition_name') ?>" + " animated");
            });

            jQuery(".preview h2").mouseleave(function (e) {
                jQuery(this).attr('class', '');
            });


        });
    </script>

Now refresh the browser and try to select any effect you will see that it animates in the preview as shown here:

Now we want to handle submitting our form. Let’s return back to animate-logo.php file.

<?php
/**
 * Plugin Name: Animate Logo
 * Plugin URI: http://myplugin-website.com
 * Description: This simple plugin uses animate css library to enable website admins to animate logo by choosing from several animation effects
 * Version: 0.0.1
 * Author: Wael Salah
 */

defined( 'ABSPATH' ) or die( 'No script access please!' );

wp_enqueue_script('jquery');

wp_enqueue_style( 'animate-logo-main-style', plugins_url("animate-logo/css/animate.css"),false,'1.0','all');

function animate_logo_register_menu_handler()
{
    add_options_page(__( 'Animate Logo', 'textdomain' ), 'Animate Logo', 'manage_options', "animate_logo", 'animate_logo_options_page');
}

add_action("admin_menu", "animate_logo_register_menu_handler");

function animate_logo_options_page()
{
    animate_logo_options_submit();

    require_once __DIR__ . "/admin/admin.php";
}

function animate_logo_options_submit()
{
    if(isset($_POST['submit'])) {

        if(empty($_POST['animate_logo_transition_name'])) {

            show_status_msg("Please choose an option");

            return;
        }

        if(get_option('animate_logo_transition_name')) {
            update_option('animate_logo_transition_name', $_POST['animate_logo_transition_name']);
        } else {
            add_option('animate_logo_transition_name', $_POST['animate_logo_transition_name']);
        }

        show_status_msg("Data saved successfully!", "success");

        return;

    }
}

function show_status_msg($msg, $status = 'error')
{
    if($status == 'error') {
        ?>
        <div class="notice error my-acf-notice is-dismissible" >
            <p><?php echo $msg; ?></p>
        </div>
<?php
    } else if($status == 'success') {
        ?>
        <div class="updated notice">
            <p><?php echo $msg; ?></p>
        </div>
         <?php
    }
}

As show in code above the process is pretty simple we created a function called animate_logo_options_submit() that will submit our form. 

First we checked if an option is selected or not, if not we display error message to the user. Then to save the data to wordpress database, we used wordpress functions add_option() and update_option() and get_option(). These first two functions will save and update the data respectively. and the third function retrieve the option value by name.

add_option() and update_option() takes the following parameters:

• option name
• option value

get_option() takes the option name and return its value.

Next we created a simple function show_status_msg() and it will display a nice error or success message to the user.

Finally we need we need to call animate_logo_options_submit() in animate_logo_options_page()  as shown:

function animate_logo_options_page()
{
    animate_logo_options_submit();

    require_once __DIR__ . "/admin/admin.php";
}

Now try to select an option and click submit, it will save and display success message, great job.

At this point we created our plugin settings page and we are able to save the data, now let’s add the code to animate our website logo.

Animating the logo

Open wp-content/plugins/animate-logo/front/front.php and add the following code

<?php

add_filter( 'get_custom_logo', 'animate_logo_wrap_logo_link' );


function animate_logo_wrap_logo_link( $html ) {

    $html = '<div class="animate-logo-wrapper">' . $html . '</div>';

    return $html;
}

In the above code we tweak the get_custom_logo wordpress filter. This filter enables you to modify the logo. Note that this only works with custom logos, i.e logos that are images. So we wrapped our logo in a div tag with class of animate-logo-wrapper so we can reference this class in the javascript code.

Next we need to add javascript code to apply the selected animation effect to our logo as shown:

function animate_logo_load_script()
{
    $script = "<script type=\"text/javascript\">";

    $script .= 'jQuery(function(){
       
       jQuery(".animate-logo-wrapper").mouseover(function (e) {
            jQuery(this).addClass("' . get_option('animate_logo_transition_name') . '").addClass("animated");
       });
       
       jQuery(".animate-logo-wrapper").mouseleave(function (e) {
            jQuery(this).removeClass("animated").removeClass("' . get_option('animate_logo_transition_name') . '");
       });
            
    });';

    $script .= "</script>";

    echo $script;
}

add_action( 'wp_footer', 'animate_logo_load_script');

In the code above we created a new function that will output the above jquery code to the footer. To accomplish this we tweaked the wp_footer wordpress action. This action used if you want to inject code into your website footer.

animate_logo_load_script() simply output a string containing the jquery code. we add event listeners for mouseover so mouseleave so when the user hover over the logo it will add the css class for the animation and it leaves the logo it will clear the css classes on the logo.

Now go to your website front page and then mouse over the logo you will the animation effect. Note that this only works with custom logos.

Conclusion

You learned in this part how to create a simple form in wordpress plugin. The example shown in this tutorial is so simple but you can extend this plugin with more configurations. You also learned how to load code in website frontend. This is the power of wordpress plugins. In future tutorials i will show more advanced techniques in creating plugins. Click this link to see part 1 of the tutorial.