1
00:00:00,480 --> 00:00:06,540
In this video I'll walk you through the steps I've taken to customize the cafe pro theme home page I'll

2
00:00:06,540 --> 00:00:10,880
show you several ways to display the content on the widget based modular layout.

3
00:00:11,010 --> 00:00:15,030
And it just sparked some ideas about how to adapt the theme to almost any purpose.

4
00:00:16,040 --> 00:00:22,940
Let's start by just looking at the site itself in one tab and I do have the dashboard open in another

5
00:00:22,940 --> 00:00:29,320
tab and I have the cafe pro studio press demo site open in a third tab.

6
00:00:29,480 --> 00:00:34,670
So I can just take a look at how they have it laid out and compare what I'm doing to what the demo looks

7
00:00:34,670 --> 00:00:35,430
like.

8
00:00:35,510 --> 00:00:37,710
The first thing I've done in my site.

9
00:00:37,790 --> 00:00:44,600
Scroll down and edited the front page widget area number one first where I just put a little bit more

10
00:00:44,600 --> 00:00:50,930
text in here and I push that button down a little bit away from the text in this single text widget

11
00:00:51,740 --> 00:00:56,600
inside the word dashboard under my site which is called my cafe.

12
00:00:56,690 --> 00:00:57,900
I've got that one open.

13
00:00:58,010 --> 00:01:04,730
I'm going to open a perience widgets and let's look at that front page one widget.

14
00:01:04,880 --> 00:01:11,030
I just have a text widget that has some of the leftover text I just copied one line and then pasted

15
00:01:11,030 --> 00:01:17,840
it a couple more times to make a little bit more text and instead of having This is the way it was before

16
00:01:18,080 --> 00:01:25,910
read up against her or with one carriage return and automatically add paragraphs is checked if I just

17
00:01:26,510 --> 00:01:27,550
scroll it down.

18
00:01:27,620 --> 00:01:31,940
Add one more carriage return using the enter button and hit save.

19
00:01:32,290 --> 00:01:38,360
And it makes this button down a little bit further away from the text so you can have kind of a message

20
00:01:38,360 --> 00:01:45,530
for the either either the about scrolling navigation and you could have a button if you like a call

21
00:01:45,530 --> 00:01:48,040
to action to send someone somewhere.

22
00:01:48,050 --> 00:01:53,090
So I'll leave that widget area the way that it is right there and if you scroll down a little bit more

23
00:01:53,090 --> 00:01:59,220
you'll see that I have five widget areas in the front page area too.

24
00:01:59,630 --> 00:02:04,630
It's close from page 1 and I'll open up from page 2 and you can see what I'm using here.

25
00:02:04,710 --> 00:02:08,020
Five Genesys featured page widgets.

26
00:02:08,240 --> 00:02:10,780
And let's go back and look again at what I've got here.

27
00:02:10,790 --> 00:02:17,830
I'm just using five pages that were imported when we made our XML import from the cafe pro theme.

28
00:02:18,320 --> 00:02:23,960
And the way I have this set is I've typed a custom header like we experimented with in the last video

29
00:02:24,410 --> 00:02:28,430
and I have the title of this page not showing.

30
00:02:28,640 --> 00:02:36,050
I have 200 characters and I am not showing the featured image sample page does have a featured image

31
00:02:36,260 --> 00:02:41,990
but just to see what all these look like when they're laid out with the same content in them you can

32
00:02:41,990 --> 00:02:47,400
see what looks like five widgets inside of a single widget area.

33
00:02:47,420 --> 00:02:51,650
So I'm using five which shows three across the top and then two below.

34
00:02:51,770 --> 00:02:58,280
And I think it looks real good when the site has the same amount of content in each.

35
00:02:58,280 --> 00:03:05,760
So inside the front page to widget area let's look at that one called sample page.

36
00:03:05,930 --> 00:03:12,010
I do have these set up the same way instead of showing the page title with this checkbox.

37
00:03:12,170 --> 00:03:19,460
I'm typing the page title under title here so that it comes out with this nice full caps and this nice

