Step 4: Widgets, Blogroll and Permalinks


If you’re new to building a website, you may have never heard the terms Widgets, Blogroll and Permalinks. If you follow the lessons on this site, you’ll soon be slipping them into casual conversation like a pro.

Right out of the box, your website has several items already filled in for you, and you’ll want to change them. Your sidebar has several widgets installed, there is an “About” page and a “Hello World” post already in place, and your blogroll is filled with links to various sites that the people at WordPress happen to like. In this lesson we’ll change the sidebar widgets and remove those blogroll links. We’ll also give your posts and pages a prettier link that search engines like better than the long ugly ones that come standard with WordPress.

Changing Your Sidebar Widgets

Go to the Widgets link under the Appearance tab on your Dashboard. It will take you to a screen that looks like the image below. On the right-hand side is a list of places where widgets can go, and you’ll also see the list of widgets that come standard with the theme.

Widgets Screen

Widgets Screen

Move widgets you don’t want by dragging and dropping them from the right-hand column into the central area. To add new widgets to your sidebar, choose them from the central area and drag them into the right-hand area. You can also move them up and down, so they appear in the order you want them.

If you want a photo or a bit of text to show up on the sidebar of every page and post of your website, you can use a text widget, which will accept HTML tags.

Play with the widgets, save any changes, and go check out your site and see if you like your changes. If not, play with them some more. Since the default template has many different places where you can add widgets, go ahead and play with all of them and see what happens. Don’t worry – you can’t break anything.

Blogroll Links

If you put the Links widget into your sidebar, you know that it’s already populated with a bunch of links to WordPress-related sites. You’ll want to erase those links, and add links to sites you actually like and that offer something to your readers. For instance, artists might want to link to other artists, or to art supply stores, or the galleries that show their work.

Some websites don’t really need a blogroll. For instance, most small businesses won’t want to link out to their competitors, although they might link to a site that gives more detail and specifications for products the shop sells. Whether you use the Links widget or not is up to you.

To get rid of the links that are in there now, go to the Links tab in the left sidebar, and click on Links.

Edit Blogroll Links

Edit Blogroll Links

Check all the links that are in there, and then find Delete in the Bulk Actions dropdown box. Delete all the current links. You can then add new links using the Add New screen. You can always come back to this later, after the rest of your website has been built.

Permalinks

If you don’t change the standard way that WordPress names your page URLs, they’ll have lots of numbers and symbols that don’t look nice, and it’s been rumored that search engines don’t like them. You can easily change the URL that points to your individual posts and pages by clicking on Permalinks under the Settings tab.

Changing Your Permalinks

Changing Your Permalinks

Read the bit at the top of the Permalink screen for a better explanation of why changing them is a good thing to do. Then click on the Custom Structure radio button. There are two different tags that I like to use, depending on what type of website I’m building:

  • /%category%/%postname%

This tag will look like this when your posts are published: www.yourdomain.com/categoryname/postname

If you have a website that will have many posts, and you can reasonably divide the subject matter of the posts into categories, this tag will work well. This is the permalink tag I use on my paper mache site. The link to a recent post showcasing readers’ projects has the following URL:

http://ultimatepapermache.com/paper-mache-artwork/photos-from-readers

In this URL, Paper Mache Artwork was the category I selected when I published the post, and Photos From Readers is the title of the article, (also known as the post slug, but we won’t go into that right now).

  • /%postname%

This tag makes a nice permalink on sites, like this one, where all of the posts are related to the same subject. You can look at the top of this page to see how the URL looks. This happens to be a “page,” and not a post, but posts on this site would look exactly the same in the browser’s address bar. For small sites, this is the most elegant choice, and it gives the shortest URLs, which is nice when you copy and paste them into an email or show off your new post in the comment section of another blog or forum.

Choose the permalink structure that you think would work best with your site, and then test it. You can look at the Hello World post that came with the WordPress installation to see if your change worked. If it didn’t, go back and check to make sure you used the right spelling and symbols.

You only want to set your permalink structure when you first build your website. After your site is indexed by Google and people are linking to various fascinating posts on your site, you don’t want to confuse things by changing the URLs on the fly. So choose one now, and then leave it alone.

Next, we’ll talk about a few Settings you’ll want to change, then we’ll install some plugins to improve the functionality of your site and add a Site Map for both readers and the search engines. We’re really, really close to the moment when you write your first page and post.

