In this lesson you'll embark on some challenges to customize the executive pro theme in ways you've
done once before you'll create a custom navigation menu for the top right of the header.
Create and upload a small Hetter logo and customize the bottom footer as well.
Now that you're gaining some mastery of using certain sections of Wordpress you'll practice and put
your skills to use in the student sandbox.
First make sure you have the executive pro theme site open and have the actual site open in one tab
and the dashboard open in another.
I called mine executive Pro and it's the second site that we've been working on for this one let's go
in to executive pro And first let's start with the menus.
This is the default menu that I created as a demo as a part of that Parallax theme with one drop down
and each menu item is actually just a placeholder with the hash tag as the you.
What I'd like you to do now is create a menu across the top with some appropriate links probably to
some of these pages.
And let's create a contact us page and put that page link up at the top right as well.
So a few pages a Contact Us page.
And how about a button that links back to the home page.
Good luck Well I hope that went well for you.
As you remember there's two places where you can go within the Wordpress dashboard to edit menus and
menu items one is under appearance menus and the other is inside the customize or where you can see
a live preview.
I'm going to go into appearance menus this time and I know that we're using one called Hetter menu right
now.
And just like the parallax theme the location of that Hetter menu is in a custom menu item in the header
right widget area.
Let's just take a look at that for now and come back to the menus area.
If we look under Hetter right we can see there's a custom menu widget that has been pulled across from
here and that custom menu has been customized with the header menu that we have inside of our menus.
So I'll go back into appearance menus.
And I'm going to create a new one for pressing this button right here create a new menu.
I'm going to name it.
Executive head or menu.
So I know what it is.
It create menu and then you'll be able to pull items into it.
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
the home page first.
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
the theme that are in here.
Let's see the telecommunications page
development and design so that all of three of those pages to the menu.
And now I notice that there already exists a contact page that we had imported using the executive pro
sample content XML file.
So I'll bring in that contact page that already exists.
Knowing that I need to go in there and edit it how I like it.
Now if I click save menu that 5 items in my menu I've saved that menu.
Now I need to go over to appearance widgets to change my custom menu from Hederman you to the one I
just made executive Hederman new I had to save that.
So I should be able to go right to my site and in the Other tab and hit refresh.
And there we go.
The page this year on shows the accent color button as our full height and then if I click design for
example it goes to the design page and then it shows that I'm on that page.
Let's look at this contact page.
All right so the the folks at Studio press recommend using a plugin called gravity forms which is excellent
and they have a free version and a premium version but the short code that they're using inside of this
page that we brought in with the sample content import is not working because we don't have the gravity
form plug in enabled.
Here's a link to it.
So I know I'm going to have to go in and edit that contact page.
Make sure our home page works.
Don't worry about the contact page for now.
We're going to be working with that in a future video in this chapter next.
Can you remember an parallax pro theme how we changed it from just the text appear to having a logo
image.
That's your next challenge.
Go ahead and find the size of an image that you need for the the header logo area up here.
And go into your image editing program and create a an image and save it as a ping file and upload it
and convert this text logo to a graphic logo.
Good luck.
Now this time it will go into the customized.
And look at all of my theme options for using that hetter logo.
Now you might make the mistake of going into site identity and looking for a place to put a site logo.
In fact in our brochure site and our other site that we made in our local development environment we
placed a site logo in this area under site identity.
The executive theme and many Genesis themes use a custom area here under Hetter image to put a logo.
And so you could see it tells me to 60 by 100 is the size I want my image.
So I'll open Photoshop and go ahead and create a 260 by 100 pixel image.
I have opened up Photoshop and created a nice little logo and I included a tagline on mine I've saved
it as a Photoshop document.
But then I also went saved it for web and devices in Photoshop a transparent background is noted by
this gray and white checker board behind it instead of having a white or a black background.
I left it as a transparency background and PNB or ping files.
And Jeff says well can maintain a transparent background so I left the transparency box checked and
then I saved it.
It was only about 3.6 kilobytes by using a transparent background.
If I change the color from white slightly in the header or the background of this logo I can still use
the same logo because the color will show through behind the lettering.
I've already saved that inside a folder on my desktop called Executive Pro.
And so now I can go back to my website that I'm customizing here click add new image upload files and
I'll browse to the desktop where I can find my folder executive pro and there's the executive logo peing
file select and crap since I did it to the exact size.
I'm just going to skip crapping and use that logo right up there at the top.
Nice.
And it's clickable to the home page.
I'll hit save and publish.
And let's go on to our next challenge.
Let's finish up with the bottom footer of the site.
As you know we customized the footer widgets one two and three.
This is the footer that appears on every page but this is the default footer area that comes with Genesis
and studio press themes.
And I'd like you to go in and get rid of the links to executive and to Genesis and to WordPress.
You can leave a log in and log out button but place the name of the business here after the copyright
and the little dot.
And also how about placing a link to your own design company web site.
You could put something like site by Colin and your name or your business name and then make that a
link with an anchor tag.
And if you don't have a domain already just use a hash tag to make that link active but not going anywhere.
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
it.
When you come back have to go with the site fliter that went well for you I'll go back over into the
Wordpress dashboard and exit out of the Customize are there.
And the one thing I want to make sure is that I have the appropriate plug in activated if I roll over
Genesys I could see that I have the slider settings but I know I need to go into plug ins and activate
the Genesis.
Simple edits plug in.
That's what we used inside the parallax pro-team to make the edit to the bottom footer there so I'll
activate the Genesis simple edits.
And then once once that's activated that gives me a simple edits button under Gen..
So the footer credits text is what I'm editing here.
And I go over to the side here I know I'm going to leave the footer log in and log out.
I leave that little dot there but I want to take out the Wordpress link.
The Genesis studio press link and the footer child the link.
I'm going to leave the copyright and the little dot.
So if I just hit backspace there I could put
the name of the CIA.
Let's just call it executive pro and then there's going to be another die.
You know what I'll do is select the space dot space Control-C to copy that way I can hit Control V and
right in the middle there.
I can put a space and then I could type all about that site by Colin Greg Davis if Greg Davis is what
I want to be clickable then I'm going to start typing an anchor tag.
It's already used the less than symbol a.
And then ATF equals quote.
And my my you are ELF for now can just be a hashtag.
End quote and then close the tag with the greater greater than symbol and then the other side of my
name.
Just close the anchor tag by hitting less than slash.
A greater than and I click save settings.
Great now that that's saved I'll just open up my site and the other tab
refresh the page site.
By Greg Davis looks like it's clickable.
It has a hash tag there so it really just goes to the exact same page that you're on.
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
nice in this lesson.
You created a new navigation menu a header logo for the site and edited the bottom footer adding a link
to your own Web site Business.
Nice job on the challenges in the next video.
Will check out the custom post type called portfolio that comes with the executive pro theme and a custom
taxonomy.
Like a category.
That's part of it as well.
You'll also get a feel for how you can create your own custom post types and taxonomies using a plugin