Lessons

Lesson Info

How to Add Content to Your Site

We've been going through and kind of setting things up, working with pages and posts, and now we're going to jump in the content. You know, this is kind of like, you know, the king, what we need to be doing. We've got a lot of things that we're gonna add here as far as images and talk to you guys about things called short codes and the difference once again between pages and post, uh, and just just add all the stuff. We're eventually gonna work our way into plug ins and to show you like my top ten and just different things. We can work with this forest response of this and that toe add content like video content, etcetera. And I'll throw a couple of little things in there and what kind of wrap it up with just testing and some some things that we need to look out for us. So so let's do this. I'm going to go over to our pages over here on the left and we're going to start to add content like I said, so I'm gonna click on let's go two pages all pages and I'll start with our homepage and I...

'll click on edit here and you'll see that this is the home page for the sight that comes with every word press site and it's got a bunch of stuff in here that you can you know, throw away or do whatever you want to do with obviously you'll notice that as we work with wordpress there's going to be a couple things that are kind of I'm gonna leave it at interesting okay kind of good kind of interesting, okay? One of the things that did actually freaks me out is if you scroll the page, you know, content on it, that bar right there up here is going to follow you they used to never do that that actually changed recently, which is actually really cool the bar right there is is kind of your your editing your adding you're working with different things like lists and quotes and all that kind of thing and this is where you're gonna go to do it it it's sort of like word, you know, I mean a word or excel or in design and you've got the bar to be able to do this type of content now when we add content of pages, obviously we're creating the page first and then we're going in and we're setting some some basic things about the page like we're setting page attributes like we just talked about a little bit earlier we're setting the templates like this one on the home page I don't want any side bars for instance I'm going to go just wide maybe you're going to notice something here I didn't mentioned before called order it's a little bit old school we're not really gonna deal with that too much anymore order is the order in which the pages appear in the navigation and we can control that by doing that on the menu so we don't really need to mess with that so um so we have our content we put out here now when you first get into a page and it's a theme specific themes you want to take a look around see what you can do that's the first thing I tell people okay, if I look down here and take a look l see on the right hand side that I can actually set the hand header banner back or an image on the right over here we can set that individually for each page depending on what we want and down here you're going to see what's called a header banner text we can add text in there that content right there is going to go in and we could turn that off we want customizer but it's going to go right here where we have vivo donut and this content here a place holder and this gray box will become your image. Like I said, we could turn that off we want customizer so looking down here as well, you're going to see that we have something I just put in here. I wanted you guys teo kind of get a fuel for some things that we can do. I wanted to draw your attention to wear called short codes anybody ever work with short codes before she codes they're they're kind of cool, let me zoom in wordpress has a siri's of what are called short codes built in and you can actually is as you go in and add content your page, you could just type the specific things in and it'll add those for you and you could just pick what you want it to be. So if I want a video, I could just type in that shirko with a little brackets around it video it'll put it in there, I just go choose from my media library or choose it, and it'll put it in there for me or you can use like a girl or something like that, so we'll see like let's say, for instance, the gallery right here, we conclude that it's a really simple gallery that we can do I've also included a couple here, and I wanted to just point out that there's a lot of ways the themes can handle working with the design itself. Some things will do this in the customizer they'll say, ok, you can choose to column one column, hide this not hi, dad. Etcetera. I've actually put out here what I called short code to create columns. So you're actually gonna go out and add these little short codes to make columns that are responsive. So if we have a full page, we can say let's, make it two columns instead of one. For instance, I kind of put these in here, justus an example. Something we could look at and use if we wanted teo and we're going to do that and just a little bit here. But short codes can be pretty important. And some plug ins that you work with will also have short codes. They can. They sure plug ins can should be implemented in certain ways that commune implemented as a widget that could be implemented as a short code. You can get to put a code in your code. I mean, there's a lot of ways to do it. First thing I'd like to do is just kind of add to add the header backer and that banner background image, this thing on the right here and the text, and we'll just do that rock creek and this would kind of lead us into talking about image is a bit now this is called a featured image and a lot of themes. They take advantage of these in some way, and they put him in some places, some some don't, but it featured image is something we could associate with a page or even opposed. I'm gonna click on set featured image and it's going to take us to the media library now the media library have a lot of you if you've been in wordpress, you've been here, okay? The media library is where we're going to go to add our files are different content, you know, we could do the images we could video because the audio there's like a lot of things we can do here, and what happens is when we say select the files here, we could drag him or select them, it's going to take that content and upload it up to the server, whatever it is, and actually create a folder for us right next to the themes and right next to the plug ins with all of our stuff. And put it in there okay, so you're going to notice though that there is a size limit here of thirty two mags which for images I hope you don't broach that or go beyond that but um but if you're talking video files things like that video could get pretty big pretty quick so what do you what do you guys think? It's faras video for instance like uploading video content? What where do you put video? For instance, if you have anybody youtube vimeo meal you or or I've seen photographers as an example put it in there about me page and they have a video like intro introduction yeah that's a that's a great idea uh instead of upload the video content there's where press does a lot to accept youtube videos, video any a lot of the social media and if you actually searching the codex, you confined all of the social media sites that it supports it's a lot you can just take the girl and paste it directly in and it will put the player in there and let it work, which is really cool uh, so there are a lot of times where I'm not actually uploading video because yes, to be perfectly frank if you upload a video for your file here, for instance or image file let's say video what kind of video file you gonna plug what's the format mp for ok and before right? Okay, so here's the thing and before supported on certain browsers and serpent certain operating systems it's not supported on all of them so is the thing about video and responsive it's it gets really hairy and I'm not going to go too far in here but we actually tend to either use a social site something like a youtuber of immune. Okay, we tend to do something like that because they take care of having at work in every device they do that for us they also have usually a flash fallback flashes a dirty word I know but they have a fallback was to work on older devices. Okay, if we try and attempt to upload a video up here it's going to try and play it but it may not play in all devices that's one thing we gotta watch out for there are plug ins. You can use it in the advanced class. We go through one of them, which is awesome. That actually makes response of video and it makes high def video and all kinds of things and it just kind of does it but you can use hosted video or social video to my point here is video think about it ok s o as faras files are concerned, we can upload here so I'm gonna go click and select files and it's going to take me out and you're going to see that we have that the bonus files the zip file of the intro class here we have a lot of the different pdf files and different things that I gave in here just for back on information you're going to see the images folder and I've got a bunch images you can just kind of play around with banners and different things like that one thing. Yeah. There's it's making me hungry for a doughnut, though I wish you would stop. Um, so here's, the thing about images were here. I want to start inserting these. We talked a little bit about file types, right? The three main file tax we talked about where? What? J peg gift png. Okay. And the fourth I mentioned was fiji as far as like raster images like this, we're probably gonna be using something like j peg or maybe paying okay, that kind of thing, but a lot of times we'll use j paige how many of you have created images in footie shopper illustrator and save them as j peg give for paying? Okay, um, there's, there's a lot of ways we can do that and a lot of ways teo, get this content, but there's a couple things you gotta think about file size is one okay, if you look at this image right here it's two hundred fifteen k which is pretty big it's pretty big. But look at the dimensions of this thing. You're going to see a twenty, six hundred by eight hundred, which is big. Okay, now I'm thinking banner now does anyone know what the most widely used screen resolution is on desktop across the world? Roughly ofsixty. Okay, twelve. Sixty? Yeah. It's, how many you ever heard of twenty four, twenty six forever today it was a thousand twenty for ten. Twenty four by some sixty eight, right? We are way beyond that. Most laptops that came out it's like thirteen. I know comments, please tell me exactly what it is I can't remember right now, but it's like thirteen hundred thirty something or something to that effect it's big it's really big that's worldwide. Okay, that's not in justin, united states. So a lot of our images are gonna actually start to be bigger. I remember before I mentioned that if we take an image and it's too big it's going to get scaled when it gets brought in when we place or or insert or grab images into our media loder here what what were press actually does is by default it's going to create different sizes of it for us yes by default it creates a few sizes not a lot you don't get a lot of options yes somewhere what the optimal size is to start with okay in the customizer you're usually it's not always but you'll sometimes see the person that created the theme will tell you stick with this size I kind of did that I said you know thirteen hundred by something is roughly what we want now when we when we take these images and we bring them in wordpress by default for most teams will actually create several versions you're going to find that there are a lot of teams out there that are set up for responsive they'll create like four or five sizes for you automatically it's kind of wacky you're like well why are they doing that anyway? It's it's so that you can well for several reasons it's so that you can put them in different places at different sizes because I'm not going to take a twenty, six hundred by eight hundred stick that on my page you know what I mean? Like in the page column it's not gonna work it's gotta scale it so we can insert a new image it's a little bit smaller if we want also for responsive you remember when I was talking about you have this humongous image and we go to mobile and it's gonna load that image in that hole size right well using responsive design we can actually use certain plug ins that will say swap it out depending on the device size okay, so it's going to use that the images that are generated to bill to do that now I'm gonna I'm gonna use this one and I'm going to show you guys where you can actually set or least see what images are being created okay, so there's a lot of pictures we can use here I'm gonna click on let's open this one let's get her in there basically what happens is it is going to upload now for me it was really super fast I'm working locally all it did was copied from one folder another and make a couple of different images okay, so here's what I'm going to do uh eat now if you're on a server of you're on go daddy one one blue host whatever it happens to be this will be a little bit more difficult you've got to go into the admin for those or you've got to take a look at it via like dreaming over ftp something like that but I'm gonna go out to my site here and take a look I think it was seal start you guys remember that? Okay take a look at this in that wordpress folder I'm not trying to confuse an amazing guys but there's our themes right? There are the plug ins that we've installed just folder serve ago and now you're going to see that we have what we call upload uploads the media code me media upload er we'll actually put them in here and by default it organizes our categorizes by month and date the year ok, you can turn that off, I'll show you how to do that. Uh, sometimes I don't want that it drives me crazy I'm like, just give me a folder full images you don't even, you know tell you how to show it shut that off, but check this out look at this yeah he's going to see that it's actually generating what if I could move this over, make a wider it's generating a siri's of images that are bigger and smaller, so see that you can use them in different locations and I'm not doing that now, here's the thing to think about if you're going to take an image and you're going to use it in your page and you're like, oh, I'm going to use it that big I think if you're going to use it bigger later, possibly I a lot of times we'll actually upload a larger image and let it create the sizes and just insert the size I want okay, yes, so let's say I upload a super huge file and it makes thes several different files I'm just thinking in terms of storage on the server if I delete that super huge file from my media will delete all of those air doesn't leave all the other sizes there do you see my point you want to keep the original image intact because that's what it's tracking basically you know what I mean in the media and the media area library yes when you see the thumbnails yes it's tracking the main image right there okay okay yeah so you've got to be you gotta be careful about what you delete you really do because otherwise it'll say it's missing that type of thing you know and these air not actually in there technically I will show you where they are though ok they are in there but they're not gonna know if you didn't want that large file on their will it then did lead all the other little ones that made on the server since you don't see them in the media library you know that's a really good question because otherwise I'm wondering how large because I've added two won't it's a photos and deleted I can almost guarantee well now all we need to go in and delete some in terms of size yeah yeah these these this is something that once that once again the theme is dictating this you know what I mean? Wordpress creates a few by default but the theme khun say hey we want more I got it I got especially for responsive themes so they can kind of it can work it so let me go back over and you can see right here now this is what I was talking about you can see the image right there and you can actually see the earl itself okay and let's see if I can actually get this to show that we go people banner too so if I do leave death in the folder is thinks they're gone so we've got a watch that okay but there's other ways to insert images all right? So we have images here you're going to see now in the media library that we have if I look on the left up here you're going to see that we can say what's been uploaded specifically for this page which is actually kind of cool or all the images actually I really like that is that on the right over here we're going to see all of the different kind of different information about the image. Okay, now if I scroll down you're going to see we have edit, we have delete if you go in if I click on edit image right here we're going to be able to do things like crop rotate simple commands that you did you guys all know you could do that one of those things where I don't really use it to be honest um but you can you can go in and do things like let's flip it let's do this let's rotate it let's crop it, etcetera and you can go set scale dimensions if you really want a custom size and actually you're talking about you said if you have a really big image just to get those other images you could just you could scale are right down here and it would do a pretty good job I got to say it's gonna be perfect, but you could make it smaller here to use it we can crop we can do different things with the image itself. So that's something that's interesting you could try. Okay, I perfectly honest. I try to set my images roughly sizing where I need them, that type of thing. Uh and let me click on the picture back again. And if I look on the right over here, you're going to see also, we have a lot of information like earl and we have a lot of c o khan then we can work with so you guys want to set some of this stuff you really do you want to set like all texts at least? Okay, all text is alternate text and what is as search engine optimization, right? What else is alternate text used for? Does anyone know for some reason whatever you're looking at, it doesn't bring the picture up it'll tell you what the picture is of so it's it's a sort of a descriptive as well like a description of it okay also if maybe you're doing and I've had to do this a couple times you're working on a government site that is mandated by the government could be state it could be federal if they're part of the american disabilities act yep for people with disabilities that need to have a screen reader assistive device to read it alternate text is red instead of the image because it's an image so we need also the text in this place it's a good idea to do it okay it's not going to show up to the user unless like she said, it breaks a link or something to that effect so you know you want to put in a few little key words make it simple but descriptive to what it is and what its function is to just keep it really simple. Um we can also add what's called a description description is just information about the picture itself. This is a little bit more you can do and this really could be for a ceo but a lot of search engines don't every hypes a lot of this stuff, but it doesn't always get you're ranked the highest so everything helps was to say that all right, we also have a caption sorry, do you have a question I was going to ask if where the description shows up is it with the caption or yeah yeah in the background or you know what? I'm actually I'm forgetting where it goes so let's take a look the caption is something that shows up on the page and what it's going to do is it's gonna generate a box around the picture and politic caption underneath it okay, so that's something that we could see two yeah, exactly so it's very very kind of blah like but so we put in our alternate text if we want to put a title, we can do that too this isn't a linked meaning there's no link when you click on it necessarily, but the title can show is that little yellow tool tip and it could be more for search engine as well and that's pretty much what we have here so I'll set up some things I'm gonna go ahead and set my featured image you're going to see it sets the header banner back on image I'm gonna go and save my page and they go up and update the page there we go right there and I'll go back out and we're now on our home page so I go back out to the home page and we can see havana right there so we got her obviously you can see that we need to do some cropping and figure out a little more room of overhead, that kind of thing so it's not quite hitting it now, but but there it is now if we want to start to add, you could also see we have the full page right there as well without the cyber, if we want to start to edit that text right there, the the actual customizers where we could go to do things like set the the alignment in different features like that we're telling not to show if we wanted to if I come over here and take a look, you're going to see down on the lower right weaken set that header banner text right here you can if you want to set some html tags in there and I did this for a reason not to make you frustrated because you can't put your favorite html tag in there, but a lot of times you're gonna find that with themes they will limit what you khun dio does anyone know why as faras adding your own code okay guys for security reasons because if you have things like this that are open to everything and somebody gets into the adventure gets in your sight, they can put in or inject code that khun do things, so they limit what can go in there sometimes that's what it is but it's it's something that we deal with on the web, you know, it's all, you know, it's out there, but also some people will limit the tags here because they'll create styles for this stuff, and they don't want to create styles for every single possible tag combination in the world. So they say you can do these tags and that's it. Okay, so I can come in here and say, you know what I'm gonna do, like a tch one, um, to say, like about us or something like that, and in this case, we're not going to set a font on this has already been set. We can do that in a couple different ways through customs if you want, I'll go ahead and update that, you know? And you could see once I go out there, I'll just refresh. We've got her text okay about us. Nice. All right, let me scroll down a little bit and you're going to see down here once again. We have the short codes and different things like that. There was a couple sneaky settings as faras content that we have to set right now that you're a lot of us are not really aware of, and if the theme allows it it's gonna look stupid you can at every page can actually have comments on it you're going to see like a comment box if the theme doesn't turn it off if they say sure you can do that you have to turn it off ok when you come to a page here now I turn it off in my theme because I just I know it's not a blog's I want to be pages if I look up to the top here you're going to see screen options I'm gonna click on that there's tons of stuff up here there's not on okay you'll see right up here that we have uh comments I'm gonna turn that on and scroll down you're going to see immediately it's going to show up I'm gonna go right down here and you're going to see comments right here now on a lot of themes it's going to say turn comments on or turn them off minor off by default because this is not a block okay, I know that we don't want to do that so you're going by default a lot of times this is on you want to turn it off okay so check that in your theme uh in your in your pages rather in your thing and you're also going to see appear this is probably one of the best things ever inward press you cannot live without revisions how many guys we work with revisions in here if you click on revisions first of all it's going to make you think you're going a little crazy because as I school down here and take a look it's going to tell you when you added it and how many times and basically give you a fallback it's actually before it is amazing to be able to do because you're gonna look and he did say here every time you guys hit the update button is going to do this and what you can do if you want to do is I can go say you know what? Let me go look at that that was a little that was a while ago but I'm gonna go look at that and is going to compare and contrast to the current one and the one out there look at this you can see that the red and orange or the green she's telling you what's changed on the page so you can then say you know what, man? I made a mistake I want to restore that version there's a restore this version right there that's actually really kids it's huge to be able to do that I'm gonna tell you right now as well that um let me actually uh let me do this let me get here and go back to the post editor you see, I don't want to do that so I'm just gonna go back you will find eventually and this is just a little housekeeping for everybody that does wordpress eventually after months and months of doing this you're gonna have revision find revision upon revision they're gonna have like six million of these things in here that can actually slow down your database okay and the reason why is because you get the table and every time you had a revision is gonna have more content to the table anytime takes the load it's gonna build can go slower so we have plug ins that can actually clean up the database it's called okay I use them all the time because it gets rid of revisions and that's a good thing to look into if you have aa lot of page content a lot of things that you're changing okay all right um there are other screen options we can work with I'm not going to go into all these we've got to get to content or more content if you want to this one is actually really cool because this custom fields one right here let me click on custom fields and take a look at it real quick I just want to just mention this because you know it's got to kind of be built in into the theme itself okay yeah so some themes will have what are called custom fields and a lot of times if they have it this will be enabled by default because it could be kind of dumb if it wasn't, you'd never know they were there, okay, so accustomed field is something that you can insert, you can go in and say, let me add some kind of field, you can enter some value or some data, and a lot of times what we'll do is we'll just pull it into your page or put it somewhere, do something. Okay, so there's, um, this adds extra functionality to the to the page, into the theme itself. But right now, we don't really have the thing. I actually have one from the customizer pulled in, but we don't need to deal with that. So I just wanted to point that out that something is kind of interesting, too.