--- 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-05-22 author: "Aditya Sharma" description: "Do you want to add a follow circle cursor in WordPress? This type of cursor displays a circle that follows mouse movement, creating a visually engaging touch that increases the..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Follow-Circle-Cursor-in-WordPress_-1024x519.jpg word_count: 587 --- # How to Add a Follow Circle Cursor in WordPress? ## Key Takeaways - Nexter Blocks includes the Mouse Cursor block, allowing users to add a circle that follows the mouse cursor on their WordPress website. - Users can customize the circle cursor's style, size, and hover behavior directly in the block editor of Nexter Blocks. - The Circle Style section offers three options: Border, Progress, and Blend, each providing a different visual effect for the cursor. Do you want to add a follow circle cursor in WordPress? This type of cursor displays a circle that follows mouse movement, creating a visually engaging touch that increases the interactivity of your website. With the Mouse Cursor block from Nexter Blocks, you can add a circle that follows the mouse cursor on your WordPress website and customise its style, size, and hover behaviour directly in the block editor. *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 Nexter Blocks, make sure it is installed and activated to enjoy all its features.** [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. This controls which part of the page the circle cursor is active on. Use this when you want the cursor effect only on a specific section rather than the entire page. 2. Then select **Follow Circle** from the **Type** dropdown. 3. From the **Circle Cursor Type** section, select the pointer type. You will find two options: - **Predefined** - To add a preset icon as the cursor. Use this for a quick setup when you want a standard icon that matches the block's built-in styles. - **Custom** - To use a custom image file as the cursor. Use this when you want to match the cursor to your brand or use a unique graphic. Different options will appear depending on your selection. For this example, select **Predefined**. 4. From the **Select** dropdown, choose the cursor icon you want to display inside the circle. 5. From the **Circle Style** section, select the circle type. You will find three options: - **Border** - Displays a circle with a visible border outline around the cursor. This is the most common choice for a clean, minimal cursor effect. - **Progress** - [Creates a progress circle cursor](https://nexterwp.com/docs/add-a-progress-cursor-in-wordpress/) that animates as the page scrolls. Use this on long-form content pages where you want to show reading progress. - **Blend** - [Creates a blend circle cursor](https://nexterwp.com/docs/add-a-blend-cursor-in-wordpress/) that uses a CSS blend mode to invert or mix colours against the background. Use this for creative or portfolio sites where a high-contrast cursor effect adds visual interest. Select the option that matches your design. For this example, select **Border**. From the **Circle Max Width** and **Circle Max Height** sections, set the width and height of the circle. Increase these values if you want a larger circle that is more noticeable on wide desktop screens. Adjust the circle's position offset from the mouse pointer using the **Cursor Left Offset** and **Cursor Top Offset** sections. These control how far the circle sits from the actual cursor position. From the **Circle Z-Index** section, set the stacking order of the circle. Increase this value if the circle does not appear above other elements on the page. In the **List of Tags for Hover Effect** section, add the HTML tags on which you want the cursor hover effect to activate. This lets you trigger a visual change in the cursor when the visitor hovers over specific elements such as buttons, links, or headings. > *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.* Style the circle further from the **Style** tab to control its colour, border, opacity, and transition speed. Once configured, you will see the circle following the mouse cursor on the page. ## 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.