8: A Quick Look At The Media Library

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

Mod 1 - Getting Styartedf

Running Time:  5:08

The Media Library is where your images and videos are stored. Once an image or video has been uploaded, you can always use it on as many pages and posts as you’d like,

You can also store and use other docs that you can link to for your site. Example? If you like to have users open or download a pdf file you can upload and store it in the Media Library.

Note: It’s a bad idea to upload very heavy files to be used for your site. File sizes that exceed 100KB are not a good idea especially for those using slow WIFI networks.

Transcript Of This Video

While you’re probably not going to spend a lot of time in the media library, I thought I’d give you a quick tour to help you orient your way through it. I just clicked on the media library to get to this page, which lists all the different media files I’ve uploaded to this point. There are only two– Actually, three that I’ve uploaded. These two pictures over here, and I also uploaded a video over here which is represented by this icon. You can use the media library this way, and there’s another view over here.

This is what they call the “List view.” If I click over here, I get the “Grid view,” which I don’t find very useful but a lot of people like it for some reason. Of course, again, I only have these three images. Or actually, two images and one video. If I had lots more, they would all be taken up in rows and columns. Anyway, back to the list view, which I much prefer. I think it’s more useful because it gives you some more information.

As you can see, it tells you the file and that I uploaded it– Who the author is, meaning who uploaded it. Where it’s being used, so if I clicked on “Detach,” that would mean it would take it out of the page in which it was used, so I don’t want to click that. Of course, the date that it was uploaded, so that’s fine. What I want to do now is click into one of these images to explore this a little more in detail. Right over here on the right-hand side, there’s some really important information.

“File URL,” so if you ever needed to know the exact URL of the image file or video, you would come over here, and you would do a copy/paste. You copy it here, then paste it into your page. This is important if you’re going to be using any HTML code. If you’re not, it doesn’t mean much to you, but a lot of people do use HTML so I thought I’d show it. Another thing to note is it’s got this edit capability, and as I’ve mentioned before, this is not Photoshop. Not even close.

You’ve got a couple options over here, and I’m not even going to click on these, that change the rotation and orientation of the image itself. If you uploaded it and it was upside down and backwards, or whatever, you’d go over here and adjust it that way. Then if we go over here, there’s some options here to change the size of the image, and I would not scale up the image. If anything, scale it down because you’re going to get some probably pretty unexpected results. So, don’t do that.

You could also do some image cropping, but I generally do all the cropping outside of WordPress. One thing to note too, the term “Thumbnail” is used a lot in WordPress, and it’s misleading and unfortunate. Generally, “Thumbnail” refers to “Image,” So be careful. Sometimes it does refer to a small image, but generally, it means just “Image.” So, watch out for that one.

What I want to do now is go back to the library and look at these three here, and explore some of these options over here because they could be very helpful. For example, let me select all these, and if I wanted to use– Let’s go over here. If I wanted to see which ones were not attached, which means that there might be an image that I’ve uploaded to my library that’s not used on any page or post, and I might want to delete that.

I would filter on that. Now, of course, the answer is they’re all being used. That’s not unexpected. All I want to do now is hit the back button, so I can get my three images back in there. I can also filter on things like– display all the images or display all the videos. That’s really what the purpose of all this is. I also can do this, show me the images that I uploaded in August or July, or whatever month that you’ve uploaded your images.

Always make sure to click on the word “Filter,” and that’s going to make the adjustments so that you’ll see whatever you’re filtering on. It’s a way of searching. Speaking of search, you can use this box over here to do a search. The other thing I want to show you is this thing called “Bulk actions,” and you’ll see this in much of the WP admin. “Bulk actions,” and you’ll go, “What is that?” At least, I always did.

In this case, I’ve selected, again, all three images. If I wish to, in this case, delete permanently– If I click “Apply” all three images, or that is the two images and the video, will be deleted. So, don’t do that. When you see the words “Delete permanently,” they are not kidding. This is not going to go into your trash, and you can take it out and use it again, this means “Gone, goodbye, no more.” So, don’t do that.

All 6 Modules In This Course

7: A Closer Look At The WP Editor

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

Mod 1 - Getting Styartedf

Running Time:  15:26

A lot of WP courses leave out some very important aspects of the WP Editor. Even though I’m just getting started I wanted to spend a little time going over a part of WordPress that you’ll need to get comfortable with.

Check out lots more ways to use the Gutenberg editor in my course, How To WordPress.

Transcript Of This Video

It’s time to take a closer look at the WP editor. In December of 2018, WordPress gave us, after 15 years of using what’s now called “The classic editor,” a brand new editing experience. People call it “The Gutenberg editor,” and of course that’s what I’m featuring in this course. I’m going to take a deeper dive, and we’ll look at some of the features of the editor, and then I’m going to add some more content to my “Plant” and “Harvest” pages. Specifically, I’m going to add this cover image that you see over here, so when I’m scrolling the image stays fixed to the background and text scrolls over it.

For the “Harvest” page I’m going to add in this table over here. Tables are used when you need to present tabular data in rows and columns. But like I said before I do that I want to take a closer look at the Gutenberg editor, things that we haven’t looked at so far. I want to go over here to this little guy over here, and it’s a little information logo. It tells you information about this page. How many words has been have been used? How many headings? One, so far. Paragraphs, blocks, and what’s called a tree or a document tree structure that is the major components of the site being the title, and there’s only one heading tag used so far.

This information is really useful when it comes to search engine optimization. Anyway, I’m going to then– We don’t need that, so I can click out of that or get rid of it. What I want to show you is the options that you see over here, now you see where it says document? You can see it’s underlined over here. Up to now, we’ve been looking at blocks. No block is selected, so if I clicked into any block, you could see that the block changes and so forth, but let’s focus on documents.

“Document” means all the things that are pertinent to this particular document, if you think of this web page as a document. Which is what it is. These are the features or options that you have under documents, so “Status and visibility,” we know we can change these if we want over here, as far as it being visible or private or password protected, we could set that over here. The date it was published, if we want to move it to trash, we could do that. I’m not going to get into this permalink business right now, and it’s setting the URL for this page or customizing it. I’ll get into that when I talk about links in the next module.

