Create Your Own Website - In Three Simple Steps!

WordPress Tutorials – How To Set A Featured Image

Using featured images can provide artistic value to your website and place specific emphasis on your content. Best of all, it’s very easy to set a featured image.

To get started, visit the right-hand side of the post editor near the bottom where it says Featured Image and click the button that says Choose a Featured Image. Clicking this button will open up a familiar dialog box which you can use to upload content to your website. You can either upload a new image from your computer or choose an existing image from your media library to act as a featured image.

Let’s visit the media library and we’re going to select one of these photos to act as our featured image. Let’s use this picture of a sunset. When you click the image, WordPress tells you that it’s selected by placing a checkmark in the upper right-hand corner of the thumbnail. Over on the right-hand side you can see details about the image. And to set the featured image, you’ll simply click Update Featured Image in the bottom right-hand corner.

You’ll be able to visually see that there is a featured image in your content editor from this point on. You can click Preview Changes to preview your changes before you make it live on the web or click Update or Publish to publish your changes.

WordPress Tutorials – How To Use The Image Library

The media library is the place where all of your uploaded media is stored in WordPress. Whether it’s images or videos or other types of documents, if you’ve uploaded it via WordPress, it’s going to be found in the media library.

To add images and other types of media from the media library into your post or pages, navigate to the Add Media button above the content editor’s toolbar. By default, the popup window prompts you to upload images or other types of media from your computer into WordPress.

To access things that you’ve already uploaded, on the left-hand side you’ll see Media Library. Clicking this gives you access to all the images and other types of media that you’ve uploaded already. Let’s select to insert this picture of a dolphin. When I click it, WordPress tells me that this is selected by placing a checkmark in the upper right-hand corner.

Over on the right-hand side we’ll see attachment details about the image, including its dimensions, title, caption and alternate text and any types of display settings that we’d like to play around with.

When everything is as you’d like it to be, in the bottom right-hand corner select Insert into Post. You can preview your changes before making it live on the web by selecting Preview Changes or click Update or Publish to publish your changes.

WordPress Tutorials – How To Add Images From A URL

There are a variety of different ways to add media to your website’s posts or pages. One involves adding images from an existing URL; in other words, adding an image that already exists in another location on the web.

Here I am at WordPress .com, and there’s a variety of images on this site. Let’s say I want to add this Get Social image to my post. The first I am going to do is to right-click or alternate-click on the image and then choose Save Image Location. Depending on the browser you’re using, this text may say something different such as Copy Link To or Save Image Link. Clicking that saves the URL to this image into my clipboard and I can paste that URL in other places later.

Here I am back in the post editor and I’m going to add this image to my post by visiting the Add Media button above the toolbar and then from the popup dialog going and selecting Embed from URL. The first box here is the box in which you’re going to input the URL that you just copied from the previous page.

From that, a thumbnail image preview is generated. In this window you can adjust the caption for the image in case you would like to set one for your site and also input alternate text for those with browsers that can’t see the image. You can adjust the alignment properties here and then you can adjust the URL in which the image links to. By default, WordPress will simply display the image without making it a link. When somebody clicks the image, you can make it to where it will go to the image itself at full quality or input a custom URL if you would like it to take them someplace specific.

When you’ve got everything set the way you’d like, in the bottom right-hand corner is Insert Embed. Please note that this image is actually located on someone else’s server and so you don’t actually have control of it. If the other site decides to modify the image or delete it altogether, it will affect the look of the content on your site.

You can click Preview Changes to preview your changes before making them live on the web or click Update or Publish to publish your changes.

WordPress Tutorials – Using Image Galleries

The gallery tools in WordPress make it super simple to add amazing photo galleries to your website, allowing a customized grid view layout of photos to be presented, as well as the popular option of allowing guests to flip through images one at a time. It works great with list style posts and it can easily drive traffic up on your website as well from all those new page views.

To get started, we’re going to be using this quick sample post that I’ve set up and we’re going to add media in the post content editor. You can see thumbnails of images that have already been uploaded in the past here. On the left side of the window you’ll see Create Gallery. Clicking that will allow you to select multiple images at a time to be inserted into the gallery. I could simply click the images to select them, but instead I’m going to add a few new images for this post by simply dragging it into the window.

