You’ve all been using WordPress for a fairly good amount of time at this point. You’ve cracked it open to look at the gooey center within, and you’ve broken it down into its constituent parts. Now it’s time to revisit a concept that you learn about on day one, but is actually more complex and powerful than you had imagined.

This lesson is going to further flesh out what exactly a post is and how they can be used to create rich, big, and well organized sites.

Resources


What is a Post?

You most likely think of posts simply as articles or blog entries. They are the things you use to get words onto your blog. They are that, but the posts you’re thinking of are but one “Post Type“.

We’ll give the dry definitions of the basic post types, then run through examples of “Custom Post Types” and why they make WordPress so useful.

Standard Post Types

There are five standard post types that come out of the box in WordPress:

Post

These show up on your blog feed. By default, the front page of your WP site will display you posts in reverse chronological order (most recent first). Posts are arranged using  taxonomy, or tags and categories. Posts are non-hierarchical, i.e. they have no structure in relation to one another. They are all on the same “level”.

Page

Do not show up in your blog feed. Pages do not have taxonomy, but are rather arranged using a hierarchy, i.e. pages can be nested within one another in a “tree” like arrangement.

Revision

WordPress has a version control system in place. Every time you hit “Update” in the post editor, it saves a copy of the old version of a page or post so that if you need to go back to an earlier version, you can.

Navigation Menu

Custom menus are important for users being able to navigate your site. They’re also a helpful way of arranging lists of link. Custom menus are stored in the database as a post type.

Attachment

Attachments are basically anything uploaded through the media upload feature. This includes images and files. While not super important to what we’re talking about, let me relate a story on how I learned about this.

In my early days of making WordPress sites, I did a lot of reckless things that I probably shouldn’t have. For some reason I thought that my site would run faster if I purged all the old revisions of previous posts and pages from my database. So I sorted the posts table so that all the published, and therefor most recent, posts would be at the top. I then highlighted and deleted everything beneath that. Given what I just told you about navigation menus and attachments, you can guess why this might have been a stupid thing to do. This deleted my custom menus, including one containing all 33 CA public universities. It also deleted all the attachment posts, meaning that as far as WordPress was concerned, none  of my images that I had uploaded existed!

Post Types and Site Organization

Let’s focus on how posts and pages can be arranged to create a well ordered site.

Page Hierarchy

As you know, pages are for static content that is not time-sensitive. All the lessons on this website are pages. We keep track of them by ordering them in a hierarchy. On this site there is a page called “Classes”. Within Classes, there is a page called “WordPress”. Within WordPress, there is a page called “Custom Post Types”. There is even a child of that page called “Super Secret Page” which is password protected. Look in the source of this page to find password.

We use a plugin called “CMS Page Tree View” because…let’s face it, the native WP page manager isn’t well suited to quickly assessing your many pages. In the picture below, you can see how the 100+ pages of this website are neatly arranged into a hierarchy.

Pages_Tree_View_‹_Everett_Labs_—_WordPress_and_Edit_Page_‹_Everett_Labs_—_WordPress

This is straightforward and probably not news to you.

Post Taxonomy

Tags and categories allow us to define information about a post so that we can sort through them later on. You’ll see exactly what we mean by that in a later section, but for now, here’s what they are:

Categories

For broadly classifying posts. If you had a photography blog, you would probably make broad categories like “Landscapes, Portraits, Buildings, Animals”. Categories are hierarchal, meaning you can have sub-categories. For example, the “Landscapes” category could have the sub-categories of “Fields, Mountains, Volcanoes, and Tundra”.

It’s generally good practice think before hand about the kinds of posts you’re going to be publishing so that you can keep your categories to a manageable number.

Tags

Thanks to Twitter and Instagram, people are becoming more familiar with this concept, although the way people use them socially, is not necessarily the best practice for creating site organization.

Tags are a more freeform than categories and are not hierarchical.

How Are Taxonomies Used?

Categories and Tags show up as clickable links at the beginning or end of a post. When you click on a tag or category, it will take you to an archive page. An archive page is page that basically shows you every post that contains that cat or tag.

Organizing the EverettProgram.org

If you go to everettprogram.org and explore around then you’ll find that there’s actually quite a bit of content in there. We spent a lot of time figuring out how best to organize the things we wanted visitors to be able see. Easy site navigation is a good design practice and should always be in you mind when you’re designing a website.

Avada Theme

