WPCampus 2016: WordPress Masterclass Workshop

Getting ready

So you’ve decided to take part in Morten Rand-Hendriksen’s WordPress Masterclass at WPCampus? Great! If you want to get the full experience and play along as Morten messes up the code of a WordPress site to make it work the way he wants it to, here are the preparatory steps you need to take:

  1. Set up a local version of WordPress on your laptop. You can use your own preferred development environment or a custom install. If you’re on Windows, simple options include WAMPServer or DesktopServer. If you’re on Mac, use MAMP or DesktopServer.
  2. Make sure the Twenty Sixteen theme is installed and activated (if you are setting up a new WordPress install, this is the default).
  3. Download and install the custom demo content prepared for the workshop (right-click + Save Link As). To install the demo content, go to the WordPress admin panel, select Tools -> Install, select WordPress, install the WordPress Importer, and follow the instructions. Make sure to check the Download and import file attachments box.
  4. Make sure you have a working code editor on your computer. Morten will be using the free, open source Atom code editor. You can use any code editor you prefer.

During the actual workshop, you’ll be provided with code examples and instructions on how to build a custom child theme and how to extend that child theme with custom post types, taxonomies, and even custom fields.

Part 1: Build a Twenty Sixteen Child Theme

In the first hour of the workshop, we’ll build a child theme with Twenty Sixteen as the parent. The purpose of building this child theme is to gain full control of the appearance and functionality of the theme without having to a) build it from the ground up, and b) modify the original code.

To make it easier for you to follow along, I have created a series of Gists – code snippets shared on Github’s servers – that provide the individual components I’ll be building in the workshop. As we move through the different code snippets, I’ll explain where to put them, how they work, and how you can modify them to make your child themes work the way you want.

I’ve broken down each of the workshops into individual sections that follow a logical chain of events so to speak, but for the most part you can apply these code snippets in any order you want, or individually. I’ve also provided links to the relevant Codex and Handbook documentation for specific functions and they are introduced.

That’s enough talk. Let’s get crackin’!

1. Create a child theme

To create a child theme, you need three components:

  1. A parent theme
  2. A folder for the child theme
  3. A style.css file in the child theme folder with a specific header to tell WordPress this is a child theme

Codex article. Handbook article.

If you want to build on top of the existing styles in the parent theme, you must import them. This can be done either through an @import rule in style.css or by enqueueing the parent theme stylesheet in functions.php. In most cases, the @import rule method is simpler and more effective.

The completed code snippet from style.css:

You can also experiment with the alternative method for more advanced functionality:

2. Change fonts

The Twenty Sixteen theme uses three web fonts served up by Google Fonts. We can swap out these fonts for our own by hooking into the “pluggable” function that sets up the fonts.

Below you find the hook that replaces the imported fonts in functions.php, and the CSS rules to call in the new fonts in style.css:

3. Change the appearance of the header

If you want to make changes to the structure of a template, it is no longer enough to merely change the CSS. You need to change the actual template itself. The WordPress Template Hierarchy has been created to make this process as simple as possible, especially where child themes are concerned.

To make a change to a template file, simply copy the file from the parent theme to the child theme, and the new child theme file automatically kicks in.

In this example, we reposition the header image and logo by restructuring header.php, and use some simple CSS rules to place the logo and header image exactly where we want them to be:

To complete this redesign, we have to change the default size of the site logo. This size is defined in the twentysixteen_setup() function found in the parent theme functions.php file. Lucky for us, this entire function is pluggable, so we can override it by duplicating it in the child theme.

Note: it’s vital to keep the name of the function intact:

4. Create a custom page template with no sidebar

Unlike posts, pages can have Custom Page Templates (it would be great if posts had them too, but they don’t. Because reasons… Moving on.) These custom page templates are surprisingly easy to create: Simply create a new page template file (typically by copying page.php from the parent theme and making some changes) and add a custom header to it stating “Template Name: whateveryouwanttocallit”. This tells WordPress we are looking at a custom page template, and it will automatically appear as an option when you edit pages.

In our example, we want to create a custom page template that displays pages without the sidebar. This means we need to remove the call to the sidebar in the template file, and also make sure we realign the content in the layout by applying the correct class names to the elements. To achieve this, create a custom function to filter the body_class:

Conclusion of Part 1

These code examples demonstrate how a basic knowledge of web standards (HTML, CSS, PHP, and JavaScript) and how WordPress themes and the template hierarchy works plus a willingness to experiment and break things allows you to take control over any theme using a child theme. What you’ve seen here is just the tip of the iceberg of what is possible, and now that you know how the pieces fit together and understand that a child theme cannot break the parent theme, you have a playground to build your own custom child themes in any way you like!

Part 2: Custom Post Types, Taxonomies, and Fields

In the second part of the workshop, we’ll look at how to extend the functionality of a WordPress site by introducing new custom post types, taxonomies, and fields with the help of a simple plugin and a child theme.

Out of the box, WordPress has three main post types you use all the time: Posts, Pages, and Attachments. The Posts are organized using two main taxonomies: Categories, and Tags. This setup can be limiting, especially if you want to separate types of content (not everything is a Post or a Page) or you want to add additional sorting methods.

Enter Custom Post Types and Taxonomies. In the following example, we’ll create a new custom post type for Lectures, add two new taxonomies to it, one for Class and one for Year, and add a custom field to it for some fancy effects.

Let’s get crackin’!

1. Create a plugin for Custom Post Types and Taxonomies

You can create Custom Post Types and Taxonomies using either a theme, a child theme, or a plugin. I like creating them using a plugin because they can then be toggled on and off independently of what theme is in use.

