Creating Your First WordPress Plugin (Part 2)

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:

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:

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.

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:

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

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:

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.

 

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.

Share this: