Dive into the complexities of WordPress 3.0 with this tutorial, where you'll learn how to add thumbnail support, create a custom post type, and register a taxonomy for a more organized and dynamic site.
This exercise is excerpted from Noble Desktop’s past WordPress training materials and is compatible with WordPress updates through 2020. To learn current skills in WordPress, check out our WordPress Bootcamp and coding bootcamps in NYC and live online.
Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.
Topics covered in this WordPress tutorial:
Adding thumbnail support (post-thumbnails), Creating a custom post type, Registering taxonomy
Exercise Preview
Exercise Overview
Prior to WordPress 3.0, you were limited to using pages and posts to handle content in WordPress. This was very restrictive if you wanted to use WordPress as a complex CMS and not just a blog. As of WordPress 3.0, you can now create your own custom post types. Custom post types can have their own menu in the Dashboard, custom interface layouts, and much more. Most importantly, they give you the freedom to organize a site’s content the way you want.
For this exercise, you will be creating a custom post type for cars. The custom post type will appear in the Dashboard menu and allow you to add cars much like the way you would add a post or page. You will also add a custom taxonomy for the post type so you can mark whether a car is for sale, sold, or featured. A taxonomy allows us to classify our posts.
If You Did Not Do the Previous Exercise
- In a web browser, go to localhost:8888/lamdm/wp-admin (Mac) or localhost/lamdm/wp-admin (Windows) and log in if prompted.
- On the left of the Dashboard, mouse over Appearance and click Themes.
- Click the Add New button.
- Click the Upload link, then the Browse (or Choose File) button.
- Navigate to Desktop > Class Files > WordPress.org Class and double–click landmTheme-ready-for-custom-post-types.zip to open it.
- Click Install Now, then click Activate.
Registering a Custom Post Type
In order to use a custom post type, you must register it in functions.php.
Switch to your code editor.
Open functions.php from the landmTheme folder (will be landmTheme-ready-for-custom-post-types if you didn’t do the previous exercise).
-
At the end of functions.php, just before the closing ?
>
, add the following:/* Add support for thumbnails */ add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 223, 140, true );
The add_theme_support
()
function adds theme support for the post thumbnails feature. The set_post_thumbnail_size()
function sets the post thumbnail size. We set it to scale the thumbnails to 223 x 140 pixels and crop any overflow. These thumbnails will be used to display small images of each car. -
At the end of functions.php, just before the closing ?
>
, add the following:/* Registering the Cars custom post type */ add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type(); };
These lines of code are used to register a post type. The first function, add_action
()
is used to hook a function to a specific action. In this case, you are hooking the create_post_type()
function to init (after WordPress finishes loading but before the header is sent). The function create_post_type()
contains the register_post_type()
function. This is the function that will create our post type; however, currently it is looking a little empty. Let’s add some arguments to it. To save some time, we have already typed up the arguments for you. Open arguments.txt from the Class Files > WordPress.org Class > landm Content folder.
Select all the code and copy it.
Hit Cmd–W (Mac) or Ctrl–W (Windows) to close the file but not the folder.
Switch back to functions.php if you’re not already there.
Click inside the parentheses of register_post_type
()
.Hit Return (Mac) or Enter (Windows) twice to add some space between the parentheses.
-
In the new line you just added, paste in the arguments. It should look like the following (you may need to clean it up a bit so the indentation is easier to read):
function create_post_type() { register_post_type( 'cars', array( 'labels' => array( 'name' => __('Cars'), 'singular_name' => __('Car'), 'add_new_item' => __('Add New Car'), 'edit_item' => __('Edit Car'), ), 'public' => true, 'hierarchical' => false, 'rewrite' => array( 'slug' => 'cars'), 'supports' => array('title', 'thumbnail', 'editor', 'excerpt', 'custom-fields', 'author') ) ); };
The register_post_type
()
function has two parameters,$
post_type and$
args. This post_type is called cars, and this is what WordPress will use to identify it. The next parameter is an array of arguments that helps define the cars post type. Here is a brief explanation of each of the arguments:labels: An array that contains the singular and plural name that will be displayed in the Dashboard for the custom post type. public: Determines whether a post type is displayed in the Dashboard. Defaults to false (hidden). hierarchical: Determines whether the post type behaves like a page or a post. Defaults to false (behaves like a post). rewrite: Rewrites the permalink structure so that the URL displays “cars”. supports: Contains an array of features that the post type supports. Save the file.
- Let’s see the Cars post type in action! Go to:
- Mac: localhost:8888/landm/wp-admin
- Windows: localhost/landm/wp-admin
Log in if necessary.
-
On the left side of the screen, you will notice a new menu called Cars. Hover over Cars. This is the custom post type you just created with a few lines of code.
-
Under Cars, click Add New.
Looks good, except the bottom of the page has an Author module. The Cars post type doesn’t need an Author module, so let’s fix it.
Switch back to functions.php in your code editor.
-
In the supports parameter, delete
'
author'
and the comma before it so that the line reads:'supports' => array('title', 'thumbnail', 'editor', 'excerpt', 'custom-fields')
Save your work.
Go to the Dashboard.
Go to Cars > Add New.
Notice that the Author module is gone. Yippie!
Registering a Taxonomy
Taxonomies make it possible to organize your content using keywords and categories. An example of existing WordPress taxonomies would be the tags and categories used by posts.
Switch back to functions.php in your code editor.
-
At the end of functions.php, just before the closing ?
>
, add the following:/* Registering Custom Taxonomies */ add_action( 'init', 'create_status_taxonomy' ); function create_status_taxonomy() { register_taxonomy(); }
This is very similar to the code used to register a post type. First, we hook the function create_status_taxonomy
()
to the action init. Then the create_status_taxonomy()
function runs the register_taxonomy()
function. Let’s add some arguments to the register_taxonomy()
function. -
Inside the parentheses of register_taxonomy
()
, add the following in bold (don’t forget the end parenthesis!):function create_status_taxonomy() { register_taxonomy( 'status', array('cars'), array( 'label' => __('Status'), 'hierarchical' => true, ) ); }
The register_taxonomy
()
function has three parameters,$
taxonomy,$
object_type, and$
args. The first parameter is the name of the taxonomy, in this case status. The next parameter is the object type for the taxonomy and comes in the form of an array. Since these are car statuses, the object type is array('
cars'
). The last parameter contains some arguments about the taxonomy:label: An array containing the names that’ll be displayed in the Dashboard. hierarchical: Determines whether a taxonomy is hierarchical (like a category) or non-hierarchical (like a tag). Save the file.
Adding Taxonomies
Now that the Cars post type has its own custom taxonomy, let’s create categories for if the car is for sale, sold, or featured. These categories will be used in a later exercise to help dynamically determine which cars to display on a page.
Go to the Dashboard.
On the left side of the screen, hover over Cars and click the new Status link.
-
Enter the following info to add a status that will mark if the car is for sale:
Name: For Sale Slug: for-sale Parent: None Description: Leave it blank Click the Add New Category button.
-
Repeat the previous steps to add Sold and Featured categories.
In the next exercise, we will start to use these categories!