“Featured image,” I’m not going to spend any time on that either because I use featured images for blog posts and not for pages, but you can. You can see it’s available over here. As far as discussion, by default, it’s not checked. Meaning, “Do you want people to comment on your pages?” I don’t think so. If you have a contact page, or a home page, or an about page, or services page, that’s not the place where you want people to comment. You’d want them to comment on your blog post, not here. By default, it’s not selected, and I would leave it that way.

The other option here is page attributes. There aren’t any, and by that, I mean if this were a different theme, you would see this option called “Page templates.” Many themes have more than one template, but this one only has one template, so there’s no options to drop down. But if you had other page templates, it would do things like control the layout of a page. For example, it might give you the option to do a full-width layout or maybe have two sidebars, or whatever. It just depends on the theme itself. Here there’s only one template, so there’s nothing to drop down. I’ll take care of that.

As we add plugins, we’ll also see that there will be other options here that will control, or set, or influence, or affect the document in totality. I’m not going to do that until we install a plugin or two. One thing you might like to do is do distraction-free editing, so for that, you can click on this little guy right over here, and the right sidebar has disappeared. You could also go over here to this ellipse and go over here to full-screen mode, and you’ll see “Wow, they’re not kidding.” The left and right sidebars are gone. You might like this.

It doesn’t do much for me, so I don’t bother, but you need to know it’s there. I’m going to go back here, and I’m going to go back here, so any combination of full screen or right sidebar or left sidebar, you can definitely get rid of those. You might recall that in an earlier video I toggled this. But if I de-select, what will happen? Every time I put my cursor in a block, a toolbar shows up at the top of the block, and I find that distracting. Let me go back to what I prefer, and that’s to put the toolbar at the top of the page.

So, that’s fine. One other option, let me go over here into “Documents,” is if I click over here– By default, you’ll be using the visual editor, that is when you insert your blocks. If you like to work with HTML, here you go. I do like to work in HTML, but that’s me. You don’t have to, obviously. So I will go back and use the visual editor. There we go. I’m going to skip through these, the only other one that I found interesting is over here.

If you don’t want, for example, the discussion option to show up in the document, de-select it over here, and it’s gone. Or you don’t want to show– You can see them on the right-hand side, they’re disappearing as I click through these. So that’s what the options section will do, like a “Preferences” for the document. I’m just going to do that, and that’s a pretty quick overview.

Now one last thing, after you publish something, if you want to unpublish it and put it back into draft status you can do it. In fact, it’s even telling you “Switch to draft.” If I click that, “Are you sure you want to do it?” I’m pretty sure. So now it’ll go back to being saved as a draft, and one way I know, that is you see it. It says “Publish” over here, so I know right off the bat this is a draft.

It says “Draft,” and there’s even another way I can tell if I go over here I will see that “Prep” now has the word “Draft” next to it. I could go click on “Prep” and publish it again, but here’s another thing I could do. Where it says “Quick edit,” it gives you some options here. I’m not going to get into this right now, changing the title and the slug and the publishing date, and things like that. Not gonna do that right here, but I am going to go right over here to “Status,” and it says “Draft.” I want to publish it, so I click on that. And voila, it’s been published.

Now I want to add the additional content to the “Prep” and the– I’m sorry, to the “Plant” and the “Harvest” page. I’m gonna go over here to the “Plant” page, and we’re gonna do that cover image, and I’m going to add it down below here somewhere. What I’m trying to get an inserter to work, and it doesn’t seem like I’m getting anything to work, so I want to select and make sure I have the column block. You see, the column block is just a block that holds two other blocks, and that’s what I want. I want to insert my content below the column block, so now I should be good.

Now, “Insert after.” Aha– That’s exactly where I wanted it. I didn’t want it to be inside this paragraph area, I wanted the block to be after the column block, and now I got it. We don’t need that anymore, so let’s get rid of that. I could search around for “Cover,” and it’s right over here, so we’ll do that cover. I’m going to take an image over here. Here we go. Drag her in over here, and this would be my wife. OK, perfect. Now I’m going to write a title, or just a little bit a text over– Here we go, “Write a title.” Now we got it. “Arlene at work.”

She’s looking. I could bold, italic– You get the idea for this text over here. So, let’s see if this is going to work the way I want. I click outside, and it’s not working. That is, the image isn’t staying in place, and it’s scrolling. Let’s see how to get this to work. I start scrolling, and I don’t see this working the way I want, so I have to go over here in the cover block and click on this over here. Now the background will stay fixed, and when I scroll, that’s what I want.

I can also change the opacity of the covers. You could do that. We can do this too, and we have some options here if you want to use them, that’s fine. I’ll leave it just like that. This is not the right color, but there isn’t a text option here, unfortunately, so I’ll use a slightly different opacity. There we go. Now that is done, I could update the page, but I’m not ready. Because I want to put the cover image on top of this column block. How do I do that? Drag and drop, as of now. This editor is new as of the moment.

If I drag it up here, let’s see if this will work. I can tell over here with this line it’s not going to go in the right place. I want it to go above the column block, and it doesn’t seem like it’s working. Let me show you what I mean by “Not working.” I click on this, and that’s not what I had in mind. I could do that, but that’s not what I want. I’m going to do the “Undo” process over here, and we do have this ability to take– to click on this little– See where it says move up? What do you know, I can click that, and I just clicked it once, and it moved into place.

So, that’s good. Now I’m ready to publish, or I should say update because it’s already been published. We’ll have a look, let’s go to have a look. We could do it this way, and perfect. When I scroll, you can see that the image stays in place. This is called a parallax effect when the image stays in place, and the text scrolls over it. That’s fine. Now, let’s do that “Harvest” table. I’m going to make my life a little easier, and I’m just going to copy this and keep it right there.

Let’s go to the “Harvest” page. Here we go, “Edit.” Now, what happens if you had to start a table from scratch? It’s easy to cheat and copy and paste and all that, but let’s say you started it from scratch. There is a block for that. I’m going to insert the block below this video, and if I click on “Video” let’s see what happens. No, I don’t want to play it. I want to do this, and I want to insert. There doesn’t seem to be any place to do– Here we go. It just took a second or two for it to all show up.

I’m going to click on that, and because I used “Table” recently, it’s right there. To create a table, it gets you started with two columns. I’m going to make it go to three columns, and we’ll leave– Let’s make it three columns too for the rows. If I want to give it a heading, that is that first column or the first row, have some more significance like a heading of the table, let’s say. All right, that’s fine. I’m going to then just put in some dummy content.

You may notice I’m just tabbing, or, in this case, I’m just putting my cursor in the cell like I’m doing this right over here. It’s pretty faint. It’s kind of hard to see all this, but it will automatically scale or resize based on the volume of the content that’s inside these cells. You don’t have to even worry about any of that kind of thing. Now, over here in the table block, I have an option to make this table a fixed width or to have it scale. I prefer to leave it like this, don’t toggle it, don’t have it fixed. That way, the table will size properly whether the user is on a desktop computer, or using a mobile device, or whatever.

It’s responsive, so leave it the way it is, I wouldn’t go changing that. I could also– Not advance, but I could also do some styling. Not too much in the way of styling here, but you can see I just changed the style. If I wanted to, for example, bold all of this I’m just selecting the words “Bold” and “Bold” again. So that’s how you start a table. Now, I don’t have a table to start, and I have one that’s already made. Since this table is not what I want, I’m just going to delete the table block.

So, “Remove,” and I’m going to paste in my table. I don’t even have to look for the inserter to be a table, and it’ll just recognize– That is, the editor will recognize that I’ve just pasted in a table. Again, if I wanted to change the styling of this to something a little different, I could do that. I’m going to leave it like this, and now I’m going to update what I have. I should have done one other thing before I updated. I’m going to move my table above the video.

Let’s see if I can drag and drop it. I couldn’t do it last– I just clicked on it, and there we go. So that’s fine. Now, again, because I made a change, I’m going to update. We’ll have a look. Perfect, so there you go. We had a deeper dive into the Gutenberg editor and then we added content to the “Plant” and “Harvest” pages.

All 6 Modules In This Course

6: Adding Different Video Types

Course Progress

Mod 1 - Getting Styartedf

Running Time:  8:37

In My Garden features two very different video types. In the plant page I insert a video which is an .mp4 file that is uploaded and stored in the Media Library. (Poor Arlene. She’s doing all the backbreaking work).

The second method is demoed on the harvest page. I take some special code from YouTube and just paste it into the WP Editor.

Which method you use will depend on your needs and what your web host (server) will allow. I prefer using an outside service (like YouTube or Vimeo – which I use for this course) to serve up my videos.

Get Access To Over 50 Free Videos  So You Can Learn WordPress

Transcript Of This Video

I’m on my prototype site, and in this video, I’m going to show you the two ways that you can add videos to your site. This page here, the “Plant” page, we’re not going to do the whole thing. We’re just going to scroll down to here, and we’re going to see we have a 2-column layout right here that is text on one side and a video on the left side. I’m just going to grab this text right over here and copy this. OK, now let’s go to the site that I’m building.

Here’s the site that I’m building. Here’s a list of the pages that I have so far, and I noticed two of them I don’t want. I want to delete them. One is just this blank that’s just nothing, and the other is the sample page that comes with every WordPress installation by default. I’m going to get rid of those too just by clicking the checkboxes, and right over here it says “Bulk actions.” I’m going to click “Move to trash,” and then I’m going to click “Apply.” What’s going to happen is that both of these are now going to be in the trash bin.

How do I know? If I click “Trash” over here, you can see that they are. The way WordPress works is when you delete something, it goes into a trashcan, just like your computer works, and then you can go into the trash can and either restore them or delete them permanently. I’m going to delete them permanently, so I’m a select both and then bulk actions again, and I’m going to remove them.

I tend to do this kind of thing especially if I know I’m not going to need something again, because if you just accumulate a lot of empty pages or pages that you don’t need, you want to trash those because you’re just bloating your database up with a whole bunch of stuff that you don’t need. The database is where everything that you create for your site, that is all the text content and links, all the instructions and the settings, it all gets stored somewhere, and it gets stored in a database. There’s no need to make that larger than it needs to be.

OK, so let’s get to adding a page. The page I want to add is going to be the “Plant” page. For this, I’m going to use a different kind of block. I’m going to click on the inserter, and this block is something called– In the layouts, there’s a block called “Columns.” If I happen to know columns, I would have just typed in “Columns” over here, and that would have been fine. What it does is, this block contains two blocks. This first block to the left, I’m just going to Command-V, and I’m going to paste in my text. That’s fine.

This block over here is where I’m going to insert my video. Now, as I said, there’s two different ways of doing this. One is you can upload your video, so let’s do the first way first. I have a very short clip of my wife bending over and sowing seeds in the garden. I say “Short” and “Small” because it’s less than one megabyte.

Let’s go find that file. It happens to be over here, and I’m just going to– I could do this. Look at that. I could drag it right in, and that is so nice. I just did it like that, and I was a little bit surprised because I didn’t know that had just changed to make it so much easier to do it now. So, it’s in there. I even have, as I did with images, the ability to put in a little caption. I’m not going to do that, but notice over here on the right-hand side since I am working with a video block, I have some controls that I might or might not want to use.

But pay attention to whatever block you’re working in, “What are the options I have?” Right over here if I went to my paragraph block, you can see I’ve got the typical paragraph options, and then if I click outside of both of these– Just right over here to the left, you’ll see that I have– Let’s go over here. It says I don’t have anything, that’s interesting. But I clicked just in the right spot to the left, and I have the column block. By the way, with the column block, you can insert up to six different columns, if you want, into your row. I think that’s too many, and two is just fine for me.

I’m going to go straight to publish this. Let’s have a look. That’s fine. It looks like this is small. There we go. Poor Arlene. Anyway, it’s small because it’s sized for the fact that you have three columns. You’ve got a column over here, a column here, and a column here. Whereas in my prototype site I really have these two, so that’s why it’s so much bigger. I will get to that issue, more about design and changing this when I get into themes. But right now we’ll leave it the way it is.

Now in this method, I uploaded my file to my media library, and to make sure I did, because you saw me drag and drop– I want to go right over to here, and I will show you in my media library. Let’s go over here. We now have three assets. We’ve got the media that I just uploaded, “Arlene working hard in the garden,” that’s what this is over here. That’s the movie, and then I have the two images that I uploaded earlier. So, that’s it. That’s how that works.

The second way, you don’t up upload anything. You’re going to embed an image using a video service like YouTube. I’m gonna go over here to “Pages,” and I’m going to add a page. In this case, this page is going to be “Harvest.” Now before I do this, let’s have a look at the prototype site. Let’s go over here to the “Harvest” page. I’m going to scroll down over here and here is my embedded video from YouTube, and you can tell it’s YouTube. It’s got some YouTube markings in here. Anyway, “How do you do this?”

Back to the site, I’m working on. Here is that video on YouTube, and there’s two ways you could do this. One I don’t recommend, it will make your life a little more complicated. The natural inclination might be to go over here to click on “Share” and to click on “Embed” and you get the code, and you paste it into the editor. I don’t recommend it. It’s just– You can, and it will work, trust me it does.

But a much simpler way is to highlight the URL, which I’m doing, and I’m copying the URL of the YouTube video, and I’m now going to paste it right over here. Now I’m going to paste it right into the block, and the block will transform itself into a YouTube video block. You can see right over here it’s YouTube, and it gives you a little option about resizing. I’m just going to leave it just the way it is. That’s the only options I get, and that’s fine. I’m going to now publish this.

By the way, you can do this not just with YouTube. You could do it with Vimeo or any video distribution service which allows for the embedding or the sharing of the video content from those platforms so that you can bring it into your site. Any of those are going to work in just the same way I did. Just copy and paste the URL of the video into your page. Now it can’t be too much simpler, and I don’t think.

I’m going to click on this over here, and you can see, perfect. It’s over here, and away we go. You can tell it’s a YouTube video, and there I am slaving away, working. Two different ways to get video into your site. One is by uploading an actual file that you created, or you can take a video from a video distribution service. To drive home that point, if I go back to my media library, you’ll see of course there’s no YouTube video in here. That YouTube video is on YouTube.

All 6 Modules In This Course

5: Adding A Second Page

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

Mod 1 - Getting Styartedf

Running Time:  7:19

I build the second page of my site which is a lot like the home page so this will be a bit of a review.

Towards the end I trash the Sample Page that comes with every new WP site. When you trash something you can always get it back from your trash just like you can when you trash a file on your computer.

Transcript Of This Video

Here I am on the site that I’m building, and this is the home page, the page that I created in the previous video. I’ve yet to add any of the links or the navigation for my site. What am I referring to? If we go over here to the site that’s finished, the prototype site, you can see I have all these links over here, and that’s what I’m talking about.

Right now all I’ve got is this page over here. It technically isn’t the home page, and the home page still is– Until I change some things around, right over here, a blog post. But I’m going to add another page, and the one I’m going to add is going to be a little similar. I’ll deviate a little bit, but it’s going to be similar to this. What I’m going to do is something a little bit different. I’m just going to copy all of my copy right from here, to show you that you could take a web page– Which I’m doing right now, and I’m going to copy this.

Normally I don’t do this, but I’m going to do it now because I want to make it a little bit different. I’m going to add a page, so I’m going to do this, and we’re going to call this page “Prep.” I’m going to paste it right in over here. Wow. Now, look at this. It looks like the image is in my page. It’s not. This is something that you have to be very careful of when you do what I just did. That’s the reason why I’m doing this.

This image is not in my media library. Let me prove to you what I’m talking about. This has been saved, that’s fine. If I go over to the media library, you’re just going to see one image so far, that image of me. So, what’s going on here? What I did was when I copied it from the other site, the prototype site, all I’m doing is referring to that site, and that site is providing this image. So if that site were to go down, or if I remove the image from that site, then this would disappear too.

It’s not a good practice to do what I just did. Text is fine, but not the image. So, I’m going to take the image out. I’ll put it back, but right now I’m going to take this image out because this image as it is right now totally relies on the existence of the prototype site. Not a good practice. So let’s take this out. OK, perfect.

All right, I’m going to add the image correctly. What I will do is, it goes in just about over here. Let’s just put it in over there. I’m going to look for my image block, just like this, and if I don’t want to drag it in here, I could do it by just going to “Upload an image,” and searching for it on my computer. You know what I’m talking about, no doubt you know how to navigate through your computer. Or I could also do this, I could go to my media library, and I could drag it into here. Which I will.

I’m going to go over here, go to images, go to the tiller, drag in the tiller. I could, right from here, I could add right here into alternative text description, “Alt text,” but I’m not going to do that. I don’t want to have a title, so I’ll take that title out. Now that’s going to be a title that’s going to be in the code of the page, so I don’t care too much about that. But here I would normally put in the word “Image of a tiller.” But I’m going to save some time and not do it.

OK, now this image is actually in my media library. Very important, but I don’t want it there, I want it aligned over to the right. So let’s do that. I want to also resize it, and you know how to do that. Just click on the image, and I’m going to resize it like this, and that’s a little bit better. Now I want to add a heading– Or more specifically, a subhead. Headings or subheads are very important to break up the content of your page and give your readers an understanding of what’s coming.

You know about headings and subheadings if you read newspapers, articles, anything. Here’s the inserter, and this time I am going to put in this. So that’s going to stay right over here, and I’m just gonna type in “Getting ready.” OK, now notice because this is a heading, these options here have changed. What this is saying is this is a “Heading 2.” If you know a little HTML, you know what this stands for. Do not use headings to make the size of the font smaller or bigger, that’s not what the purpose of the headings are.

