1
00:00:00,740 --> 00:00:05,980
In this lesson you'll embark on some challenges to customize the executive pro theme in ways you've

2
00:00:05,980 --> 00:00:11,710
done once before you'll create a custom navigation menu for the top right of the header.

3
00:00:11,710 --> 00:00:17,050
Create and upload a small Hetter logo and customize the bottom footer as well.

4
00:00:17,050 --> 00:00:21,760
Now that you're gaining some mastery of using certain sections of Wordpress you'll practice and put

5
00:00:21,760 --> 00:00:24,390
your skills to use in the student sandbox.

6
00:00:25,990 --> 00:00:33,160
First make sure you have the executive pro theme site open and have the actual site open in one tab

7
00:00:33,550 --> 00:00:36,160
and the dashboard open in another.

8
00:00:36,430 --> 00:00:43,060
I called mine executive Pro and it's the second site that we've been working on for this one let's go

9
00:00:43,060 --> 00:00:46,750
in to executive pro And first let's start with the menus.

10
00:00:46,750 --> 00:00:53,590
This is the default menu that I created as a demo as a part of that Parallax theme with one drop down

11
00:00:53,860 --> 00:00:59,700
and each menu item is actually just a placeholder with the hash tag as the you.

12
00:01:00,070 --> 00:01:07,000
What I'd like you to do now is create a menu across the top with some appropriate links probably to

13
00:01:07,000 --> 00:01:08,960
some of these pages.

14
00:01:09,130 --> 00:01:16,160
And let's create a contact us page and put that page link up at the top right as well.

15
00:01:16,240 --> 00:01:18,940
So a few pages a Contact Us page.

16
00:01:19,000 --> 00:01:22,860
And how about a button that links back to the home page.

17
00:01:22,870 --> 00:01:26,840
Good luck Well I hope that went well for you.

18
00:01:27,290 --> 00:01:33,380
As you remember there's two places where you can go within the Wordpress dashboard to edit menus and

19
00:01:33,380 --> 00:01:39,920
menu items one is under appearance menus and the other is inside the customize or where you can see

20
00:01:40,040 --> 00:01:41,550
a live preview.

21
00:01:41,570 --> 00:01:51,590
I'm going to go into appearance menus this time and I know that we're using one called Hetter menu right

22
00:01:51,590 --> 00:01:52,250
now.

23
00:01:52,490 --> 00:02:00,860
And just like the parallax theme the location of that Hetter menu is in a custom menu item in the header

24
00:02:00,860 --> 00:02:02,550
right widget area.

25
00:02:02,810 --> 00:02:08,840
Let's just take a look at that for now and come back to the menus area.

26
00:02:09,020 --> 00:02:14,870
If we look under Hetter right we can see there's a custom menu widget that has been pulled across from

27
00:02:14,870 --> 00:02:23,570
here and that custom menu has been customized with the header menu that we have inside of our menus.

28
00:02:23,720 --> 00:02:26,270
So I'll go back into appearance menus.

29
00:02:27,540 --> 00:02:32,850
And I'm going to create a new one for pressing this button right here create a new menu.

30
00:02:33,120 --> 00:02:36,780
I'm going to name it.

31
00:02:36,780 --> 00:02:38,870
Executive head or menu.

32
00:02:39,810 --> 00:02:40,660
So I know what it is.

33
00:02:40,670 --> 00:02:43,820
It create menu and then you'll be able to pull items into it.

34
00:02:45,990 --> 00:02:52,260
Well I first knew that I wanted to go ahead and put in our if you view all the pages I want to put in

35
00:02:52,260 --> 00:02:53,900
the home page first.

36
00:02:53,910 --> 00:03:03,840
Now when you just hit home and click Add the menu and put it in there I'm going to put a few pages from

37
00:03:04,290 --> 00:03:06,440
the theme that are in here.

38
00:03:06,450 --> 00:03:10,580
Let's see the telecommunications page

39
00:03:14,050 --> 00:03:21,050
development and design so that all of three of those pages to the menu.

40
00:03:21,430 --> 00:03:29,060
And now I notice that there already exists a contact page that we had imported using the executive pro

41
00:03:29,290 --> 00:03:32,020
sample content XML file.

42
00:03:32,280 --> 00:03:35,330
So I'll bring in that contact page that already exists.

43
00:03:35,430 --> 00:03:39,620
Knowing that I need to go in there and edit it how I like it.

44
00:03:39,630 --> 00:03:46,070
Now if I click save menu that 5 items in my menu I've saved that menu.

45
00:03:46,070 --> 00:03:53,180
Now I need to go over to appearance widgets to change my custom menu from Hederman you to the one I

46
00:03:53,180 --> 00:03:58,150
just made executive Hederman new I had to save that.

47
00:03:58,160 --> 00:04:02,910
So I should be able to go right to my site and in the Other tab and hit refresh.

48
00:04:03,200 --> 00:04:04,170
And there we go.

49
00:04:05,180 --> 00:04:12,620
The page this year on shows the accent color button as our full height and then if I click design for

