In this tutorial we are going to add a custom cursor tracker to an Elementor website (though this can easily be adapted to work on any WordPress installation).

Custom cursor trackers can be found on several high quality, well designed sites, and we wanted to show you how to add this unique functionality to your own creation.

Adding a custom cursor tracker to Elementor is free, simple, and goes a long way when it comes to differentiating yourself and your site from the pack.

What’s A Custom Cursor Tracker?

This effect goes by a lot of names, such as “custom mouse pointer”, “cursor tracker” and more. Essentially, it replaces your default pointer with a graphic element, like a dot and circle.

By replacing the default pointer, you can add unique hover effects. In this tutorial, when hovering over designated buttons, our pointer will snap to their border.

How Do You Add A Custom Cursor To WordPress?

There are several ways that you can add a custom cursor tracker to a WordPress website. Some plugins applied to the general WordPress installation, while other element or add-on packs contain Cursor tracking utilities. The commonality between all of these solutions is that they are paid.

The leading solution for WordPress is “WP Custom Cursors | WordPress Cursor Plugin”, while the leading solution for an Elementor based WordPress installation is the cursor tracker utility that comes with Dynamic Addons.

Dynamic Addons is a great addition to any Elementor website, but it also costs $49.00 a year, placing it out of the budget of many creators.

We've used both, but the price and extra code that they add to a WordPress website sometimes makes these solutions a bit undesirable. After all, the only thing we want to add is a simple pointer replacement.

In this tutorial, we wanted to find a free way to add cursor tracking to an Elementor website, while keeping things as simple and easy to integrate as possible.

All of these cursor tracking solutions wrap up an elegant collection of JavaScript and CSS, offering users an easy way to add custom cursor tracking effects to their website.

For our solution, we wanted to find a lightweight, preexisting JavaScript library that added custom cursor effects to a WordPress website. Surprisingly, there aren't many offerings out there, as the predominant way of integrating this effect into any website is through a collection of manual CSS and JavaScript.

This tutorial walks you through this way of adding the effect to your site:

The main issue is that there is several 100 lines of JavaScript and CSS, and if you aren't familiar with those languages, this tutorial is a bit outside of your skill set.

For us, we were looking for an easy to integrate library - one that could be added to Elementor with a few lines of code, and one that we could write a tutorial about for those who were looking for a quick and easy way to add this effect.

MagicMouse.JS: Custom Cursor Tracker Library

Our search resulted in us finding the GitHub repository of a Library called MagicMouse.js -- the perfect solution.

On The GitHub page, it bills itself as a “lightweight javascript library to create some amazing effects for the mouse (cursor) on your website - MagicMouse.js : https://magicmousejs.web.app".

Because it's a pre existing JavaScript library, it should be fairly easy to integrate it into a WordPress website, and initialize it on any Elementor page.

It's also incredibly lightweight, with a file size of only a few kilobytes. Finally, the code is relatively new, published five months ago, meaning it's probably compatible with most modern browsers. Being open source, this can be used in any application, commercial, or otherwise.

Another benefit is that it is built on Vanilla JavaScript, which can be run on WordPress without any complex integrations. Essentially, it does the simple job of replacing a pointer with a custom cursor, and can easily be added to any WordPress website.

Adding MagicMouse To WordPress

According to the simple documentation, to install the magic mouse library on any website, you need to call both the JavaScript and CSS files to the actual site, and then initialize it on a per page basis. You can then also add custom hover effects throughout the site.

The remainder of our tutorial will discuss how exactly we can install the JavaScript and CSS files on our WordPress website, and then initialize the actual effect on our Elementor pages.

• Step 1: Add MagicMouse JS and CSS files to WordPress
• Step 2: Initialize the MagicMouse effect on pages (single pages or globally)
• Step 3 (optional): Set Up Hover Effects

Add MagicMouse JS and CSS files to WordPress

Of all of the steps here, this is going to be the most difficult and complex one. First, we're going to download the most up-to-date files from the GitHub repository, and then enqueue the JS and CSS files into our core WP site by editing our functions.php file.

As long as you follow this step by step tutorial, it shouldn't be that difficult, but if you're looking to skip this step entirely and just initialize the magic mouse effect on your Elementor site, you can download this plugin that we've created specifically to add the library to WordPress.

When adding JavaScript and CSS to WordPress, the officially documented and recommended way to do this is called "enqueuing” (that’s what our plugin above does for you automatically).

First, download the most up to date .JS and .CSS files from the Github Repo. They are found here:

All you need are these two files:

Then, using FTP, upload these two files to your theme’s assets folder. In our example, we’re using the Hello Elementor Theme.

In the theme root directory, navigate to the assets folder. Then past the magic_mouse.js file into the Assets -> JS folder and the magic-mouse.css file in the Assets -> CSS folder.

Hello Elementor doesn’t include the JS and CSS folders by default, so we simply made new ones and added the files.

Once the files are uploaded, It's time to add them to WordPress. When loading locally hosted third party scripts and stylesheets (not via CDN), you need to register and enqueue them into your WordPress website.

The official way to do this is make a child theme, and set up a custom functions.php file, but we’re going to deviate a bit, as our method is easier to manage.

Download a free plugin called Code Snippets.