The purpose of the heading is to let the users know that this is a subhead or sub-subhead, whatever. That’s what an H3 would be. Anyway, we’re just going to leave it at H2. By the way, the title which you don’t see, or you do see, but the little code for that is H1– Heading 1, the most important piece of content on the page, or so it is said. With that all done, let’s preview it. Rather, let’s publish it.

Publish that. That’s good, and we can have a look. OK, now you might say “I don’t like all this space in between. Why is there so much space over here?” That’s my theme. My theme is setting that distance over here, this margin over here, which all can be changed. In WordPress, as we say, it’s not, “Can you do something?” It’s, “How can you do something?” “Is there a plugin to do something like that?” Probably not. Would you have to do something with the code to do that? Absolutely, yes, it could be done that way.

That’s fine, the only thing I want to do is one other change I’d like to make. I’m just going to click “Edit” here, and it will take me to here. This time I want to make the text in the center, so here’s the options over here. A little bit confusing, because normally you’d think of it as being up over here, but no it’s down over here.

Again, I’m working with a header– Or a heading block, and I want to make the text in the center. Much better. Now I’m going to update. Remember, once you’ve published, then it’s just a matter of updating the page. Let’s have a look. Perfect, just what I expected. I have my text, my subhead over here, and the rest of my text with the image to the right. Onward.

All 6 Modules In This Course

4: Making Your First Page

Course Progress

Mod 1 - Getting Styartedf

Running Time:  15:29

Like any application, there usually is more than one way to do something. In building my first page that will be the home page you’ll see what I mean.

WordPress has 3 options when you create content. Save Draft, Preview and Publish (or Update) content. You’ll see that plus how to add and position an image in your page.

I also insert an image into the page and give you a very brief look at the Medial Library section.


Note: If you’re following along and trying this out make sure to use the stock theme, TwentySeventeen. You can learn more about themes, how and where to get TwentySeventeen in Module 3 – Themes.

Get Access To Over 50 Free Videos  So You Can Learn WordPress

Transcript Of This Video

Here I am on my prototype site, and I’m looking at the home page. Yes, it’s that terrible picture of me again, working in the garden. What I want to do is take that image and place some text around the right side of it, and make sure that this is going to be a quotation over here. That’s fine, maybe add a little bit of bolding, we’ll see. I want to make the first page. So, here I am on the site where I’m going to build the first page, which would be the home page.

There’s a couple of ways I can get to that page where you create the content, the editor. I could take the long way, and I’ll show you what I mean by “Long way” in a second. I clicked on the dashboard, and I went to “Pages,” I could go right over here to “Add new,” but I’m just gonna go over here to “All pages,” “Add new.” I’m deliberately showing that in WordPress when something’s important, there’s a couple of different paths to take and a couple of ways to get to what you want to– Where you want to be in order to create the content, in this case. That was the long way. Let me show you the short way.

The short way would have been either to click over here– The short way would have been to click over here. There we go, that’s fine. The first thing I’m prompted to do is to add a title, and I recommend that you always add a title. You could use a plugin to hide the title if you want to do that, and you would want to do that. For example, you wouldn’t want to have the word “Home” showing up on the page.

But when it comes to creating the content, always title the page in some meaningful way. “Home” is fine. What WordPress will do for you automagically is it will save this as a draft, in fact, it’s already done this for me, and it says “Saved” with a little checkmark next to it. To be sure, I’m now going to go over here to “All pages,” and we can see that “Home” is in draft status. Meaning that only I have access to this, it’s just a draft, and it’s not online. I can come back to it whenever I want, which is right now, to work on it.

I’m going to click either “Edit” or the actual link where it says “Home,” it’ll just take you to the same place. Let me start adding some content. I could just put in some words like “Content here,” but to watch me type all day– We don’t want to do that. It’s boring, and it’ll take forever, so what I want to do is copy and paste from a document into the editor. Now, when I hovered over this block, it gave me a set of tools that look a lot like a word processor. They’ll let me align the text to the left or center or right, and so forth.

I don’t want this toolbar over here. I want to get this a little bit out of the way. Now, this is my preference on working with this. I’m just going to go over here to the upper right-hand corner, way upper right, and do this toggle right over here. Now, this toolbar will be at the top, which I like. It’s much cleaner, and it’s out of the way, and that’s just the way I like to work with this. So, I said I wanted to paste all this content that I have into the editor.

The first thing I want to do is remove this block altogether. I could just put my cursor in at the end and go like this, and eventually get rid of it. But I could also do this. Go over here to this ellipse, vertical ellipse, and all the way down here “Remove block.” I’ve now deleted it, and that’s exactly where I want to be when I start adding my content.

I’m going to go over here, and I’m going to go over to “Copy.” I have a document right over here, and it’s already selected for me. How nice is that? I’m just gonna do “Copy,” and you’ll see what I’m going to do is I’m going to do Command-V, and every paragraph formed its own block automatically, which is nice. Now you can take any document, a Word doc, a Google doc, anything that’s text-based and you should be able to do just what I did. Hopefully, it’ll format real nicely, the way it did for me.

You could also copy and paste a spreadsheet into this. Anything that’s text-oriented or text-based copy and paste if that’s your preference, rather than just typing in longhand. If that’s the way you want to do it, that’s fine too. I’m going to take a look at this block right over here, and this is the first paragraph. If I go over here to where it says “Block,” you’ll see right over here it’s got this little paragraph icon. All blocks start out their life as paragraph, so that’s the default block in the editor. I’m going to go do a couple of things with this block. One thing I want to do is I can change the text size, so I can go to “Large.”

But it only changes it for the active block, so the first paragraph was the active block, and I don’t want it that large at all, so I’m going to go back to normal size. Another option I have is to change it by pixel sizes, so I could add pixels. I could do this. I’m going down. If you go negative, it would be small. If you go positive, you can see it gets bigger. I still don’t want that either, so I could click “Reset,” and that’s what I’m going to do.

