3.1 Creating the Navigation

Our portfolio will have a pretty simple page structure. Apart from the homepage we'll have of course the portfolio page. We'll also have the blog page, and a contact page. Now of course fell free to customize these in any way you want, and in any way that you see fit for your own project. But for this particular demo that's quite enough. So how do we create a navigation? Well let's have a look at our homepage right after we imported demo content. If we do a refresh. You'll see that we already have a working page, right? The Homepage was set to this bit. We have pretty much everything you saw in the official demo home page. But what about the navigation? Well the navigation is actually here, you can't see the whole navigation because we have this admin top bar over it, but that's not a problem. We can still click it right here, and the navigation should actually look like this. We hit that button and we have all of the menu items right here. But in our case it doesn't show anything, that's because we haven't defined a menu. Now lets go ahead and do that, first we'll go to pages and we'll determine what pages we'll be using for our navigation. The home will be our home page, this is already set to the front page. This was already done when we imported the demo content so no change needed here. We need the portfolio. Now for the portfolio we actually have two options, 1, 3, or 4 columns or a Masonary. And we can actually go to the official demo and we can check out. Those options. So this is portfolio 1, this is portfolio 2, this is with 3 columns. And then portfolio 3 is with 4 columns, and portfolio 4 is with a masonry layout, and I quite like this layout, I think that's what I am gonna be using. So we'll go back here to Portfolio Masonry, we'll hit Edit, and I'm gonna change it's name to My Work. Again feel free to edit this in any way you see fit. I'm also going to edit the page name here in the address bar to my work. As you can see that uses the portfolio template. We have a couple of options here but we're not gonna tamper with these just yet. And then move onto the next page which is the blog. For the blog we have four or actually three options, blog list, blog masonry and blog list with sidebar. Since we used the masonry template for the portfolio I think we're gonna be using the same one for our blog. So we're gonna go back here to All Pages, and under Blog Masonry I'm gonna hit Edit. I'm just gonna rename this to Blog. And blog here as well, make sure the template is blog masonry, and I'm gonna hit Update. Finally we need a contact page. For contact we have a single template which looks something like this. We have a contact form and an address which is of course totally optional. So we're gonna go back to all pages and where it says Contact I'm actually gonna rename this page to get, oops, Get in Touch. Also gonna Edit the promo link here. Get in Touch, and the template is actually the default template. And this is what I was telling you about the page builder from WP Bakery, the former visual composer, right. This is how the content looks like inside this page, so this is like a simplified representation of what we actually see on our contact page right here. So this right here is the contact form which is generated by a plug in called contact form 7, all right. This is the text before it, and this is the title right, where it says Get In Touch. It's this title right here. And we can use this visual composer to edit or add elements, it's really really simple. So I'm gonna hit an Update, and then we'll go to Appearance, Menus, and WordPress created a main menu for us, we can save this one or create a new one, it doesn't really matter. And we can go ahead and add menu items from the left. This is a list of all available pages. So we're gonna start with this, Home, then we're gonna use Blog or yeah blog. Then My Work, which is the portfolio, and then contact which is Get in Touch. So I'm gonna hit add to menu. Now once we're here I can start moving these around, I can create sub pages if that's what I want or I can create parent level pages. So we have Home, My Work which is the portfolio, blog, and then contact. And you have options for each of these pages, you can change the navigational label, title attribute. You can hide the navigational label if that's what you want but I'm gonna keep them, oops, just misclicked there. I'm gonna keep them just like this. So I'm gonna hit Save Menu. And then if we go to Manage Locations we can see that the theme has a single menu location which is called Main Menu, and we're assigning it the menu that we created just now, great. So now we'll do a refresh. And if we open the navigation we're gonna see our brand new menu. This takes us to the home page. This takes us to the portfolio page, which he uses that masonry layout. This will take us to the blog page which again uses a masonry layout. And finally. This leads to the contact page. And currently the contact form is not being displayed, probably just a small glitch here. But we'll be creating our own contact form and we'll add it afterwards. Right, so our navigation works. All of our pages are set. Now we'll take each individual page and customize it to our liking. We'll begin in the next lesson with the homepage. See you there.