Hi everyone and welcome back to the Web Design with WordPress 101 Course. Today I’ll show you how to create links in your posts and pages. A link, also known as a hyperlink, is simply a reference to more data which usually returns the data if clicked. You’ve probably seen links before. They are usually underlined and in blue font so that you are aware they are clickable.
Once you click the link – a new page on the site you are viewing is opened, or a new website is loaded, or perhaps a pdf is displayed. The same can be accomplished using WordPress by adding links. These links don’t necessarily have to be text, nor do they have to be blue and underlined. Pictures and images can also link to other content. The process is the same for creating links in posts and pages so I’ll show you how to do so from the post editor.
Once the editor has loaded, enter the text you’d like to use for your link. Highlight the text and select the link button on the toolbar near the top of the editor. A popup window should be displayed that allows you to create your link. The “URL” field is where you’ll enter the address of the site you wish to link to. The “Title” field allows you to create a tool tip which will be visible to users when they hover over the link. The toggle below allows the link to open a new browser window when the user clicks the link. The advantage to having the link open in a new window is that the user still has a browser window open with your site. This may help keep your visitors from not fully exploring your site because a link on your page took them somewhere else.
You can also choose to link to different parts of your WordPress site by using the “Or link to existing content” option. This option allows you to select a post or page that you have already published on your site. If you have a lot of content already published to your site you can use the search box to locate the content you’d like to link. Once you’re finished selecting your options click the “Add Link” button to create the link. You can test the link by clicking the “Preview Changes” button and clicking on your newly created link.
You can also use an image to link to other content. In order to add a link that is an image click the “Add Media” button. One side note about selecting images; if you are using images you found on the web make sure the owner of the image is ok with you reposting it on your site or that you are using the image under an exception of the Copyright law. Improper use of a copyrighted image could open you up to a legal action and unwanted expenses.
Once you’ve selected the image you want to use for your link scroll down on the right hand side bar so you can edit the “Attachment Display Settings”. The “Link to” field is where we will select what happens when the image is clicked. The default setting, “Media File”, creates a link to where the image file is stored on your site. When users click the image with this option selected they will be directed to a page that contains the full sized version of the image.
You can also edit where the image links to once you’ve added it to the post. Click on the image and click the “Edit Image” button. At the bottom of the edit popup there is a “Link URL” field. You can use this option to change where the image will link to. Since we initially selected to link back to the media file, the current link should represent where the image is on your site. If you click the “None” button below the field your image won’t link to anything when it’s clicked.
If you want to have the image link to another website, simply type the address into the Link URL field on the edit image screen. There are additional options you can select for your link under the Advanced Settings tab at the top of the edit image popup. At the bottom of the screen are the Advanced Link Settings. The “Title” field allows you to create a tool tip for your image that the user will see when they hover over the image with their mouse. The next field allows you to type in a link relationship which usually represents the connection the link has with your site. Lastly, the “Target” field will allow you to toggle whether you’d like the link to open in a new window. We will explore the CSS Class field and the Styles field in a future class. Don’t forget to click the update button to save your changes.