1
00:00:00,680 --> 00:00:07,220
In this video you'll populate your executive pro-se in the student's sandbox with real images and rearrange

2
00:00:07,220 --> 00:00:09,780
the home page using featured posts.

3
00:00:10,130 --> 00:00:16,220
We'll explore the post offset system used in the Genesis framework and create a blog archive page to

4
00:00:16,220 --> 00:00:19,510
display a traditional blog listing page within the theme.

5
00:00:19,760 --> 00:00:25,130
By the end of this lesson you'll understand how Genesis uses featured post widgets to make changing

6
00:00:25,130 --> 00:00:31,900
the display of new posts automatic open inside of the Wordpress dashboard.

7
00:00:32,030 --> 00:00:40,130
The appearance customize or and as we look at and open this what I'd like to do is make some changes

8
00:00:40,130 --> 00:00:48,320
in the widgets area so that in the slider in the home type and in the home middle sections we're going

9
00:00:48,320 --> 00:00:50,840
to arrange it slightly differently.

10
00:00:51,260 --> 00:00:58,520
Let's make it so that in the featured slider at the top we use three featured pages that are static

11
00:00:58,520 --> 00:01:05,060
pages that will always want to show to visitors to the home page and then as we scroll down we're going

12
00:01:05,060 --> 00:01:14,220
to arrange the first three inside widget home top to be the latest three posts in the blog.

13
00:01:14,750 --> 00:01:23,840
And then down in the home middle widget area we want posts 4 5 and 6 in reverse order to be placed in

14
00:01:23,840 --> 00:01:25,880
these three areas.

15
00:01:25,880 --> 00:01:32,510
We're going to be using Genesys featured posts widgets and making them so that they are offset correctly

16
00:01:32,690 --> 00:01:38,750
so that when one of the site owners creates a NEW BLOG POST IT places itself in this spot.

17
00:01:38,750 --> 00:01:43,470
Number one right here and pushes the rest of the posts down.

18
00:01:43,610 --> 00:01:51,970
And the final post comes off of this 6th area into the Post's archive page.

19
00:01:52,110 --> 00:01:59,010
We'll also be creating a special page that will display an archive of blog posts so readers can go through

20
00:01:59,220 --> 00:02:02,080
and look at all the blog posts in reverse order.

21
00:02:02,190 --> 00:02:04,520
All in one page.

22
00:02:04,580 --> 00:02:12,170
Let's start by populating some of the blog posts inside of Wordpress with actual images instead of these

23
00:02:12,170 --> 00:02:20,640
grey box placeholders open up posts all posts and let's look at our sample posts that we have inside

24
00:02:20,640 --> 00:02:21,560
here.

25
00:02:21,850 --> 00:02:29,020
We have a sticky post and then the rest of the posts that came in with our content import and if we

26
00:02:29,020 --> 00:02:32,640
look at this one go ahead and open up that first post and scroll down.

27
00:02:32,630 --> 00:02:37,990
Notice that it has no featured image so we're going to be bringing in some actual images that we can

28
00:02:37,990 --> 00:02:43,500
use for featured images here to see what the site might actually look like with images.

29
00:02:43,780 --> 00:02:49,860
Let's make under visibility here under the published tab on the right hand side of the editing screen.

30
00:02:49,930 --> 00:02:52,430
Let's just undo this stickiness.

31
00:02:52,450 --> 00:02:56,950
We don't need to stick it to the top of the page inside of the blog area.

32
00:02:57,010 --> 00:03:04,420
We'll just use 6 posts and populate them with featured images and what you want to do is navigate to

33
00:03:04,450 --> 00:03:06,560
my local development environment.

34
00:03:06,700 --> 00:03:13,630
In the C colon under the map folder and in H.T. docs you know that all our local environment WordPress

35
00:03:13,630 --> 00:03:19,360
sites are here and I know that we made an import that we used images from inside of this one that I

36
00:03:19,360 --> 00:03:21,790
called Live site.

37
00:03:21,880 --> 00:03:28,270
We keep images in the media library inside WP content and the uploads folder as you remember.

38
00:03:28,840 --> 00:03:37,540
And I know that under the date 2011 from that file that we imported from WordPress dot org had a folder

39
00:03:37,540 --> 00:03:39,550
called 0 7.

40
00:03:40,030 --> 00:03:46,270
If you look at the details of any of the images the first one of its kind in the list of images you

