1
00:00:00,830 --> 00:00:08,120
In this video you'll activate the 2014 theme and rearrange three posts as sample posts for the photography

2
00:00:08,120 --> 00:00:09,490
site home page.

3
00:00:09,650 --> 00:00:14,990
Since we've imported the sample content SML File we're able to see how all content types look in the

4
00:00:14,990 --> 00:00:16,100
theme.

5
00:00:16,100 --> 00:00:22,100
Now we'll edit a couple of the posts to look how we predict the client will use them plus we'll configure

6
00:00:22,100 --> 00:00:26,500
the themes included featured content area on the home page too.

7
00:00:26,690 --> 00:00:32,240
In this lesson you'll experience how creating some sample content can help steer the design process.

8
00:00:32,270 --> 00:00:38,420
As you can figure a particular theme for the client first open up your local WordPress installation

9
00:00:38,420 --> 00:00:42,730
for the photography brochure site that we created in the last chapter.

10
00:00:42,740 --> 00:00:49,190
Make sure you're logged into the dashboard and rollover appearance themes and lets activate the 2014

11
00:00:49,190 --> 00:00:54,600
theme.

12
00:00:54,690 --> 00:00:55,980
Now we'll just take a look at it.

13
00:00:55,980 --> 00:01:01,120
Once that's activated I'll open it in a new tab and hit refresh

14
00:01:06,670 --> 00:01:07,020
Gray

15
00:01:09,900 --> 00:01:10,270
OK.

16
00:01:10,290 --> 00:01:14,530
The first thing we'll do is rearrange the home page just a little bit.

17
00:01:14,730 --> 00:01:20,680
Right now if you remember we've got the hello world sample post that was created when we installed Wordpress

18
00:01:21,270 --> 00:01:27,260
and we've got some imported posts from the sample SML file.

19
00:01:27,270 --> 00:01:30,360
Let's create a few posts as if we were the photographer

20
00:01:33,350 --> 00:01:40,400
let's go over to the dashboard and roll over posts and create add new I think what I'll do is create

21
00:01:40,400 --> 00:01:45,420
three posts.

22
00:01:45,930 --> 00:01:48,390
I'll speed up the video while I go through this process.

23
00:01:57,810 --> 00:02:07,510
And now I'd like to do on each of the three posts is at a featured image.

24
00:02:07,630 --> 00:02:10,110
I'm going to go ahead and use the image we've been using

25
00:02:18,690 --> 00:02:23,460
and here I'm speeding up the video again as I add an image to each one of these posts.

26
00:02:34,010 --> 00:02:42,230
Now instead of having these posts in the Uncategorized category I'm going to create a new category for

27
00:02:42,230 --> 00:02:53,600
the posts that are photographs.

28
00:02:54,090 --> 00:03:00,270
Great now that I have that category I can go to the all posts page and I'm going to add each of these

29
00:03:00,360 --> 00:03:04,570
three posts into that category by using the quick edit button

30
00:03:10,110 --> 00:03:17,720
and I'm going to take them out of the Uncategorized category as well by using the quick edit button.

31
00:03:17,910 --> 00:03:25,140
You can edit a few different items for each post quickly without having to open each post.

32
00:03:47,670 --> 00:03:50,210
Here we go now within the sample content.

33
00:03:50,210 --> 00:03:58,020
I know I had that sticky post and I'm going to go ahead and make that an stickie

34
00:04:01,480 --> 00:04:08,050
so that all I'm showing are the latest posts and if you remember from the last video we chose to show

35
00:04:08,110 --> 00:04:13,020
three posts in one on the archive pages and the home page.

36
00:04:19,680 --> 00:04:22,080
Now we're starting to look good.

37
00:04:22,410 --> 00:04:29,190
Now I don't have any content on each of those pages but I'll paste some Lorem Ipsum text if you remember

38
00:04:29,190 --> 00:04:36,550
Lipscombe dot com or Lipscombe dot org is where you can get some sample text.

39
00:04:37,200 --> 00:04:43,560
And let's go to each one of those pages and paste a little text so that we can see what text would look

40
00:04:43,560 --> 00:04:44,070
like.

41
00:05:18,330 --> 00:05:23,160
Great now that I've got some text in all three posts let's refresh the page and see what that looks

42
00:05:23,160 --> 00:05:24,320
like on the home page.

43
00:05:30,310 --> 00:05:31,900
Nice.

44
00:05:32,060 --> 00:05:38,120
You may have noticed that the featured images are not reaching all the way to the far right side of

45
00:05:38,120 --> 00:05:40,220
their content area.

46
00:05:40,220 --> 00:05:46,250
These diagonal lines are an overlay that appears on top of the featured image and it has to do with

47
00:05:46,280 --> 00:05:48,400
the image ratio.

48
00:05:48,710 --> 00:05:54,740
The standard size image 6900 by twelve hundred is a little bit tall and so when it places it in the

49
00:05:54,740 --> 00:05:58,890
featured image area it doesn't reach all the way across.

50
00:05:58,930 --> 00:06:04,470
Let's go back into the dashboard into the media library and see what we can do about that.