50
00:04:12,620 --> 00:04:17,180
example it goes to the design page and then it shows that I'm on that page.

51
00:04:17,210 --> 00:04:20,330
Let's look at this contact page.

52
00:04:20,400 --> 00:04:27,270
All right so the the folks at Studio press recommend using a plugin called gravity forms which is excellent

53
00:04:27,270 --> 00:04:33,060
and they have a free version and a premium version but the short code that they're using inside of this

54
00:04:33,060 --> 00:04:39,000
page that we brought in with the sample content import is not working because we don't have the gravity

55
00:04:39,040 --> 00:04:41,800
form plug in enabled.

56
00:04:41,870 --> 00:04:42,750
Here's a link to it.

57
00:04:42,860 --> 00:04:45,760
So I know I'm going to have to go in and edit that contact page.

58
00:04:45,860 --> 00:04:51,380
Make sure our home page works.

59
00:04:51,490 --> 00:04:53,740
Don't worry about the contact page for now.

60
00:04:53,740 --> 00:04:58,190
We're going to be working with that in a future video in this chapter next.

61
00:04:58,420 --> 00:05:06,280
Can you remember an parallax pro theme how we changed it from just the text appear to having a logo

62
00:05:06,280 --> 00:05:07,510
image.

63
00:05:07,510 --> 00:05:08,920
That's your next challenge.

64
00:05:08,920 --> 00:05:15,950
Go ahead and find the size of an image that you need for the the header logo area up here.

65
00:05:16,740 --> 00:05:25,050
And go into your image editing program and create a an image and save it as a ping file and upload it

66
00:05:25,350 --> 00:05:29,490
and convert this text logo to a graphic logo.

67
00:05:30,380 --> 00:05:32,690
Good luck.

68
00:05:32,710 --> 00:05:34,890
Now this time it will go into the customized.

69
00:05:35,080 --> 00:05:39,820
And look at all of my theme options for using that hetter logo.

70
00:05:39,820 --> 00:05:46,600
Now you might make the mistake of going into site identity and looking for a place to put a site logo.

71
00:05:46,600 --> 00:05:53,410
In fact in our brochure site and our other site that we made in our local development environment we

72
00:05:53,410 --> 00:05:58,000
placed a site logo in this area under site identity.

73
00:05:58,060 --> 00:06:06,040
The executive theme and many Genesis themes use a custom area here under Hetter image to put a logo.

74
00:06:06,340 --> 00:06:11,140
And so you could see it tells me to 60 by 100 is the size I want my image.

75
00:06:11,290 --> 00:06:18,010
So I'll open Photoshop and go ahead and create a 260 by 100 pixel image.

76
00:06:18,010 --> 00:06:26,200
I have opened up Photoshop and created a nice little logo and I included a tagline on mine I've saved

77
00:06:26,200 --> 00:06:27,700
it as a Photoshop document.

78
00:06:27,790 --> 00:06:35,830
But then I also went saved it for web and devices in Photoshop a transparent background is noted by

79
00:06:35,830 --> 00:06:41,790
this gray and white checker board behind it instead of having a white or a black background.

80
00:06:41,890 --> 00:06:46,910
I left it as a transparency background and PNB or ping files.

81
00:06:47,090 --> 00:06:53,410
And Jeff says well can maintain a transparent background so I left the transparency box checked and

82
00:06:53,410 --> 00:06:54,830
then I saved it.

83
00:06:54,880 --> 00:07:00,710
It was only about 3.6 kilobytes by using a transparent background.

84
00:07:00,820 --> 00:07:07,060
If I change the color from white slightly in the header or the background of this logo I can still use

85
00:07:07,060 --> 00:07:10,730
the same logo because the color will show through behind the lettering.

86
00:07:12,120 --> 00:07:16,440
I've already saved that inside a folder on my desktop called Executive Pro.

87
00:07:16,550 --> 00:07:24,450
And so now I can go back to my website that I'm customizing here click add new image upload files and

88
00:07:24,450 --> 00:07:31,960
I'll browse to the desktop where I can find my folder executive pro and there's the executive logo peing

89
00:07:32,040 --> 00:07:38,400
file select and crap since I did it to the exact size.

90
00:07:38,440 --> 00:07:44,870
I'm just going to skip crapping and use that logo right up there at the top.

91
00:07:44,880 --> 00:07:45,200
Nice.

92
00:07:45,210 --> 00:07:47,190
And it's clickable to the home page.

93
00:07:47,220 --> 00:07:48,500
I'll hit save and publish.

94
00:07:48,540 --> 00:07:50,420
And let's go on to our next challenge.

95
00:07:51,740 --> 00:07:55,100
Let's finish up with the bottom footer of the site.

96
00:07:55,520 --> 00:08:00,330
As you know we customized the footer widgets one two and three.

97
00:08:00,440 --> 00:08:07,640
This is the footer that appears on every page but this is the default footer area that comes with Genesis

98
00:08:07,670 --> 00:08:09,590
and studio press themes.

99
00:08:09,770 --> 00:08:16,470
And I'd like you to go in and get rid of the links to executive and to Genesis and to WordPress.