41
00:03:46,270 --> 00:03:51,850
can see that the main images are 6900 by 22:00 there's certain images in this folder.

42
00:03:52,000 --> 00:03:58,270
At least six of them are 6900 by twelve hundred and I've taken each one of those.

43
00:03:58,270 --> 00:04:05,110
The ones that are 6300 pixels wide and by holding down control I selected each one of the ones that

44
00:04:05,110 --> 00:04:09,480
are that size and I drag them over into a folder on my desktop.

45
00:04:09,520 --> 00:04:13,520
My executive pro folder and I created a folder called images.

46
00:04:13,540 --> 00:04:14,860
Go ahead and do the same.

47
00:04:14,860 --> 00:04:22,010
These are the six images that I dragged across that are all 6900 by twelve hundred pixels and there

48
00:04:22,070 --> 00:04:23,110
are a good file size.

49
00:04:23,110 --> 00:04:25,570
A little over 100 K each.

50
00:04:25,570 --> 00:04:31,240
So I could bring each of these images into my wordpress installation and then we'll use it to populate

51
00:04:31,240 --> 00:04:34,720
each of those six posts with these featured images.

52
00:04:34,720 --> 00:04:41,260
Go ahead and pause the video now choose 6 images of your own either in the same way that I've done or

53
00:04:41,260 --> 00:04:48,130
you can use your own images and trim them down so that they're a good small file size and 6500 pixels

54
00:04:48,130 --> 00:04:49,250
wide or so.

55
00:04:49,600 --> 00:04:57,160
And then upload them into the media library and choose one for each of six of the posts inside the Wordpress

56
00:04:57,160 --> 00:04:59,490
dashboard making them the featured images.

57
00:05:02,180 --> 00:05:04,940
I hope you did well with that little challenge.

58
00:05:04,940 --> 00:05:09,680
You can go into each of the posts that you want to edit and add a featured image.

59
00:05:09,710 --> 00:05:16,070
You can click Set featured image and then upload each one individually to the media library.

60
00:05:16,070 --> 00:05:23,570
But what I'm going to do is another way you can go to the media library and add new and I'm just going

61
00:05:23,570 --> 00:05:31,160
to add all six of those posts at one time so I'm opening up that images folder and select them all and

62
00:05:31,160 --> 00:05:37,430
just click open and they'll upload and crunch right into the media library.

63
00:05:37,430 --> 00:05:43,850
Then I can go into each post and I can choose each one from the existing media library as their featured

64
00:05:43,850 --> 00:05:52,860
image OK I paused the video while I went into each of my posts and added one of those featured images

65
00:05:52,860 --> 00:05:56,040
and then clicked update up here.

66
00:05:56,040 --> 00:06:01,420
Now let's go collect three images that we can use for the slider.

67
00:06:01,500 --> 00:06:08,400
Let's use these three images inside of the studio press executive demo and this is just a good way to

68
00:06:08,400 --> 00:06:14,600
know that you can get images from a Web site Save them to your computer and upload them as you will

69
00:06:14,610 --> 00:06:18,750
if you're moving a Web site from one place to another or something like that.

70
00:06:18,780 --> 00:06:24,480
If I right click on this image and then click view image you can see that it's a certain dimensions.

71
00:06:24,720 --> 00:06:32,730
And actually if you go back inside of the Wordpress dashboard and look under Gen. slider settings we've

72
00:06:32,730 --> 00:06:37,650
got a slider that's a certain size and these images are optimized for the slider.

73
00:06:37,950 --> 00:06:43,740
You don't have to crop them to a specific size but if you want to be sure that the content that you

74
00:06:43,740 --> 00:06:45,600
want showing isn't cut off.

75
00:06:45,600 --> 00:06:52,560
For example the woman's face if this were a taller image she may have her forehead cut off or it might

76
00:06:52,560 --> 00:06:55,450
not be laid out as exactly as you want.

77
00:06:55,530 --> 00:06:57,900
So these images are actually facts.

78
00:06:57,960 --> 00:07:06,960
Inspect the image info these images are actually a particular size 11:40 by 4:45 the exact size for

79
00:07:06,960 --> 00:07:08,940
the slider settings.

80
00:07:09,240 --> 00:07:15,840
So go ahead and right click each of those images and view it and then right click and save the image

81
00:07:16,170 --> 00:07:21,430
to your computer OK or save those images into my downloads folder.