38
00:03:19,460 --> 00:03:24,500
black border underneath calling it as kind of the top of this content area.

39
00:03:24,500 --> 00:03:26,690
I think that looks the nicest.

40
00:03:26,690 --> 00:03:32,490
And then I I only have one image size available to me the thumbnail size.

41
00:03:32,570 --> 00:03:36,350
However I have that set inside my theme.

42
00:03:36,410 --> 00:03:42,560
You might remember that when we were playing with the executive pro theme we had a number of different

43
00:03:42,560 --> 00:03:51,110
choices a featured image size and a portfolio image size that is created in the executive pro-team.

44
00:03:51,170 --> 00:03:58,520
When you import an item into the media library while using the cafe pro theme there's no custom image

45
00:03:58,520 --> 00:04:02,930
sizes programmed into the theme like there are with executive pro.

46
00:04:03,230 --> 00:04:09,280
However we can adjust this thumbnail size if we like and that's something I'm going to want to do.

47
00:04:09,290 --> 00:04:18,360
Here's why when I check show featured image and click save let's look back and refresh the page I can

48
00:04:18,360 --> 00:04:22,050
see that 150 by 150 pixels is OK.

49
00:04:22,050 --> 00:04:25,110
There's just some extra whitespace along the sides here.

50
00:04:25,260 --> 00:04:32,820
And to me I'd like to have maybe you know 100 by 300 something that's long and skinny and kind of fits

51
00:04:32,880 --> 00:04:39,960
in to the content area here instead of having this square image as a thumbnail.

52
00:04:39,990 --> 00:04:42,090
So how do we change that.

53
00:04:42,270 --> 00:04:49,170
If we go back to the Wordpress dashboard and then go under settings media this is where we find our

54
00:04:49,170 --> 00:04:56,280
media settings and how we can define the size of the thumbnail image that we want WordPress to create

55
00:04:56,580 --> 00:04:59,950
when we upload an image into the media library.

56
00:05:00,790 --> 00:05:09,460
So if I just want to change this to 300 by 100 and I do want to crop the thumbnail to exact dimensions

57
00:05:09,460 --> 00:05:12,620
so I'll leave this box checked and save changes.

58
00:05:13,440 --> 00:05:20,460
Now one problem is that if I refresh the page here by doing that nothing happens on the front end.

59
00:05:20,640 --> 00:05:29,130
This thumbnail image still exists inside of the media library as a 150 by 150 square image.

60
00:05:29,130 --> 00:05:35,550
Now there's a great free plug in in the Wordpress repository that I have loaded into the student's sandbox

61
00:05:35,550 --> 00:05:42,390
area and we've got to go into plug ins and then activate it to be able to regenerate our thumbnails

62
00:05:42,450 --> 00:05:44,280
site wide.

63
00:05:44,280 --> 00:05:50,490
Now if we do go to media and add a new image then every new image that comes into the media library

64
00:05:50,760 --> 00:05:54,270
will be trimmed to the size that I just defined.

65
00:05:54,450 --> 00:05:59,010
But what if I wanted to trim down and recreate thumbnail images of a different size.

66
00:05:59,010 --> 00:06:02,350
For items that are already inside of my media library.

67
00:06:02,520 --> 00:06:05,390
Well this is called regenerate thumbnails.

68
00:06:05,790 --> 00:06:09,910
It's a great plug in by Alex mills or Viper Double-O seven bond.

69
00:06:09,980 --> 00:06:17,010
And if I activate regenerate thumbnails inside of this WordPress dashboard now under tools I've got

70
00:06:17,010 --> 00:06:23,320
a region thumbnails button and I can go in here and just click regenerate all thumbnails.

71
00:06:23,370 --> 00:06:28,350
Now the 150 by 150 original thumbnail size will still be in my media library.

72
00:06:28,350 --> 00:06:35,940
It's not deleting any images but it is resizing images from the largest size originals that were originally

