7: Adding A Link To Text Or An Image

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

Mod 2 - Links

Running Time:  5:29

What if you need to add a link to text or an image on your site?

Two different tools are used to accomplish this task.

Transcript Of This Video

Let’s have a look at how to create links in WordPress. I’m not talking about the navigation or the menu. We’ve done that already. I want to do the links, like if I want to click on an image or I want to click on some text, how do I go about doing that? Let’s start with the image. Now, we don’t click on images anymore, and this certainly doesn’t look like an image you would click on, but let’s use that as our example. I’ve selected it, and you could see it’s highlighted with these little dots and right over here since I’m in the image block it has “Link settings.” For that, I’m just going to open that up, and it says “Linked to,” and these are different link options. The only one I’m interested in is “Custom URL” because I’m going to go to another page. It’s pretty simple. All you have to do is type in the word. Let’s say I was going to go to the home page, so I’m just going to type in “Home.” Now if I wanted to go to another website, I would paste in the entire URL there. Also, “Open in another tab,” I definitely want to do that.

I’m going to click on that, and let’s have a look. If I clicked on that it takes me to the home page, perfect. All right. What about text links?

Before I get to the text links, if I want to remove this link, and I do– Again I’m going to select this, scroll down to “Link settings” and take this out over here, and of course “Update.” That’s how to work with an image used as a link. Like I said, it’s not used all that often anymore. What about text links? Those certainly are used. I’m going to slip in right over here, a paragraph block, and I’m just going to type in the words “Go home.” Maybe I was a bad boy, “Go home.” I’m just going to highlight the words “Go home” and then in my tool bar over here I see there is a tool for “Link,” and I click on that and out pops this little window over here. I’m just going to type in the word “Home.” So I am going to go to my home page, and you can see WordPress looks for what they think are the matches, and “Home” is the match. Now I have to click on this to make it active, so I do. I can also change the URL over here. I’m not going to do that, and I can– No, I don’t want to open this in a new tab, definitely not. You can see it’s underlined over here, and you can’t click on this. It’s in the editor. You have to look at it in the page itself.

So, I just updated, and I’m going to go “View page,” make sure that we’re good. We’re good. I’m not even going to click on it. We’re good. What happens if I wanted to remove that link? For that we go over here, I want to select it like I just did. Now the “Link” tool turns into an “Unlink” tool. Just click on that, and it’s gone. All right, now I want to get rid of the whole thing because it was just for demonstration, and to do that I remove the block and we’re gone. OK, I’m just going to update. What about a link to an external site? For that, I’m going to use the “Plant” page. I’m going to add some more copy, and I’m just going to do this, “Edit” and I’m going to paste in a block right above here, I’m going to paste in a paragraph block. So, let’s do that. Paste that in, OK. I want to highlight the words “Center Ridge Nursery.” I’m going to do that.

OK, perfect. Now before I go ahead and click on this link tool, let’s get the link. It just so happens I want to link to a page that they use on Facebook. Copy that, and now I’m going to click on the “Link” tool, and it looks familiar. But this time I’m just going to Command-V, and I’m going to paste in the link itself. Of course, I could have typed it in, but it’s long, so I’m not going to do that. Make sure to apply it, and that should do it. Of course, look at the “De-link” tool here, I could de-link it like this or if I change my mind I could– I just undid that, so now it is a link. Update. OK, now we have a link to the Facebook page. Perfect. With that, we’ve seen how to link to an external site, how to link to just your own site with text in both cases, and then how to use an image to link to your own site, or you could have just linked to an external site with an image as well.

All 6 Modules In This Course

5: Adding A Drop Down Menu

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

Mod 2 - Links

Running Time:  4:27

Creating a drop down (aka sub-menu) is the way to group related pages. Watch the way I do something that’s really useful and a little different.

Just a word to the wise. Try to keep you’re site’s menu to as few links as possible. What’s the most important content your users MUST have easy access to?

Transcript Of This Video