100
00:08:16,640 --> 00:08:22,490
You can leave a log in and log out button but place the name of the business here after the copyright

101
00:08:22,530 --> 00:08:24,050
and the little dot.

102
00:08:24,050 --> 00:08:29,750
And also how about placing a link to your own design company web site.

103
00:08:30,140 --> 00:08:38,120
You could put something like site by Colin and your name or your business name and then make that a

104
00:08:38,120 --> 00:08:40,310
link with an anchor tag.

105
00:08:40,310 --> 00:08:48,310
And if you don't have a domain already just use a hash tag to make that link active but not going anywhere.

106
00:08:48,410 --> 00:08:53,720
So there's a challenge for you and pause the video now give it a try and then I'll show you how I did

107
00:08:53,720 --> 00:08:53,810
it.

108
00:08:53,810 --> 00:09:01,780
When you come back have to go with the site fliter that went well for you I'll go back over into the

109
00:09:02,620 --> 00:09:07,880
Wordpress dashboard and exit out of the Customize are there.

110
00:09:08,470 --> 00:09:13,480
And the one thing I want to make sure is that I have the appropriate plug in activated if I roll over

111
00:09:13,480 --> 00:09:20,650
Genesys I could see that I have the slider settings but I know I need to go into plug ins and activate

112
00:09:20,770 --> 00:09:21,630
the Genesis.

113
00:09:21,640 --> 00:09:23,570
Simple edits plug in.

114
00:09:24,130 --> 00:09:30,190
That's what we used inside the parallax pro-team to make the edit to the bottom footer there so I'll

115
00:09:30,190 --> 00:09:32,830
activate the Genesis simple edits.

116
00:09:33,920 --> 00:09:43,150
And then once once that's activated that gives me a simple edits button under Gen..

117
00:09:43,300 --> 00:09:47,050
So the footer credits text is what I'm editing here.

118
00:09:47,190 --> 00:09:51,270
And I go over to the side here I know I'm going to leave the footer log in and log out.

119
00:09:51,550 --> 00:09:55,380
I leave that little dot there but I want to take out the Wordpress link.

120
00:09:55,630 --> 00:10:02,060
The Genesis studio press link and the footer child the link.

121
00:10:02,280 --> 00:10:08,910
I'm going to leave the copyright and the little dot.

122
00:10:09,100 --> 00:10:12,250
So if I just hit backspace there I could put

123
00:10:14,950 --> 00:10:16,810
the name of the CIA.

124
00:10:16,830 --> 00:10:22,040
Let's just call it executive pro and then there's going to be another die.

125
00:10:22,060 --> 00:10:34,810
You know what I'll do is select the space dot space Control-C to copy that way I can hit Control V and

126
00:10:35,200 --> 00:10:36,400
right in the middle there.

127
00:10:36,490 --> 00:10:48,910
I can put a space and then I could type all about that site by Colin Greg Davis if Greg Davis is what

128
00:10:48,910 --> 00:10:53,230
I want to be clickable then I'm going to start typing an anchor tag.

129
00:10:53,290 --> 00:10:56,600
It's already used the less than symbol a.

130
00:10:56,740 --> 00:11:00,010
And then ATF equals quote.

131
00:11:00,040 --> 00:11:03,890
And my my you are ELF for now can just be a hashtag.

132
00:11:04,120 --> 00:11:10,030
End quote and then close the tag with the greater greater than symbol and then the other side of my

133
00:11:10,030 --> 00:11:10,950
name.

134
00:11:11,110 --> 00:11:15,280
Just close the anchor tag by hitting less than slash.

135
00:11:15,310 --> 00:11:20,550
A greater than and I click save settings.

136
00:11:20,730 --> 00:11:24,930
Great now that that's saved I'll just open up my site and the other tab

137
00:11:27,520 --> 00:11:30,140
refresh the page site.

138
00:11:30,150 --> 00:11:32,310
By Greg Davis looks like it's clickable.

139
00:11:32,310 --> 00:11:38,740
It has a hash tag there so it really just goes to the exact same page that you're on.

140
00:11:39,000 --> 00:11:44,270
But that's a whole that's a placeholder for a link and it can tell it's a link by the way that it underlines

141
00:11:45,230 --> 00:11:47,080
nice in this lesson.

142
00:11:47,090 --> 00:11:54,020
You created a new navigation menu a header logo for the site and edited the bottom footer adding a link

143
00:11:54,020 --> 00:11:56,150
to your own Web site Business.

144
00:11:56,150 --> 00:11:59,150
Nice job on the challenges in the next video.

145
00:11:59,210 --> 00:12:05,270
Will check out the custom post type called portfolio that comes with the executive pro theme and a custom

146
00:12:05,270 --> 00:12:06,110
taxonomy.

147
00:12:06,110 --> 00:12:07,270
Like a category.

148
00:12:07,280 --> 00:12:09,040
That's part of it as well.

149
00:12:09,050 --> 00:12:14,080
You'll also get a feel for how you can create your own custom post types and taxonomies using a plugin