When the upload completes, all newly added images are selected automatically. You can modify details on the right side here or just click Create New Gallery when everything is selected to how you’d like. This will shift the window into a slightly different view where you can now work exclusively with the images that are part of your new gallery. You can rearrange the order of the photos by simply dragging them around in the order you’d like, and you can also insert a caption on each individual photo as well.

If you’re wanting your guest to be able to flip through the images one at a time, you should select Attachment Page in the gallery settings on the right. Alternatively, you could just have the image open at full size when clicked, which would bypass any layout for your site. You can choose the number of columns for your photo gallery in this dropdown here, and if you’d like the images to appear in a random order each time, click this checkbox. With all of that set, hit Insert Gallery to insert this gallery into your post.

Inside the content editor, the image gallery appears as a placeholder and you can place other content above or below it as you would like. Let’s take a look at what this sample gallery looks like on the front end. As you can see, I’ve got the images and the column slideshows all in one page. Clicking one image opens that image up on its own page. With this theme, above the image there are links to progress forward to the next image or back to the previous one. Using this simple tool, you can create easy-to-use galleries in WordPress in no time at all.

WordPress Tutorials – Editing Images

WordPress provides several easy-to-use tools for editing images in your content. The most common edit you’ll make is size. If your browser permits it, you can simply click the image and then use the pulling boxes on the corners to adjust the size of the image in the window. Not all browsers support this type of scale edit, so we’ll need to use the normal image editor to make any other types of modifications in those browsers.

To edit the image, simply click the image and then go Edit Image in the top left corner. In this popup window you’ll see several options that you can use to edit the image such as size, alignment, and then a preview window that shows you the changes that you’re making in real time.

In the alignment section, clicking None lines up the images in line with the text. Selecting Left forces the image all the way to the left and then wraps the text around the right. Clicking Center centers the image in its own line. Clicking Right forces the image all the way to the right with the text wrapping around to the left.

If you navigate up to the advanced settings you can get a more fine-tuned control over the type of styles that you apply to the image, such as specific width settings, height settings, CSS or any other type of image property that you’d like to assume control over.

But scale and size are not the only attributes that you can edit with images in WordPress. If you visit your media library, you’ll see all the images and other types of media that you’ve uploaded to your site already.

Hovering over top of one of the images reveals three options. You can click Edit to make changes to specific images. When you’re greeted with this window, below the image you’ll see Edit Image. Clicking that will reveal even more options for you to fine-tune how you want your image to appear on your site.

Over on the right-hand side we can click the dropdown menu here to adjust the scale. Modifying the content in one of these boxes adjusts the other accordingly. If you attempt to make the image larger than its original size, WordPress warns you that the image may become fuzzy because you’re making it larger than it originally was.

The toolbar above the image gives us even more options. We can rotate the image counterclockwise. We can rotate the image clockwise. We can flip the image vertically. We can flip the image horizontally. There’s an undo button to undo any changes that you may not want and a redo button if you change your mind.

The button all the way to the left is crop. By default it’s not clickable. In order to crop the image, we need to tell WordPress where we’d like the crop to take place. To do this, simply click anywhere in the image and then drag a box where you’d like the image to be. With your box created, the crop button now becomes clickable. To save your changes, simply click Save.

The changes that you make to images in WordPress are not permanent. To reverse the changes and go back to normal, go back into the Edit Image section, and on the right-hand side you can see Restore Original Image. Clicking this will reveal a button that will nullify any changes that you’ve made previously to this media and restore it to normal.

WordPress Tutorials – Replacing Images

When you already have your post set up with the image included, you may find that the image that you have already just doesn’t quite suit the content. Luckily, WordPress makes it easy to replace the image in your content.

To get started, simply click the image in the editor and then in the upper left-hand corner click Delete. This will place the cursor right where the image was in relation to the text.

Next, click the Add Media button above the content editor’s toolbar. In this window you’ll have the option to upload an image from your computer to replace it with, or if you’d like, you can use one that you’ve already uploaded in the past from the media library.