I need to have some more fun. Now, I’m going to show you how to do a drop down. In this case, the way I have this drop down working is I’ve got three pages that I’ve already created, and the word “Gallery” here, that is not a page. That’s what I call a “Label.” So, how do I do all this? Again, we’re looking at the prototype site. If I look at the site that we’re working on, here it is. We have the three different links here. OK. That is, each one of these represents a page, “WP Standard” and the “Lightbox” and the “Videos.” But I want to organize this correctly into a drop down, so I’m going to go into– Now, this time I’m going to go straight into menus. Let’s not waste clicks. All right, this is the menu that we’re working with, and we’ll see we have those three links here. Let me get them in the order first that I want them to go into, so I’m just going to drag this into place. I don’t want that, OK. You notice it says “Sub item” over here, so that would be a drop down. This would be a drop down, but I don’t want that. I want to have “WP Standard” first. Sometimes this can be a little weird to work with, and you’re seeing me prove it to you. You’re going to go up to “Lightbox–” No.

Let’s get it this way. OK, now I’ve got my three right over here, so this would not be a drop down of any kind. OK, how do I get the drop down to work? How do I get that “Label” thing going? Ther e’s a little trick that I discovered. It wasn’t anything that I read somewhere, and it was just one day I stumbled on it.

Go over here to “Custom links,” and I’m going to just–

Right over here it says “HTTP://” just put something in. Let’s don’t put something in. I’ll show you what the problem is. Let’s just put the link text as “Gallery.”

Now, I’m going to then “Add to menu.” I can’t do it. The reason why is I get this little warning here and WordPress wants me to put in something, OK, a link. I’m going to trick it. This is the thing that I discovered quite by accident, and I’m just going to put in a hashtag over there. Now when I do “Add–” OK, so now it did. The wheel spun, and it did get added, and it’s not a page it’s a custom link, and I’m just going to move it right up into here. OK, and I am going to move this over here. So all I’m doing is just dragging and dropping, and now you can see in each case these three pages are sub items. These are drop downs off of “Gallery.” The way I have it set up, currently, it’s a link, and I don’t want that. Let me show you what I’m talking about, so let’s save the changes that I made and let’s go look at the website. Now see, my mouse pointer turns into a hand, and if I click on “Gallery” it’s going to do nothing. That’s not a good experience for the user, so we are going to have to make a change here. All these are pages, OK, so here’s what I mean. “Lightbox,” fine. All right, back to “Menu,” we go to make a slight adjustment, but a very important one. I’m going to go over here to “Gallery,” click on the chevron and take all of this out. Now before I do, could you create a URL here to a link to another website or a link to your website, or–? Yes, absolutely. But remember I said I didn’t want the word “Gallery” to be clickable. I just wanted to use it as a label, so I have to take all that out.

Now there’s nothing to save other than save. If I jump out to the front end of the site, now you’ll see it is no longer clickable, the word “Gallery,” which is perfect. That is exactly what I want. So now I have a drop down menu, and it’s of a certain kind, in that the word “Gallery” is just a label and not a link itself.

All 6 Modules In This Course

4: Establishing The Front Page And The Blog Page

Course Progress

Mod 2 - Links

Running Time:  5:29

WordPress gives you a choice to configure your site with one of these three options:

  1. A blog only site
    Just a collection of your posts (a/k/a articles).
  2. A static pages only site
    he opposite of the above, i.e. a site with no blog.
  3. A hybrid site
    A site that has a blog and static pages like the In My Garden site. This is probably the most common configuration.

    Everything you need to set this up is in Settings > Reading.

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

Transcript Of This Video

It’s time to set up the home page and the blog page. This is important. By that, this is exactly what I’m talking about. Here’s the prototype site, and when I click on “Home,” it does exactly what you think it’s going to do, and that is take you to the home page. If I click on “Blog,” this will take me to the blog. How do I do that? Let’s go to the site we’re working on. Let’s see what we have now. This is the home page. Yes, I know it says “Home” here, and if I click on it it does look like the home page, but here’s how I know that I’m right. If I click on the words “In My Garden,” this is the blog. Look at the URL, and it’s “InMyGarden.dev” and that would be the typical home page. It would be “MyWebsite.com” or something like that, and that would be an indication that’s your home page. So this is an indication that this is my home page. How do I get this all straightened out? Let’s go into the dashboard, and there’s a couple of ways you can do this.

