Learning how to make an image a link in WordPress takes about a minute in the block editor: select the picture, press the Link button in its toolbar, and paste or search for a destination URL. An image link is an img element wrapped in an anchor tag, so a click on the image sends the visitor to a page, a file or another website instead of doing nothing. This tutorial covers the block editor method, hand-written HTML, page builders, and the alt text detail most linked pictures get wrong.
- Link images in WordPress easily!
- Use block editor for quick setup.
- Boost user experience with clickable images.
How to Make an Image a Link in WordPress With the Block Editor
The Image block has its own link control, separate from the text tool in a Paragraph block. The Gutenberg editor has been the default since WordPress 5.0, and these steps match the current release:
- Open the post or page from the dashboard and select the picture so the Image block toolbar appears.
- Press the chain icon in that toolbar.
- Paste the destination URL, or type part of a post or page title and pick it from the search results.
- Press Enter or the apply icon. For an address on another website, turn on “Open in new tab” in the options so visitors keep your page open.
- Save or update the post, then view it on the front end and test the picture once.
Choosing Where the Picture Sends Visitors
The same toolbar menu offers more than a pasted address, and each choice changes what happens next:
| Option | Result | Best use |
|---|---|---|
| Custom URL | Opens any post, page or external site | Product pages, related posts, offers |
| Link to image file | Opens the full-size file alone | Screenshots readers want to zoom |
| Link to attachment page | Opens a WordPress page for that media item | Rarely useful; on sites installed since WordPress 6.4 attachment pages redirect to the file |
| Expand on click | Opens a lightbox overlay on the same page | Diagrams and photo sets |
For a bigger view, the lightbox beats a direct file link, which strands readers on a bare JPEG with no way back to the article.
Using Code to Wrap a Picture in a Hyperlink
To write the markup yourself, switch to the Code editor from the Options menu (the three dots at the top right) or insert a Custom HTML block. The pattern is short:
<a href="https://yoururl.com/product-page-url">
<img src="ImageURL.jpg" alt="text describing the image">
</a>The anchor is the outer element and the img sits inside it, with the destination in the href attribute. When the picture is the only thing inside the anchor, its alt text should say where it leads, because screen readers announce that text as the name of the link.
The classic error is a missing closing </a> tag. Browsers then treat everything after the opening tag as one anchor, and a whole section of text turns clickable. Hand-editing an existing Image block in the Code editor carries a second risk: if the markup stops matching the block’s saved settings, the editor flags it as containing unexpected content. The toolbar method avoids both problems.
Linking Pictures in Galleries, Widgets and Elementor
Since WordPress 5.9 the Gallery block stores every item as its own Image block, so each one can point somewhere different. Select a single photo inside the grid and use the same chain icon. The block’s shared setting applies one rule (such as media file, lightbox or none) to every item at once, which suits a portfolio but not a row of product thumbnails.
Collections built with the older shortcode cannot do per-item destinations; a plugin like FooGallery adds that functionality. Block-based sidebars and footers use the normal Image block, so a sidebar banner is linked exactly as in a post. In Elementor, the Image widget has a Link field: choose Custom URL, paste the address, and use the options gear beside it to open the destination in a new window.
Why a Clickable Picture Helps Readers and Search Engines
A linked picture is a far larger tap target than a few underlined words, a real user experience gain on phones. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels, and almost every content photo clears it easily. Common uses are product thumbnails, banners for your own offers, author photos, call-to-action graphics, and directing users to a button or page on your site.
Search engines read the alt attribute as the anchor text of that hyperlink. Google’s link guidelines say so directly, so “red trail running shoe product page” tells Google far more about the destination than “IMG_4521” or an empty attribute. Good alt text has a wider SEO benefit beyond links as well.
File weight still matters more than the anchor around it. Compress JPEG photographs before they reach the media library, keep PNG for screenshots and graphics with text, and stay above roughly 70% quality to avoid visible artifacts. If you’re still learning WordPress, the thumbnail sizes under Settings, Media are a sensible place to start.
Testing, Editing and Removing an Image Link
To change the destination, select the picture and press the chain icon again; the popover shows the current address with an edit control and a Remove link option that leaves the picture in place. Test every change in a private browser window. When the old destination still loads, a page cache is usually serving the previous version, the same reason a WordPress update might not appear right away.
Can a JPEG or PNG Carry Its Own Hyperlink?
No. Neither JPEG nor PNG files can store a hyperlink inside the file itself. Only document formats such as PDF, Word, or Excel support embedded links. On the web, the destination always lives in the markup around the picture, assigned in the editor after upload.
Adobe Photoshop’s Slice Tool can split one graphic into regions and export an HTML file with a different destination per slice, but responsive layouts break sliced tables, so modern WordPress sites rarely use it.
Start with the toolbar method on one picture, confirm it in a private window, then work through older posts where images point nowhere. That is how to make an image a link in WordPress without touching code; write markup by hand only when the block cannot produce what you need. Linked visuals also pair well with in-page navigation, such as a table of contents on long posts and pages.
Frequently Asked Questions About Linked Pictures
How do I make a picture open in a new tab when clicked?
Select it in the editor, press the chain icon, paste or search for the URL, then turn on “Open in new tab” before applying. The current page stays open while the destination loads in a separate browser tab. Use it for external sites; for your own pages, a same-tab click is what readers expect.
Can each picture in a gallery go to a different page?
Yes, in the block editor. Each item is an individual Image block, so select one and give it its own destination with the chain icon. Collections made with the classic shortcode need a plugin such as FooGallery for per-item links.
Does wrapping a picture in a hyperlink hurt page speed?
No. An anchor tag adds a few bytes of HTML and has no measurable effect on load time. The file size and format are what affect speed, not the surrounding markup.
Why is my linked picture not clickable?
Usually the address was typed but never applied, a theme overlay covers the picture, or a page cache still serves the old version. Clear the cache, then right-click the picture and choose Inspect to see whether an anchor tag wraps the img element.