82
00:07:21,490 --> 00:07:27,930
And now I'm just going to bring them across into that same executive pro images folder that I have on

83
00:07:27,930 --> 00:07:30,440
my desk to.

84
00:07:30,510 --> 00:07:31,770
Here's a little challenge for you.

85
00:07:31,770 --> 00:07:40,290
Back inside the Wordpress dashboard under Gen. slider settings choose page instead of post as the type

86
00:07:40,290 --> 00:07:45,580
of content and then down here we're going to include by post ID.

87
00:07:45,660 --> 00:07:54,300
Let's include three pages and your challenge is to go find three pages that exist inside our imported

88
00:07:54,300 --> 00:07:59,490
content in the site here and find their page IDs and place them here.

89
00:07:59,550 --> 00:08:02,790
We'll choose three of them and then we'll save the settings to our slider

90
00:08:06,360 --> 00:08:13,580
have that go if you remember under pages all pages and then if we navigate to any of the pages that

91
00:08:13,580 --> 00:08:16,430
we're using Let's see what pages are we going to use here.

92
00:08:16,430 --> 00:08:25,010
I'll go to page two of my pages list and I want to put three of the pages we've been using on the home

93
00:08:25,010 --> 00:08:29,960
page that are featured as pages inside of the slider.

94
00:08:29,990 --> 00:08:31,940
So telecommunications is one.

95
00:08:31,940 --> 00:08:38,420
If I click on that I can see up top inside of the address bar and the URL for editing that page.

96
00:08:38,420 --> 00:08:41,730
This is post 3:21.

97
00:08:41,970 --> 00:08:43,490
So I'll take note of that.

98
00:08:43,500 --> 00:08:54,960
I'm also going to set the featured image and upload while I have it open featured one upload that to

99
00:08:54,960 --> 00:08:57,590
my site and set it as the featured image.

100
00:08:59,310 --> 00:09:01,420
Maybe you did that at the same time as well.

101
00:09:01,560 --> 00:09:06,200
So this is page number 12:57 or post ID 3 to 1.

102
00:09:06,750 --> 00:09:08,290
So I might just take note.

103
00:09:08,370 --> 00:09:11,820
Write that down on a little piece of paper on my desk.

104
00:09:11,880 --> 00:09:18,410
I need three to one and I'll pause the video here while I do that for two other pages.

105
00:09:18,420 --> 00:09:24,820
Now I have three pages which have featured images and I've taken note of their post IDs.

106
00:09:24,900 --> 00:09:29,440
So the last step is to go back into the Genesis slider settings.

107
00:09:29,900 --> 00:09:38,420
Note that I didn't save this I have to change it to page and I'm going to include these three post ID's

108
00:09:38,430 --> 00:09:40,020
separated by commas.

109
00:09:40,140 --> 00:09:47,630
So it's 3 to 1 2 1 9 and 2 2 7 I'll hit save settings.

110
00:09:49,950 --> 00:09:58,340
Now if I refresh that I should get some nice images inside of yes inside of my slider.

111
00:09:58,350 --> 00:10:06,610
There's one there's another on the design page and in the development page looks great.

112
00:10:06,610 --> 00:10:14,150
Now let's go on to setting our home page to be a reverse order offset posts using the featured posts

113
00:10:14,170 --> 00:10:18,100
widgets inside of Genesis.

114
00:10:18,130 --> 00:10:25,990
So back in the Wordpress dashboard I mean open appearance customize and we use the customize or to take

115
00:10:26,650 --> 00:10:29,470
a look at our results as we go.

116
00:10:29,920 --> 00:10:32,290
And I'm going to be editing the widgets.

117
00:10:32,290 --> 00:10:40,450
And so first time to edit the top home top widget area and I've got three featured pages here.

118
00:10:40,450 --> 00:10:45,440
But instead I'd like to use featured posts instead.

119
00:10:45,580 --> 00:10:47,980
So I'm just going to remove each of these

120
00:10:51,060 --> 00:10:56,170
by opening them up and clicking the remove link at the bottom of each widget.

121
00:10:56,170 --> 00:10:57,900
Now I'm going to add a widget.

122
00:10:58,450 --> 00:11:06,820
And in terms of featured posts all I need is one widget and I need to just set its settings so that

123
00:11:06,850 --> 00:11:13,030
I'm using three posts and I want to use the latest three posts.