51
00:06:04,480 --> 00:06:13,230
I'm going to go ahead and pick one of these sample images that came with our ex-MIL upload.

52
00:06:13,620 --> 00:06:21,480
If I choose big sur you can see that I've gone ahead and I've actually edited the images from 6900 by

53
00:06:21,480 --> 00:06:25,930
twelve hundred down to 16:00 by 800.

54
00:06:25,950 --> 00:06:33,570
Now by doing this it's going to fit inside of this content area in terms of the featured image very

55
00:06:33,570 --> 00:06:36,120
well let's take a look.

56
00:06:43,670 --> 00:06:47,130
I'll click a featured image to edit which one I'm choosing.

57
00:06:48,600 --> 00:06:53,720
Let's go down to that big sur image 16:00 by 800.

58
00:06:53,890 --> 00:06:59,190
That's a ratio of two to one.

59
00:06:59,430 --> 00:07:01,670
I'll update the page and let's see what it looks like.

60
00:07:05,980 --> 00:07:11,770
Now you can see that the image reaches to the far side of the page and wraps around the post area.

61
00:07:11,770 --> 00:07:15,540
The way it's supposed to.

62
00:07:15,550 --> 00:07:22,000
Now let's take a look back inside the media library and I just want to show you that editing an image

63
00:07:22,000 --> 00:07:27,080
inside the media library is nondestructive meaning that you can save.

64
00:07:27,160 --> 00:07:34,230
It always saves the old image so that you can get back to the original if I open up that image.

65
00:07:34,230 --> 00:07:41,860
Now you can see that it is still there two to one ratio 6300 by 800.

66
00:07:42,020 --> 00:07:51,230
And the added image button is where I went below in order to edit the image and there is restore original

67
00:07:51,290 --> 00:07:52,700
image right here.

68
00:07:52,700 --> 00:08:01,560
Now since this image is embedded into that post if I restore it back to the original size and then hit

69
00:08:01,620 --> 00:08:06,800
update you can see dimensions will go back to 6900 by twelve hundred.

70
00:08:06,810 --> 00:08:14,570
And if I go back and refresh the page now that image will revert back to being the wrong proportions.

71
00:08:14,880 --> 00:08:21,030
So let me show you how to go in and edit an image inside the media library and we'll fix this so that

72
00:08:21,090 --> 00:08:23,470
it fits inside the featured image area.

73
00:08:24,890 --> 00:08:28,850
Go ahead and open the media library and open an image.

74
00:08:28,850 --> 00:08:30,490
That's a fairly large image.

75
00:08:30,500 --> 00:08:36,410
One of the samples or even the original image that you downloaded from W.P. of course dot com.

76
00:08:36,770 --> 00:08:41,880
And let's go ahead and click Edit below the image.

77
00:08:41,900 --> 00:08:44,580
Now there's a few different options that you have here.

78
00:08:44,600 --> 00:08:50,810
One of the things you can do is if you just place the mouse inside the image itself and drag a square

79
00:08:50,840 --> 00:08:51,500
open.

80
00:08:51,530 --> 00:08:54,050
We're going to be using the cropping function.

81
00:08:54,050 --> 00:09:02,450
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

82
00:09:02,450 --> 00:09:06,220
the right over here I can make this 6900 by 800.

83
00:09:06,230 --> 00:09:14,040
If I like I can even place it as a 2 to 1 ratio if I want.

84
00:09:14,030 --> 00:09:16,690
And it creates it into 6900 by 800.

85
00:09:16,820 --> 00:09:23,720
And now just drag that into the place I want to crop and hit the crop button at the top left.

86
00:09:23,720 --> 00:09:28,710
Now I must hit the blue save button below the image so that I can save my changes.

87
00:09:29,060 --> 00:09:37,540
And now that made my changes there and I can hit update under the media library.

88
00:09:39,730 --> 00:09:48,310
Great now if I go back and refresh the page you can see that that makes a nice big featured image.

89
00:09:48,540 --> 00:09:56,750
So I'll go through and change post to and post one as well and you can go ahead and do the same.

90
00:09:56,790 --> 00:10:03,050
Now I went in and used another of the sample images and I cropped it the same way I showed you how before

91
00:10:03,290 --> 00:10:07,880
this one was an 800 pixel wide image so it's 800 by 400.

92
00:10:08,150 --> 00:10:16,190
And I wanted to go ahead and use the firewood image in post one here but I don't want to lose the larger

93
00:10:16,340 --> 00:10:19,780
proportion of image that I already have.

94
00:10:19,790 --> 00:10:25,550
So one of the things I'm going to do go back into the media library I'm going to find that image and

95
00:10:25,550 --> 00:10:33,340
I'm going to re upload a second copy that I can feel free to edit that way I'm going to just easily

96
00:10:33,340 --> 00:10:39,520
pull another version of this image into my browser save it and then read upload it into the media library

97
00:10:39,520 --> 00:10:42,260
a second time is by using the file you are.

98
00:10:42,790 --> 00:10:50,680
If I just click right here and copy with Control-C and then open and place that you Arel into the browser

99
00:10:50,720 --> 00:10:57,600
the browser will open the image Zarmina right click and say save image as.