Once installed, create a new code snippet. This replaces the need to go into your Functions.php file, and gives you a central location to manage all custom PHP code for your site. This is the plugin that we use instead of going the functions.php route for anything.

We’re going to use on snippet to enqueue and register both our .js and .css files on our Elementor site. Essentially, what this does is loads both files on the site when a visitor loads the page. You’re doing what could be done with a <script> tag and <link> tag (though this is the right way of doing things).

First, we’ll enqueue and register the mouse_magic.js file. To do that, name it and specify the location of the .js file. If you’re following our tutorial here’s what this line should look like:

function isotropic_enqueue_javascript() { 
    wp_enqueue_script( 'mousemagic-js', get_template_directory_uri() . '/assets/js/magic_mouse.js' ); 
}Code language: JavaScript (javascript)

Then register the file, which loads it when your pages load for frontend visitors.

add_action( 'wp_enqueue_scripts', 'isotropic_enqueue_javascript' );
Code language: JavaScript (javascript)

Now we’ll do the same thing for the CSS stylesheet (this is a bit different, code wise):

function isotropic_enqueue_stylesheets() { 
    wp_enqueue_style( 'mousemagic-css', get_template_directory_uri() . '/assets/css/magic-mouse.css' ); 
}Code language: JavaScript (javascript)

Register it:

add_action( 'wp_enqueue_scripts', 'isotropic_enqueue_stylesheets' );Code language: JavaScript (javascript)

Your complete chunk of php should look like this:

Save and activate the code snippet.

Now, we’ll test to see if our .css and .js files are loading on the frontend of our website. Navigate to any fontend page and load the browser Dev Tools (CTRL + SHIFT + I).

Once the devtools popup, go to the network tab, and CRTL + R to reload your page. Then, search for “magic” and check to see if both the CSS and JS files show up. If they do, it means they’ve loaded onto your page, and you can move on to step two.

To close this section, I wanted to restate that we made a plugin which allows you to skip all of step one. Simply install, activate, and move to step two.

Initialize the MagicMouse effect on pages (single pages or globally)

Now for the simpler part. MagicMouse is now installed on our website. All we need to do is add a bit of code that tells your Elementor/WordPress page to replace the default cursor with the custom pointer. The docs on Github tells you to add this code to any page that you want the effect to show up on.

First, let’s cover the code/options, then let’s cover how to actually add it to you Elementor site.

<script type="text/javascript">
    options = {
	"cursorOuter": "circle-basic",
	"hoverEffect": "circle-move",
	"hoverItemMove": false,
	"defaultCursor": false,
	"outerWidth": 30,
	"outerHeight": 30
      };
    magicMouse(options);
</script>Code language: HTML, XML (xml)

• CursorOuter can be either a “circle-basic” or “disabled”.
• HoverEffect has three choices: default: "circle-move", other options : "pointer-blur", "pointer-overlay"
• Hoveritemmove and default cursor can be true or false.
• OuterWidth and OuterHeight specify the size of the cursor effect.

After choosing/setting your options, you now need to add the code to your site, which will both initialize the effect on page load, and apply your styles.

Here, you have a few options.

1. Add it to a specific page
2. Add it globally (Elementor Way)
3. Add it globally (WordPress way)

Let’s cover each option.

Adding it to a specific page is easy. First, open the Elementor editor for the page that you want the custom cursor to show on. Then, drag an HTML element onto your page. Finally, paste the code in, save the page, and preview it on the frontend. If all goes well, you should now have a custom cursor in your Elementor website.

Doing this globally (applying the custom cursor to all pages) can be done by adding this html block + code to a header/footer template in Elementor.

You can also add the code to your site by using Code Snippets and a bit of PHP. Here’s a tutorial on that.

Now, just test everything out, and you should have a custom mouse pointer on your Elementor or WordPress website for free. Pretty cool, right?

Adding Those Custom Button Effects

MagicMouse.js has support for custom effects when your pointer hovers over specific elements. Check out this video demo:

When we hover over the button, the outer ring of our custom cursor snaps to the border. Pretty cool, right?

This javascript library has built in support for this effect – all you need to do is add 2 custom classes to the element that you want the snap effect to apply to.

magic-hover magic-hover__square

The annoying part is that you can’t simply add these classes to Elementor elements, as it won’t work. That’s because Elementor Elements have tons of classes, IDs and DOM layers to the. If you want the snap effect to work on your Elementor site, you’ll need to add in pure HTML elements, like our button on the demo page:

Here’s the code:

<button id="demobutton" class="magic-hover magic-hover__square">Click Here</button>

<style>
    #demobutton {
        background: #818A91;
        color: white;
        border:none;
    }
</style>Code language: HTML, XML (xml)

Conclusion

This article should have shown you how to add a unique custom pointer/cursor to your Elementor/WordPress website. First, add the library to your WordPress site, then initialize it, and finally, add unique Elements that our effect can snap to.

There are several other ways to add this effect, like using the Elementor addon called Dynamic Content, or the standalone “WP Custom Cursors | WordPress Cursor Plugin” plugin.

However, this method is free, and should be pretty easy to get up and running by following the steps outlined in this tutorial.

If you have any questions about adding custom pointers/cursors to your WordPress site, feel free to reach out via our comments section. If you liked this tutorial, please share it on Social Media and consider subscribing to our Mailing List ?