124
00:11:13,030 --> 00:11:14,530
I'm not going to offset them at all.

125
00:11:14,530 --> 00:11:18,960
I'll order them by date and I'll do a few other settings.

126
00:11:18,960 --> 00:11:28,310
I do want to show the featured image and I'm going to use a featured thumbnail size I don't need an

127
00:11:28,310 --> 00:11:29,320
alignment.

128
00:11:29,520 --> 00:11:42,640
And let's see I can I do want to show the post title and I will show a content limit of 150 characters

129
00:11:43,510 --> 00:11:45,840
and there is some read more texts.

130
00:11:47,820 --> 00:11:49,740
And that's all I want.

131
00:11:49,740 --> 00:11:55,260
So for this one I scroll down and I'll just close that

132
00:11:58,500 --> 00:12:04,230
and you may have noticed I'm encountering a problem here the way that these widgets are set up is if

133
00:12:04,230 --> 00:12:08,840
you have more than one widget it shows them across the page.

134
00:12:09,120 --> 00:12:14,780
But if you have one widget it shows its content in a vertical orientation instead.

135
00:12:14,790 --> 00:12:19,430
And we don't want that we want them to be displayed going across the page.

136
00:12:19,470 --> 00:12:20,560
So how can I do that.

137
00:12:20,670 --> 00:12:26,910
I can still use the featured post widgets but instead of having three in one widget I just want to have

138
00:12:26,910 --> 00:12:34,100
one in one widget and then I'm going to offset to the next post for the second one and then offset to

139
00:12:34,110 --> 00:12:37,090
the next post for the third one.

140
00:12:37,470 --> 00:12:43,530
So I'll just change that by opening up feature posts and I'm just going to show one post in this first

141
00:12:43,540 --> 00:12:48,460
widget and everything else can remain the same so close that.

142
00:12:48,460 --> 00:12:52,530
And then a minute add a second featured post widget.

143
00:12:52,780 --> 00:13:00,490
And this is where it gets a little bit interesting with counting how many posts you'd like to offset.

144
00:13:00,550 --> 00:13:06,310
So I'll show one post here in this widget but I want to offset it one post so that it counts down to

145
00:13:06,310 --> 00:13:08,100
the next post.

146
00:13:08,110 --> 00:13:16,000
So again I'll show the featured image in the featured size and I want to show the content limit again

147
00:13:16,810 --> 00:13:26,360
with 150 characters and I'll close that one and I'll repeat that with a third featured post widget.

148
00:13:26,700 --> 00:13:30,250
I'll click add widget feature posts.

149
00:13:30,510 --> 00:13:35,080
Again I want to show one posts at this time and get to offset two posts.

150
00:13:36,710 --> 00:13:41,740
I also need to make all my other settings the same.

151
00:13:41,850 --> 00:13:42,920
Show the post title.

152
00:13:42,920 --> 00:13:46,820
I think I forgot to do that in the last one so I'll add that.

153
00:13:47,220 --> 00:13:53,110
Remember I haven't saved any of this yet so I can keep opening and closing.

154
00:13:53,110 --> 00:13:58,940
There we go take a look now I've got it looking good.

155
00:13:59,260 --> 00:14:01,300
I've got a title for each one.

156
00:14:01,300 --> 00:14:07,000
Now if I want to have the title with this all caps just like the pages we had here before instead of

157
00:14:07,000 --> 00:14:12,970
this upper and lower case and a little larger and have that above the featured image I can change that

158
00:14:12,970 --> 00:14:17,320
by on each one I can type my own title.

159
00:14:17,320 --> 00:14:24,160
However now that these are going to be automatically changing as the owners of the Web site add new

160
00:14:24,160 --> 00:14:30,670
blog posts I want to leave it so that it shows the title of the actual blog post no matter where it

161
00:14:30,670 --> 00:14:34,960
is or which post is in which location.

162
00:14:34,980 --> 00:14:43,200
So I just need to save and publish in the Customize her and I've got my top three most recent posts

163
00:14:43,200 --> 00:14:47,440
listed in that widgets home top area.

164
00:14:47,530 --> 00:14:49,850
Now in the home middle area.

165
00:14:50,010 --> 00:14:50,660
Let's go back.

166
00:14:50,670 --> 00:14:53,520
I want to edit the home middle area.

