Resources

Learning to Learn

We love WP because it does so much of the time consuming work for us. The M in CMS saves us a tremendous amount of work. Before you can really take advantage of WordPress, you need to get a handle on the basics. This lesson aims to do that. You might find this lesson helpful and you might not. WordPress has a lot of extremely dedicated fans and businesses working to spread the gospel of WP to the masses. This means that you have a lot of

The WordPress Codex  codex.wordpress.org

No open source technology is worth anything without an active user community and WordPress has one of the most active, enthusiastic, and most important understandable user bases out there. You can access easy to understand pages on every single aspect of WP on the codex. Go to codex.wordpress.org and check it out.

Search the support forums at wordpress.org/support to find answers to problems or concerns you’re having. If you’re having trouble with something, odds are it’s been asked before.

Easy WP Guide   easywpguide.com

This is a stunningly in-depth, yet simple up to date guide on how to use WordPress. You can download the entire guide in PDF format, or check out the guide on your browser.

WP Beginner Videos   video.wpbeginner.com

The name says it all. While not a reference like the others, WP Beginner is full of helpful articles, and you should definitely follow them. Of particular interest is their video section. Create an account, grab some popcorn, and watch their stellar series of videos walking you through all the WP basics.

Before You Do Anything Else, Set Your Permalinks

Easy WP, Codex

Permalinks are the URL name for your page or post. For instance, the permalink for the Super Secret Page is “super-secret-page”. The permalink for this lesson is “lesson-5″. In other words, the permalink is the thing after the last slash in your browser’s address bar.

Since this is web design, we want everything to be nice and logical, so we need to change the permalink settings for WordPress to something more logical than the default. You can always change the permalink name, but this shouldn’t be done often.


There under “Settings” You can see “Permalinks” I think you know what to do next. Press it.
By default, for some reason, WP automatically gives the id of the post or page as the permalink. The post id is the truly unique bit of data that WordPress uses to pull your posts and pages from the mySQL database. Don’t worry about what that means right now. Just select “Post name” and save changes.

Pages

Easy WP, Codex
Pages are “static” things on our website. When we say “static” we mean that “not often changing”. Pages are where you put information that you don’t plan on updating very often. This includes pages like “Contact” and “About Us”.

You can nest pages within one another to create “sub-pages” and give them a logical hierarchy. For example, here on class.giip.org there is a page called “Classes”. Go to it if you like. The address is class.giip.org/classes. It will take you to the homepage, because I set the homepage to be the page “Classes”. Anyway, Classes has a few sub-pages, “Tech Essentials”, “Web Design”, and “Adobe Lab”. Each of those pages in turn have their own sub-pages (aka “child pages”), “Lesson 1″, “Lesson 2″ et al.

Organizing your pages like this gives your site a logical hierarchy. The organization is very reminiscent of what we learned about file paths. Take a look at the address bar for the page your reading now. Or if you’re too lazy, look at this picture:

wp-urlbar-1
Look familiar?

Each level represents a parent page rather than a directory, but the flow works the same. Organizing pages in this way provides you with cleaner permalinks. You’ll recall from like 20 lines ago, that permalinks are the name of a page or post as it appears in your address bar. It’s the final thing in the bar. In the case of this pages, it’s lesson-4. Now this site has at least 3 pages called “Lesson 4″, so how can there be 3 permalinks called “lesson-4″ if every permalink must be unique? They are unique! Because we nested them under parent pages, they can have the same name. It might not seem like a big deal now, but if you want to have your site make sense to the people that curate it after you build it, then you had better introduce logical hierarchies.

Managing Your Pages

To manage your pages, go to your menu bar over on the left side of your Dashboard and mouse over “Pages” and select “All Pages”. Once there, do yourself a favor and hit “Screen Options” up in top right corner, and set it to show 100 pages. If you end up with a lot of pages, you will thank yourself for this. And for properly arranging your pages into parents and children.

Here you see all your pages. If you want to change some information about the page, then choose “Quick Edit”.
quick-edit
This isn’t particularly useful for single pages, but you can select multiple pages, select edit under “Bulk Actions” at the top of the page, and make a change to all of them at once. Situations where you might do that include, disabling commnents, changing the parent, or unpublishing.

