1
00:00:00,920 --> 00:00:05,550
Now will really start to finish out the look and feel of the 2014 theme.

2
00:00:05,660 --> 00:00:10,940
We'll revise the header navigation making it appropriate for our fictitious photographer's website as

3
00:00:10,940 --> 00:00:16,520
well as add more widgets to the footer and we'll be keeping in mind that these are areas that remain

4
00:00:16,520 --> 00:00:18,780
visible on every page of the Web site.

5
00:00:19,160 --> 00:00:20,010
Let's get started.

6
00:00:21,340 --> 00:00:26,800
First taking a look at the home page of the web site I can see that there's plenty of room for a few

7
00:00:26,800 --> 00:00:30,740
different navigation items and I don't need to use this dropdown here.

8
00:00:31,060 --> 00:00:33,240
Let's go ahead and revise the menu.

9
00:00:34,090 --> 00:00:37,920
Let's use the Customize her so that we can see our results as we change them.

10
00:00:40,560 --> 00:00:41,950
I'll open up menus.

11
00:00:42,930 --> 00:00:49,260
Menu locations top primary menu is the header menu.

12
00:00:49,330 --> 00:00:52,610
So let's go ahead and look at the menu and I'll just move.

13
00:00:52,630 --> 00:00:54,380
Contact me back out.

14
00:00:58,880 --> 00:01:00,820
And portfolio as well.

15
00:01:05,870 --> 00:01:08,070
You can see what it looks like on the right side.

16
00:01:09,650 --> 00:01:10,620
That looks great.

17
00:01:12,690 --> 00:01:18,930
Speaking of portfolio that's a page that we haven't edited into a photo gallery yet and we're going

18
00:01:18,930 --> 00:01:20,510
to do that in this video as well.

19
00:01:22,660 --> 00:01:32,580
Next we'll go ahead and edit the footer area and we have room to put four items here in the footer area.

20
00:01:32,890 --> 00:01:35,140
Let's leave the map.

21
00:01:35,200 --> 00:01:35,960
Let's put this.

22
00:01:35,980 --> 00:01:42,940
Find me widget that we made with the address and phone number down into the footer.

23
00:01:43,180 --> 00:01:48,500
And then two more text widgets that we can use for anything we want.

24
00:01:48,580 --> 00:01:54,650
Go ahead and pause the video now and set the footer up with four widgets how that go.

25
00:01:55,840 --> 00:02:06,550
Well I'm going to continue to use the customize or and if I back out to the widgets area I can see that

26
00:02:06,640 --> 00:02:12,160
in the footer widget area I already have the Google map plug in there I can click Add a widget

27
00:02:17,500 --> 00:02:27,280
lets choose a text widget and I'm just going to use the word text as a placeholder and content here

28
00:02:28,000 --> 00:02:30,180
so that I can see what it looks like.

29
00:02:30,940 --> 00:02:33,740
I'll just hit close at another text widget

30
00:02:37,640 --> 00:02:45,920
close that one and then the other one I want to grab from up here in the primary excuse me in the content

31
00:02:45,920 --> 00:02:47,190
sidebar area.

32
00:02:47,360 --> 00:02:56,180
It's that text widget that says Find me and has this content that I formatted right here.

33
00:02:56,270 --> 00:03:01,280
Now I'm just going to go ahead and save and publish this in the Customize her so that I can go back

34
00:03:01,580 --> 00:03:08,990
into the widget area under appearance and just drag this text widget into a different widget area.

35
00:03:11,150 --> 00:03:15,010
Just a different place to edit the same content.

36
00:03:15,530 --> 00:03:19,660
Here's what I have in the foot or widget area the content side bar has this.

37
00:03:19,670 --> 00:03:25,990
Find me a widget and I'm going to go ahead and put it maybe on the far left and then the map next.

38
00:03:26,030 --> 00:03:31,410
And then these two text widgets we can use for anything we like let's take a look.

39
00:03:35,030 --> 00:03:38,940
As a reference the page of the Scroll down to the very bottom.

40
00:03:39,050 --> 00:03:43,530
Don't forget these footer widgets appear on every page of the Web site.

41
00:03:44,000 --> 00:03:47,530
Nice one two three four and it looks good.

42
00:03:49,720 --> 00:03:55,730
Sometimes as we fill out and design a web site using a certain theme we need to make changes as we go.