167
00:14:53,520 --> 00:14:58,770
I've got three featured pages here and your challenge at this point is to repeat what I've done if you

168
00:14:58,770 --> 00:15:09,090
haven't already and then now down in the home middle widget area your challenge is to offset 3 4 and

169
00:15:09,090 --> 00:15:18,480
5 posts so that we've got a home page that shows the latest six posts and it'll update itself as the

170
00:15:18,480 --> 00:15:22,130
owner of the website adds new posts.

171
00:15:22,190 --> 00:15:23,940
I hope that went well for you.

172
00:15:23,960 --> 00:15:32,930
Now you should have a series of three of the most recent posts across the home widget top and then the

173
00:15:32,930 --> 00:15:34,940
next three across.

174
00:15:34,940 --> 00:15:37,160
Home widget middle.

175
00:15:37,340 --> 00:15:43,990
Finally let's create a blog archive page provided to us by Gen..

176
00:15:44,000 --> 00:15:51,210
Now back in the Wordpress dashboard I've got pages all pages open and I'm going to click add new Basically

177
00:15:51,210 --> 00:16:00,420
we just need to make a page called blog or news or whatever we want to that page to be called and we

178
00:16:00,420 --> 00:16:07,410
use instead of the default template we use the blog template provided within the Genesis framework and

179
00:16:07,470 --> 00:16:12,090
just publish that page as a blank content page.

180
00:16:12,180 --> 00:16:18,870
Now that we have that saved as a blog template we can use this you are ill or have that page inside

181
00:16:18,870 --> 00:16:20,100
the navigation.

182
00:16:20,340 --> 00:16:24,210
And what we'll get is an automatic blog listing page.

183
00:16:24,210 --> 00:16:32,310
So if I just go to menus and with our executive Hetter menu that I have up here I'm going to add that

184
00:16:32,310 --> 00:16:34,160
new page called blog.

185
00:16:34,170 --> 00:16:37,530
I'll add it to the menu.

186
00:16:37,550 --> 00:16:42,150
Place it right at the end there and hit save menu.

187
00:16:42,180 --> 00:16:43,260
It's as simple as that.

188
00:16:43,260 --> 00:16:47,590
Now if I go to my site in the new tab and refresh.

189
00:16:47,850 --> 00:16:55,280
I've got blague up here and when we navigate to that page it shows our posts in reverse order.

190
00:16:55,290 --> 00:17:00,040
Now let's just edit our settings just a little bit to finish with this lesson.

191
00:17:00,300 --> 00:17:08,620
If we go into Genesys theme settings you'll be able to control how your blog page and archive pages.

192
00:17:08,820 --> 00:17:11,380
The blog page template control how it's displayed.

193
00:17:11,550 --> 00:17:13,910
So do we want to display all categories.

194
00:17:13,950 --> 00:17:17,350
Do we want to exclude any categories from that blog listing.

195
00:17:17,550 --> 00:17:20,670
And how many posts do we want on that blog page.

196
00:17:20,790 --> 00:17:27,020
In addition to that we can show how we want content archives like the blog page to display.

197
00:17:27,220 --> 00:17:35,560
Let's display the entry excerpts instead of the entry content and let's display the featured image and

198
00:17:35,580 --> 00:17:37,480
let's display.

199
00:17:37,560 --> 00:17:38,840
Let's see.

200
00:17:38,850 --> 00:17:45,390
I think we should display it in a large size and let's just have no alignment it will place it centered

201
00:17:45,390 --> 00:17:46,650
at the top.

202
00:17:46,650 --> 00:17:52,510
And if I click save settings and I'll go back to the blog page and refresh it.

203
00:17:52,590 --> 00:17:55,460
And that's probably made it look a lot better.

204
00:17:56,290 --> 00:18:01,610
In this lesson I've changed the home page content of the site completely but stayed within the Leya

205
00:18:01,630 --> 00:18:03,320
provided by the theme.

206
00:18:03,550 --> 00:18:10,180
You used the Genesis featured post widgets and post offset to set up a self updating system for posts

207
00:18:10,180 --> 00:18:11,370
on the home page.

208
00:18:11,380 --> 00:18:16,780
Use real images and created a blog archive page as well.

209
00:18:16,780 --> 00:18:22,720
In the next video you'll add a contact form to the site and implement a premium add on for the contact

210
00:18:22,720 --> 00:18:23,800
form 7 plugin