How to Link in WordPress

A link is a connection to another web page on or off the site. In WordPress, a link is easily made through the Visual or Text Editor.

In the Visual Editor of WordPress, type the words you wish to turn into a link first.

WordPress Words: Link

A segment of text or a graphical item that serves as a cross- reference between parts of a webpage or other hypertext documents or between webpages or other hypertext documents.
Dictionary.com

Links connect content and sites together on the web. They are critical to the organizational structures and facilities of the web, connecting sites and information. This is what makes World Wide Web a web.

Choose wisely what words or images are going to be a link. Don’t say Click here for a link, instead use a descriptive link that tells the users what they are linking to. A phrase for a link is more beneficial than just one word.

Tutorial: How to Create a Link List

Links are a vital part of the World Wide Web. Anything can be made into a link, from words and phrases to images. A link list is, as the name implies, a list of links. In HTML, a list of links can be easily coded with <ul>, <ol>, <li>, and <a> tags. In WordPress, these are the same exact tags used to create a link list inside a post.

In this tutorial, I will walk you through the process on how to create a link list inside a post. Lorelle’s article, “The Art of List Making,” is a valuable resource on making link lists and it serves as very useful information for this tutorial.

In this tutorial, I will guide you through creating three different types of link lists in both the text and visual editors: the unordered list, the ordered list, and the nested list.

Web Accessibility: Links

When you click a link on a website, what is that link? What is it made of? The W3schools website defines a link as “a link between a document and an external resource.” A link is basically an established relationship between one document (HTML, CSS, etc.) and another. A link is one of the many roads to travel on the World Wide Web.

While links are easy to include in a Post or Page, they are too easy. In fact, it is not hard to overlook a very important part of links: web accessibility. According to the W3C Web Accessibility Initiative, web accessibility is defined as an initiative to help “people with disabilities” navigate, use, and contribute to the web. Despite the fact that the initiative is mainly for people with disabilities, web accessibility also helps people without disabilities:

Web accessibility also benefits people without disabilities. For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations. This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with “temporary disabilities” such as a broken arm, and people with changing abilities due to aging.
W3C Web Accessibility Initiative

Web Accessibility: Links in Context

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
W3 – Links in Content – Web Accessibility

When creating links into your text, you want to be able to allow the reader to know the purpose of the link as well as where it may lead them.  Some examples include:

Installing WordPress on Amazon Web Services

Amazon Web Services  (AWS) offer a way to host your own WordPress sight with no hardware and little to no expense on a small WP blog site. This is ideal if you want to start working with a self hosted WordPress site for developmental purposes, monetization of your blog, or just good ol’ bragging rights.

In this article I will go into an overview of the EC2 service and the various Virtual Machines (referred to as instances from here on out) that are free and paid. Some may be free to download and initially spin up but may incur an additional cost to the AWS price tier even if you are in the Free Tier. Even though I discuss the free tier exclusively and micro-instances it should be mentioned that the AWS allows for scalability of your WordPress site so it can grow as your site(s) grow.

There are various pre-made instances for use with your AWS account that are configured for just about “one touch” configuration. Some are free, others are free to upload to AWS but incur a usage cost, and others cost for upload and usage. A few of the providers are; Bitnami, JumpBox, and Turnkey Linux. If you do choose to go with these “one click” solutions be sure to read all the print to verify if there are any charges for the instance or use of and how the charges are calculated.

Never Set Links to Open in a New Tab

In our contemporary tab centric browsing experience —where tabs have become all but common place for navigating the web, it might appear helpful to provide your user a new tab for opening external content, thus saving them the task of pressing the back button to return to your site, but this is not always the case.

 POUR Guidelines and Accessibility

The POUR guidelines were defined under the Web Content Accessibility Guidelines 2.0 specification which was drafted by the W3C in 2008. POUR stands for Percieveable, Operable, Understandable, and Robust.  Opening links in new tabs infringes on the second principal of Understandability, which states that websites should operate in easy to understand and predictable ways.