73
00:06:36,030 --> 00:06:36,850
uploaded.

74
00:06:37,820 --> 00:06:47,830
So let's go back into appearance widgets and if I open front page two again and I look at the sample

75
00:06:47,830 --> 00:06:54,160
page here I can see that the image size available to me for the featured image inside of a widget is

76
00:06:54,160 --> 00:06:57,290
now changed to my new image size.

77
00:06:57,460 --> 00:07:04,060
And I think just by regenerating thumbnails I can refresh the page and I'll have that new size available

78
00:07:04,060 --> 00:07:06,440
to me inside of the widget right here.

79
00:07:06,490 --> 00:07:08,130
I think that looks great.

80
00:07:08,560 --> 00:07:14,230
Let's talk a little bit more about how these widgets are going to appear on the front page areas of

81
00:07:14,230 --> 00:07:23,050
Cafe profe theme and what I've got here is a clickable link which is my image that opens up the page

82
00:07:23,050 --> 00:07:24,590
that that which it refers to.

83
00:07:24,610 --> 00:07:25,150
Great.

84
00:07:25,180 --> 00:07:31,480
I'm just going to hit back now that is the only clickable spot that takes me to that sample page though

85
00:07:31,900 --> 00:07:36,970
if I want this to be clickable it's not programmed into the theme.

86
00:07:37,120 --> 00:07:38,170
In that way.

87
00:07:38,470 --> 00:07:45,850
But I can display the title if I choose to using that checkbox inside of the widget editing area.

88
00:07:45,850 --> 00:07:49,510
Remember there's also the option to add a read more link.

89
00:07:49,510 --> 00:07:57,790
You can say anything we want and it can give the user a intuitive way to go and look at the content.

90
00:07:57,850 --> 00:08:03,110
While this is just an excerpt so let's experiment with that just for a second.

91
00:08:03,530 --> 00:08:10,670
And I'm going to say show page title instead of having the title up here because that would be redundant.

92
00:08:11,150 --> 00:08:19,040
And then for the more text I just use read more and then put to greater than symbols there as you can

93
00:08:19,040 --> 00:08:25,850
see I like to use that sometimes so if I hit save and then refresh the page under my new tab you'll

94
00:08:25,850 --> 00:08:32,280
see that it gives me three dots and then a clickable read more depending on how long these words are.

95
00:08:32,360 --> 00:08:36,730
This will come out you know either below on one line or not.

96
00:08:36,920 --> 00:08:42,560
But now I've got a sample page the way the theme is designed featured image comes first then the title

97
00:08:42,560 --> 00:08:44,000
if you have that box checked.

98
00:08:44,210 --> 00:08:49,250
And then as much content as you define as well as a clickable read more link.

99
00:08:49,250 --> 00:08:57,670
That also leads to that sample page now for me I'm thinking that the read more link by itself will be

100
00:08:57,670 --> 00:08:58,260
just fine.

101
00:08:58,270 --> 00:09:03,860
And I like the look of having this all caps header area above the image a little bit better.

102
00:09:04,060 --> 00:09:12,970
So I'm going to go back and uncheck the page title and I'll re and enable a title that's customizable

103
00:09:12,970 --> 00:09:19,430
here and I'll call it just the name of that page and click save.

104
00:09:19,490 --> 00:09:24,540
And now since I have established what each of these can look like that's great.

105
00:09:24,540 --> 00:09:28,840
I might even put a little bit little bit less text in there.

106
00:09:29,010 --> 00:09:35,700
I think by saying instead of 200 and you just see what 180 characters looks like.

107
00:09:38,680 --> 00:09:42,230
That looks a little bit better I think they'll probably all come out a little bit better.

108
00:09:42,250 --> 00:09:43,870
So now I'm going to pause the video.

109
00:09:43,930 --> 00:09:50,260
I'm going to add a featured image and make those widget changes in each of these four remaining widget

110
00:09:50,260 --> 00:09:50,880
areas.

111
00:09:51,700 --> 00:09:52,570
Be right back.