Setting up the initial plugin is about as straight forward as setting up a child theme:

  1. Create a folder in the Plugins folder (optional)
  2. Create a PHP file to serve as the main plugin functionality file
  3. Add a plugin header to tell WordPress this is a plugin

This is the header that goes at the top of the plugin functionality file:

2. Create the Lecture post type

Creating a post type can be done using a plugin from the Plugin Directory, but I like to create them manually so I have full control over every aspect. Post types are registered using the function register_post_type().

The code necessary to create a custom post type is fairly lengthy, and if you tried to write it all by hand there is a high chance something would get messed up. Thankfully, we don’t have to. The creators of the WordPress Codex put together some verbose examples you can copy, paste, and modify to your specifications.

When setting up a custom post type, you are creating a new permalink endpoint for URLs (think mysite.com/lecture) which means you have to tell WordPress about this new permalink. This is done by flushing rewrite on plugin activation, and the plugin can do that automatically.

Here’s the completed code for a Lecture post type and flushing of rewrite:

3. Create custom taxonomies

With the custom post type created, we can add custom taxonomies to provide new sorting and organizing functionality. In WordPress you have two types of taxonomies: hierarchical (like Categories) and non-hierarchical (like Tags). When creating taxonomies, you can choose the type that fits your data. In our example, the Class taxonomy is hierarchical while the Year taxonomy is non-hierarchical.

One other neat thing about taxonomies is they can be applied to any post type, including existing ones. That means when you create a new taxonomy you can register it to any post type using the @object_type parameter. You can also register a taxonomy to a new custom post type when you register the custom post type.

Taxonomies are registered using the function register_taxonomy(), and just like with register_post_type(), the Codex article provides verbose examples you can cut, paste, and modify to your specifications.

Here’s the completed code for the two taxonomies:

4. Include the custom post type in the index and search results pages

Now that you have a custom post type, you may want to include it in existing indexes, like the regular index page and search results. You can do this by manipulating the query before it is sent to the database using the pre_get_posts action:

5. Display entry meta for custom post types

If you open a single Lecture post now, you’ll immediately notice the meta info is not present. That’s because we haven’t called it in for this post type yet. To do so we have to modify a pluggable function: twentysixteen_entry_meta(). All we’re modifying here are the conditionals that specify what post types to display the avatar and taxonomy info (lines 7 and 30):

6. Display taxonomies on the front end

The thing with custom taxonomies is they don’t appear on the front end unless you call them. That means you can organize your content to your heart’s content on the back end of the site, but nobody will ever know unless you explicitly add them to the code of your current theme. So that’s what we’ll do.

In the Twenty Sixteen theme, Categories and Tags are displayed using a custom function called twentysixteen_entry_taxonomies() found in inc/template-tags.php. Conveniently, this function is pluggable meaning all we have to do is copy it to functions.php in the child theme and make whatever modifications we want.

Here we’ll use the original code as a LEGO set and grab the pieces we need to build a new and better display. The key function in this process is get_the_term_list() which allows us to specify a custom taxonomy and get a list of all the terms from this taxonomy applied to the current post, complete with links. So the same thing you expect to see with categories and tags.

get_the_term_list() has some additional parameters for $before and $after that allow us to place HTML content before and after the list. This is typically used to provide a contextual title to explain what the current term list is. In the code example I’ve added titles to all the taxonomies (including Categories and Tags) for a better user experience:

7. Create a custom field for automatic videos

Now that you have a custom post type, you may want to display content a little bit differently. There are a ton of ways of doing this: You can create your own custom post type templates, you can modify existing templates, and you can create conditional statements to display content differently for certain post types. In this last example, we’ll take the last option, and combine it with an Advanced Custom Field for some WordPress oEmbed Magic.

For this to work, you have to install the free Advanced Custom Fields plugin (available from the WordPress Plugin Directory) and set up a custom field with the name “lecture_video”.

The user will paste in the URL to a supported oEmbed video source like YouTube or WordPress.tv or Vimeo or something similar, and we’ll use that URL to magically display the video wherever we want. To make it all fancy, we’ll display the video in slightly different places depending on what type of page we are looking at: Below the Lecture title in index pages, and above the title on single pages.

Here’s the code to display the video. The key function is wp_oembed_get():

The way this function is set up, it only kicks in if the plugin is active, if the post is a Lecture, and a URL is available. If not, it does nothing. Wherever you place this code in a template, the responsive video will appear. MAGIC! Well, actually code, but still.

Et voilà

And with that, we are done. Through these examples you should have a better understanding of how the core functionality of WordPress can be extended beyond what you get out of the box. The same methodology can be used to add widgetized areas (“sidebars”), menus, and other features.

As in the previous hour, what you should walk away with is a strong sense of agency in manipulating WordPress, both how it behaves, and what it displays. I prescribe a healthy disrespect for the default settings, and urge you to experiment with Custom Post Types, Taxonomies, Fields, and Child Themes to create your own unique take on what a WordPress site is and should be.

Lykke til!

2 thoughts on “WPCampus 2016: WordPress Masterclass Workshop

  1. Thank you for this incredibly well done tutorial! Everything has been going great until I came upon: step “6. Display taxonomies on the front end.” I see the new taxonomy displayed on the front end, but there are four error messages displayed on the page:

    Notice: Undefined variable: post in /wp-content/themes/wpcampus/functions.php on line 10

    Notice: Trying to get property of non-object … on line 10

    Notice: Undefined variable: post … on line 17

    Notice: Trying to get property of non-object … on line 17

    I haven’t figured out yet how to fix these error messages or what is causing them.

Comments are closed.