I’m going to show you what I think is the easiest way to do it. I’m going to go over to “Settings” OK, and right over here it says “Reading.” Here’s what’s kind of strange about this. You say “Reading? Reading settings? What do they mean by that?” It’s how do you want people to read your site, think of it that way, and that might help. Maybe it won’t. Anyway, this is the default. The way it is now is your posts are the front page or the home page. By the way, WordPress uses “Home page” and “Front page” interchangeably, so keep that in mind. I don’t want it that way. If you want your blog to be the home page, you don’t have to do anything in WordPress. You’re all ready to go. But a lot of websites don’t work that way, and this is what they do. They go over to take this option and then they set what is the front page and what is going to be the post page. So, I’m going to choose my home page as “Home,” and I’m going to select my post page as “Blog.” All right, so these are very important. The key thing is that I set this up in advance. That is, I didn’t come here first, I set up these pages “Home” and “Blog” earlier. Now I’m going to leave all these other settings alone because we’ll get more into that when we talk about blogging.

So, let’s leave that alone and let’s save the change and let’s go over here. Now when I go to the home page, that’s what I want, that’s what I expected. If I click on the “Blog” that’s the blog. So, “Hello world” is there. To get things organized the way I did, you’re going to need to go– Let me go back here again and go to “Settings,” “Reading.” Set everything up in this area over here. Suppose you did not want a blog, all you have to do is take this out and take out– Let’s go to “Select,” OK. Watch this. I’m going to go over here, and when I go over here the word “Blog” is still going to be here, but what you would do is remove the page. Or you should also take it out of your menu. OK, so that would be fine. You could absolutely have a website that is a standard website without a blog. You could also have a website like I have here, let’s go back to what I did, I call this a hybrid site where I have both a regular website and a blog.

Let’s go back here. I think this is probably the more common way WordPress websites are set up, that is they have a blog, and they have a regular site. This is it over here. Then if I wanted nothing but a blog I could have that too, so I could have either one of those three configurations. Just a blog, just a regular website, or a hybrid site that has regular static pages and a blog. That’s totally up to you. The key takeaway right now is the word “Blog,” that is not what made this the blog. I only use the word “Blog” here, so it’s readily identifiable to students that this is the blog. But if it was a real website, let’s say it was “Gardening tips,” and I was blogging about that. Maybe I would have that up here as “Gardening tips.” All right, the key again is that this does not make it a blog. What makes that setting work is just by going into here, “Settings” and “Reading” and then doing your configurations. You could always change this later on. Let’s say you don’t want a blog, or you want to add a blog, here’s where you would go to set all of that up.

All 6 Modules In This Course

3: Setting Up Your Menu

Course Progress

Mod 2 - Links

Running Time:  6:08

Setting your menu – your site’s navigation – is one of the most important and fun things you do with WP.

Different themes have different locations on the page where the menu appears. This theme – TwentySeventeen – has 2 different locations. I’ve seen premium themes have up to 4 different locations where you can place your menu.

After you’ve saved and set up your menu you’ll want to go to Appearance > Menu to add the page. If you ever remove a page from the site you’ll also need to go to the Meny section to remove the item.

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

Transcript Of This Video

We’ve come to one of the cooler things that WordPress can do, and that is to setup your site’s menu. Or if you prefer, your site’s navigation. That’s where we’re going to have these links that will go, in this case, all the way across here. For this theme, the navigation runs horizontal across the top. Different themes will set your navigation interface in different places. Again, if I look at the prototype, this is what I’m talking about. This is the navigation that we’re now going to add to this.

So, into here we go. Now because menus are so important, you can jump right down to “Menus.” I’m not going to do it that way, because you may not find it again. So let’s go into “Dashboard” and let’s go into “Appearance.” Because it does deal with the appearance of your site, you’ll find it under the “Appearance” section, “Menus.”

All right, first thing you need to do in setting up your menu is to give it a name, because websites can have different menus. This one happens to say “Starter” at the top. I don’t know exactly why it’s there, so I’m just going to give it a different name. I don’t always know everything, or maybe I did something before and didn’t take it out, but let’s do that. I’m just going to call it “Main menu.” We can do that. All right, it seems to pop up over here. “Main menu” is fine. Key thing is to give it a name that makes some sense. Now, “Create menu” or “Start menu.” There we go. So I clicked on that, and I saved the menu. OK, now I’m going to go over here where it says “Pages” over here, and I’m going to select the pages that I want to have in my menu.

