If you've ever scrolled through award winning WordPress websites, you may notice that there is a custom mouse cursor effect on many of them. This typically consists of a small pointer, dot, circle, or other thing that replaces the cursor. While there is a ton of debate in the user design and experience community on whether this is actually a good practice, the fact of the matter is that it adds a unique spin to the tried and true mouse pointer. If you integrate it properly into a WordPress website, a custom cursor effect could add a truly premium feel.
You already know that you can add pretty much any functionality with a WordPress plugin, And adding a custom cursor effect is no different.
First, let's take a look at what custom mouse pointers and custom cursor effects look like on several word press websites that incorporate them into their design. We're also going to take a look at other interactions that these custom cursor effects have, as many of them don't just remain as a pointer and circle.
For example, in several prominent hotel web sites, they have a custom cursor that snaps to each button, making it easy for the user to click on. In other websites, the custom cursor changes depending on what type of content it is hovering over. Use case: if the website needs you to drag to the right to advance a slide, the custom cursor transforms from a circle pointer to a right arrow saying “scroll”.
The first plugin is one created by us. MagicMouse for WordPress comes in at $5, and helps you integrate the MagicMouse.JS library directly into your WordPress website. Then, all you need to do is initialize the plugin on pages that you want your custom mouse cursor effect, and also use CSS to set up the “snap to button feature”.
It requires some coding, but it's pretty well documented in our blog post titled "Adding a Custom Cursor to Elementor", and is much cheaper than many premium options out there. When compared to free plugins, it's also just a bit better. If you would like to install the Magic Mouse library by yourself, you can learn how to do that in this article (it's free but requires some technical know how).
Ultimate Custom Cursor is a WordPress plugin that is freely available on the repository. It's not the most popular one out there, but it definitely gets the job done if you're looking to simply replace your standard mouse pointer with a new design.
The 3rd and final plug-in offering on this list is a premium one that was sourced from Code Canyon. We've actually used this before and have some experience with the tool.
WP Custom Cursors has been around for a while and has about 500 sales. It costs $16.00, and allows you to integrate fairly advanced custom cursor effects in your WordPress website without needing to touch a single line of code. If that's your aim, this is the plug in for you.
It's actively maintained, and allows you to choose between many different cursors that will replace the standard mouse pointer. Additionally, it comes with your typical hover effects, custom integrations, and more. As developers, what we really like about this plugin is that the company behind it continuously updates it with backward support for older browsers.
For example, the most recent update which was shipped in September 2020 added support for Safari 9.1. That's a very small user group, but if you're looking to incorporate a custom cursor, you'll want to be able to support as many people on as many browsers as possible. Because the company continuously adds support for different browsers, that is something to be commended.
If you are looking to swap out the default mouse pointer with a custom cursor on a WordPress website, and want to do it with a plugin, avoiding any custom code in, these three are your best bets. The first one is created by us and costs $5 for lifetime access. It helps you install the Magic Mouse JS library on your WordPress website, meaning that all you to do is initialize it on the specific pages (or globally).
We hope that this gave you a good rundown of your choices when it comes to adding a custom cursor to WordPress, if you have any questions or comments, feel free to leave them below.
IsoGroup- Web Dev/Design, WordPress and More