Lessons

Lesson Info

Working with Pages

we left off right at lunch. We're talking about posts and how to use those how to create them, how to publish them in all that great stuff. And now we're going to Segway into pages a little bit. And for the most part, you already know how to make page because you've made a post. The publishing screens are identical to each other. So basically, what we're gonna do is kind of rehash a little bit of what we talked about before and then show you how to create some pages inside of WordPress as well. So right, So here's where left offers my hello creative live audience post that I did before. But as we know, this is a post and post were made for a dynamic content, right? Content that's ever changing every evolving things like that. Pages were made for more static content. So over here on the left, you're gonna notice that I have a pages tab, no clothes ups. You can actually see it. Here we go. I can view all of my pages Same way I came with all of my posts. I have the same capabilities here ...

inside of the pages. Panelas I do anywhere else poster would have so I can edit this. That takes me to the full edit screen. I can do quick edit, which allows me to do all these little quick editing things about it. I can also cancel that, and I can trash it. And I can also view it. If I view it, it just opens it up. Like so. Okay, so go back over here. So I created this about me page just very quickly, earlier. There's no content or anything in it, but let me go back and I'll just trash. That will start over and so inside of the pages panel in order to add a new page, just complete click this. Add new button right here. And what you get that page you're gonna see, It's just exactly like a post, right? Exactly. Like a post. And so here I'm just gonna say about me. Same thing I did before. When I click down here, it automatically creates that permanently slug for me again. If you want to change that, click the edit button and I can just changes to about or let's changes to bio. For instance, hit. Okay, there you all right again, inside of your post or excuse me inside of your page. You have the ability to upload or insert content, stuff like photographs, movies, music, media, different types of media, pdf, stuff like that. So I'm going to start off inside of this page and I'm just gonna insert a photo started off kind of different here. So I'm just gonna insert a photo first. And in this case, I'm gonna choose from my computer. I can also treat from Earl if you want hot link off file that exist somewhere else or one from your existing media library. You see, I've already got the Oklahoma Capitol building in there, but I'm gonna grab another one. So going to my photos here. And once I get into my photos, I'll find a decent one. Um, choose this one. It's gonna upload, And once it gets in there may have to crunch. That's kind of a big photo. These air, all high res photos. As you can see, the dimensions are 2500 pixels by 1800 pixels. It's fairly large for the web. Anyway. Give me the upload day, the image, name, file type all that good stuff. You can come in here and change all this stuff. You want to make it easier for you to find it later. We're gonna cover all of this in depth tomorrow, but I just want to point it out to you alternate text so I could just call this. This place is called Market Street Depot in downtown Paducah, Kentucky. If you're ever in the booming metropolis of Paducah, Kentucky, you can see this wonderful structure. Um, it's an IPHONE photo, too, by the way, So big ups to the IPhone. You can have descriptions, captions, whatever you want, doesn't have to have anything. You can also link to it as well. And so in this case, I'm gonna leave the link and I'll show you what that does. In just a moment you can change. The alignment in this case is gonna be none. I'm gonna have it sitting right at the top of this. I can also choose between a thumbnail, a medium, a large or a full size image fighting full signs. It's gonna be 2000 pixels wide. Chances are most of your WordPress themes. We're gonna be about 960 pixels wide. The content window may even be a narrow is like 4 500 pixels wide. My suggestion would be to figure out how big your content window is before you start in. That way, you can kind of specify a little bit better. How are how big your photos need to be? So how do we do that? Well, on the Mac, it's pretty easy to determine how big something is. Um, on a PC, it might be a little bit more difficult. I'm not sure how to do it. I'm sure somebody in the Chapman could probably answer me on how to do this on PC. But on a Mac, If I hold down the shift key, the command key and press the letter four I get this little cross hair. So shift key command key and press the letter four and you get this little cross and you could see as I move around, it tells me coordinates. If I happen to click and drag, it tells me how big of a box I'm drawing. So right now I'm at about 600 pixels wide and about 50 pixels also, really and truly, my windows probably about 600 pixels wide that I have to work with. So if I put in a picture and I just hit escape to turn that off, if you let go of the mouse without hitting escape, it takes a screenshot. Okay, so, like, basically, if I did this right here, it takes a screenshot, and it puts it out on your desktop. But it's another great way to take a screenshot, so let's go back in here. And so I know it's about 600 pixel. The large ones 584 pixels. That's pretty good. So let's put that large, and we'll take up the whole top and then I'll insert it into the post. Notices insert into post. Doesn't they insert into page? That could be a little misleading? You are working on a page, but it does say Post. It says that for everything doesn't matter where you are. Inward, President Lee says, insert into post when you're dealing with images or media of any kind. Why I'm not sure seems like they could make that contextual, but they don't. So let's insert that there it is, right at the top of my page and now I can go in and I can start adding some content to this if I feel like it. So for some reason, my return key is not not let me go down. So let's see here. So I've been away. Let's go back in here. I bet I lined it to the left, and I know I didn't have none. OK, canceled. Okay, There you said to start typing something so it shows up at the bottom. Let's go out and grab some filler text. This time we use tuna epsom dot com Another great one if you have a Mac again. Another great app to use is called Little Ipsum, The word little gypsum, and it gives you a little thing up here in your menu bar the ignition click on you can hold it down and it says, copy one paragraph, two paragraphs, three paragraph. You copied your clipboard and paste it wherever you want. It's called Little Gypsum. It's on the Mac App store, so I use that all the time. All right, so I'm gonna generate just three paragraphs this time and give me to know it's not quite as good as Give me bacon, but it works, So we'll copy this. Come back in here and just paste it in and they were killed. Now you can do a lot of different things in here. You can add other aspects to your page. Let's say, for instance, I wanted another picture like right here. But I wanted to be small, right on a reference the same one up top. But I wanted to be small. So let's go back to insert an image here. Go in the gallery. There's one image associated with the gallery on this page. I'm going to show it, and I put none, has the link. I want to be a link. And then let's just do Ah, uh, thumbnail 1 50 by 50 and insert it right into that post and actually made a mistake there to show you see how it's not wrapping around the outside. So we're gonna do. We're gonna click on it and then click the little mountain. You click a little mountain, then you can change the alignment, and then you can just update the updates. It Now if you want Preview that previewed here, there's my big image up top. There's that There's my little image down there now. How much space is here and here is determined by the theme. All right, I'm gonna show you when we talk about themes, how to get more into that so that you know how to customise that kind of stuff. But for this particular page must leave it like that to go back another image down here. Okay, I'll go right here to the start of this, and I hit the image button. I'll upload a new one for this. And let's just take Let's take this one. Upload that again. It's kind of big. Yeah, I got a question. Yeah, good question. So you've created page, but it's the all you've really controlled. Here is the content, not the look of the That's all provided by the theme, right? Yeah. The look of the pages provided by the thing. So when you go shopping for themes, do you have tow find one that has ever hold a whole bunch of categories of themes, One of which might be totally playing. Or, you know, things like that, Or can you eliminate that's header on one page if you feel like it or right. Most teams will have support for different types of pages, like full with pages, sidebar, pages and all that kind of stuff. So it just depends on the theme. You just have to find one. I'm gonna talk about frameworks a little later, okay? And that should help you out with that, too. So, um, where we left off, we were adding another image to this post here. I believe the font size up a little bit. And some questions about could blow that up a little bit so you could read a little bit easier. And so we're gonna do that here. Um, I uploaded the image. And so what I'm gonna do now is I'm just gonna position it. No link this time. Someone in the right hand side. Okay, I'm gonna insert it into the post or in this case, the page. I don't have to shrink this back down so I can actually see it, but And there it is. Over there on the right hand side. Right there. Right. So let's preview that. Oops. There's my page. There's my image on the left. Oh, didn't save it. Did I save refresh. There it is. There's marriage on the right. Okay, So pretty straightforward how to do that? I mean, it's just basic image controls. No big deal. Now, we did have a question, and you may not have heard the question before is you know what controls how this page looks necessarily right? Is it based on the theme or how does that work? You need to look for themes that have different page templates, etcetera. Um, it depends on what type of look you're going for. Really? Ah, lot of themes have different types of pages that they support. They have a page with a side bar on the left page with sidebar on the right. Full with page at just the pins on how much work the author of the theme is willing to put in to it. You can customize and do your own page templates. If you understand PHP and C. S s. There are also frameworks out there that we're gonna talk about when we get to themes that allow for very quick and very easy manipulation of page layout and stuff like that. As a matter of fact, I think we have a giveaway for headway themes. Do not right. And so headway 3.0 has just released, and it is literally a point and click interface that allows you to say, You want a header here on a sidebar here. I wanna content window here. I want whatever I want wherever I want it and it's It's amazing. It's an awesome, awesome application. There's also one made by the I Themes company called Builder and Builder. It's kind of the same premise as headway. You, you know, you add your modules where you want them to go. So you say Okay, I want the block post to be here on with the sidebar to be here. I want the sidebar to be this wide. I want the content to be this wide. So if you're looking for that type of flexibility, those are some things you need to look into our the framework options. If you're just, you know, if you can find the theme that suits your needs more power to you because buying a standalone theme is much easier than working with a framework cause. Usually themes are cheaper than a framework on DNA. For two, they're just in my opinion, I think they're a little bit easier to work with because you don't necessarily have toe worry about customizing things as much to do with a framework, whereas a frame working, you've got to put all the pieces together yourself because it comes, you know, not assembled, in other words. And so we'll talk about that when we talk about themes later today. So now we've got a page. This is all static, right? Um, could we add, uh, a blogged aspect to it at the bottom or a place for people to comment on this page? Or you can you can and it's got comments enabled right here. Okay itself. So that's kind of a default for right? Okay, you can't add like, um, a blawg post to it, necessarily, unless you do some sort of custom thing to make it do that. But, you know, if you wanted to create a page and then have post displayed on that page, where you would need is like a template that either supports that out of the box or like I was talking about earlier, you could set it up so that, like, your front page, is that just a static page and Then you have a blawg page that contains all of your posts, and I'll show you how to do that. Okay? Yeah. Thanks. Right. Close. All right. So this is the about me page, and it's not really about me pages that put a bunch photos in here, but I want to show you a proof of concept on how that works. Right? Okay, Now, there's one thing that we didn't talk about in posts that I'm surprised nobody caught yet because I was gonna talk about imposing. We kind of ran short on time. And it's this little guy ride here. Featured image. Okay, Uh, this was introduced, I believe in WordPress two point something I don't believe it was. Three point I believe is two point something might be three point out, but I'm not sure anyway. Basically, what featured images is you set a featured image for this post or page. And then based on what your theme tells that featured image to do where it chooses to display it, it could display it somewhere in your page. For instance, in you know my theme on my website, the featured images just is displayed right here at the very first of every single post. So every single post here on this belong has an image at the top of it. If I specify the image, that's where it goes, no matter what. And it's always this wide, okay, it's always that what how tall it is is dependent on me. But it's always that wide, okay? And that's gonna be on a theme by theme basis. How that handles that now. In the 2011 theme, which is the default we're working with here, I'm not sure that it has support for featured images on pages. We can try it and C let's take a look. Let's add, um, let's use this one as the featured image. So we use the guy holding up the big thing. So there's my featured image. You can see there it is right there, right, and it may actually change the header image of the page. Let's see, uh, let's save it Opening. It did say the future image goes here. No. So that's kind of cool in and of itself, right? So that's the theme that determining determines where that image actually goes. So the team had a featured image thing, and it said the header will be a featured image, right? But so basically what it says if I don't have a future damage, like if I remove that, remove that and save it. If I remove that it's still got an image here that's a default WordPress image. So basically, there's code in there that says if the user has set a featured image, display it here. If not display this image here, you know, it's just basically. If then, like in Microsoft Excel document or something, right? And so it's defined this area to be that wide that toll, and it automatically fills your image in and crops it accordingly. You know, there are plug ins out there that you can use to change the way it crops that changed places it all that kind of stuff. But it is on a theme by theme basis. I mean, if you look at, um, some of the press 75 themes, for instance, like Block Oh, inside of Block O. C. These were all featured images that they're pulling here on the front page. Some post don't have featured images, so they just show the title. And so they're saying Okay, if there's a featured image, show it and then when I roll over it, show me the title. If there is no featured image, show me the title. When I roll over, it changed the color, right? It's just a bunch of, if then statements that are controlling all this stuff and so dependent on what type of theme you use and what the author has determined to do. That's what you're gonna get each and every time. Okay, let's go back and add that featured image. I kind of like that. So it's set that again gallery. And again, I'm just going in. The images have already uploaded. I'll show it and then use Ask featured image. And this works for posts and pages and some themes I've noticed they don't support it on pages. Okay, because pages don't really necessarily need their own featured image Post do, because it's like the news feed, you know? I mean, um, now let's go close this up and let's view this page. So here's the finished published page, Okay, Now, if you don't want people to leave comments cause usually, I mean pages are static information. There's really not a lot of need for comments on a page. I don't think you can have people coming on if you want to. I don't allow people to come in on my pages on my site. I allow them to comment on posts, but not pages. You can go in and click the discussion link that's underneath screen options discussion. And then when you scroll down, it'll be right here so I can turn off the discussion options and then we can update it. Now if I come down here, see, it's got the comments here. If I turn that refresh that they're going, you do not get a comments are closed thing here because it's a page right? People don't need to know that on a page. They need to know that I'm opposed because on a post they inherently want to comment right because it's an interactive document or what? Right now, there's one other concept that you have to deal with, actually. Well, let's say two concepts. You have to deal with the pages parent and child pages and then page templates. So we have parent templates here, page templates here. This is going to be a top level page apparent page. Okay, let's add a child page to this one. Add new and let's say so. It's about me. That's the big overall thing we're talking about about me, right? So about me. And then maybe one of the sub headings is my story. People want to know about me, just paste in some content. Then on the right hand side, the parent is going to be about me. That means any time I display the page hierarchy or anything like that, it automatically, you know, list that over from this page. If I'm doing a menu, it automatically added as a drop down. So watch this. Like if I publish this page right here, I notice you do not see my story in the menu, do you? If I hover over about me, there's my story, because this theme is automatically set up so that parent pages go in the top menu and that child pages become sub menu items. Okay, so that's how you can build. You know, I'm gonna show you how to build custom menus later on so that you can control every aspect of this. But this is a way to just quickly and easily add drop down menus to this. And you can add a child page of that child page of that. I mean, you know, it's unlimited what you could do with that. The other section is page templates. Some themes support it. Some themes don't all rights totally dependent on the theme. In this case, there's a default template. That's what we're looking at here. Okay, there is also a showcase template and a sidebar template. Let's take a look at the sidebar template. If I turn that on and hit update and then I refresh this page, notice it moves everything flush left. It adds a sidebar over here to the right. Okay. Now, if you didn't like the sidebar on the right, you could actually go into the code and switch that over to the left if you knew how to do that. Unfortunately, with static themes, not frameworks, you don't have the ability just to say Here, move this over here. You just can't do it with the frameworks that I talked about earlier. Builder headway. All this kind of stuff. You can move this stuff around a lot easier. So? So they have the parent page. You have your page template again. It might not support, you know, page temples. It might have 10 or 20 page templates. The theme that we're gonna be using here in a little bit. When we start talking about themes later on this afternoon, it has a ton of page templates. I'll show you. All right, let's go back over here to all pages for a minute. So in all pages, you're gonna notice that I have a list of all my pages that are available to me. There's my about me page underneath it. There's gonna be a little dash in my story that indicates a child page. All right. You can, um, do bulk actions here so I could actually select all of these, And I could edit them. I could move them to the trash. Whatever I wanted to do. I can also filter by date notice you can't filter by category, cause categories are not applicable to pages there. Only applicable to posts. All right. So pages are not able to be categorized. They're not able to be tagged or anything like that. Only posts are because that's content that you want to find related country like if you want earlier. Actually, you have to click on the how to tag on my site. That shows you all the posts that were tagged with how to right. There's not necessarily gonna be a page more than one page about me, necessarily because there's about me. Well, there's my story. And then I could have, like, contact me. They're not necessarily related. They kind of are, but not necessarily, so just kind of depends. Okay, if you want to remove a page, it's pretty simple. Like I want to get rid of sample page. I just trash, and that has been trashed. It's completely gone now. If I look in my trash, I should have two items the about me I deleted earlier in the sample page. If you want to remove a page or post for that matter permanently, you can select it like this, and then you can just delete permanently hit applying and it's gone. There is no way to recover that. All right, it is gone. So once you have hit, delete and deleted it permanently. Sorry, did it. But if you don't do that well, is that a session related thing, or if the next time you log in those pages will still be there in the trash will still be an attraction. Okay, so it's not right? No, because if I go back now and I go back to my post, I think I trashed, opposed to other. Yeah, I did. So if I go back to my trash there, it's still right there. If I happen to log out of here and log back in, I can go to my posts and I still have it right there in the trash. So that way you can get back to it in the trash is it's sticky. So if I wanted to, I can select that. I can believe that permanently as well. It's all good. Let's go back in here and let's go back into the about me page and let's take a look at some other stuff in here. All right now, I saw I had some questions over lunch about embedding things into pages, and so this could be anything from, you know, like a YouTube video to, you know, any sort of flash object or whatever might be. There are some plug ins, even use. I'm gonna point you to some later on that you can use Teoh. Insert that content very easily. But if you don't wanna have to take the time to install a plug in and you don't know what plugging is and you need instant satisfaction now there is, you know, two tabs in the Post and page editor, Visual and HTML. If you click on HTML, you're gonna notice that this switches into a code document. Oh, code right. It's not that scary. All right, whatever is in here already, it's the It's the code representation of this. Okay, so it's not not anything that you haven't seen. It's just, uh, I'm a big fan of the Matrix, right? I am. With my favorite movies. Neo can look at the Matrix code and he can see this. The guy who's sitting at the chair in The Matrix, you know, he's like, I don't even see the coat. All I see is blonde, brunette, redhead, all that stuff. When I'm looking at this right here, I see this right there. I do. I've trained myself to do that. Eventually you can start to pick this apart and learn exactly what this stuff means in that way, when you get in here, you can see Okay, there's my image, for instance. Right here. It says, You know, image. There's an image tag right there. So there's an image. I am g all right. It's given a CSS class of a line. None. So that means it's floating all that cell. It's a large size, right? The title is whatever the title of the image Waas the source is the image where it's uploaded right there. The alternate text is that Market Street descriptor that I gave it the whip. That's how wide it is. That's how tall it is. And then you close the image tag right there. A salsa band, right? So you get in there and you start, Don't you don't change anything, but get in there and start poking around it. Okay? The only way you're ever gonna learn, you know, I call it B. I s time, but in seat done. And so, if you put your butt in the seat and you read this stuff, you can kind of decipher it. Were smart people, right? We can kind of figure this found the stuff that might not make sense Are the HTML tags like a H ref? That makes absolutely no sense why they didn't just call this link. I have no idea. Okay, but this is the start of a link, because this image does link to something. Right? But that's what that is. All right? This is just the text. You had it before. However, where I was going with this was embedding stuff, right? So, um, it's going to my YouTube channel really quick. I'm not a big fan of my face at all. Um, and let's take a look at how Teoh embed a video. So I'm just going to click on the share tab here and in bed, and I'll just grab the embed code from here. It doesn't matter how big it is. I can always change that later, right? So it's just grab that and right here, go in and I'm create some space that can pace that in. All right, that's a YouTube video would be 560 pixels, one by 315 picks was told. There's the video is pulling in right there. That YouTube video, right? There's no frame border it. It does. Allowfullscreen now I'm going to hit update. Theoretically, all of my formatting should stay intact, and that video should appear in the middle of my screen. Here's the deal. When you flip between visual in HTML editor, sometimes you lose your formatting because where presses a weirdo and so so you have to be careful with that. But if I go and refresh on my story, I'm not about me. There we go about me. I go through here. There it is. There's the video, and I can play that video if I want to. It works just like it normally should on YouTube. And that's how you can embed stuff you don't need a plug in to do it necessarily. Do plug ins make it easier? Sure they do, because all you need then is a URL. You don't need to embed code or anything else, but isn't it so much more fun and gratifying when you do the dorky way? I think so exactly. Um, but anyway, if you want to go back and remove that, it's very easy to remove it. You should go back and find the code and select it backspace over it, and you're good to go. You can update that and refresh. It's going. Okay. Now, if you get intimidated by the the HTML screen, you can always go back to visual. If you're looking at that and you're thinking Justin, man, there is no way on Earth I'm ever gonna touch the HTML tab whatsoever. That's okay. You can turn that off. All right. That way, you can avoid any chance of accidentally stumbling into oblivion over there. So what you'll do in order to turn that office, go right here underneath the user section to your profile and disable our I'm sorry. You cannot disable html editor. I got that totally backwards. You can disable the visual editor. Um, now you can hide the HTML editor. I'm believing, do it through a plug in, and I'll talk about that a little bit later, but I forgot it. It's backwards. But if you want to disable the visual editor, you can and only use HTML. I only use HTML when I'm working on, you know, really complex pages that need a lot of embeds or stuff like that. The most of time. I use the visual editor only