Let’s do this like this. I’m just going to select all of them, so we can see “Video” “Lightbox” all these that I’ve already created, “Blog” “Content” “Harvest” all that stuff. OK, and then the all important “Add menu.” So each one of these blocks that you see, these little rectangular shapes, each one of these rectangular boxes can be dragged and dropped into position, and that will create the menu.

So, I’m just going to hold this with my mouse and drag it right over here. “Home” would be at the top. The next one was the “Plant” page, so let’s drag it up over here. OK. This is fun. Like I said, it’s one of the cooler things you can do. I’m also going to take the “Prep” and drag that into place. Sometimes it’s a little weird working with the drag and drop, so there is an alternative way of getting things into position. You can click on the chevron over here, and if you notice over here says, “Move up one.”

OK, so I’m going to– Or I’m just going to click on– Yeah, I can move it all the way to– Let’s do that. Let’s move it to the top, and you’ll see what happens. Now “Harvest” is at the top. That’s OK. Let’s just close this little chevron, but I don’t want “Harvest” to be the first link I wanted to be after “Prep,” so I’m just going to move it down this way. That is a way to move these things around besides dragging and dropping, which you might want to do if have a long list. Then I have “Videos” “Lightbox” “WP Standard” “Blog”, OK. I’m going to keep all of them just the way they are, you can pretty much tell you could always change the order, but what I have to do over here is all important. Make sure you save this, OK? Now it’s saved. Then before you jump out to take a look, don’t do that quite yet, go over here to the “Manage locations” tab. This particular theme allows me to set the menu in two different locations. Now I’m not too sure about the social links menu, but I am very certain about the top menu, so I am going to– It already put it in there for me, “Main menu.” I’m just in this case just checking, and if I had come to this page and it very well could have said “Select a menu,” I’d have to do just that. OK, so make sure I have “Main menu” in here. You get the feeling with that drop down that you could have other menus, and yes you can. You only have one menu that I’ve created so far, and that’s the main menu. I’m going to save what I did, and now I can take a look. What do you know? Here are all of my links in the order that I set in the menu on the previous page. If I click on “Plant,” you can see the plant page, Or if I click on “Prep–” I didn’t put that in the right order, did I? Let me get that straightened out. “Harvest” is OK. These over here, now these should be drop downs. These three over here, we will get to that. Then I have the blog, and I have “Contact” so let me go right into over here, and let me go to the menus. “Appearance,” “Menus,” and let’s fix that. “Plant” shouldn’t be there, let’s drag this back into position– Or, into position what I want. Now let’s click “Save,” and we’ll be OK. Now it’s in the right order, OK. “Prep” “Plant,” etc. Again I’m not worried about these three links here, the “Videos” “Lightbox” and “WP Standard” because that will be dealt with in a subsequent video when I talk about creating a drop down menu.

All 6 Modules In This Course

2: Adding More Pages

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

Mod 2 - Links

Running Time:  3:07

Before I create my site’s navigation (menu) I need to create and publish additional pages. Even if these new pages are empty of content that’s ok for now.

Transcript Of This Video

I’m back on my prototype site, and I’m going to start making my menu, but before I do that I need to add some pages. Let’s see what we have here. We know we have the home page, “Prep,” “Plant,” “Harvest.” “Galleries” is a nice little dropdown of three different pages. That’s good. “Blog,” let’s click onto that for a second here. I call this blog page the “Home of the blog,” and I’ll certainly get into how this is all set up when I get into the module on blogging. The other one I’m going to do too is the contact form– That is, I’m going to set up the page for the contact form.

OK, perfect. Back I am on the site that I’m developing, and even though I’ve made pages before like the home page, the “Prep” and “Plant” and “Harvest,” they’re not showing up in my navigation. They won’t show up in navigation until the next video when I get into doing that. But for now I need to add some more pages, so let’s see. I’m going to add– Let’s go over here to “Pages,” and you have to be careful not to add a post but to add a page. I’m going to add two, and I’ll show you why in a second. I’m going to add the contact page, and it’s just going to be a blank. I do this, and I like doing this a lot of times, just making blank pages. It will help me understand the navigation of the site, especially if it’s a small site. I’m now going to click on “Publish,” that’s fine. Then I’m going to do one other right now. Let’s go over here, and let’s go to “Blog.”

