Clicky

1-866-921-7335

29 August 2016

DIY: Adding Pictures, Videos, & Gifs to your WordPress Blogs

We’ve heard the facts content performs better with visual aids. Here’s a step by step approach on adding aesthetic appeal to your WordPress blogs and website.

The process is nearly identical for pictures and videos. I will be grabbing a video from YouTube and an image from my personal desktop. Start at your WordPress Dashboard, look to the left of the window and select Posts.

WordPress Dashboard

On the Posts page, look towards the top and you’ll see a button, Add New, click on it.

WordPress Blogging Pictures

It will take you to a new page where you can begin to draft your blog. When you’re ready to input a picture, select the Add Media button below the post title and above the text box.

Wordpress blogging

Next, a pop-up will happen. It will give you two ways to insert your picture or video. The image I want to use is on my computer, so I’m going to click on the button that says Select Files.

adding media to wordpress blogs

Once you select your image and click the button that says Open. Your image will upload onto the Media Library.

adding pictures to wordpress blogs

From here you will click on the button, Insert into Post. Your picture will insert where you last typed.

adding pictures to wordpress blog

Now, I’m going to add a video to my post. I will venture back to the Add Media button. When the pop-up occurs, I will now select Insert from URL on the left side of the window. 

adding video to wordpress blog

With the URL of the YouTube Video copied, (example of URL: https://www.youtube.com/watch?v=cbP2N1BQdYc) I will paste the URL into the box provided, the video will show up below the link.

adding video to wordpress blog

Then click the Insert into Post button at the bottom of the pop-up.

adding youtube video to wordpress blog

Now your video is ready to go!

The only thing better than cat videos are cat gifs. So I went to giphy.com and found a cool cat gif. Below the gif, there are share options. I copied the iframe embed code.

adding gifs to wordpress blog

Example of embed code:<iframe src=”//giphy.com/embed/rrFNCtkmLhNcI” width=”480″ height=”360″ frameBorder=”0″ class=”giphy-embed” allowFullScreen>

via GIPHY

Then return to the posts page where you’re writing your blog. At the top right corner of the box of text where you’re typing, there are two tabs. Visual, which is the one we’re on, and text.

adding gif to wordpress blog

Select the text tab, it will hop over to a text only version of the blog your working on.

adding gif to wordpress blog

At the bottom of the text box, you’ll need to start a new line. You can do this by clicking on the last part of the last line. (For me it’s > from /a></p>) Then push the enter button on your keyboard twice. Once you’ve done this, paste the embed code you copied from the gif. It will now look like this:

adding gif to wordpress blog

Now you’ll go back to the visual tab of your blog where your gif will be up and running!

adding gif to wordpress blog

I chose to center the gif and the text around it, you can do this by putting the cursor on the line and then clicking the center align button.

Now you’re set to finish your blog! Before you publish your blog and blow the world away with your visual aid skills, I would recommend previewing your post to make sure that everything lines up how you want it to. You can do this by scrolling to the top of your page. Look to the right bottom corner of your window for the Publish block and click the Preview button.

adding visual aid to wordpress blog

A new tab will open on your browser where you can see the blog how it will look when you publish. Once you publish your blog, tweet us at @AmDeeLLC so we can see it. 

Happy Blogging!