Facebooktwittergoogle_plusredditmail

{ 18 comments }

kay April 27, 2011 at 7:13 pm

I’m a newbie and Thank you for a great tutorial, its really helping me along. But I’ve run into a snag.
I’ve put the contact form 7 on my pages and that was easy, but how do I delete that additional comment box that Wordpress has on there already?

Thanks!

Jonni April 27, 2011 at 9:52 pm

Hi Kay. It looks like they changed a few things with the latest version. (Just when you get things all figured out, they decide to move them around. sigh…)

When you create a new post or edit an old one, there’s a small grey screen at the very top of your page that says “Screen Options.”

Click on that box and you’ll get an expanded box that includes all sorts of things. The one that matters is the “Discussions” check box.

When that option is checked, your Add Post page will then allow you to turn off discussions, which removes the comment box. You’ll need to scroll down the page to see it. Just uncheck the boxes in the Discussion area, and the comment box will disappear on that post or page.

kay April 28, 2011 at 10:55 am

Thanks! for the help, Jonni,
I’m using Wordpress 3.1.2 version with Absolum theme and Discussion isn’t listed in the screen options box. What you explained and have shown is so easy to do and then they lay this on me! (smile) I know you’re busy and all, so I guess I’ll go back and experiment until that comment box is gone.

Jonni April 28, 2011 at 11:58 am

Well dang – I thought we had it all figured out. It works on my sites (version 3.1.1). The easy option at this point is to post a question on your theme’s website. The developers of Wordpress themes are usually very happy to help out.

kay April 28, 2011 at 1:17 pm

I appreciate your help and time!
Thanks! Jonni

Carean Kaso February 4, 2014 at 7:51 am

Hi Jonni,
I’m a confused about how to rename my permalink(s). I intend to post under just one area of my little art website: “How-I-Did-It Tutorials,” Would then my tag look like this: /%howididittutorials% Or should it contain the hyphens? And would my domain name automatically be added in front, or do I need to add it?

Thanks so much–I am happy to report that I’m making good progress building the site, thanks in great part to your encouragement!
Carean

Jonni February 4, 2014 at 1:16 pm

Hi Carean,

I recommend using /%postname% for your permalinks. This will make your URLs include the title of your post. Or you can alter the URL when you’re writing your post, like I did for this particular page. The title of this page is “Step 4: Widgets, Blogroll and Permalinks” but that would be too long in the URL. So I changed it to sidebar-widgets, and that makes the total URL http://buildwebsiteeasyonline.com/sidebar-widgets

You edit the permalink of the post or page you’re working on right under the title of your post:

Jonni February 4, 2014 at 1:19 pm

Also, if you might want to name the category for your tutorials “How I Did It Tutorials” so that will show up in the link to the tutorial area on your menu bar. If everything else you write is done as a page, rather than a post, all of the pages will be on the menu bar, and you can add the category without having to link to every tutorial. I hope that makes sense. It’s easy to do, but not always so easy to explain with words…

Carean Kaso February 9, 2014 at 8:59 am

Hi Jonni,
Okay, I changed the permalink. I also entered “How I Did It Tutorials” under “Portfolio Categories” (Portfolio is the name of my WP theme). If this is NOT what you meant, please let me know–I don’t yet understand the “why” behind some of this and am going on faith, here!

Thanks so much!

Jonni February 9, 2014 at 2:33 pm

Hi Carean. I’m not familiar with the Portfolio theme, so I’m not sure how it’s used. I find my categories under the Posts link on the left-hand side of the dashboard, and you can also choose a category for each post as you write it. With your theme, I’m not sure if that’s how it works or not. Can you select a particular Portfolio Category when you’re building your menus? That’s done under the Appearance tab, and it determines what shows up on the menu bar under the header graphic.

It would be easier to help if I could see your website, and how it looks now.

Carean Kaso February 15, 2014 at 7:33 am

Hi Jonni,
Not sure I understand your question…I have just one menu with the items Home, About, Press, etc. I have learned how to change these menu items, also how to load photos and add text, so right now I am occupied with making that look as good as I can. What I can’t yet do is…a lot of the technical stuff. So I would indeed love it if you’d look at it just to see if it basically works. I think will need to index it first, though, right?

Thanks,
Carean

Jonni February 15, 2014 at 11:19 am