I’m just going to type in “Blog,” and this will be where the blog is going to be located. I’m going to publish that, and that’s fine. Now let’s have a look at everything I’ve done so far with “All pages.” You see “Blog” and so forth, and there’s a couple over here that I did before I did this recording that I put in “Draft” status. Like Lightbox, and WP Standard and Videos. I want to move them now to be published, and the way I’m going to do that is click over here on the word “Draft.” I am going to select all, and use the bulk actions and– No, I’m not going to move them to trash. I’m going to “Edit.” OK. I like doing this because it just saves a lot of time.

So, you see the three over here? If you wanted to change your mind you would click one of these over here, but no– I want all of these to be moved to the “Published” status, so here we go. “Published” and now they’ll all be published. Perfect. If I want to check over here– Yep. I don’t have any of those little draft notifications anymore. Now if I go to my site, is everything going to be the way I expect? Yeah. It’s the way I expect, but maybe not the way you expect. Because you probably thought maybe we’d have all these links over here. No, that’s coming up real soon.

All 6 Modules In This Course

1: Permalinks

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

Mod 2 - Links

Running Time:  3:48

When you set up your site one of the first things you’ll want to do is set up your Permalinks. That way your site will have meaningful text within all of your web addresses. This will be good for your users and it will help the master we all serve – Google – understand what your site is about.

My video shows you how permalinks work in a WP site.

But a word of caution. Changing the link structure of your site can have dramatic consequences as noted in “A Simple Guide to Changing Your Permalinks Without Breaking Your WordPress Website”.

Transcript Of This Video

As we get into links, which is what this module is all about, I want to start off with a very important topic, and that’s permalinks. It’s something that people sometimes neglect or overlook or get confused about, and it’s not really that difficult, so let’s get it out of the way. One of the things I always check when I set up a WordPress site for the first time are the permalinks. Sometimes, not always, but you want to make sure about this when you’re first starting to create your site you’ll notice these URLs that are really funky. That is, they don’t really tell you anything. They give you the domain name and then a bunch of code, and at the very end it will say “Page_id=” and in this case, “43.” What that is telling you is that every time you create a page or a post, in this case, this is a page, WordPress will create a unique number assigned to that page post. That’s one of the ways which WordPress works its magic. The bottom line is that’s not a very useful or pretty permalink, or link, or URL or web address, or however you want to call it. We need to fix that, and there’s also SEO implications involved here. So if you want your pages to rank high in the search engine result pages, like Google, that would not be very helpful to Google or to your users for that matter. It’s pretty easy to adjust, and what I did was I just went into the “Admin” and under “Settings” there’s a little section called “Permalinks.”

You can do this at any time while you’re developing your site, but it’s really best to do it in the very beginning for lots of reasons. It may be that when you install WordPress by default, you’ll get the plain permalink, and that’s what we were seeing over here. That is, it doesn’t really tell you a lot of information. In fact, it just gives you page ID information. Not very good. Here are some other options too, if you want the day and time to be in the URL of your pages or post you could use this, and these other options here which I don’t really find very useful. Here’s what I find the most useful. I always click on “Post name,” and you do notice down here this area was populated with some information. Now because of the uniqueness of the way I have set up my WordPress site, and by “Uniqueness” I mean I am not using a web host, I am creating by this site I my own computer. I don’t want it to say “/index.PHP/” all I want it to say in my URL– I’m just going to get rid of this. Now, in most cases, if you’re using a web host, you will never even see that index.PHP business. What you would see is something like this, “/%postname%/” This is going to represent the post or page name that I have assigned to the page, so I’m just going to go and leave it just like this.

I’m going to save my change and now if I go back to the “Harvest” page and I refresh this, now you’ll see that the title of the page “Harvest” is in my URL. If I had a longer title, like “Harvesting in the Spring,” it would say “harvesting_in_the_spring.” It’s a much more user-friendly URL. So best practice, right away when you set up your website, go over to “Settings” and then “Permalinks” and make this adjustment so that you have a custom URL just the way I have it over here and you’ll be good.

All 6 Modules In This Course