After much research, we purchased a theme calla Avada to be used on everettprogram.org and it’s subdomains. It’s an extremely extensive theme and offers a lot of routes towards organizing a site.

Avada’s Approach to Blogs

Avada has a somewhat different way of displaying your site’s blog. Under normal circumstances, if you wanted to have a blog page, you would create a blank page and then go to “Settings>Reading” and set that page to be your posts page. Avada sees this as limiting so they came up with a different method.

To create a blog/posts page you would create a page and then generate a “shortcode”. We haven’t gone over these in detail, but think of them as simple small snippets of code that have big consequences. Anyway, you generate a shortcode called “blog”, and put it in the page. You select which categories you want to show up, which style of blog you want, how many posts per page you wan, etc. You then place this shortcode in your page and when the page loads, you will see a blog feed. Here’s a visual example.

Screen Shot 2014-05-27 at 7.06.11 AM

Screen Shot 2014-05-27 at 7.06.24 AM

Screen Shot 2014-05-27 at 7.06.43 AM

Edit_Page_‹_Everett_Labs_—_WordPress

 


This is a blog created by a shortcode

Configuring Emails on Your Domain

Have you ever gotten a business card from someone and their email address was something like “theirname@theirorgwebsite.org”? How exactly do you get email that’s not “@gmail.com” or something like that? Beyond that, why bother? The

By |January 26th, 2015|Categories: WordPress Pt I|Tags: |Comments Off on Configuring Emails on Your Domain

That was a blog created by a shortcode

Why Do It This Way?

The traditional method of creating a blog via the settings menu is limiting. Creating blogs via shortcodes allows us to insert dynamic content wherever we want.

Blog Pages for Everett People

If you go to everettprogram.org/team, you’ll see the directors and staff, followed by pictures of many of the current fellows (we don’t have photos for everyone yet :-/ ). The top part with the staff and directors is part of the page, while the part below the fellows description is “dynamically generated“. It is essentially an archive page for all posts with the category “Current Fellows”.

Our_Team____Everett_Program

Why Do It This Way?

If all we want to do is display portraits of current fellows, then why not just add them into the page itself instead of dealing with all these fancy shortcodes? As usual, it’s because we want to separate data from rules. Each fellow has an individual post page. That page contains their picture, a bio, links to their public social media, and has room to expand in the future. Think of each post as a collection of data. By creating rules in the form of these blog shortcodes, we can decide how we want content to display.

Right now, the Everett People page only includes fellows portraits and names. What if we wanted to show an excerpt from their bios? Simple tweak to the shortcode. What if we wanted to change the whole look of how the fellows are displayed?  The shortcode allows us to display the blog previews in several different ways (grid, full width, image, and more). If we had just added the fellows as normal page content, then making these changes would be extremely time consuming.

How Else Does the Site Use Taxonomy?

  • The Everett Partners page is a blog of the category “Partners”
  • The Everett Alumni page is a blog of the category “Alumni”
  • The Everett in the News page (not yet public) is a blog of the category “Recognition

You might be wondering why we didn’t included Everett Projects in that list. That’s a very astute observation. We wouldn’t hand craft a page with 30+ individual projects on it so it must be a blog page right? Well, it’s close to that but each project is actually a custom post type called “Portfolio” and they are displayed with a shortcode called “Recent Works”. This will takes some explaining.

Custom Post Types

WordPress wouldn’t dream of limiting you to only using posts and pages. They built in a way to expand, and that way is custom post types. These basically allow you create something that’s like a page or like a post, but you want to serve a different function. Think back to last week with the WP Help Plugin. It allowed you to create help topics for your users. Those help topics are actually a custom post type. They are posts that are configured in a way that makes it so you have to be logged in to the backend of WordPress to view them. Let’s look at how we use custom post types on the Everett website.

FAQs

Avada has a custom post type called “FAQ” or “Frequently Asked Questions”. Lots of sites have this type of page and the Avada developers wanted to see if they could make an easier way of maintaining one. Instead of creating a normal page and writing in your FAQ items, you add each item as a post along with categories.

Edit_Post_‹_The_Everett_Program_—_WordPress_and_Edit_Page_‹_Everett_Labs_—_WordPress

You then create a page and select “FAQs” from the template menu and you get a page like this.

FAQ_-_The_Everett_Program

Portfolio