100
00:10:58,160 --> 00:11:00,800
And then I can go and save that image wherever I want.

101
00:11:00,800 --> 00:11:02,660
This is my downloads folder.

102
00:11:02,840 --> 00:11:08,320
So I'm going to label it large image too and save that image.

103
00:11:08,330 --> 00:11:12,800
Now if I go back into the media library I can go ahead and hit add new

104
00:11:16,740 --> 00:11:23,080
select files and I can find that in my downloads folder.

105
00:11:23,340 --> 00:11:25,770
There it is great.

106
00:11:25,770 --> 00:11:36,260
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

107
00:11:36,710 --> 00:11:41,660
and I'll still have the original version in a separate place inside the media library.

108
00:11:44,700 --> 00:11:54,050
Go ahead and make my Krop approximately two to one and that I'm going to go ahead to two one.

109
00:11:54,060 --> 00:11:54,480
Enter

110
00:11:57,450 --> 00:11:59,080
16:00 by 800.

111
00:11:59,250 --> 00:12:03,300
I'll hit the button and hit save

112
00:12:07,180 --> 00:12:14,770
now I need to go into the posts and find post one and replace the featured image with the newly cropped

113
00:12:14,770 --> 00:12:17,200
image that I just made.

114
00:12:17,390 --> 00:12:19,480
That way I have the original size.

115
00:12:19,490 --> 00:12:23,600
If I ever want to use it inside of a post or somewhere else.

116
00:12:29,960 --> 00:12:38,790
There it is 6900 by 800 set featured image is the correct proportions.

117
00:12:39,320 --> 00:12:41,430
Quick update and then let's look at the result

118
00:12:49,860 --> 00:12:50,530
nice.

119
00:12:50,550 --> 00:12:51,640
That looks much better.

120
00:12:54,600 --> 00:13:01,710
Now let's configure the featured area that's included with the 2014 theme at the top of the page.

121
00:13:01,860 --> 00:13:09,300
If we take a look under appearance themes and just take a look at the preview again you can see that

122
00:13:09,300 --> 00:13:10,230
up top here.

123
00:13:10,380 --> 00:13:18,540
There's a grid of featured images and posts that we can place at the top of the home page the featured

124
00:13:18,540 --> 00:13:24,440
home page content is controlled in the customize or under a featured content area

125
00:13:29,280 --> 00:13:30,560
featured content.

126
00:13:30,670 --> 00:13:37,130
Then you can choose a grid or a slider and it says tag name featured.

127
00:13:37,190 --> 00:13:44,570
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

128
00:13:44,570 --> 00:13:45,390
the top there.

129
00:13:51,830 --> 00:13:59,460
It shows nothing up there yet because I need to label those posts with the tag featured.

130
00:13:59,590 --> 00:14:03,430
So if I hit posts I'll post.

131
00:14:03,710 --> 00:14:07,280
I can use the quick edit button to add tags.

132
00:14:18,320 --> 00:14:18,890
Now quick.

133
00:14:18,890 --> 00:14:24,970
It's not the only place you can add tags tags are easily configured on the right hand side underneath

134
00:14:24,970 --> 00:14:26,770
categories right here.

135
00:14:26,770 --> 00:14:33,790
In fact if you start typing a tag name WordPress will go and find tags that are already used so that

136
00:14:33,790 --> 00:14:40,200
you can click on them and click add.

137
00:14:40,210 --> 00:14:46,130
Now that I've updated all three posts with the featured tag let's take a look at the home page.

138
00:14:49,350 --> 00:14:49,830
Nice.

139
00:14:49,830 --> 00:14:56,820
Now each of those images is clickable to the post itself regardless of what's displayed down here on

140
00:14:56,820 --> 00:14:57,870
the home page.

141
00:15:00,700 --> 00:15:07,420
Just a couple of last things to point out in this video that you may notice first this smaller 800 pixel

142
00:15:07,450 --> 00:15:14,260
image isn't large enough to fit the full image area in the featured posts so I might use a larger 6900

143
00:15:14,260 --> 00:15:18,340
wide image so that this fills up the contact area.

144
00:15:18,460 --> 00:15:26,740
Secondly 2014 is designed so that any posts in the featured area up top does not repeat itself down

145
00:15:26,770 --> 00:15:28,660
in the content area.

146
00:15:30,740 --> 00:15:34,670
You can replace this image if you like or just leave it alone.

147
00:15:35,480 --> 00:15:40,150
In this video you changed the theme of the website while keeping the existing content.

148
00:15:40,520 --> 00:15:46,580
Then you created three sample posts to conform to the style presented in the 2014 theme and then use

149
00:15:46,580 --> 00:15:50,500
the tag to place them in the featured posts area of the home page.

150
00:15:50,780 --> 00:15:56,240
By using the built in image editor inside the Wordpress media library you were able to change some of

151
00:15:56,240 --> 00:15:59,210
the images to adjust for what the theme needed.

152
00:15:59,210 --> 00:16:05,360
Next you'll revise the navigation and remaining widgets to adjust the content even further for the theme

153
00:16:05,450 --> 00:16:07,120
making the site look great.