Introduction to the Static Pages Plugin
A few people have asked me if they could somehow donate to the work I do, so creating these video tutorials. Because a few of you asked, I created this Patreon page. So if for some reason you want to send some money my way, you can use that. I don't have any rewards. I will be very thankful to you, but as of right now, there are no rewards. This is primarily used just as a tip jar. If you don't want to donate anything, that's also okay. I hope you enjoy the videos and that you may consider subscribing to my channel. Okay so that's it about Patreon. Let's get to work.
Okay, so let's learn something today. So one of the viewers on the channel, who is accidentally also called Devan, pointed something out to me the other day on Facebook. He said that we covered quote unquote "hard stuff" on October, but we didn't cover some of the basic stuff. One of those things is static pages.
So what is that? So Static Pages plugin is a plugin for, well, creating static pages. But then you can say, okay, so we can go to the CMS and also create static pages there. And you would be right. If you are creating a website for yourself, I don't think there's a need for you to create the, for you to install the Static Pages plugin. But if you are creating a website for your client and you want to allow that client to manipulate those static pages—so add content to them, add images, write some copy, and so on—then you would actually install the Static Pages plugin because it will allow your user or your client to easily edit those pages. Also, what you get with static pages is sub-pages. So you can create sub-pages very easily, and you can create menus and put those menus around your site. So you would have a header menu, footer menu, and so on. We are going to be covering all of that in this video.
Installing and Configuring the Plugin Layout
Okay, let's go to the settings section of our site. We go to updates and plugins and search for static pages. Okay, install it. Okay, so now our plugin is installed successfully, and as you can see, you get a new menu item right here where you can create your pages. But the static pages plugin won't work out of the box because for it to work, you actually need first to create a layout for your static pages.
So we are going to go to our code editor. And as you can see, I'm already in the layouts folder. So that would be themes, the name of your theme, ours is called Olympus, layouts, default.htm. And here we can actually duplicate this file and call it static-layout. Okay. So what I'm going to do right here is I'm actually going to get rid of this partial header and copy the content from the header because we are going to manipulate it a bit.
Okay, so this is our header, and I'm going to remove this navigation that we created by hand. Okay, so this is our static layout. The content of your static pages is going to be displayed right here. So where the page is, you don't need to touch that. And also, let's remove this partial footer. You can use them. You can actually create another partial called footer-static-pages or something like that and import it right here, include it right here. But I'm going to delete it and copy the content from the footer, paste it in, because we are going to add a footer menu right here.
And I'm actually going to do that right now. So I'm going to create a div called footer-menu, actually a nav tag. Okay, so we are going to put our menu right here. And right here, we are going to put our header menu. Okay, let's save this. And now if we go to the CMS section of our site, we have all of these static pages right here, but you also have something called layouts. So if I click on the layouts and go to the static-layout.htm, what I can do right here is I can go to components and then to Pages and then put this Static Page component right here. So now this page is used for a layout, for layouting static pages. Okay, so we just save this. And now we have our static pages layout.
Creating Static Pages and Sub-Pages
So let me show you how the static pages actually work. So you go to Pages and it's something actually similar to what you would get out of the box with WordPress. So you would get pages and you would also get these menus right here.
So I can do something like this. I can create a new page, call this page 'About', and this is going to be our about page. Okay. And now as you can see, the URL of that page is about. We can save this. And now if I go right here and go to that URL, I'm on my about page. As you can see, the menu for our site disappeared because it's actually using this layout and we don't have anything right here. So if I write something here and go to that page, refresh it, now you would get that right here. Okay, so let's delete this because we are going to put a menu here.
And now let's try to create a sub-page. So you can of course add another page, or you can create a sub-page. So let's call this page 'About Us'. And as you can see, the URL automatically defaults to this, so about/about-us. Okay.
The layout for the page, I forgot to mention that, should actually be... not this, because we forgot in the static—actually, you didn't forget anything, I forgot it. We need to set this description to be 'Static Layout' and not 'Default Layout' because we already have a layout that is called Default Layout. So let's refresh this, and you can choose that static layout right here, but it's chosen for you by default. So let's save this. Okay, so this is 'About Us' sub-page. Let's save it. And now, of course, if we go to /about/us, you would get 'This is about us page.'
You can create another sub-page, which would be called, let's say, 'About Them'. Put something in here, save it. Now you have two sub-pages for your About page. You can also add a Contact page, for example. So, contact page, and so on.
But as you can see, the difference between these static pages and the pages that you get in this CMS section is that you have a text editor right here where you can write your content. You can add images, you can drop in videos, you can check out the code view. So pretty basic stuff. You can also add meta descriptions to your pages and so on. So let's save this. Now we have these pages right here and they're showing here. This doesn't look like much, so let's try to create menus for those static pages.
So let's click on Menus, add a new menu, and now we can add the item. What you can do here, you can just write 'All Pages' or something like that. The title doesn't matter. And you can choose 'All static pages'. So you would automatically create a menu that will show all of your static pages. And then we are going to replace this item with its generated children. So we don't have, we don't want to have 'All pages' in our menu, just those children pages. So I'm going to click that and click apply. So now we should have a menu that would display all of our static pages.
And it says it needs a code for our menu and also probably a name. So this is going to go to a header, 'Header Menu', and I'm going to call my code headermenu without the dash in between header and menu. And save this because we are going to need this headermenu code so that we can tell October, 'Okay, I want to use that menu right here.'
Now we created that. Of course, if we go right here, refresh it, nothing will happen because we still didn't tell October where do we want to put that menu. And to do that, we're going to go to CMS, go to Layouts, static-layout.htm, and then you can go to components and you have this Static Menu component. Drag it where you want your menu to be. So I'm going to drag it between nav class="main-nav" and the closing nav tag right here. So as you can see, we have component staticMenu. I'm just going to click on it and here you would choose which menu do you want to use. So I'm going to say headermenu. Save this.
And now if I go to the About Us page, I should get that menu right here. As you can see, it doesn't look very great because we don't have any stylings for submenus. But if you check out the code, you will see that we have a ul, then you have an li, you have an About page, and then you have another ul right here. So with this code and some CSS, you can create maybe a dropdown menu or something like that. Then you have a link to the static page, to a Contact page, About Them page, About Us, and so on.
Displaying the Static Page Title
So one thing actually I'm missing right here is the title for our pages. So as you can see, we just get the content, but we don't get the title of the page. So to correct that, I would just go to my static layout file and right here, where the content of the page should display, I will do something like H1 and in here I would add {{ this.page.title }}.
Okay, if I save it and refresh this page now, you get this 'About Us' title. And the same thing is for all other pages.
Okay, now what you can do, let's create another menu and this one we are going to add to our footer. So I'm going to go to Menus, call this one 'Footer Menu', and footermenu is going to be without the dashes. I'm going to add items. So now I'm going to add items one by one. So I can maybe call this menu item 'Movies' and I can choose CMS Page right here, and then I would get a reference of all the CMS pages that I have. So I have a movies page. Okay, apply. And now we have a movies link to our page. We can add another item, call this one 'Login', go to the CMS page and choose the login page. Apply. And maybe let's do that 'Add Actors' page that we have. And now you don't have to go to CMS Page, you can just type a URL right here if you want and click apply.
So now we have three menu items. Save this. Go to our layouts, static-layout, and just like we did for this header menu, we would do the same thing but we would put that menu right here. So between nav class="footer-menu" and nav, I'm going to go to components, Static Menu, and put it right here. Okay, so now we have a staticmenu right here and I'm going to choose 'Footer Menu'. So you can also put 'Header Menu' right here if you want, but I'm going to choose 'Footer Menu'. Save this.
And now if I go right here, I would have movies, login. So if I click login, I would go to the login CMS page. You know that that is a CMS page because as you can see, this changed. And that's about it.
Advanced Use Cases and Conclusion
So that's the way you would create the menus for your pages and also your static pages. This is actually pretty basic usage of the Static Pages plugin. Of course, you can completely replace your CMS pages with these pages. you can mix them together like it is on this site. You just have to consolidate this menu right here.
And let's just see if we can actually put the menu... so we have these partials right here, header. Can we put the menu right here? Let's see. So I'm going to delete the menu for the main nav right, delete it and go to components and put static menu right here. Delete this ul tags. I don't know if this will even work. I think it should. So I'm going to choose 'Header Menu'. Okay, save this. Right. So, okay, so it works. So you can create, if you want to have a way for you to manipulate the menus from the back end, then you can actually install the Static Pages plugin, maybe not use the pages at all, but use it just for creating menus. So that's another use for this static pages plugin.
Okay, so this is it for this video. Everything we did here will be available for you on GitHub. The link will be in the description below. If you like this video, please give it a thumbs up. Also, you may consider subscribing to my channel if you like the content I put out. You can ask me questions on Facebook or Twitter, GitHub, YouTube, website. And if for some reason you want to throw some money my way, you can use the Patreon page for that. Hope you guys enjoy this and I will see you in the next one.