I did that. Now, if I like drop caps– You might like drop caps, and there’s an easy way to do a drop cap. Of course, you’d only want to do that for the first paragraph. I don’t like drop caps, so I’ll get rid of that. Over here is an option to change the background color of this block, and I’m going to do that by just clicking on this over here. If I clicked on this over here, it would give me an option to choose any color I want, not these predefined colors.

I also want to choose a text color over here, and they give you a little warning sign– About some information here about it not being a sufficient contrast. I think it is sufficient contrast, so let’s see what we have. I’m going to go over here. You can see right now it’s updating. OK, good. Now that the updating has taken place– In other words, as you work and you’re still in draft mode it will save drafts for you, and it will update the draft. I want to take a look at this, so I’m going to click on “Preview.”

When you click on “Preview,” another tab is going to open up, and this is what I would expect. Previews, like we’re looking at here, are not on the internet, and they’re not published, they’re only available to me. I don’t have to worry about anybody seeing it, and it’s just for me as a preview. What I’m going to do now is I’m going to go back to the editor, and I don’t like this at all. That happens. You make a mistake, or you say, “No, this isn’t for me.”

So this is a very handy little tool right here, it’s the “Undo.” I’m going to click on this, and it should just step me right back in time to what I want, and that should do it. Now if I scroll down a bit, I see this over here is not a paragraph but a quotation, so I don’t want to leave it as a paragraph. If I go over here, I see the paragraph icon, and then it’s switched over to the little arrows going in two different directions. We call this the “Transform tool.” I’ll click on this, and you can see I could transform this paragraph block into a quote block, a heading block or a list block, and so on.

I am just going to click on the quote, and you can see visually it just changed. I also want to– Let’s take this block over here, select the entire block– Not both blocks, just this block over here. I’m going to do a better job of selecting here. I’m just going to select the whole thing over here, and then right over here I can bold this, and if I want, I could also center the text. Let me do that over here. It’s a little bit different than the prototype site, but that’s OK. That’s fine. I’m going to do one other preview real quick.

This is exactly what I expected. Finally, what I want to do is add the image. For that, if I hover over the spot where I want it to be, which is at the top of the page– Right over here I get this little inserter icon. By that I mean, you see where it says plus–? Right over there. It’s the same thing as this one over here. These are important in the editor because when I click on this what happens is all the available block options will show up.

There are blocks that are most used, and inline elements, and every one of these is different blocks. We’re going to look at some of these during this course, we’re certainly not going to do them all this video, but I want to go over to add an image so that you can see the block is a little bit different, obviously, than it was for a paragraph. To get the image, let’s see, I’m going to go to my media library. There is nothing in here because I haven’t put anything in my media library yet.

I’m going to close out of this, but I’m going to get that terrible image of me, and I’m going to go over to “Images.” Let’s get this out of the way, and we don’t need this now. For this, all I have to do is drag it right into there. Wow. So, that was cool. All I did was drag it into that area where the image block was, and it’s a little bit too big. Over here on the right where it says “Block,” now I’m working with an image.

Whenever you work with a particular block, you should know what kind of block you’re working in. If you don’t know, you can click into that block, and it says “OK, paragraph.” Or this one over here, “OK, quote.” It has some options over here, like “Style.” We’ll leave it this way, that’s fine. But I was working with an image, so back to the image I went, and I clicked on it. A couple of things to note. First, I’m prompted to give it an alternative text description. That’s what the “Alt text” is. It’s used for people who can’t see an image, but that alternative text is read out loud. It’s used for search engine optimization, and it’s used when people don’t want to or can’t download an image.

What you want to do is come up with some very descriptive text. Now, “Bud working” is not very descriptive here. It would have been, “A photo of Bud working in his garden.” Much more descriptive. You don’t have to do a storybook here, a couple of words or a phrase that will describe it will do the job. I’m going to scroll down now and take a look at the size, and this theme supports four different sizes. The size of the image will be determined partly by your theme.

But you might say, “I don’t want this size.” OK, well then you can change it by changing the width and height over here, you could do that. Or if you want to make it much smaller, 50% or you probably get the whole point. I’d like to reset it. The reason why I’m resetting it is because I want to do it the fun way. Why work when you can have fun? I’m just going to grab the side over here, and you’ll notice that the image is being resized, and it’s being resized proportionally. Which is what I want, because if it didn’t do that, it would look kind of strange.

Anyway, I’m going to type in a caption– No, I won’t. But here’s where I would type it in, and you can see that you can bold or italicize it, or you could make a link to it. But I don’t want to do any of that, so that’s fine. But wait a minute, my prototype site has the image on the left and text wrapping around on the right-hand side. That’s what I want. So, I click on this again– And that’s very important. Always know which block you’re working in.

Right here at the top, here are the options I have to work with this. I am going to– There we go. I clicked on this little icon over here, and the text wrapped around on the right. If I go way over here, the text will wrap around on the left. If I don’t want any wrapping, but I want the image to be in the center, I could do that. I don’t want that, and I want this. This is fine.

Now I’m ready to go. I don’t want to preview it anymore, and I want to publish it. Now when you publish it, it will be online. I’m going to click on “Publish.” What will happen is you’re going to have to click twice, so you clicked once which I just did, and I’m about to click publish again to make it go online. Publish is a double click. But before I do that, I wanted to show you this. You have some visibility options. By default, this will be available to the public, but if you want to make it private, you would click over here. If you want to make it password protected, you could click over here and then set a password.

This would only be a password protection for this one page, not your entire site. I don’t want any of those. I like the public option over here, so I’m going to fold this up. I also have this option over here if I want to schedule this at a future date because you couldn’t schedule it for a past date. That would be fine with me, and now I’m all set to go. I don’t want any of the options, and I want the default.

So here’s my second click on publish, and it tells me what the URL is, and it also tells me I could click over here to view it, and I could click over here to view it. Let’s do that. Not bad, this is pretty much what I wanted. In fact, it’s exactly what I wanted. It’s different than the prototype site, but it’s close enough, and it gives you an idea how to add an image to your page with text content.

