Congratulations on installing WordPress, all on your own. No shortcuts! Now that you’ve got one of the most powerful and easiest website content management system set up, it’s time to get down.  Today, we’ll be dipping our feet into the wonders WordPress, familiarizing ourselves with the very basics.

Lesson Outcomes:

  • Understand why we use WordPress
  • Determine differences between pages and posts
  • Understand taxonomy and the difference between categories and tags
  • Manipulate the menu and widgets

We ♥ WordPress

Why? Well, writing code was fun but it would be incredibly time-consuming and difficult to design a whole website like that.

Maybe we should breakdown how WordPress does its thang.  Last week, everyone downloaded the same .zip file and extracted it in File Manager.  So, everyone’s files look the same (besides the database names and passwords in the wp-config file).  These files provide the structural organization of your website; that’s why you all logged in the same way and your backend (the place where you made your post) looked the same. WP is universal in the sense that everyone has the same structure.  Your WP site has the same files and structure as my website, and as the Everett Program’s website and as your classmate’s website and whoever else downloaded WP.

So why do we need a database? Everyone’s structure is the same but not our content. The database is where that specialized content is stored. WordPress makes it really easy on us because when we use the WP application, we can shift from coding all of our content to managing our content by pointing and clicking.  This is why we say WordPress is a powerful content management system (CMS).

I want to reiterate the Everett tech philosophy.  We aren’t trying to make you all expert coders; the ultimate goal of our technology labs are to demystify your fears of tech and teach you enough so you are comfortable enough to utilize ICT for social justice.

That being said, we like to teach WP because it’s easy to learn and it’s easy to teach.  This isn’t just for your benefit and mine.  When and if you decide to make a website for a non-profit, WordPress let’s us secure sustainability because you can easily teach your partner organization how to manage their website when you leave.  You can’t hold your partner’s hand forever so you gotta teach ’em how to do it on their own.

Learning to Learn

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 resources.

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 “wordpress-basics-part-1″. 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 labs.everettprogram.org there is a page called “Web Design”, which is our lab. The address is labs.everettprogram.org/classes/web-design. The “Web Design” page is a child (or sub) page nested under a parent page called “Classes”. Web Design also has its own sub-pages (which are our lessons) named “HTML”, “CSS”, and “HTML/CSS Part 2″.

Organizing your pages like this gives your site a logical hierarchy. Look at the URL below:

url
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 page, it’s “wordpress-basics-part-1″.

Now if we had named our lessons “lesson 1″, “lesson 2″, etc. this site could have at least 3 pages called “Lesson 1″, because we have several labs.  So how can there be 3 permalinks called “lesson-1″ if every permalink must be unique? They are unique! Because we nested them under parent pages (ex. Web Design, Tech Essentials), 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” for that specific page.
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. 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:

url

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”.

Once you create a new menu, the option to “Manage Locations” appears next to “Edit Menus”. The Twenty Twelve Theme supports two menu locations.  You have the option of putting your menu in the top primary menu area or a secondary menu in the left sidebar.

Instead of navigating to a new tab, you can also just check the boxes under Menu Settings under “Theme Locations”.  Check the “Top primary menu” box for the “Main Menu”.
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”.  For the purposes of playing around, just check off whichever pages you have.

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.

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

Creating Categories and Tags

To create a category, go to “Posts” in the side dashboard and select “Categories”.  Follow the steps to make a category.  You don’t necessarily need to fill out the “Slug” section, it’s basically what gets shown on the permalinks. And that gets done automatically if you leave it blank.  You also don’t need to write a description unless you really feel like it. Some themes will show the description if you put one, but not usually.

Creating a tag is very similar.  Instead of clicking “Categories” under “Posts”, just click “Tags”. Same process as creating categories, but I’d suggest just typing in your own tags when you assign the category on a post.

Assigning Categories and Tags

To assign categories and tags is quite simple.  Navigate to the post you want to categorize and tag up.  On the right-hand side, scroll down to “Categories” and “Tags”, if you’ve already made some categories or tags you can select them.  If you haven’t, that’s cool too.  You can just hit “+Add New Category” button. To add tags to your post, just type them in and make sure to separate with a comma.

catag

Homework Assignment

Part 1

Following the WordPress 5 minute install method, install a new WordPress instance on your web server. Install this new WordPress instance in a subdirectory called “wordpresslab”.

This will be the WordPress website you will do your homework on for WordPress Basics Part 1 and WordPress Basics Part 2. When visiting this WordPress website, it should be at the following URL: yourdomain/wordpresslab.

Note: Look at the Installing WordPress lesson for help. Also, make sure to rename the subdirectory/ folder before you run the install script (before step 3).

Part 2

Pages and Posts

We are going to create two new pages.

  • Title the first page: About Me. We are going to be putting static content in this page.In the body of the page:
  • Upload a image of something that relates to you (use the Add Media button).
  • **Put a few sentences about yourself.
  • Title the second page: Blog.
  • Do not put anything in the body of this page. We are going to be using this page as a container for other WordPress elements.

Create two new posts.

– Title one post the title of your SOCY 30 series project. I would have put “Youth Education Santa Ana”. Write a few sentences about your project in the post body.

– Title your second post one of your favorite hobbies. I would put “Hobby: Coding”. Write a few sentences about one of your hobbies.

Part 3

We are going to be creating a custom menu to display a navigation menu with our pages on our website.

Instruction on creating a custom menu are in the lesson. Make sure to select it as the Primary Menu.

  • Put the pages About Me and Blog in this menu. Do not put in Sample Page. Save the menu.

Part 4

If you visit your website now, you will see that your custom menu is being displayed on the left side, but it may not be providing us the correct functionality. We want the front/home page to be the About Me page, and we want the Blog page to display and contain our posts. Let’s do this.

  • In the main WordPress dashboard, under Appearance, go to Customize.
  • In the Static Front Page section choose Front Page Displays: A Static Page.
  • In the dropdown below Front Page, set it to About me.
  • In the dropdown below Posts Page, set it to Blog.
  • Make sure to hit Save & Publish.

Part 5

Taxonomy

In this part, you will be organizing your posts.

Create one category for your posts.

– The category should be called portfolio.

– Give both of your posts this category.

Give each of your posts two tags.

– I will not give you the exact tags to use for each post.

– Come up with them on your own. Make sure they are specific about the topic you are talking about in that particular post.

Part 6

Housekeeping

Below each of our pages is a comments section. For the purpose of this website, you will not need anyone commenting on your website. Let’s disable the comments on each page to cut down on spam you will get.

  • In the WordPress dashboard, go to Pages.
  • If you hover over a page name, a small menu under will appear. Choose “Quick edit”.
  • On the right side, uncheck “Allow Comments”.
  • Do this for each page on your website.

Submission

Email wordpress@labs.everettprogram.org your the web address of your new WordPress website yourdomain/wordpresslab.

Make sure everything displays properly.

– You should have a navigation menu on the left side of your website.

– The front page of your website is your “About Me” page.

– When visiting the blog page, all of your post should be displayed there.

– The correct tags should show at the bottom of your website.