---
title: "How to Add a Follow Circle Cursor in WordPress?"
url: https://nexterwp.com/docs/add-a-follow-circle-cursor-in-wordpress/
date: 2024-12-16
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add a follow circle cursor in WordPress? This type of cursor allows a circle to follow the mouse movements, creating a visually engaging and creative touch..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Follow-Circle-Cursor-in-WordPress_-1024x519.jpg
word_count: 393
---

# How to Add a Follow Circle Cursor in WordPress?

## Key Takeaways

- Nexter Blocks includes a Mouse Cursor block that allows a circle to follow the mouse movements on a WordPress website.
- Users can choose between Predefined and Custom options for the Circle Cursor Type in the Mouse Cursor block.
- The Circle Style section offers three options: Border, Progress, and Blend for customizing the appearance of the circle cursor.

Do you want to add a follow circle cursor in WordPress? This type of cursor allows a circle to follow the mouse movements, creating a visually engaging and creative touch that enhances the interactivity of your website.

With the Mouse Cursor block from Nexter Blocks, you can easily add a circle that follows the mouse cursor on your WordPress website.

*To check the complete feature overview documentation of the Nexter Blocks Mouse Cursor block,* *[click here](https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-custom-cursors/)

To do this, add the Mouse Cursor block to the page and follow the steps -

1. Select the appropriate cursor area from the **Cursor Area** dropdown.

2. Then select **Follow Circle** from the **Type** dropdown.

3. From the **Circle Cursor Type** section, you have to select the pointer type. Here you’ll find two options - 

- **Predefined** - To add predefined icons.

- **Custom** - To use a custom image as a mouse cursor.

You’ll find different options to add the cursor based on your selection. Let’s select Predefined here.

4. Then, from the **Select **dropdown, you have to select a cursor icon.

5. After that, from the **Circle Style** section, you have to select the circle type. Here you’ll find three options - 

- **Border **- To create a circle cursor with a border.

- **Progress **- To [create a progress circle cursor](https://nexterwp.com/docs/add-a-progress-cursor-in-wordpress/).

- **Blend **- To [create a blend circle cursor](https://nexterwp.com/docs/add-a-blend-cursor-in-wordpress/).

Select the option as per your requirements, let’s select Border here.

From the **Circle Max Width** and **Circle Max Height** sections, you can manage the width and height of the circle.

You can manage the circle’s left and top distance from the mouse cursor from the **Cursor Left Offset** and **Cursor Top Offset** sections.

From the **Circle Z-Index** section, you can maintain the z-index of the circle, if the circle doesn’t show over any element.

Then, in the **List of Tags for Hover Effect** section, you can add tags where you want to show the cursor hover effect.

> *Note: You can add multiple tags separated by a comma (,) and you have to add transform CSS for the hover effect in the Style tab.*

You can style the circle further from the Style tab.

Now you’ll see a circle following the mouse cursor.

## Frequently Asked Questions

**Q: What should I do if the follow circle cursor is not appearing on my WordPress site?**
A: If the follow circle cursor isn't showing, first ensure that the Mouse Cursor block from Nexter Blocks is installed and activated. This block is essential for adding the cursor effect. Additionally, check the Circle Z-Index setting; if it's too low, the cursor may be hidden behind other elements. Adjusting the z-index can help ensure visibility.

**Q: What are the best practices for styling the follow circle cursor in WordPress?**
A: When styling the follow circle cursor, consider using the Circle Max Width and Circle Max Height settings to ensure the cursor is appropriately sized for your design. Additionally, selecting a Circle Style that complements your website's themeu2014like Border, Progress, or Blendu2014can enhance visual appeal. Remember to test the cursor on different devices to ensure it performs well across platforms.

**Q: How can I troubleshoot issues with the circle cursor not following the mouse correctly?**
A: If the circle cursor isn't following the mouse as expected, check the Cursor Left Offset and Cursor Top Offset settings. These control the distance of the circle from the mouse pointer. If these values are set incorrectly, it may cause the cursor to appear misaligned. Adjusting these offsets can help achieve the desired effect.