Now will really start to finish out the look and feel of the 2014 theme.
We'll revise the header navigation making it appropriate for our fictitious photographer's website as
well as add more widgets to the footer and we'll be keeping in mind that these are areas that remain
visible on every page of the Web site.
Let's get started.
First taking a look at the home page of the web site I can see that there's plenty of room for a few
different navigation items and I don't need to use this dropdown here.
Let's go ahead and revise the menu.
Let's use the Customize her so that we can see our results as we change them.
I'll open up menus.
Menu locations top primary menu is the header menu.
So let's go ahead and look at the menu and I'll just move.
Contact me back out.
And portfolio as well.
You can see what it looks like on the right side.
That looks great.
Speaking of portfolio that's a page that we haven't edited into a photo gallery yet and we're going
to do that in this video as well.
Next we'll go ahead and edit the footer area and we have room to put four items here in the footer area.
Let's leave the map.
Let's put this.
Find me widget that we made with the address and phone number down into the footer.
And then two more text widgets that we can use for anything we want.
Go ahead and pause the video now and set the footer up with four widgets how that go.
Well I'm going to continue to use the customize or and if I back out to the widgets area I can see that
in the footer widget area I already have the Google map plug in there I can click Add a widget
lets choose a text widget and I'm just going to use the word text as a placeholder and content here
so that I can see what it looks like.
I'll just hit close at another text widget
close that one and then the other one I want to grab from up here in the primary excuse me in the content
sidebar area.
It's that text widget that says Find me and has this content that I formatted right here.
Now I'm just going to go ahead and save and publish this in the Customize her so that I can go back
into the widget area under appearance and just drag this text widget into a different widget area.
Just a different place to edit the same content.
Here's what I have in the foot or widget area the content side bar has this.
Find me a widget and I'm going to go ahead and put it maybe on the far left and then the map next.
And then these two text widgets we can use for anything we like let's take a look.
As a reference the page of the Scroll down to the very bottom.
Don't forget these footer widgets appear on every page of the Web site.
Nice one two three four and it looks good.
Sometimes as we fill out and design a web site using a certain theme we need to make changes as we go.
And you may have noticed that the map widget down here this time doesn't have the little info graphic
right here that had the address on it the same way that it did on the Contact me page.
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
be different from the contact me widget.
Since this map is larger I've enabled the drag ability of the widget so that people can find either
a familiar location or where they are compared to where the location is.
I also activated this info box so that it comes up automatically when the widget gets loaded.
Also when you click on it it opens up the address and the name of the business.
What I found was that at the at the footer map here it opened up an info box but it was black somehow
placing that map within the widget area didn't enable that address to be printed in there.
Even though I had it selected sometimes you don't know what you're going to get in terms of using free
plug ins which is why I do use premium plug ins when I get a chance.
And when we play in our W.P. of course dot.com sandbox environment you'll see that I do use a certain
Google Maps plug in as a part of one of my premium plugin providers.
But the difference is that I didn't make this map Dragonball although I do have it zoom mobile using
these buttons.
And then if you click on the icon it actually opens up a new window with the actual Google map on in
full size with that address.
So someone could get directions or anything they wanted.
And the way I changed that was it really I just used the same map that we had used that was 200 pixels
tall.
But I just created a new location and I edited it a little bit to match what I wanted.
This when I called firewood photography no info window.
And really it's basically the same location where instead of a display info window I had it selected
to do a redirect and I found that address inside of Google Maps.
I just copied this you R-OH and I placed it in here for the redirect you are.
And then I unchecked this box for checking to enable the info window default open and I saved it.
Then when I went into my map I just chose that new marker instead of the other marker.
So under the map called fire we had footer when I went down here to choose which marker.
All I had to do was uncheck the old marker and check the new marker which is showing the display a little
bit differently.
Next I'm just going to edit this primary sidebar location instead of to show pages I want to show the
most recent posts.
If you remember we've chosen to show three recent posts on the home page and we also have any posts
that we tagged featured to show up top here.
But what I want is to allow the user to find posts maybe a little bit older in this sidebar which is
present on every page.
So let's go into appearance widgets again
and instead of pages I'm just going to go ahead and pull that over and deactivate that sidebar.
We'll leave a search window there but I'm going to bring across the default recent posts widget I made
scroll that up to the 10 most recent posts and I'll display the date they were posted.
Click save.
And let's look at the result.
Great recent posts.
And each one of those is clickable to the post.
Finally lets out a photo gallery to that portfolio page that we created as you remember we just used
the Lorem Ipsum text to fill out the content just a little bit on that page.
Now what we'll do is go into Page's portfolio
and we use some of the sample images to create a photo gallery
might leave one paragraph about the photography business and about the portfolio and maybe where these
images had come from but then just below that I might want to put a photo gallery in there so within
the post or page editing screen you can click Add media and it'll place whatever you choose where the
cursor was inside the window.
But I'm not just going to add a single type or a single piece of media.
I'm going to click Create a gallery.
Now it's showing me a window where I can choose any number of images.
If I scroll down I can go ahead and choose some of the sample images that were uploaded as a part of
our content import.
And notice as I click each one the checkbox shows that I've selected it.
So there's six selected and then I can click Create a new gallery.
Now that would leave you up to a window where you have some gallery settings and what you want to link
to is depending on what you want.
You might link to none if you link to the media file.
It'll basically open the large version of the image inside the browser window and an attachment page
is a page that shows the permanent content like the header and the sidebar content and the title of
the Web site and then shows one image along with the caption in the standard gallery.
It's a number of columns and you can choose a random order and you can choose what size you want the
pictures to be.
So let's leave it at thumbnail and attachment page.
There we go it shows us that this is going to look nice if I have 6 images.
Each one is the thumbnail size 150 pixels by 150 pixels and I'll click update.
And let's take a look.
Nice.
There's a nice gallery page if I click one of the images it opens up that images page which is the file
name or title of the image and I can edit that in the media library if I want to.
It also gives me a previous and a next button which is nice for going through and looking at the images.
In this lesson you edited the header navigation buttons changed the footer widgets and revised the primary
side bar to show a list of recent posts.
You also created an image gallery inside of the portfolio page and configured it to open larger images
using their attachment pages.
Next we'll set up a category navigation to give visitors a way to browse defined sections of content
through the category system