e

All 6 Modules In This Course

3: The WP Admin At 10,000′

Course Progress

Mod 1 - Getting Styartedf

Running Time: 7:16

I’ve always thought of the WP Admin as the back side of a WordPress site. It’s where you will build and manage your site. It’s the heart of WordPress. It’s like a web site that lets you make your web site.

As you’ll see, with any WP site you will need a user name and password to login. Once you’re in you’ll be able to manage your site – add or edit pages and posts, change a theme, add or remove a plugin. All that and more is what the WP Admin is for.

The web address to find where to login is easy to remember. in almost all cases it will be

http://example.com/wp-admin

that takes you to the login screen.

 

Get Access To Over 50 Free Videos  So You Can Learn WordPress

Transcript Of This Video

Here’s my prototype site that we just saw in the previous video, and I want to take a quick look here. Again I’ve got my pages and my blog “Posts,” and so forth. But “How did I get to this point? Where did I start from?” Is the question I’m looking for. Here’s where this site started from.

This site is using a theme called 2017, so it’s been out for a little while obviously. I like it because it’s a good teachable theme. It’s a free theme, and there are many free themes. I’ll certainly be getting into themes in the themes module. For this course, I’m going to use 2017. It’s got the starter content that all WordPress sites have to begin with.

The home page, interestingly, is actually where the blog is. It’s got the famous “Hello world” blog post. I also have a sample page right here, and so this content came with it. This text, and so forth. It came with WordPress when it was installed. Now, “How did it get here?” I’ll get into that when I talk about web hosting in another module, and installing a WordPress site.

But I was a little excited to get going, so I’m starting from the point that I already have a site online. I need to log in to see my WP admin, and so we can have that overview of how things work behind the scenes. I’m going to scroll down here, and this theme happens to have a login link right on the page. I don’t particularly like that kind of an idea. I will show you how to log into any WordPress site.

Basically, it’s the domain.something/WP-admin that will get you into this page right over here where you log in. Now I have a user name and password, I’ve already set that up. Like I said, I’m going to get to that when I show you about installing WordPress. If I click on that, it’ll take me to what everybody calls the WP admin.

It’s the back end of your site, and only I can see this. So here’s where I’m going to build my site, manage my site, set up my links, do styling. Everything is going to be done on this side of the site. I’m going to take you through some of this over here that’s important— Before I do, yes. You log into the dashboard, as you can see over here. I don’t spend a whole lot of time here because it’s not all that useful, at least in my opinion it isn’t.

You can see that I have one page, one post, one comment. It’s got some other information over here. If there’s anything teachable, it’s that you can drag and drop sections of this if you want. Some of the WordPress admin is drag and droppable like you just saw. Also, other parts of it are– You can fold things up if you find them to be a nuisance. I don’t want to spend a whole lot of time on this, but you just saw that you can drag and drop some of the interface.

Anyway, if I go over to “Posts–” Like I said, not all of these links over here are of equal importance, so I’m just going to hit the highlights here. If I go over to “Posts,” and then “All Posts,” it will take me to a list of all the posts on my site. There’s only one, that’s the standard WordPress installation. It comes with “Hello world.” If I click on “Edit,” it’ll take me to the page where I can edit this post.

I’m not going to do anything like that right now, but did you see I just hovered over it and a line went all the way around this block? It’s what they call a paragraph block, not surprisingly, as it says. But there’s no sense in getting any deeper into it right now than that because I’m going to be building pages and posts throughout the course.

I’m going to go over here to pages, speaking of which, and you’ll see the same idea. Only one page so far. If I had other pages, it would have a whole long list of them, but we only have this one. If you click on “Edit” it looks a lot like what we just saw with “Hello world,” except it’s just more content over here.

We’ve got the title, we’ve got some other kinds of content over here. Like I said, no more than that for now because that’s what this course is all about, is building all this. In terms of adding images and videos and stuff like that. If I skip down to over here, “Appearance,” I’m going to click over here to “Themes.”

The “Appearance” section of your admin deals with how your site looks, and one of the main factors of how the site looks will be the theme that you select. I have a whole module on themes, so it’s a pretty big subject. But as I said, I’m using the 2017 theme now. These other stock themes are just sitting off to the sideline, like 2015 and 2019. For every last couple of years, except for 2018, there is a theme. But we’re going to get into selecting themes and so forth.

Then there are other links here that deal with your menu and widgets and customization, again all dealing with the appearance of your site. I want to skip down to over here, “Plugins,” and we’ll see no plugins. Now plugins are like apps, you know when you buy a cell phone or a tablet, and you’ll say, “Is there an app for–?” Fill in the blank. Well, in WordPress– WordPress itself doesn’t do a whole lot. You have to add plugins to make it do what you want it to do.

It’s just like a cell phone. We don’t call them apps, we call them plugins, and the question will be, “Is there a plugin for that?” You’ll find when we do a whole section on plugins that there are about 50,000 plugins, and most of them are free that you can use for your site. Then the last thing over here is “Settings.” I’m not going to get too much into that except to show it to you this way, and that is settings are like preferences to an application, no matter what application you’re working with.

If you’re working with Photoshop, or Word, or whatever it is. There’s always application settings, but in WordPress, it’s just called “Settings.” Like I said, it’s like preferences. Of course, WordPress is an application, so of course, there would be settings. The last thing is if you want to see the site– Of course, we do.

I’m just going to click on that link over here, and it takes you back to the home page of the site. You can always tell if you’re logged in because you’re going to have this black bar at the top that tells you if you’re logged in. If you need to log out for whatever reason, you can always do this– There I am. Log out, and go back this way, and refresh. You’ll see that I’m now logged out.

All 6 Modules In This Course

2: A Tour Of The In My Garden Site

Course Progress

Mod 1 - Getting Styartedf

Running Time:  5:17

This is a look at the model (I also call it the prototype) site I use for this course. I’ll be building it over the next five modules.

I explain the important differences between WordPress’s main content types, pages and posts.