Using the Menu

Easy WP, Codex
The menu displays your pages. By default, WP will automatically add any top-level page you publish to the menu bar. This might sound like a time saver but it’s extremely bad from a design perspective. You don’t want every new page you write to pop up onto your navbar. Sometimes, you don’t even want people to know about a page, like in the case of the Super Secret Page. We’re super-awesome web developers so we crave control.

On your menu bar go to Appearance>Menus and you’ll get something like this:

menus-screen

We want to have our own custom menu, because that’s what cool kids do. Go right on ahead and enter a name for your menu. I suggest “Main Menu” because my favorite ice cream is vanilla.

Graphene Theme supports three menu locations. One in the main menu area, one in a small band underneath the main menu, and one in the footer. Select “Main Menu” to show up in the “Header Menu”.
theme-menu
If you refresh your public website, you’ll notice your menu is gone. That’s because you need to manually add the menu items onto it. On that widget on the left you’ll see one called “Pages”, check the boxes of the pages you want and click “Add to Menu”.

page-widget
When you do this, the pages will all come over as top level pages, i.e. they will show up in the menu bar. To put children under their parents, thus creating a drop sub-menu effect, simply drag them over to the right a little bit.
menu-order
By “sub-down menu” we mean where you mouse over “Web Design” in the menu bar, and it makes a little miniature menu containing all the lessons (its child pages).

This handy Graphical User Interface (GUI) lets you change the order and nesting of your menu items. Simply drag and drop.

Widgets

Easy WP, Codex
Widgets are like little blocks that you put into the sidebar or footer of your site. There is a suite of default widgets, and you can add more by installing plugins (more on them later). Most widgets are fairly self explanatory. It’s a good idea to play around with widgets to see what they do. Put them in the different areas as well to see where those are.

Backgrounds

The default background of Graphene is kinda ugly. So let’s change it. Go to Appearance>Background in the dashboard menu. You have a few different options for what to do.

Background Color

You can chose any hexadecimal color to set as your background color. The process for that is fairly straight forward. Just select the color and save changes. This is one way to go, but from a design standpoint, it’s kinda ugly. Solid colors don’t make for good backgrounds. They’re really bland. What we want is a texture.

Background Textures

Textures are really just small pictures that are repeated across the screen. First you need to find a texture image. We like the site subtlepatterns.com. As the name suggests, this site contains lots of very subtle patterns and textures to use as a background. Check out the site and look for one that you like and download it. You’ll get a zip file with a couple different size images of that pattern.

Over in the background screen, simply upload the texture image. Save the changes and take a look at your website. Looks better doesn’t it?

Posts

Posts are the heart of blogging. They show up on the front page of your blog in reverse chronological order (most recent first). Posts are for putting out content on a regular or semi-regular basis. Blogs are a great way to get out updates about your organization.

Creating a post is very similar to creating a page. You can either use the “+ New” up in the toolbar, or create a new post from your dashboard menu bar.

Taxonomy

That’s the fancy word we use for “organizing posts”. We organize our blog posts broadly with “Categories” and more specifically with “Tags”.

Categories

Easy WP

These are the very broad, over-arching topics that a post might fall into. Let’s say that you have a blog about pets. The typical format of a blog is to have your 5 or so most recent articles show up when you visit the site homepage. You write articles about all sorts of pets and you need a way to organize these posts. After all, you don’t want a visitor to have to click the “Older Posts” link over and over again to find what they’re looking for. So naturally, we would think to arrange your posts into broad topics. We write about pets, so why not arrange it by type of pet. You make a category for “Dogs”, a category for “Cats”, a category for “Birds”, etc. Now when someone comes to your site, they’ll see all the categories to choose from and can easily find what they’re looking for.

Adding Categories to a Post

Tags

Easy WP

Anyone who’s used Twitter or Instagram is no doubt familiar with tags. They are little keywords that people use to identify topics within a post. Let’s say we make a post on our pet blog about a litter of Dachsund puppies with lots of pictures. It would naturally be under the category, “Dogs” but you would further categorize the post with tags like “Cute”, “Dachsund”, and “Puppies”.

Excellent article from WPBeginner.com Categories vs Tags – SEO Best Practices for Sorting your Content