43
00:03:55,780 --> 00:04:03,670
And you may have noticed that the map widget down here this time doesn't have the little info graphic

44
00:04:03,670 --> 00:04:09,120
right here that had the address on it the same way that it did on the Contact me page.

45
00:04:09,430 --> 00:04:16,120
Let's go ahead and look at that and I'll show you why I did it and how I changed the footer widget to

46
00:04:16,120 --> 00:04:18,080
be different from the contact me widget.

47
00:04:18,430 --> 00:04:26,500
Since this map is larger I've enabled the drag ability of the widget so that people can find either

48
00:04:26,920 --> 00:04:32,010
a familiar location or where they are compared to where the location is.

49
00:04:32,230 --> 00:04:40,650
I also activated this info box so that it comes up automatically when the widget gets loaded.

50
00:04:40,660 --> 00:04:45,030
Also when you click on it it opens up the address and the name of the business.

51
00:04:45,100 --> 00:04:53,140
What I found was that at the at the footer map here it opened up an info box but it was black somehow

52
00:04:53,350 --> 00:04:59,310
placing that map within the widget area didn't enable that address to be printed in there.

53
00:04:59,410 --> 00:05:05,200
Even though I had it selected sometimes you don't know what you're going to get in terms of using free

54
00:05:05,200 --> 00:05:09,690
plug ins which is why I do use premium plug ins when I get a chance.

55
00:05:09,820 --> 00:05:15,940
And when we play in our W.P. of course dot.com sandbox environment you'll see that I do use a certain

56
00:05:15,940 --> 00:05:20,700
Google Maps plug in as a part of one of my premium plugin providers.

57
00:05:21,370 --> 00:05:27,130
But the difference is that I didn't make this map Dragonball although I do have it zoom mobile using

58
00:05:27,130 --> 00:05:28,240
these buttons.

59
00:05:28,420 --> 00:05:35,710
And then if you click on the icon it actually opens up a new window with the actual Google map on in

60
00:05:35,710 --> 00:05:37,620
full size with that address.

61
00:05:37,690 --> 00:05:42,300
So someone could get directions or anything they wanted.

62
00:05:43,120 --> 00:05:49,780
And the way I changed that was it really I just used the same map that we had used that was 200 pixels

63
00:05:49,780 --> 00:05:50,310
tall.

64
00:05:50,530 --> 00:05:57,340
But I just created a new location and I edited it a little bit to match what I wanted.

65
00:05:57,440 --> 00:06:01,350
This when I called firewood photography no info window.

66
00:06:02,080 --> 00:06:12,360
And really it's basically the same location where instead of a display info window I had it selected

67
00:06:12,360 --> 00:06:17,160
to do a redirect and I found that address inside of Google Maps.

68
00:06:17,160 --> 00:06:22,780
I just copied this you R-OH and I placed it in here for the redirect you are.

69
00:06:23,520 --> 00:06:31,360
And then I unchecked this box for checking to enable the info window default open and I saved it.

70
00:06:31,710 --> 00:06:40,100
Then when I went into my map I just chose that new marker instead of the other marker.

71
00:06:40,110 --> 00:06:47,600
So under the map called fire we had footer when I went down here to choose which marker.

72
00:06:47,720 --> 00:06:53,870
All I had to do was uncheck the old marker and check the new marker which is showing the display a little

73
00:06:53,870 --> 00:06:54,650
bit differently.

74
00:06:56,660 --> 00:07:03,590
Next I'm just going to edit this primary sidebar location instead of to show pages I want to show the

75
00:07:03,590 --> 00:07:05,090
most recent posts.

76
00:07:05,480 --> 00:07:12,170
If you remember we've chosen to show three recent posts on the home page and we also have any posts

77
00:07:12,170 --> 00:07:15,250
that we tagged featured to show up top here.

78
00:07:15,470 --> 00:07:21,650
But what I want is to allow the user to find posts maybe a little bit older in this sidebar which is

79
00:07:21,650 --> 00:07:23,440
present on every page.

80
00:07:24,770 --> 00:07:27,930
So let's go into appearance widgets again

81
00:07:31,110 --> 00:07:35,670
and instead of pages I'm just going to go ahead and pull that over and deactivate that sidebar.

82
00:07:35,740 --> 00:07:43,890
We'll leave a search window there but I'm going to bring across the default recent posts widget I made

