To change the mouse cursor in WordPress, install a free plugin such as Ultimate Cursor, choose a cursor type, preview it and save — no code needed. Without a plugin, add a CSS rule like body { cursor: url(cursor.png) 4 4, auto; } in Additional CSS. CSS works for a small static image; animated cursors and hover effects need a plugin.
This guide covers both methods, the limits browsers put on custom cursors, and how to avoid the mistakes that make a cursor annoying instead of memorable.
Method 1: change the cursor with a plugin (no code)
Ultimate Cursor is a free plugin that replaces the pointer with text, an image, one of 113 icons, a shape or one of eight animated effects.
- In your dashboard, go to Plugins → Add New, search for Ultimate Cursor, then Install Now and Activate.
- Open the new Ultimate Cursor menu.
- Choose a cursor type: Text, Image, Icon, Shapes or Animated.
- Adjust colours, size and border. The live preview shows the result as you go.
- Click Save. The cursor is live on every page.
The plugin hides the custom cursor on touch devices, respects the reduced-motion setting and loads only the files your chosen effect needs. It works on pages built with the block editor, Elementor, Divi, WPBakery and other builders, because it's added to the page itself rather than to a template.
Want to see the options first? The live demo lets you try every cursor type in your browser.
Method 2: change the cursor with CSS
If you only need a small static image, CSS is enough.
- Create a 32 × 32 px PNG or SVG with a transparent background and upload it to the Media Library. Copy its URL.
- Open Appearance → Customize → Additional CSS (classic themes) or Appearance → Editor → Styles → Additional CSS (block themes).
- Add:
body {
cursor: url('https://example.com/wp-content/uploads/cursor.png') 4 4, auto;
}
a,
button,
[role="button"],
input[type="submit"] {
cursor: url('https://example.com/wp-content/uploads/cursor-hover.png') 4 4, pointer;
}
- Publish, then check the site in a desktop browser.
What the parts mean:
url(...)— the cursor image.4 4— the hotspot: the pixel, measured from the top-left corner, that actually clicks. For an arrow, it's the tip.auto/pointer— the fallback if the image can't load. A fallback keyword is required, or the whole rule is ignored.
The limits of the CSS method
| CSS cursor | Cursor plugin | |
|---|---|---|
| Static image | Yes | Yes |
| Size | 32 px recommended, 128 px maximum | Any size the effect needs |
| Animation, trails, particles | No | Yes |
| Text or icon cursor | Only as an image you make | Built in |
| Reacts to links and buttons | One alternate image | Grow, colour, glow, labels (plugin-dependent) |
| Hidden on touch devices | Nothing to hide | Handled automatically |
| Live preview | No | Yes |
Which method should you use?
- A small branded arrow or hand? CSS is fine. Keep a hover version for links.
- An animated cursor, a text badge or an icon? Use a plugin; CSS can't animate the cursor.
- Different cursors in different places? Use Ultimate Cursor Pro, which targets pages, CSS selectors and HTML elements and runs several cursor configurations at once.
Mistakes that make custom cursors annoying
- Hiding the click point. Set the hotspot where the visitor expects the click to land.
- Low contrast. A white cursor disappears over white sections. Use a border or a shape with a contrasting outline.
- Overriding the text cursor in forms. Visitors need the I-beam to see where they're typing. Ultimate Cursor keeps the text cursor in form fields.
- Constant motion. Effects that never stop distract from the content. Choose effects that pause when the pointer is still, and respect reduced motion.
- Heavy scripts. Load cursor code only when it's used.
Next steps
Browse 10 custom cursor effects and when to use each, make the cursor react to links with an interactive hover cursor, or compare plugins in our round-up of WordPress custom cursor plugins.