Imagine for a moment that you are a blind user using a screen reader to navigate content when you arrive at a link midway down the page, as soon as you click on the link a new tab appears beside your current window without you knowing and you are left wondering where your content is. As you can imagine this can be a very disorienting experience for blind clients using your site. This particular point is specifically addressed by the W3C Content accessibility guidelines.

UX Considerations

Opening links in news tabs also takes away control from the users by eliminating their ability to choose how links open. In the Smashing Magazine article “Should links open in new windows?” Vitaly Friedman states that:

Users need to be able to rely on consistency of the user interface and know that they won’t be distracted or disrupted during the interaction. Users must know, understand and anticipate what is going on and what will happen once user interface elements are used. Any deviations from this convention result in a more design-oriented and less user-oriented design.

By dictating to users how their browsers ought to behave you rob them of the freedom to decide how they want to navigate the web.

Setting  Link Behavior in WordPress

Now that we’ve discussed why you shouldn’t open links in new tabs, lets discuss how to set link behavior so that we can avoid this problem altogether. In WordPress you set link behavior on a post by post basis and must set the behavior for each link included in your post. To set link behavior we must first create a new link:

1. First highlight the text you would like to link to.

2. Then press the link icon on the visual editor.

3. In order to set link behavior look for the check-box under the title text field. By default this should be unchecked. Unchecked means that the link will open in the current tab, this is the behavior that we want.

 

4. Make sure that the check-box remains unchecked.

5. Click update at the bottom of the window when you are done.

Please note that this tutorial is specific for WordPress, other web publishing platforms will require different steps.

For further discussion on the practice of opening new links in tabs please visit:

• Beware of Opening Links in New Windows
• New Window for New Link?
• Open New Windows for PDF and other Non-Web Documents
• Avoid Forcing to Open in New Window
• Should Links Open in a New Window?

Creating Clickable Images

There are many locations where clickable images are a valuable tool, such as front page images, icons, photo galleries, image information, etc. There are multiple ways of going about this process. I will be discussing how to add clickable images to your content posts and pages and also how to add them to your widgets.

Before I explain further, be sure that your image file is either your original image or is royalty and copyright free. Some copyrighted images can be used with proper citations depending on the owner’s specifications. There is also plenty of public domain photography available for your use. Also make sure that your image file has a distinct name like Purple Flowers, instead of a default title like IMG_2345, before uploading it into the media library.

How to Create the “Perfect” Post – Part 2

Welcome to part two of two in this series on “How to Construct the “Perfect” Post.” Did you have a nice intermission?

Here in the second act we will cover the last few tips I have for you to make your content sing out like the proverbial fat lady. Remember, you may have composed the grandest aria ever but if your presentation is scrawny and slim, nobody can hear it. So let’s continue to make your presentation gloriously obese!

So it’s over then?

No, no. We’re just getting started!

How to Code POUR-ly

Web accessibility is huge; especially with such a large percentage of the world’s population being considered “disabled” it is important to make your website as accessible as possible. Lack of patience for a few extra lines of code is quite lazy, when the end result is so critical. Here’s a few tips on how to code POUR-ly and make your website accessible!

Let’s look at few things you can do specifically in the code of your site.

1. Properly formed HTML links: All links and URLs should be wrapped in anchor tags and have a title.
2. Proper Image Formatting: All images should have an alternative text for screen readers to describe the image. They should also have width and height parameters in the IMG HTML tag so that the page loads accordingly even if the image cannot be displayed.
3. Emails are Mail-to Links: Your email addresses listed on your site should be mailto: hyperlinks, not just plain text.
4. Proper Text Formatting: Bold text should be made so with the “strong” tag and italic text should be made so with the “em” tag. If you want text to be bold or italic but not be read different by screen readers you can use a “span” tag with the “text-decoration: bold” attribute as an example.
   

Creating and Using HTML Jump-links

HTML jump links are a very handy trick for a developer or blogger to have up their sleeve.

Jump links behave just like regular links except instead of linking to a different page they link to a component of the page you’re already on. This is an invaluable HTML trick to know for situations where you have a long page or post that could benefit from a table of contents at the top of the page, each item of which jump links to a component further down the page. It aids the user experience tremendously and it’s quite easy to do, and here’s how.