In this episode of our WordPress Tutorial Series, we’re going to take a look at many things that make WordPress Awesome. First up, we’ll need to take a look at hyperlinks in WordPress. How do we use them, how do we create them, and what are some best practices. Next up, we’ll jump into working with images in WordPress. There are many ways to use html images and we’ll touch on some of the more common scenarios. Finally, we’ll talk about image galleries, how to create them, and how you can use them in your own WordPress Website. Let’s take our adventures in WordPress to the next level.
Creating Links in WordPress
Surely you are familiar with links on the internet. By using the ability of the HTML Language to establish links to other pages online, both on the same website and on others, we create the world wide web as we know it. To create links, we need local anchor text, a destination or target location, as well as the proper html markup to make this happen. If you already know html, this is pretty easy to accomplish. Even if you do know html, WordPress makes it easier and faster to manage links within your content, both within the local domain and to other websites.
Let’s create a link to WordPress.org so that you can download the latest version of WordPress.
Fantastic! There are a few things to make note of here. First off, we need to highlight the content we would like to linkify in the body of the document. In the image, you’ll notice that the word WordPress.org has a colored background indicating that it is highlighted. When you do this, you’ll see the link icon in the toolbar become available (note the cursor pointing at the link). Then, once you click that icon, the Insert/edit link dialog appears like you see. You are presented with a few things that you must fill out.
- URL This is the destination to the URL you would like to link to. In this case, we provide our link of
http://wordpress.org - Title It may seem trivial, but this field is actually very important to fill out. When a user hovers over a link in your document, they will receive a dynamically generated pop up with the text specified by this field. This gives an indication of where the link points to before the user actually clicks it.
- New Window? The checkbox gives you the option to choose if the link will be opened in the same window, or a new browser window.
- Search If you would like to link to existing content on your website, you can do that by typing in the search box to find the post you are looking for. It makes sense to have internal linking as well for both navigation benefit and to help search engines find all of your relevant posts.
- Submit When you are satisfied that you have added all of the needed attributes to your link, hit Add Link.
Our result in the actual code of the site is <a title=”WordPress Open Source CMS” href=”http://wordpress.org/” >WordPress.org</a>. You can see that it’s quicker and easier to simply use the wizard rather than having to type out all of the actual code, though you really should know how to create html links by hand if needed!
Adding Images to Your WordPress Posts
Images and a really nice visual touch to your content. They help to add context and quite frankly, make your content more enjoyable. Black text on a white background with no styling or images is not all that fun, so make sure to add images – lots of them! WordPress provides a few ways to add images so lets examine.
The first thing you’ll want to do is place the cursor in the content where you would like the image to appear. We’re going to add one at the beginning of the last sentence, and you’ll see the result.
Nice!
What we did here is once we had the cursor located where we wanted the image, we click the Add Media button at the top of the Add New Post Window and we were given the chose to Upload Files or choose from our existing Media Library. Now what happens is, any time you upload a file from your computer, it gets added to your Media Library so that you can reuse images as you see fit. There may be cases where one image might fit the requirements of several sections of different articles and there is nothing stopping you from using the image in this way if you like.
The second portion of this is that you need to fill in some details about the image in the right hand pane. In fact to your right, you can see the screenshot of what this will look like when you need to add your image. Note all of the fields you have the option of filling in. It is a best practice to provide all of these fields if you can. We can see we have an URL, Title, Caption, Alt Text, Description, Alignment, Link To, and Size fields. Let’s review them.
- URL This is the address of where the image itself lives. Most times this will point to a sub folder within your
wp-contentfolder on the same domain. You can also use an external site to host the image, though in most cases you’re not going to want to do that. - Title Again, the title field may seem trivial – but it is the details that matter, both to your users and the search engines. Place some worthwhile descriptive text in this field.
- Alt Text There may be times when a visitor can’t download the image to view in their browser due to poor internet connection or some other cause. In that case, you want to provide some type of textual indication of what should be in the space of where the image is. Fill in this text to provide that option.
- Description This is another field that is one of those attention to details things that you should provide.
- Alignment This will drive you batty until you get the hang of working with text and images together in html. Sometimes you’ll want text to flow around the right side of an image, others times on the left. Still in other instances, you may want the image to take up the whole width of the article with no text. You’ll need to practice these alignment options and be aware of your image sizes when working with your layout. Practice makes perfect in this case.
- Size You can insert the full size image, or various reduced sizes as you see fit.
You can get much more fancy with images than what we’ve covered here, but images are slippery little suckers, especially when intertwined with text and html. Stick to the basics, get your image sizes and alignments right, and you’ll be a happy camper.
Creating a WordPress Image Gallery
So far, we’ve been been using images to add context and presentation into our content. WordPress also gives you the option of creating a gallery of images, and it is pretty slick how it works. We’ll create one right now for this post. You’ll want to click on Add Media, Create Gallery, and then select all the images you’d like to have included in the gallery. Next up click on Create Gallery and it will give you the option to edit some of the details. You can specify the link to location, the number of columns, the ordering, as well as the thumbnail type. Check out this gallery that we created in mere seconds.
Another great feature of image galleries in WordPress is that you can preview and edit them right in the visual editor. You’re going to want to click the Preview button from within the Publish Widget to actually view the gallery in the browser. This is the most accurate way to get a look at how things are doing to display once the article goes live. Let’s images however that we want to change a caption, change the linking location, or simply add or remove an image from the gallery. How can we do that? Well, if you go to the visual editor and hover over the gallery in question, you’ll get the option of either deleting the gallery all together, or editing. We’ll choose editing, and it looks like so.
In the window above, you can make any modifications you’ll need to get the design to where you want it to be. This is a simplistic example of using galleries, but you can experiment with all kinds of fancy approaches to spice up your gallery. They do add a nice touch to your content.
The WordPress Links and Images Conclusion
You’re going to get more bang for your content buck if you make it a priority to be awesome at using links and images in your WordPress Posts. After this episode, you now know how to create links with ease. Whether you’re linking to an external source, or setting up some nice internal links, you’re a link building pro with WordPress. You also have the skills you need to add some fresh images to spice up your content. If you’re feeling adventurous, you might even put together a sweet image gallery for your next WordPress Blog Post.