I’m going to go ahead and drag this image from my desktop into the window. You’ll notice a progress bar on the thumbnail and that it’s automatically selected after upload. On the right-hand side you’ll see details about the image.

When the formatting is as you’d like it, simply click Insert into Post. You can click Preview Changes to preview the changes before they go live on the web or click Update or Publish to publish your changes.

WordPress Tutorials – Deleting Images

Using featured images can provide artistic value to your website and place specific emphasis on your content. Best of all, it’s very easy to set a featured image.

To get started, visit the right-hand side of the post editor near the bottom where it says Featured Image and click the button that says Choose a Featured Image. Clicking this button will open up a familiar dialog box which you can use to upload content to your website. You can either upload a new image from your computer or choose an existing image from your media library to act as a featured image.

Let’s visit the media library and we’re going to select one of these photos to act as our featured image. Let’s use this picture of a sunset. When you click the image, WordPress tells you that it’s selected by placing a checkmark in the upper right-hand corner of the thumbnail. Over on the right-hand side you can see details about the image. And to set the featured image, you’ll simply click Update Featured Image in the bottom right-hand corner.

You’ll be able to visually see that there is a featured image in your content editor from this point on. You can click Preview Changes to preview your changes before you make it live on the web or click Update or Publish to publish your changes.

WordPress Tutorials – How To Use The Image Editor

To access the image editor, go to Media on your sidebar and select Library. Find the image you want to edit and click Edit. This is where you can see and edit information about your image. Clicking Edit Image will bring you to the image editor.

The buttons located above the picture allow you to edit your image. You can rotate the image clockwise, counterclockwise, flip the image vertically and flip horizontally. You can also undo and redo all of your actions.

If you wish to crop your image, simply click and drag on the image to select the part you want to crop. You can then click the crop icon to crop out your selection. There’s a useful help link in the crop section that gives you information on keyboard shortcuts, aspect ratio and crop selection. Don’t forget to click Save after making any changes to your image.

You can resize your image by clicking Scale Image. This will display the dimensions of your image first in width then in height. When you enter a new value for either, the system will automatically calculate the other to maintain the aspect ratio. Click on the Scale button to make your change.

If at any point you decide you want to revert the image back to its original state, just click Restore Original Image. To finalize all the changes made to your image, go to the Save box and click Update.

WordPress Tutorials – How To Upload Media To Your Library

To add files to your website’s media library, navigate to the left-hand sidebar and go to Media and then Add New. If you’re already looking at the media library, the Add New button is located next the title at the top.

This window gives you a couple of options to upload media into your website. If your browser permits, you can simply drag a file from your desktop or another folder into the window or you can select the Select Files button to upload the old-fashioned way. If for whatever reason your browser is having a hard time with this multi-file uploader, you can always try the browser uploaded instead, which is an older version of this feature.

I’m going to go ahead and drag this image into the window to upload to my website. You’ll see a progress bar as the image uploads. And then once it had started crunching, if you want, you can edit the file by clicking Edit. This brings you into the Edit Media screen where you can make modifications as you wish.

WordPress Tutorials – How To Create Menus

To create a custom menu, go to Appearances in the sidebar and select Menus. Type in a name for your menu and click Create Menu. Select your new menu and the theme’s location box and click Save.

The Custom Links box allows you to add a URL from another site and create a label that will be displayed on your site. Hit Add to Menu to add this link to your site.

The Pages box lets you choose from your most recent pages or you can select View All to see all your pages. Just check the boxes that you want to include in your menu and hit Add to Menu. Similarly, you can view all and check boxes to add categories as well.

Once you’ve added items to the menu, you can reorder them however you like. Click and drag items to the right to create submenus for the item above. Clicking the dropdown arrow lets you see more options for your items. If you wish to remove an item, simply hit Remove in the red text. Clicking Cancel will remove any changes you’ve made to the item.

For more menu options, click the Screen Options tab at the top of the page. Once you’re done, don’t forget to click Save Menu to save all your changes that you have made. To see your changes, hit your website’s name at the top of the page.