112
00:09:55,060 --> 00:09:56,740
So I think I've done everything right.

113
00:09:56,740 --> 00:10:04,990
I went into pages of pages I selected each one of these pages individually and I uploaded and selected

114
00:10:04,990 --> 00:10:07,270
as a featured featured image.

115
00:10:07,270 --> 00:10:12,740
One of my images I used for new images and I'll show you where I got them in just a minute.

116
00:10:12,790 --> 00:10:19,480
Then I went through and I changed the content character limit to 180 and I added my read more text and

117
00:10:19,570 --> 00:10:21,570
saved each of the images.

118
00:10:21,880 --> 00:10:30,120
So let's go back to the site where I was and refresh the page nice I've got some great clickable images

119
00:10:30,120 --> 00:10:37,680
here as well as a read more link on each one that's looking good.

120
00:10:37,680 --> 00:10:40,300
Now let's talk about where I got these images.

121
00:10:41,700 --> 00:10:50,460
Now as I've mentioned before I'm a member of several mailing lists one of which is WBM udev drags the

122
00:10:50,460 --> 00:10:51,210
whip.

123
00:10:51,420 --> 00:10:53,230
WordPress news newsletter.

124
00:10:53,400 --> 00:10:58,250
And one of the sites I really like to check in on is called W.P. tavern.

125
00:10:58,500 --> 00:11:05,790
Now I found this recent article called 13 sources for free public domain and CC 0 licensed images.

126
00:11:05,970 --> 00:11:09,530
And if you scroll down and read some of this you know.

127
00:11:10,110 --> 00:11:16,800
The point is it's not legal for you to just go to Google and try to find you know

128
00:11:19,290 --> 00:11:27,720
images and it's not legal for me to use an image that I find on the Internet depending on what its licensing

129
00:11:27,720 --> 00:11:28,530
is.

130
00:11:28,530 --> 00:11:38,160
Now of course in Google you can use their search tools to search just by usage rights labeled under

131
00:11:38,160 --> 00:11:40,080
a Creative Commons license.

132
00:11:40,410 --> 00:11:47,610
But the point inside of this article W.P. tavern is that a creative commons license is not compatible

133
00:11:47,820 --> 00:11:55,290
with a general public license that WordPress uses for its open source software including for plug ins

134
00:11:55,320 --> 00:11:56,610
and themes.

135
00:11:56,610 --> 00:12:05,730
And so this is a great source for different Web sites that allow for images to be shared and then used

136
00:12:05,850 --> 00:12:06,980
commercially.

137
00:12:07,020 --> 00:12:10,670
I've looked through a lot of these and really I like this.

138
00:12:11,160 --> 00:12:19,440
Let's see the public domain archive is where I found the four images that I imported and used as a part

139
00:12:19,470 --> 00:12:22,180
of these four new posts.

140
00:12:23,270 --> 00:12:25,250
A lot of these images are very large.

141
00:12:25,250 --> 00:12:32,030
And so as we explored in a previous chapter a lot of times you'll have to download these very large

142
00:12:32,030 --> 00:12:41,060
images that are maybe 4000 5000 pixels wide and or 12 megabytes or two megabytes in size.

143
00:12:41,090 --> 00:12:47,720
And of course I wanted to bring those images down in size and so I used Photoshop and I trimmed them

144
00:12:47,720 --> 00:12:55,940
down to two or 300 kilobytes instead of the two or nine megabytes that some of these images came in

145
00:12:55,940 --> 00:12:57,500
at.

146
00:12:57,520 --> 00:13:05,680
And so if I go back to the widgets you can see that I have selected to show the featured image.

147
00:13:05,680 --> 00:13:13,300
Now that I have the image size and selected the 300 by 100 media thumbnail size when I uploaded those

148
00:13:13,300 --> 00:13:20,380
into the media library and put them into the pages they came in as the right size 300 by 100 and then

149
00:13:20,410 --> 00:13:23,570
each of those is displayed.

