{"id":78416,"date":"2023-02-17T09:07:44","date_gmt":"2023-02-17T09:07:44","guid":{"rendered":"\/tutorials\/?p=78416"},"modified":"2026-03-09T19:18:09","modified_gmt":"2026-03-09T19:18:09","slug":"how-to-add-links-wordpress","status":"publish","type":"post","link":"\/ng\/tutorials\/how-to-add-links-wordpress","title":{"rendered":"How to add links in WordPress posts and pages, buttons, images, and widgets"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>Knowing how to add links in WordPress is crucial to improve user experience and optimize your site.<\/p><p>A hyperlink, or a link for short, is an HTML element that connects different web pages. There are two types of links &ndash; internal and external.<\/p><p>Adding internal links will help visitors find helpful information within the website, increasing the time they spend on it. On the other hand, adding external links will direct readers to resources on other websites.<\/p><p>Links also help search engines understand the site structure, improving the crawling and indexing process.<\/p><p>\n\n\n\n<\/p><p>In this <a href=\"\/ng\/tutorials\/wordpress\">WordPress guide<\/a>, we will teach you all about linking in WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-links-to-wordpress-posts-and-pages\">How to Add Links to WordPress Posts and Pages<\/h2><p>We will use the <a href=\"\/ng\/tutorials\/gutenberg-wordpress\">Gutenberg editor<\/a> to create links in pages and posts &ndash; note that the process is similar for both.<\/p><p><a href=\"\/ng\/tutorials\/how-to-add-a-new-post-in-wordpress\">Create a new post<\/a> by clicking <strong>Add New<\/strong>, or open an existing one. Alternatively, navigate to <strong>All Pages<\/strong> and create a new page or open an existing one.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Pro Tip<\/h4>\n                    <p>We also recommend creating good <a href=\"\/ng\/tutorials\/what-is-a-permalink\">permalinks<\/a> to improve your site&rsquo;s usability and SEO.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-add-links-using-the-link-button\">How to Add Links Using the Link Button<\/h3><p>To embed a link in WordPress to your post or page using the <strong>Link<\/strong> button, follow the detailed instructions below:<\/p><ol class=\"wp-block-list\">\n<li>In the block editor, select the text where you want to add a link.<\/li>\n\n\n\n<li>When you highlight the text, the <a href=\"\/ng\/tutorials\/wordpress-blocks\">WordPress block<\/a> toolbar will appear. Select the <strong>chain link icon<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-highlighting-the-Insert-Link-button-on-the-block-toolbar.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-highlighting-the-Insert-Link-button-on-the-block-toolbar.png\/public\" alt=\"The WordPress block editor highlighting the Insert Link button on the block toolbar\" class=\"wp-image-78418\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-highlighting-the-Insert-Link-button-on-the-block-toolbar.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-highlighting-the-Insert-Link-button-on-the-block-toolbar.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-highlighting-the-Insert-Link-button-on-the-block-toolbar.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-highlighting-the-Insert-Link-button-on-the-block-toolbar.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Paste the desired URL into the link field on the pop-up box. Then, click the <strong>Submit<\/strong> button or hit <strong>Enter <\/strong>on your keyboard.<\/li>\n<\/ol><figure class=\"wp-block-image aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Submit-button-on-the-Link-inserter_s-pop-up-window.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Submit-button-on-the-Link-inserter_s-pop-up-window.png\/public\" alt=\"The Submit button on the Link inserter's pop-up window\n\" class=\"wp-image-78420\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Submit-button-on-the-Link-inserter_s-pop-up-window.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Submit-button-on-the-Link-inserter_s-pop-up-window.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Submit-button-on-the-Link-inserter_s-pop-up-window.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Submit-button-on-the-Link-inserter_s-pop-up-window.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><ol class=\"wp-block-list\" start=\"4\">\n<li>You may also toggle the <strong>Open in new tab<\/strong> option. Once you&rsquo;re done editing it, save the changes.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-how-to-add-links-using-copy-and-paste\">How to Add Links Using Copy and Paste<\/h3><p>Another easy way to add hyperlinks in WordPress is by using the copy-and-paste feature. Here are the steps:<\/p><ol class=\"wp-block-list\">\n<li>Copy the URL you want to embed using the keyboard shortcut <strong>Ctrl + C<\/strong> on Windows, or <strong>Cmd + C <\/strong>on Mac.<\/li>\n\n\n\n<li>Go back to the block editor and select the text on your post or page.<\/li>\n\n\n\n<li>Paste the copied URL directly on the highlighted text by pressing <strong>Ctrl + V<\/strong> or <strong>Cmd + V<\/strong>. You don&rsquo;t have to press Enter &ndash; the hyperlink will be automatically added.<\/li>\n<\/ol><figure class=\"wp-block-image aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/A-WordPress-post-with-the-anchor-text-highlighted-and-URL-added.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/A-WordPress-post-with-the-anchor-text-highlighted-and-URL-added.png\/public\" alt=\"A WordPress post with the anchor text highlighted andURL added\n\" class=\"wp-image-78421\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/A-WordPress-post-with-the-anchor-text-highlighted-and-URL-added.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/A-WordPress-post-with-the-anchor-text-highlighted-and-URL-added.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/A-WordPress-post-with-the-anchor-text-highlighted-and-URL-added.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/A-WordPress-post-with-the-anchor-text-highlighted-and-URL-added.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><ol class=\"wp-block-list\" start=\"4\">\n<li>Save the changes.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-how-to-add-links-using-the-two-square-brackets\">How to Add Links Using the Two Square Brackets<\/h3><p>To add navigation menus or link to an existing WordPress page or post on your own site, you can use a shortcut.<\/p><ol class=\"wp-block-list\">\n<li>In the block editor, type two square brackets (<strong>[[)<\/strong>. A list of published posts and pages will appear.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-displaying-a-post-with-the-symbol-highlighted.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-displaying-a-post-with-the-symbol-highlighted.png\/public\" alt=\"The WordPress block editor displaying a post with the [[ symbol highlighted\" class=\"wp-image-78422\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-displaying-a-post-with-the-symbol-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-displaying-a-post-with-the-symbol-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-displaying-a-post-with-the-symbol-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-WordPress-block-editor-displaying-a-post-with-the-symbol-highlighted.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"2\">\n<li>Select a page or post to insert in the editor.<\/li>\n\n\n\n<li>Save the changes.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-how-to-edit-and-remove-links\">How to Edit and Remove Links<\/h2><p>On WordPress, you can also customize existing hyperlinks &ndash; replacing an existing one, removing it, or making a link nofollow. This feature is especially helpful for <a href=\"\/ng\/tutorials\/find-fix-broken-links-wordpress\">fixing broken links<\/a> on your WordPress site.<\/p><p>Even though you have to use the HTML code editor, the process is as simple as adding links. Simply follow the steps below:<\/p><ol class=\"wp-block-list\">\n<li>Open the post or page and click the <strong>three vertical dots<\/strong> icon on the block toolbar. Select <strong>Edit as HTML <\/strong>to switch to the code editor.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Show-more-settings-option-with-the-Edit-as-HTML-button-highlighted.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Show-more-settings-option-with-the-Edit-as-HTML-button-highlighted.png\/public\" alt=\"The Show more settings option with the Edit as HTML button highlighted\" class=\"wp-image-78423\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Show-more-settings-option-with-the-Edit-as-HTML-button-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Show-more-settings-option-with-the-Edit-as-HTML-button-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Show-more-settings-option-with-the-Edit-as-HTML-button-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Show-more-settings-option-with-the-Edit-as-HTML-button-highlighted.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"2\">\n<li>Add <strong>rel=&rdquo;nofollow&rdquo;<\/strong>, the nofollow tag attribute, after the link. See the example below:<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-custom-HTML-block-with-the-nofollow-tag-highlighted.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"582\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-custom-HTML-block-with-the-nofollow-tag-highlighted.png\/public\" alt=\"The custom HTML block with the nofollow tag highlighted\" class=\"wp-image-78424\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-custom-HTML-block-with-the-nofollow-tag-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-custom-HTML-block-with-the-nofollow-tag-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-custom-HTML-block-with-the-nofollow-tag-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-custom-HTML-block-with-the-nofollow-tag-highlighted.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Next, click <strong>Edit visually<\/strong> to switch back to the visual editor. Then, save the changes.<\/li>\n<\/ol><p>Another simple way to add nofollow tags is by using a plugin like <a href=\"\/ng\/tutorials\/aioseo-tutorial\">AIOSEO<\/a>. It will display <strong>Add &ldquo;nofollow&rdquo; to link<\/strong> right under the Open in new tab option, so you only need to toggle the button.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-nofollow-attribute-on-the-link-options-window.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"617\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-nofollow-attribute-on-the-link-options-window.png\/public\" alt=\"The nofollow attribute on the link options window\" class=\"wp-image-78425\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-nofollow-attribute-on-the-link-options-window.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-nofollow-attribute-on-the-link-options-window.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-nofollow-attribute-on-the-link-options-window.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-nofollow-attribute-on-the-link-options-window.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>If you host your website at Hostinger, note that the plugin comes pre-installed with all WordPress hosting accounts.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-wordpress-hosting\" href=\"\/ng\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-adding-links-to-buttons\">Adding Links to Buttons<\/h2><p>Aside from text, you can also embed linked content to a button in WordPress by following these steps:<\/p><ol class=\"wp-block-list\">\n<li>From the WordPress dashboard, navigate to the desired web page or post.<\/li>\n\n\n\n<li>Insert the <strong>Button<\/strong> block into the editor by typing <strong>\/buttons<\/strong>.<\/li>\n\n\n\n<li>Add the button text and click the <strong>Link<\/strong> icon on the block toolbar.<\/li>\n<\/ol><figure class=\"wp-block-image aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-button-block-toolbar-with-the-Insert-Link-button-highlighted.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-button-block-toolbar-with-the-Insert-Link-button-highlighted.png\/public\" alt=\"The button block toolbar with the Insert Link button highlighted\n\" class=\"wp-image-78426\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-button-block-toolbar-with-the-Insert-Link-button-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-button-block-toolbar-with-the-Insert-Link-button-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-button-block-toolbar-with-the-Insert-Link-button-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-button-block-toolbar-with-the-Insert-Link-button-highlighted.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><ol class=\"wp-block-list\" start=\"4\">\n<li>Type or paste the URL. If desired, toggle the <strong>Open in new tab<\/strong> button.<\/li>\n\n\n\n<li>Click the <strong>Submit<\/strong> button or press <strong>Enter<\/strong> to confirm. Once you&rsquo;re done, save the changes.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-adding-links-to-images-in-wordpress\">Adding Links to Images in WordPress<\/h2><p>Adding a link to an image is necessary if, for example, you include product images in a blog post. It allows you to link directly to the page where readers can buy the product or find existing content about it.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Suggested Reading<\/h4>\n                    <p><a href=\"\/ng\/tutorials\/complete-guide-to-image-optimization\">Complete Guide to Image Optimization for Better Website Performance<\/a>.<\/p>\n                <\/div>\n\n\n\n<\/p><p>To add a link to an image, follow the detailed guide below:<\/p><ol class=\"wp-block-list\">\n<li>Insert an Image block to your post or page by typing <strong>\/image<\/strong>.<\/li>\n\n\n\n<li>After uploading an image, navigate to the block toolbar and click <strong>Insert link<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-link-inserter-button-on-the-Image-block-toolbar.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-link-inserter-button-on-the-Image-block-toolbar.png\/public\" alt=\"The link inserter button on the Image block toolbar\" class=\"wp-image-78427\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-link-inserter-button-on-the-Image-block-toolbar.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-link-inserter-button-on-the-Image-block-toolbar.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-link-inserter-button-on-the-Image-block-toolbar.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-link-inserter-button-on-the-Image-block-toolbar.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Paste the link into the box. Then, click the <strong>Submit<\/strong> button or press <strong>Enter<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-URL-field-on-the-Image-block.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-URL-field-on-the-Image-block.png\/public\" alt=\"The URL field on the Image block\" class=\"wp-image-78428\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-URL-field-on-the-Image-block.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-URL-field-on-the-Image-block.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-URL-field-on-the-Image-block.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-URL-field-on-the-Image-block.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Save the changes.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-adding-links-to-wordpress-widgets\">Adding Links to WordPress Widgets<\/h2><p>Inserting links into your <a href=\"\/ng\/tutorials\/wordpress-widgets\">WordPress widgets<\/a> is another way to help visitors navigate your website&rsquo;s content. For example, you can <a href=\"\/ng\/tutorials\/how-to-add-a-post-to-a-page-in-wordpress\">add blog post links to a page&rsquo;s footer or sidebar<\/a>.<\/p><p>However, note that each <a href=\"\/ng\/tutorials\/what-is-a-wordpress-theme\">WordPress theme<\/a> handles widget customization differently. In this section, we will show you how to add a link to a widget title using the Twenty Twenty theme.<\/p><ol class=\"wp-block-list\">\n<li>Go to <strong>Appearance<\/strong> &rarr; <strong>Widgets<\/strong> and select a widget. For this example, we will use the <strong>Footer #1 <\/strong>widget.<\/li>\n\n\n\n<li>Highlight the text where you want to embed the link. Click the <strong>Link<\/strong> button on the toolbar.<\/li>\n<\/ol><figure class=\"wp-block-image aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Footer-1-widget-area-highlighting-the-link-inserter-button.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1304\" height=\"899\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Footer-1-widget-area-highlighting-the-link-inserter-button.png\/public\" alt=\"The Footer #1 widget area highlighting the link inserter button\n\" class=\"wp-image-78429\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Footer-1-widget-area-highlighting-the-link-inserter-button.png\/w=1304,fit=scale-down 1304w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Footer-1-widget-area-highlighting-the-link-inserter-button.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Footer-1-widget-area-highlighting-the-link-inserter-button.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Footer-1-widget-area-highlighting-the-link-inserter-button.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/The-Footer-1-widget-area-highlighting-the-link-inserter-button.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1304px) 100vw, 1304px\" \/><\/a><\/figure><ol class=\"wp-block-list\" start=\"3\">\n<li>Type or paste the URL into the box and press <strong>Enter<\/strong>. Toggle the Open in new tab option if desired.<\/li>\n\n\n\n<li>Save the changes.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>WordPress linking is an important step in building an engaging and accessible site. It helps improve its navigation for both site visitors and search engines.<\/p><p>Fortunately, users can use various methods for adding and editing links in WordPress:<\/p><ol class=\"wp-block-list\">\n<li>Using the link button, copy and paste shortcuts, or square brackets.<\/li>\n\n\n\n<li>Adding a link to buttons and images.<\/li>\n\n\n\n<li>Embedding links into your website widgets.<\/li>\n<\/ol><p>We hope this tutorial has helped you understand how to add links in WordPress. If you have any questions, let us know in the comments section below. Good luck!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Knowing how to add links in WordPress is crucial to improve user experience and optimize your site. A hyperlink, or a link for short, is an HTML element that connects different web pages. There are two types of links &ndash; internal and external. Adding internal links will help visitors find helpful information within the website, [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/how-to-add-links-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":258,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Add Links in WordPress: 3 Methods for Beginners","rank_math_description":"Learn the three methods on how to add links in WordPress posts and pages: using the link button, copy and paste, and two square brackets.","rank_math_focus_keyword":"how to add links in wordpress","footnotes":""},"categories":[22637],"tags":[],"class_list":["post-78416","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-links-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-links-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-add-links-in-wordpress-posts-and-pages-buttons-images-and-widgets","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-add-links-in-wordpress-posts-and-pages-buttons-images-and-widgets","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-links-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-links-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-links-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-links-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/78416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=78416"}],"version-history":[{"count":11,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/78416\/revisions"}],"predecessor-version":[{"id":144178,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/78416\/revisions\/144178"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=78416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=78416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=78416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}