83
00:07:43,900 --> 00:07:50,750
scroll that up to the 10 most recent posts and I'll display the date they were posted.

84
00:07:50,800 --> 00:07:52,780
Click save.

85
00:07:53,150 --> 00:07:54,490
And let's look at the result.

86
00:07:58,370 --> 00:07:59,930
Great recent posts.

87
00:07:59,960 --> 00:08:03,180
And each one of those is clickable to the post.

88
00:08:04,870 --> 00:08:12,070
Finally lets out a photo gallery to that portfolio page that we created as you remember we just used

89
00:08:12,070 --> 00:08:16,560
the Lorem Ipsum text to fill out the content just a little bit on that page.

90
00:08:16,570 --> 00:08:21,250
Now what we'll do is go into Page's portfolio

91
00:08:23,900 --> 00:08:27,110
and we use some of the sample images to create a photo gallery

92
00:08:33,190 --> 00:08:39,640
might leave one paragraph about the photography business and about the portfolio and maybe where these

93
00:08:39,640 --> 00:08:47,020
images had come from but then just below that I might want to put a photo gallery in there so within

94
00:08:47,020 --> 00:08:54,130
the post or page editing screen you can click Add media and it'll place whatever you choose where the

95
00:08:54,130 --> 00:08:55,940
cursor was inside the window.

96
00:08:56,350 --> 00:09:00,380
But I'm not just going to add a single type or a single piece of media.

97
00:09:00,490 --> 00:09:03,870
I'm going to click Create a gallery.

98
00:09:04,160 --> 00:09:08,330
Now it's showing me a window where I can choose any number of images.

99
00:09:08,690 --> 00:09:17,840
If I scroll down I can go ahead and choose some of the sample images that were uploaded as a part of

100
00:09:17,840 --> 00:09:20,110
our content import.

101
00:09:21,450 --> 00:09:29,110
And notice as I click each one the checkbox shows that I've selected it.

102
00:09:29,240 --> 00:09:34,730
So there's six selected and then I can click Create a new gallery.

103
00:09:34,730 --> 00:09:41,840
Now that would leave you up to a window where you have some gallery settings and what you want to link

104
00:09:41,840 --> 00:09:44,450
to is depending on what you want.

105
00:09:44,510 --> 00:09:49,440
You might link to none if you link to the media file.

106
00:09:49,460 --> 00:09:56,350
It'll basically open the large version of the image inside the browser window and an attachment page

107
00:09:56,710 --> 00:10:03,100
is a page that shows the permanent content like the header and the sidebar content and the title of

108
00:10:03,100 --> 00:10:11,330
the Web site and then shows one image along with the caption in the standard gallery.

109
00:10:11,470 --> 00:10:17,870
It's a number of columns and you can choose a random order and you can choose what size you want the

110
00:10:18,350 --> 00:10:19,130
pictures to be.

111
00:10:19,130 --> 00:10:25,460
So let's leave it at thumbnail and attachment page.

112
00:10:25,490 --> 00:10:30,100
There we go it shows us that this is going to look nice if I have 6 images.

113
00:10:30,200 --> 00:10:37,180
Each one is the thumbnail size 150 pixels by 150 pixels and I'll click update.

114
00:10:42,510 --> 00:10:43,460
And let's take a look.

115
00:10:49,000 --> 00:10:49,570
Nice.

116
00:10:49,660 --> 00:10:56,950
There's a nice gallery page if I click one of the images it opens up that images page which is the file

117
00:10:56,950 --> 00:11:01,560
name or title of the image and I can edit that in the media library if I want to.

118
00:11:01,570 --> 00:11:08,070
It also gives me a previous and a next button which is nice for going through and looking at the images.

119
00:11:09,930 --> 00:11:18,240
In this lesson you edited the header navigation buttons changed the footer widgets and revised the primary

120
00:11:18,240 --> 00:11:22,050
side bar to show a list of recent posts.

121
00:11:22,050 --> 00:11:28,170
You also created an image gallery inside of the portfolio page and configured it to open larger images

122
00:11:28,470 --> 00:11:32,020
using their attachment pages.

123
00:11:32,040 --> 00:11:37,890
Next we'll set up a category navigation to give visitors a way to browse defined sections of content

124
00:11:38,220 --> 00:11:39,550
through the category system