150
00:13:24,040 --> 00:13:29,490
And then finally I just need to add two more widgets to the footer which I'll take care of now.

151
00:13:31,060 --> 00:13:37,570
First I'll customize this social sharing widget so that these colors match the color that I'm using

152
00:13:37,570 --> 00:13:38,350
on my web.

153
00:13:38,350 --> 00:13:44,540
Here you can see this is a green highlight color that we're using inside of the cafe pro theme here.

154
00:13:44,740 --> 00:13:51,850
And if I go back and open the custom Mizer I can get a few more customizing options that are just visible

155
00:13:51,850 --> 00:13:53,190
under the appearance tab.

156
00:13:54,530 --> 00:14:02,240
And one is colors can see I'm using this green accent color and I'm gonna go ahead and make it into

157
00:14:02,300 --> 00:14:04,450
a nice blue.

158
00:14:04,580 --> 00:14:12,770
I'd rather have a nice blue there sort of a medium blue that would work on black or on white and look

159
00:14:12,800 --> 00:14:13,410
good.

160
00:14:13,580 --> 00:14:17,660
And then I'm in a copy the color code.

161
00:14:17,660 --> 00:14:24,020
By hitting Control-C right here without the hash tag it save and publish in the custom Isar and then

162
00:14:24,410 --> 00:14:30,890
I'll just use the customize it to go back into my widgets and in the footer one area I've got simple

163
00:14:30,890 --> 00:14:36,830
social icons left over from the way that it was set up with the original theme that came in when I created

164
00:14:36,830 --> 00:14:37,830
this new site.

165
00:14:38,360 --> 00:14:44,590
And I'll make that background hover color the same blue instead of this red color.

166
00:14:44,590 --> 00:14:48,610
That was the default.

167
00:14:48,730 --> 00:14:55,660
Great now that I've saved that I could go back up and choose something for a foot or two and foot or

168
00:14:55,660 --> 00:15:03,240
three I was going to fill this out with some sample content because we don't really have a plan for

169
00:15:03,240 --> 00:15:06,140
what this Web site is going to be all about yet.

170
00:15:06,300 --> 00:15:11,140
Let's see I think I'll do a list of recent posts

171
00:15:13,930 --> 00:15:23,020
and just leave that as the default and I'll go back into footer 3 and make a text widget just as a placeholder

172
00:15:23,020 --> 00:15:23,660
down here.

173
00:15:30,230 --> 00:15:32,180
Now just grab a little bit of text.

174
00:15:32,180 --> 00:15:36,360
In fact I'll just go back grab a little bit

175
00:15:39,100 --> 00:15:41,620
of my sample holding text

176
00:15:46,850 --> 00:15:53,900
save and publish and let's see where we are if I refresh the page

177
00:16:00,200 --> 00:16:03,290
now I've got the blue color instead of that green.

178
00:16:03,420 --> 00:16:10,120
I really like that and the buttons blue as well show up on the white nice my read more links are blue

179
00:16:11,690 --> 00:16:15,910
and the background of this is a highlight color which I really like that color.

180
00:16:17,110 --> 00:16:26,240
And now these icons match my background my link colors in this video I showed you how I used the home

181
00:16:26,240 --> 00:16:33,140
page layout document for the cafe pro theme as a reference and chose five pages to fill out the front

182
00:16:33,140 --> 00:16:35,390
page to widget area.

183
00:16:35,390 --> 00:16:41,660
I showed you how I changed the thumbnail size and then used the regenerate thumbnails plug in to resize

184
00:16:41,690 --> 00:16:45,580
and customize my thumbnail images for the themes display.

185
00:16:45,650 --> 00:16:50,070
I also showed you a good resource for public domain images that are free to use.

186
00:16:50,120 --> 00:16:56,560
And finally change the highlight color and added content to the footer widgets in the next lesson.

187
00:16:56,630 --> 00:17:01,910
We'll get started creating and implementing a plan to categorize some of the site's content into some

188
00:17:01,910 --> 00:17:06,060
custom post types and taxonomies using the custom press plugin.