Image Focus Points

A WordPress plugin that puts interactive hotspots on an image. An editor marks points directly on the picture in the admin, gives each point a text and an optional link, and the front end shows them as markers that open the content on click.

What it does

• Registers a focus_point custom post type; the featured image is the picture the points belong to.
• Provides a meta box where points are placed by clicking on the image itself, with coordinates stored as post meta.
• Ships a Gutenberg block, image-focus-points/focus-points, that renders a selected focus-point post anywhere on the site.
• Loads the content of an individual point over AJAX, so a page with many hotspots does not ship all of their markup up front.

Requirements

• WordPress 6.0+
• PHP 7.4+

Installation

1. Copy the plugin folder into wp-content/plugins/ and activate it.
2. Create a Focus Point entry, set its featured image, and add points on the image.
3. Insert the Image with Focus Points block on a page and pick the entry.

Notes on implementation

• The AJAX endpoint is protected with a nonce and verified through check_ajax_referer(); the nonce reaches the script through wp_localize_script().
• Point input is cast with intval(), and everything printed back is escaped with esc_url() and esc_html().
• Assets are versioned with filemtime(), so a deploy busts the browser cache without a manual version bump.
• The block is server-rendered through a render_callback, which keeps the saved markup out of post content and lets the output change with the plugin.

License

MIT — see LICENSE.