---
title: "How to Add a Custom Cursor in WordPress?"
url: https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/
date: 2024-12-16
modified: 2026-09-15
lang: en
author: "Aditya Sharma"
description: "The arrow every visitor arrives with is the one part of your design you did not choose. The Mouse Cursor block replaces it — across the whole page, or only..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Custom-Cursor-in-WordPress_-1024x519.jpg
word_count: 656
---

# How to Add a Custom Cursor in WordPress?

## Key Takeaways

- Mouse Cursor block reemplaza el puntero en toda la página o solo dentro de una sección o un bloque, y forma parte de Nexter Blocks Pro.
- Cursor Area define el alcance: Body afecta toda la página, Row afecta una sección, Column afecta una columna y Block afecta un solo bloque.
- Nexter Container es obligatorio para Row y Column, y Block solo funciona si va inmediatamente después del bloque que quiere cambiar.
- Cursor Icon cambia el cursor CSS a un cursor estándar como grab hand, mientras Follow Image, Follow Text y Follow Circle hacen que una imagen, una palabra o un círculo sigan al puntero.

The arrow every visitor arrives with is the one part of your design you did not choose.

The Mouse Cursor block replaces it — across the whole page, or only inside one section or one block.

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

## Before You Start

- **Edition:** **Pro** — the Mouse Cursor block is part of Nexter Blocks Pro.- **Block to enable:** Mouse Cursor, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A Nexter Container** if you want to target a row or column rather than the page.

https://www.youtube.com/watch?v=2_Z0ZN4jvvc&t

## Steps

- Add the **Mouse Cursor** block and click **Design from Scratch**.

- Set **Cursor Area** to **Body**.

