How to Create Custom Content with WordPress

I recently received a text from my brother saying he was starting to build his first WordPress site and wanted to know what plugins he should check out. I set him a link to my WordPress.org Profile that has all my favorite WordPress plugins. I have been trying to keep this current and finally it has paid off. Also starting in WordPress 3.5 you can see your list directly from the admin and easily add your most used ones to your site. This is a huge time saver.

So in this post I would like to show you (the potential new WordPress developer) how to create custom content outside of the standard post and pages sections using a step by step (grab this plugin, do this, don’t do that, etc.) approach. This is how I am currently building websites for our clients using WordPress. It is not the only way, but will hopefully get you up and running quickly with some custom functionality.

In this example we will be pretending to build a Bridal Registry.

Creating a Wedding Registry with WordPress

 

Step 1. Creating a Custom Post Type

In the guts of WordPress, everything is technically considered a post. The images you upload, the “pages” you create, the comments people make on your blog, are all labeled posts in the database. So when you want to build something custom you will create a “custom type” of post.

The first plugin that I used to create these custom post types is Simple Custom Post Types. After you install it, you can find the user interface for it under ‘Settings’ -> ‘Custom Post Types.’  When you click into that section, the page is divided into a list of your already created custom post types at the top and a form to create a new one at the bottom. Add a new custom post type in the form.

 

Create-a-Registry-Post-Type

 

This plugin is nice because it has help messages next to each field. Here is an explanation of the information we added above.

Name: This field is the slug for your post type. It’s a behind the scenes variable that gets used for several things, like when you are querying for posts in the frontend. We add ‘Registry’ which get lowercased into ‘registry’ as our custom post type.
Query Var: This field is the base slug of a registry. http://bigolweddings.com/registry/paul-and-rachel-smith
Query var for archives: This field is for the archive (listing paging) of this post type. You will most likely want to display all the registries in some fashion. A list page (called archive because WordPress was a blogging system first) is automatically created and this field allows you to set the URL variable to use. Example: http://bigolweddings.com/registries

The bottom of the form has some labels that you can modify. These affect the backend and include all sorts of things from the text in the sidebar navigation, buttons, and success message. Fill these out as per the image below.

registry-titles

Click the blue ‘Add custom type’ button in the bottom left corner of this page and you should have a now have a new custom post type section in the left navigation of the admin.

registry-in-wp-sidebar

 

Step 2. Adding Custom Fields

So with you new custom type you get a default set of options setup. You can actually choose which items you want in the Simple Custom Post Types form (the middle section underneath ‘Name’).  If you navigate to ‘Add New’ in your Registries section, you will see a form just like if you were to add a new blog post or page.  This is perfect for some custom types, but we want to add some extra functionality to make it more of a wedding registry. This is where Advanced Custom Fields comes in.

advanced-custom-fields-hero

Advanced Custom Fields allows you to create a whole slew of field types and associate them to your newly created post type (and many other association too). You can download this plugin from the main WordPress directory and not just their website. For this example we are going to look at the Date Field and add a wedding date to the registry. More examples can be found in their documentation.

After installing the plugin, navigate to the “Custom Fields” section that is in the main left navigation of the WordPress admin. Once you hit the main page of this plugin. Click the ‘Add New’ button towards the top of the page.

You will presented with a form to add a ‘Field Group’ and some fields that are associated to it. Create a ‘Registry Options’ field group and then click add field towards the middle of the page.

add-button

 

A form inside of a form (tricky I know) will appear and add the values for your new wedding date field. See image below for example. The key field here is the ‘Field Name’ field. That value is will be used in our templates to request this data.

Registry-Options

Click ‘Close Field’ and then let’s move down the page. The next section is the Location of where we want our custom fields to appear.  You can create some rules that specify the section of the WordPress admin you want them to appear. Select “Post Type’ is ‘Equal to’ and then find our new post type ‘registry’. You can do much more there but we simply only want these fields to appear when we are adding or editing a registry.

associate-to-registry

 

So that’s it for setting up the admin. Tonight’s homework: Go create a new registry (with a wedding date) and next we’ll see how to create our custom Registry templates and make our Wedding Date field visible on the front end.

Step 3. How WordPress Templates Work

The Template section of the WordPress codex is a great place to start with template understanding. I’m going to try to simplify some things and show you quickly how building custom content in your WordPress template works.

Using a FTP program like FileZilla to access the files of your website, navigate to the theme folder your site is currently using. Found at:

/yoursite/wp-content/themes/
/yoursite/wp-content/themes/bigolweddings // This is my fake theme

In your theme folder copy the archive.php file and rename it to archive-registry.php and do the same for the single.php and create a single-registry.php file.

duplicating-templates

When WordPress is trying to display the content of a post it goes through a hierarchy of file structures. For a custom post type the structure looks like this: (registry being the variable we set in step 1)

single-registry.php
single.php
index.php
If it finds the single-registry.php file use it, if not, go to single.php, and lastly if single.php is not found use the default index.php file.

So that is the basic break down of your WordPress template structure. The archive-registry.php is for our listing of registries that have been created and the single-registry.php file is for when we are display a single registry. Not bad.

Let’s open up the single.php and add the wedding date to it. Our templates are going to have different styles but there should be a section of WordPress code that looks the same and that is called The Loop. For each page WordPress queries the content for the page and includes this in the loop, even if it’s just a single post.

In your template look for a while function like this:

 if ( have_posts() ) : while ( have_posts() ) : the_post();

Inside of this you should see some function being used like the_title(), the_content()the_permalink(), etc. Advanced Custom Fields has created a few new functions we can use that also use this function formatting. They are the_field and get_field.

Simply the_field() echos the value of the field and get_field() can be used to return and/or check if the data is present. So let’s add some code to our template inside of the while ( have_posts() ) : and after the_post();

So after the_post() in your php template lets added the follow code to your template. Make sure this code is inside of the standard php opening and closing tags.

if(get_field('wedding_date')) 
{ 
  $wedding_date = get_field('wedding_date');
  $wedding_date_timestamp = mktime(0, 0, 0, substr($wedding_date, 4, 2), substr($wedding_date, 6, 2), substr($wedding_date, 0, 4) );	
  echo "Wedding Date: " . date('l, F jS, Y', $wedding_date_timestamp);
}

So the if statement if(get_field(‘wedding_date’) says if we have data for the wedding field, then do everything contained in these brackets.  We then set the $wedding_date variable with our get_field function, including the slug we created back in the Advanced Custom Fields admin form.

Advanced Custom Fields returns all the data from it’s fields in different ways. The date field by default returns the data as yyyymmdd, so for our value $wedding_date_timestamp we need to parse that value into an actual PHP date timestamp.

When then echo the Wedding Date using the values from the PHP Manual.

So this is how you can display a date value from Advanced Custom Fields. Check out their documentation for examples on all the other field types.

Closing.

If this has been complete jibberish and/or you are unfamiliar with PHP, then you definitely want to dive into some basic PHP tutorials. WordPress and it’s templates make full use of PHP. They also employ some PHP structures that are very handy but need to be understood to take full advantage of.

Thanks for following along in this tutorial. I hope things have been presented clearly enough to move you forward in your WordPress custom development. See you again soon.

 

 

 

 

2 Responses to “How to Create Custom Content with WordPress”

  1. I’ve tried what’s written here. I can preview the custom posts. I can see a count of custom posts for each category. But, when I publish, all I get when I click on a category is “Sorry, no posts matched your criteria.” Why doesn’t have_posts() see these?