I also show you a few of the plugins I’ll be teaching you in Module 5 – Plugins.

Get Access To Over 50 Free Videos  So You Can Learn WordPress

Links In This Video

What I use as the model site I make during this course.

Transcript Of This Video

What you’re looking at is a WordPress website that I call In My Garden. It’s my prototype site, and it’s the model site that I’m going to use to build this particular site during this series. What I like about this website is it shows off all the core features– Or at least, a lot of the core features of what WordPress can do.

Right off the bat, I want to tell you that WordPress has two different kinds of content. What you’re looking at here, yeah it’s the home page. Yeah, I’ve got a terrible picture of myself in my garden. But there are two different kinds of content. This content is called static content– That is, pages like this. I have a number of them over here. “Prep” where I prepare the garden, and “Plant,” and the “Harvest” page.

These four, they’re always going to be on the site, they’re always going to be accessible to my users or my readers. If it was a different kind of website, let’s say for a small business, I’d want pages to be things like “Our Team,” and “Testimonials,” and “Contact Us.” Maybe about our services and products and things like that.

So, “Pages,” also known as static content is information you always want to be on your site. I’ll be building the pages in this module, in the first module, which is where we are now. I’m going to skip over “Gallery,” we’ll come back to that in a second. The second type of content is blog content.

Blog content is generally information that is of a more timely nature, and it has a shelf life. That is to say, and it’s not necessarily information you always want your users to have access to. It fades over time, and it is like a diary. It doesn’t have to be, but if you think about it that way, it gives you a better feeling for what a blog is.

The articles, also known as “Posts,” are published in a certain chronology with the newest one being listed at the top. If you go down to the second post, it’s a little older, and so forth. There’s four different posts here. What you’re seeing is just excerpts of the posts. I will get way more into blogging– All about blogging categories, tags, all the core concepts of blogging in module 4, which is on blogging.

I think blogging is great for anybody or any business, small business and even large businesses use blogging, to update their sites with fresh content all the time. It’s very good for SEO, search engine optimization. It’s good for everybody to keep your sites up to date. Blogging is great for that.

Then if I go back to the gallery, I have three different image galleries here, because I figure people want to see “How do I display images that I have?” Let’s say I have a lot of images, which you might have as a photographer or as a creative of some kind, or a freelancer or a business. It doesn’t matter.

Here we go. This is a lightbox effect. I’m using a plugin for that, and plugins are the subject that I will be getting into in the fifth module, which is all about plugins. With plugins you can do all kinds of things with WordPress, not just do image displays like you’re seeing now.

Here’s another one, for example. I use a different plugin for this one. You can see over here in these little thumbnails, it opens up, and you can play the video, which I’m not going to do. I will take care of plugins, or talk a lot about plugins when we get into the fifth module. Speaking of plugins, here’s another one.

I use a plugin for this page that allows me to add a contact form. There’s many ways to add contact forms, or a form like this, the one I’m going to show is Contact Form 7, but like I said there’s many different kinds of forms. One other thing too, in this first module I’m going to build out the site, but I’m not going to organize the pages into links like this. The way you see across– That’s something I’ll take up in the second module, which we’ll be dealing with building out your site and setting up your main navigation like you see over here.

In fact, in the second module, I’ll talk about links of all kinds, which is certainly the topic of “How do you organize this so that you have some meaningful navigation?” OK, on to the next video where I’m going to show you a WordPress site fresh out of the box.

All 6 Modules In This Course

1: WordPress Has Two Versions

Course Progress

Mod 1 - Getting Styartedf

Running Time:  3:01

One of the most confusing things about WordPress is that there are two versions. We’ve got the wordpress.com version and the self-hosted version (which many incorrectly) refer to as the “wordpress.org” version.

I clear up the differences and let you know that this course is geared for users of the full featured self-hosted version.

Get Access To Over 50 Free Videos  So You Can Learn WordPress

Links In This Video

Transcript Of This Video

Hello, my name is Bud Kraus. Before we begin with the WP A to Z series, let me clear up something that’s been the source of confusion to many people over the years. Yes, there are two versions of WordPress. They’re very similar, but their differences are really important. So, here we are at the WordPress.com site. What’s good about it is you just come here, open an account, and you can start creating your website for free. Let’s take a look at some of the plans they have. In fact, there are four different plans they have, and here they are now.

I like the free one the best, but it’s the most limited in terms of what you can do. All the way over here to the newly revised business plan, which costs about $300 dollars a year. I know you can do much better than that. By that I mean if you’ll use the second version, the self-hosted version, I think you’re going to get much happier results.

The big differences between WordPress.com and the self-hosted version of WordPress– I’ll get into that in detail in a second, but it’s that you can’t install any plugin or any theme for your site. Your choices for customization are restricted. But if you use the business plan, it looks like you can now install any theme or any plugin.

What’s a plugin? A plugin is what you use to extend what WordPress does by default. It’s a lot like what an app, which you’ll find on a cell phone or a tablet, and a theme is responsible for the look and feel of your website. I get into a lot of detail on plugins and themes in the modules that I have for those subjects in this course.

Let’s take a look at the second version, and that’s the WordPress.org version– As some people call it. I don’t really like that because it’s misleading. Because you can’t come to this website and make your website. No, you come to this website for information about WordPress. I call it “The mothership of WordPress,” in that it’s the authoritative source of all things WordPress and you can also come here to get software. What do I mean? If we go over here to themes, you’ll see that you can download and use any one of these themes, and there’s about 5,000 free themes here.

Yes, everything at WordPress.org is free. How good is that? As well as you can get plugins. They currently have only 50,000 free plugins to choose from. This is not the only place to get themes and plugins on the internet, for sure for WordPress, but it’s a really good place to start with.

Now, one of the things about this version of WordPress is that it does require that you have a web hosting account or web hosting service for your WordPress site. There are thousands of web hosting companies to choose from, and I’ll get into that in my sixth module, which is all about web hosting.

Test Yourself

All 6 Modules In This Course