In this video you'll activate the 2014 theme and rearrange three posts as sample posts for the photography
site home page.
Since we've imported the sample content SML File we're able to see how all content types look in the
theme.
Now we'll edit a couple of the posts to look how we predict the client will use them plus we'll configure
the themes included featured content area on the home page too.
In this lesson you'll experience how creating some sample content can help steer the design process.
As you can figure a particular theme for the client first open up your local WordPress installation
for the photography brochure site that we created in the last chapter.
Make sure you're logged into the dashboard and rollover appearance themes and lets activate the 2014
theme.
Now we'll just take a look at it.
Once that's activated I'll open it in a new tab and hit refresh
Gray
OK.
The first thing we'll do is rearrange the home page just a little bit.
Right now if you remember we've got the hello world sample post that was created when we installed Wordpress
and we've got some imported posts from the sample SML file.
Let's create a few posts as if we were the photographer
let's go over to the dashboard and roll over posts and create add new I think what I'll do is create
three posts.
I'll speed up the video while I go through this process.
And now I'd like to do on each of the three posts is at a featured image.
I'm going to go ahead and use the image we've been using
and here I'm speeding up the video again as I add an image to each one of these posts.
Now instead of having these posts in the Uncategorized category I'm going to create a new category for
the posts that are photographs.
Great now that I have that category I can go to the all posts page and I'm going to add each of these
three posts into that category by using the quick edit button
and I'm going to take them out of the Uncategorized category as well by using the quick edit button.
You can edit a few different items for each post quickly without having to open each post.
Here we go now within the sample content.
I know I had that sticky post and I'm going to go ahead and make that an stickie
so that all I'm showing are the latest posts and if you remember from the last video we chose to show
three posts in one on the archive pages and the home page.
Now we're starting to look good.
Now I don't have any content on each of those pages but I'll paste some Lorem Ipsum text if you remember
Lipscombe dot com or Lipscombe dot org is where you can get some sample text.
And let's go to each one of those pages and paste a little text so that we can see what text would look
like.
Great now that I've got some text in all three posts let's refresh the page and see what that looks
like on the home page.
Nice.
You may have noticed that the featured images are not reaching all the way to the far right side of
their content area.
These diagonal lines are an overlay that appears on top of the featured image and it has to do with
the image ratio.
The standard size image 6900 by twelve hundred is a little bit tall and so when it places it in the
featured image area it doesn't reach all the way across.
Let's go back into the dashboard into the media library and see what we can do about that.
I'm going to go ahead and pick one of these sample images that came with our ex-MIL upload.
If I choose big sur you can see that I've gone ahead and I've actually edited the images from 6900 by
twelve hundred down to 16:00 by 800.
Now by doing this it's going to fit inside of this content area in terms of the featured image very
well let's take a look.
I'll click a featured image to edit which one I'm choosing.
Let's go down to that big sur image 16:00 by 800.
That's a ratio of two to one.
I'll update the page and let's see what it looks like.
Now you can see that the image reaches to the far side of the page and wraps around the post area.
The way it's supposed to.
Now let's take a look back inside the media library and I just want to show you that editing an image
inside the media library is nondestructive meaning that you can save.
It always saves the old image so that you can get back to the original if I open up that image.
Now you can see that it is still there two to one ratio 6300 by 800.
And the added image button is where I went below in order to edit the image and there is restore original
image right here.
Now since this image is embedded into that post if I restore it back to the original size and then hit
update you can see dimensions will go back to 6900 by twelve hundred.
And if I go back and refresh the page now that image will revert back to being the wrong proportions.
So let me show you how to go in and edit an image inside the media library and we'll fix this so that
it fits inside the featured image area.
Go ahead and open the media library and open an image.
That's a fairly large image.
One of the samples or even the original image that you downloaded from W.P. of course dot com.
And let's go ahead and click Edit below the image.
Now there's a few different options that you have here.
One of the things you can do is if you just place the mouse inside the image itself and drag a square
open.
We're going to be using the cropping function.
And what I'll do is just drag this to the top left corner and then down over to here and as I look to
the right over here I can make this 6900 by 800.
If I like I can even place it as a 2 to 1 ratio if I want.
And it creates it into 6900 by 800.
And now just drag that into the place I want to crop and hit the crop button at the top left.
Now I must hit the blue save button below the image so that I can save my changes.
And now that made my changes there and I can hit update under the media library.
Great now if I go back and refresh the page you can see that that makes a nice big featured image.
So I'll go through and change post to and post one as well and you can go ahead and do the same.
Now I went in and used another of the sample images and I cropped it the same way I showed you how before
this one was an 800 pixel wide image so it's 800 by 400.
And I wanted to go ahead and use the firewood image in post one here but I don't want to lose the larger
proportion of image that I already have.
So one of the things I'm going to do go back into the media library I'm going to find that image and
I'm going to re upload a second copy that I can feel free to edit that way I'm going to just easily
pull another version of this image into my browser save it and then read upload it into the media library
a second time is by using the file you are.
If I just click right here and copy with Control-C and then open and place that you Arel into the browser
the browser will open the image Zarmina right click and say save image as.
And then I can go and save that image wherever I want.
This is my downloads folder.
So I'm going to label it large image too and save that image.
Now if I go back into the media library I can go ahead and hit add new
select files and I can find that in my downloads folder.
There it is great.
Now if I go back to the media library I can find that image and open it up and now I'll make my my edits
and I'll still have the original version in a separate place inside the media library.
Go ahead and make my Krop approximately two to one and that I'm going to go ahead to two one.
Enter
16:00 by 800.
I'll hit the button and hit save
now I need to go into the posts and find post one and replace the featured image with the newly cropped
image that I just made.
That way I have the original size.
If I ever want to use it inside of a post or somewhere else.
There it is 6900 by 800 set featured image is the correct proportions.
Quick update and then let's look at the result
nice.
That looks much better.
Now let's configure the featured area that's included with the 2014 theme at the top of the page.
If we take a look under appearance themes and just take a look at the preview again you can see that
up top here.
There's a grid of featured images and posts that we can place at the top of the home page the featured
home page content is controlled in the customize or under a featured content area
featured content.
Then you can choose a grid or a slider and it says tag name featured.
So all I have to do is label my three posts with the tag featured and I'll be able to put them up on
the top there.
It shows nothing up there yet because I need to label those posts with the tag featured.
So if I hit posts I'll post.
I can use the quick edit button to add tags.
Now quick.
It's not the only place you can add tags tags are easily configured on the right hand side underneath
categories right here.
In fact if you start typing a tag name WordPress will go and find tags that are already used so that
you can click on them and click add.
Now that I've updated all three posts with the featured tag let's take a look at the home page.
Nice.
Now each of those images is clickable to the post itself regardless of what's displayed down here on
the home page.
Just a couple of last things to point out in this video that you may notice first this smaller 800 pixel
image isn't large enough to fit the full image area in the featured posts so I might use a larger 6900
wide image so that this fills up the contact area.
Secondly 2014 is designed so that any posts in the featured area up top does not repeat itself down
in the content area.
You can replace this image if you like or just leave it alone.
In this video you changed the theme of the website while keeping the existing content.
Then you created three sample posts to conform to the style presented in the 2014 theme and then use
the tag to place them in the featured posts area of the home page.
By using the built in image editor inside the Wordpress media library you were able to change some of
the images to adjust for what the theme needed.
Next you'll revise the navigation and remaining widgets to adjust the content even further for the theme
making the site look great.