Avada is set up to be especially useful to artists, and business sites. They created a custom post type called “Portfolio Item”. Portfolio items have special single pages set up just to display them (see here, here, and here). They also three different taxonomies that are created specifically for this post type. We adapted them for our own purposes, but in their original context they relate to a product or art project. Imagine our site is for an artist and we are making a portfolio item post for a digital drawing we made with Photoshop and Illustrator of two Rhinos fighting on the edge of a volcano. We would use taxonomy like:

  • Category: Animals, Nature
  • Tags: Rhinos, Awesome, Fire!
  • Skills: Photoshop, Illustrator

See how it has a third taxonomy called skills? The developers felt like that was an important bit of information that was distinct from the general category and wanted people to be able to use it to categorize their work.

How We Use it on the Everett Site

We felt that this post type was perfect to showcase our student project, partly because we wanted something separate from the other blog posts and partly because the theme has some really nifty ways of showing off your projects. Note the sweet animated sorting tool on the Projects page. That was made using a shortcode. It sorts based on the project category. We also really like the single posts page for portfolio items.

Giving_Artisans_Information_Technology_Skills__GAITS__-

Those “Project Details” are portfolio taxonomies. The “Location” is the “Skills” taxonomy and the “Project Theme” is the Category taxonomy. They say something different here because in our child theme, we included the single portfolio template and changed where it said “Skills” and “Category” to what you see above. For more on how we did this, check out the Why Hack? Series on our YouTube Channel.

Why is This Important?

Custom post types add a greater freedom for you to create the exact site that you want. If the custom posts aren’t exactly what you need, then tweak them until they are. We’ll show you how to create custom post types of your own, but you should know that you’ll encounter them in out-of-the-box themes like we did with Avada that may be more developed than anything you could pull off.

Examples in Themes

Ureeka – Bookshelf Theme

This neat theme found here, turns your site into a book review site or shop. They’ve created a custom post type called “Book” which works in with the special front blog page and single posts page they’ve created. Here’s How the process works.

Create a Book Post

Add_New_Book_‹_I_chnageed_ittt_—_WordPress

You would put your review/synopsis/quote or whatever in the body. It has a custom taxonomy called “Genre”

Screen Shot 2014-05-27 at 9.34.24 AM

As well as a place to put the author and star rating.

Front Page View

Once you’ve published it, your front page looks like this

Screen Shot 2014-05-27 at 9.44.20 AM

Single Book View

And the book view looks like this

Screen Shot 2014-05-27 at 9.36.37 AM

Portfolio Themes

There are a lot of portfolio themes out there and you should check them out. They don’t necessarily have custom post types, but if you ever want to turn your site into a portfolio, there you go. Here’s a roundup I got from searching ‘portfolio’ in the WP theme repository.

Glossary Plugins

Another common application of custom post types is the prolific field of glossary plugins. This article from WPMU has a great roundup of some of the best. Let’s look at the WP Glossary Plugin.

As you can see, we have a new custom post types. Go ahead and add a new term

Dashboard_‹_I_chnageed_ittt_—_WordPress

The editor looks familiar…

Edit_Glossary_Term_‹_I_chnageed_ittt_—_WordPress

When you want to call up the glossary term, you write the term and then wrap that up in the [glossary] shortcode.

Edit_Post_‹_I_chnageed_ittt_—_WordPress

Now when you view the text on your website, the term will be highlighted and when you mouse over it, it will show the definition you supplied

Showing_the_Glossary___I_chnageed_ittt

Homework Assignment

We have a guest speaker from RadicalDesigns (radicaldesigns.org) Skyping in next week. We would like for everyone to be able to get the most out of this experience, so we are going to have you do a little preparation. In a word document or text file, answer the following prompts:

Prompt 1 (5-7 sentences):

  • Describe your project. How does WordPress and taking the Intermediate WordPress lab fit in with you project?

Prompt 2 (2-4 sentences):

  • Describe the organization you are working with (If you don’t have an organization, describe how you are directing your project). Do you know any of their needs? How long will you be there for?

Prompt 3 (2-4 sentences):

  • After you finish implementing your project, what are some steps you are going to take to ensure the project you started can live on without you?

Prompt 4 (Minimum 1 sentence each):

  • Write down at least three questions to ask the guest speaker. These could also be topics you would like the speaker to elaborate more on.

 

Submission

Email wordpress@labs.everettprogram.org the following:

  • Email subject line in the following format: HW #7 Firstname Lastname
  • Attach the text file/Word document with your answers to the above prompts.