No, just put the URL in a comment. Or email it to me, if you don’t want it to be public yet.

Carean Kaso February 20, 2014 at 6:44 am

Hi Jonni,
I’ve listed the URL above so you can look at it when you’ve time. I’ve decided on just one blog right now, for updates on my work. So I made “My Blog” a menu item. I added My Blog as a category under Posts–is this what you mean? And then do I change the permalink to %myblog% ? Also, on my home page, I have a static portfolio of art thumbnails that when clicked on, take you to other similar examples. Do I need to enter them as categories too? I want to keep it really simple, so I think I’m close to launching it & reaching out to other artists, which is very exciting, so thank you so much for your help (and abundant patience!).
Carean

Jonni February 21, 2014 at 7:39 am

Your site looks really nice Carean. But don’t change the permalink structure – it seems to be working just fine exactly the way it is. And it looks like the Portfolio section is also working exactly the way it’s supposed to, so don’t change anything there, either.

I don’t want to complicate things too much, but there are two options for your blog:

1. On many themes you have a choice of which page you’ll use as the “front page” of your site, which is now set for your portfolio page, which is perfect. There is probably also an option to set the front page of your blog, which would be found under the Theme Options panel. You would create a new page called “blog” and that page will automatically show up on your upper menu. Then you would make blog posts, as usual, and excerpts from the posts will show up listed on your blog’s main page, and people would see them when they clicked on the blog link in the menu.

2. The easier way to do it, if you only want to make one blog post or if setting a blog main page isn’t an option in your theme is to just write your post (or edit the one you have started) and then when it’s published grab the web address and add it to the menu (under Appearance, Menu). That may be what you’ve already done, or perhaps the post that’s showing called the-artists-struggle is a page, rather than a post, which makes it show up automatically.

The categories are really just something that’s useful when you have a lot of different posts about different things, to make it easier for visitors to find what they’re looking for. You won’t have many posts, so assigning all the posts to the “my blog” category would be fine. You could then just add the “Latest Posts” widget to your sidebar, and a link to your latest posts would show up there — or do what I mentioned in the #1 option above and have the blog link in your upper menu bar.

I hope this isn’t too confusing – there are a few options, but it isn’t as complicated as I’ve made it sound. Just one comment though – you’ll probably want to remove the ‘meta’ widget from your sidebar, or move it to the bottom of the sidebar. It’s the least important thing on the sidebar, and it isn’t very useful. You might want to add a social media plugin (I’ve been using the Social Media Feather plugin lately, which works really nicely, but the graphics might not fit your site).

I hope you’ve been having fun with this project – I think it’s been well worth the effort. Your site looks very professional, and that’s important for the galleries and other businesses that will, hopefully, be taking a look. Congratulations!

And if you have more questions, feel free to ask.

Carean Kaso February 23, 2014 at 6:08 am

Thanks, Jonni,
Regarding setting my blog page…it set automatically, I think. When I created my menu items they showed up on the “Pages” list. So I think I’m good there. The Portfolio theme does a lot automatically like creating same-size thumbnails for the photo gallery, and setting simple permalinks and pages. I made the other changes you suggested, and figured out some others besides–yes, this IS fun!

You were right, Jonni–one can do this with no experience (with a bit of help, of course). And I was initially very intimidated. Now I’m going to build my dad a Portfolio site of his own.

Much appreciated!
Carean

Jonni February 28, 2014 at 2:47 pm

Hi Carean. Your home page just disappeared. Did you do that on purpose?

Carean Kaso March 5, 2014 at 7:40 am

Hi Jonni,
If you have a minute…this has had me baffled for three days: I have two Home pages on my menu, and I can’t get rid of the second one. I named the one I can control “Home Page” (“Page” of course being unnecessary)just to distinguish it from it from “Home,” which I want gone. I can’t seem to edit it, delete it–anything.

I’m sorry to keep bugging you! I promise (myself, you) that if I can fix this thing, get it basically up and running, I’m not going to try anything else novel. I’m no web designer, and I really just want to get back in the studio!
Thanks,
Carean

Jonni March 5, 2014 at 11:15 am

Carean, when you open the theme customize link, did you specify the Home Page page for your static home page? Or do you have latest posts chosen? In the image below, it shows that for my test site a page I named “home” is my selected static page, and a different page is selected for my blog. Is this how your “customize” option box looks?

Comments on this entry are closed.