![The Cursor Area dropdown with Body, Row, Column and Block](https://nexterwp.com/wp-content/uploads/2026/09/mcursor-area.webp)

- Choose a **Type** — a plain cursor icon, or an image, a word or a circle that follows the pointer.

![The Type dropdown with all four cursor types](https://nexterwp.com/wp-content/uploads/2026/09/mcursor-type.webp)

- Fill in what that type needs, then set **Cursor Left Offset** and **Cursor Top Offset** if the follower sits awkwardly.

- Publish and move your mouse over the page.

> ***Where the block sits decides what it affects.** For **Body** it can go anywhere on the page. For **Row** and **Column** it must be inside a Nexter **Container**. For **Block** it must come immediately after* the block you want to change.

## Cursor Area: What Each One Needs

| Area | What it changes | Where the block must go |
| ---- | --------------- | ----------------------- |
| Body | The whole page | Anywhere on the page |
| Row | One section | Inside a Nexter **Container** |
| Column | One column | Inside a Nexter Container column |
| Block | A single block | **Immediately after** that block |

## The Four Types

| Type | What the visitor sees | Guide |
| ---- | --------------------- | ----- |
| Cursor Icon | The pointer becomes a different standard cursor, such as a grab hand | — |
| Follow Image | A picture trails the pointer | [Follow image cursor](https://nexterwp.com/docs/add-a-follow-image-cursor-in-wordpress/) |
| Follow Text | A word trails the pointer | [Follow text cursor](https://nexterwp.com/docs/add-a-follow-text-cursor-in-wordpress/) |
| Follow Circle | A circle trails the pointer — plain, a scroll progress ring, or blended | [Follow circle cursor](https://nexterwp.com/docs/add-a-follow-circle-cursor-in-wordpress/) |

## How It Behaves

- **The followers really do follow.** Measured by moving the mouse: the image, text and circle all moved with the pointer across the page.- **Cursor Icon is different from the rest.** It adds no element — it sets the CSS cursor, so the page computes `cursor: grab` and the visitor sees a standard system cursor.- A custom cursor shows while the pointer is over your content and the ordinary pointer returns over empty page background — measured on the front end. That is normal, not a fault.- **Cursor Left Offset** and **Cursor Top Offset** shift the follower away from the pointer. Both start at 10, which is why it sits slightly below and to the right.- **Mouse Cursor Click** swaps the follower while the visitor hovers a link. With a follow text of *Explore* and a click text of *See More*, the word really changed over a link and changed back afterwards. Which tags count is set by **List of Tags for Hover Effect**, which starts as `a`.

## Limitations

- **Pro only.**- **Row and Column do nothing outside a Nexter Container.** In an ordinary group or a theme layout there is no matching section for the block to attach to, and nothing happens.- **Block does nothing if there is no block before it.** Put the Mouse Cursor block first in a container and it silently has no effect.- There is no cursor on a touch screen, so none of this reaches phone or tablet visitors.- A follower that lags or covers content makes clicking harder. Keep it small and keep the offsets modest.

## Troubleshooting

### Nothing changes at all

Almost always placement. Check the table above — **Row** and **Column** need a Nexter Container, and **Block** needs a block directly above it.

### It works in some places but not others

The custom cursor covers your content, not the empty space around it. Over blank page background the normal pointer comes back.

### The follower sits away from the pointer

Set **Cursor Left Offset** and **Cursor Top Offset** to 0 to sit exactly on it.

### Nothing happens on my phone

Touch screens have no cursor. This block is for mouse users only.

### The block is missing from the inserter

Switch **Mouse Cursor** on under **Nexter > Blocks** in your dashboard.

![Mouse Cursor switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/mcursor-admin-enable.webp)

## Related Docs

- [Change the cursor for a row](https://nexterwp.com/docs/change-the-mouse-cursor-for-a-row-in-wordpress/)- [Change the cursor for a block](https://nexterwp.com/docs/change-the-mouse-cursor-for-a-block-in-wordpress/)- [Follow circle cursor](https://nexterwp.com/docs/add-a-follow-circle-cursor-in-wordpress/)- [Progress cursor](https://nexterwp.com/docs/add-a-progress-cursor-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before adding a custom cursor in WordPress?**
A: Nexter Blocks Pro is the key requirement, because the Mouse Cursor block is part of Nexter Blocks Pro. In the WordPress dashboard, Mouse Cursor also has to be switched on under Nexter > Blocks. If you want the effect on a row or column instead of the whole page, a Nexter Container is needed so the block has something to attach to.

**Q: Why does the custom cursor only work in some parts of my page?**
A: That usually comes down to cursor area and placement. Body affects the whole page and can sit anywhere, but Row and Column only work inside a Nexter Container. Block is even stricter: it must come immediately after the block you want to change. The cursor also appears over content, while the normal pointer returns over empty background, which is expected behavior.

**Q: How do I stop the follower from sitting away from the pointer?**
A: Cursor Left Offset and Cursor Top Offset control that gap. Both start at 10, which is why the follower sits slightly below and to the right by default. Setting both offsets to 0 makes the follower sit exactly on the pointer. That matters most for image, text, and circle followers, since those are visible elements rather than just a system cursor.

**Q: Does a custom cursor work on phones or tablets?**
A: Touch screens have no cursor, so this feature does not reach phone or tablet visitors. The Mouse Cursor block is for mouse users only. That means any effect you build with Body, Row, Column, or Block will be visible on desktop-style pointer input, but it will not appear on mobile touch interaction.

**Q: What is the difference between Body, Row, Column, and Block cursor areas?**
A: Body changes the whole page and can go anywhere. Row changes one section and must be inside a Nexter Container. Column changes one column and must be inside a Nexter Container column. Block targets a single block and has to sit immediately after that block. That choice matters because placement controls scope more than the type does.

**Q: What are the best settings for a custom cursor that stays usable?**
A: Keep it small and keep offsets modest if you want it easy to click around. The page warns that a follower that lags or covers content makes clicking harder. Cursor Icon is also lighter in behavior because it sets the CSS cursor instead of adding a visible follower element, while Follow Image, Follow Text, and Follow Circle all move with the pointer.