Create a Movie Database in WordPress with Custom Content Type Manager

Over the last few years people have been pushing the boundaries of WordPress as a CMS.

One of the most important boundaries has been only having posts and pages as option for your content. Custom Content Type Manager (CTM) is a plugin that allows you to go much further.

CTM allows you to create custom post types and add fields to them. You can add images checkboxes, textareas, and dropdowns and much more. And you can do all of this with little to no coding knowledge.

In this tutorial we’re going to show you how you can use Custom Content Type Manager to create a site like IMDB.com. You can list movies with the information they need, list actors with the information they need and then link the two together so that you can see which actors starred in which moves.

Features of Custom Content Type Manager

The Custom Content Type Manager is one of several plugins for WordPress that allows users to create custom content types (a.k.a. post_types). But it has some specific features that simplify and extend the WordPress native features.

• All types of Custom Fields: by default, WordPress only supports custom text fields. That’s kind of boring, and it may not help you adequately display your content. This plugin offers date fields, WYSIWYG rich text fields, image fields, dropdown fields and more!
• Repeatable Fields: for one field, you can store an array of multiple values, e.g. multiple images or posts.
• Standardized Custom Fields: another shortcoming of WordPress is its inability to standardize its custom fields. If you need 100 custom fields added to your posts, each time you created a new post, you would have to manually add those same 100 fields, one after the other (and let’s hope you don’t mistype something!!).This plugin solves that problem by standardizing your custom fields, so instantly, the same fields display in the same order for all your posts or pages! No more guessing about which custom fields were used on your posts!
• Sample templates: every time you create custom content, you need custom templates to help you display that data. This plugin dynamically generates sample template code as a reference for you. This gives you a good head start when skinning all the various types of pages that your custom content types use.
• Import and Export Definitions: if you are setting up several similar sites and you want them all to share the same content-types and custom fields, all you have to do is set up one site the way you want, then Export the definition for use on the other sites. This feature can save you lots of time and guarantees consistency across sites!

Install the Plugin and Activate

• Go to Plugins > Add New.
• Search for Custom Content Type Manger.
• Click Install Now and then Activate.
• Once it’s installed you will be able to access it from the Dashboard. Click Custom Content Types to start.

Step 1. Create a Movie content type

• Click Create Content Type.

Step 2. Create the post type and the menu name

• The most important parts are on the Basic tab. Start there.
• You should check the rest of the tabs for more configuration. However, in this demo, I used all the default values and did not make any changes.

Step 3. Activate the new type

• Return to Custom Content Types.
• Activate the content type from the link.

Step 4. Add custom fields to the content type

• Click Custom Fields in the menu or the tab at the top of the page.
• We want to focus on the custom fields.The standard title and body fields will be automatically added, Other standard fields can be accessed on the Fields tab in the previous step. We didn’t activate any here.

Step 5. Define the custom fields

• Click the Define Custom Fields link.

Step 6. Choose the fields you want for this type

Create the fields by clicking on the Create button.

At this point I’m only going to create two fields. We’ll create a third one in a later step.

• Title – text field for movie title
• Poster Image – an image filed for the movie poster

Step 7. Create the Movie Title field

Step 8. Associate it with the movie post type

• Check the movie box under Associations.
• Scroll down and click Save.
• Choose an image field for the next one.

Step 9. Choose the Default Output Filter

• When you create the Poster Image field, choose the Default Output Filter.
• Adding the image field is just like adding the text field, but there is an additional consideration.
• Choose the one that allows for the full image.

• Remember to associate it to the post type before you save.
• Always save after each step.

Step 10. Add some content to your new content type

• Go to Movies > Add New and you will see the custom fields you added.
• Add some content samples so we’ll have something to work with.
• If you save your example and preview it, you won’t see your custom fields displayed. That’s because a custom post type has to have a custom template. You’ll have to create that, but the plugin gives you the starting code.

Step 11. Get the sample template code

• Return to Custom Content Types.
• Click View Sample Templates.

Step 12. Create a template file

Highlight the code and copy it to the clipboard.

You’ll see the custom template code ready to copy in the yellow background window.
When you get to this page it will tell you what to name the file, and exactly where to put it.

Each time you create a custom content type with custom fields, you have to have a customized template to display that type of data. Go to the Custom Content Types menu in your WordPress dashboard and click on the first menu item: Custom Content Types. For each content type defined, there is a link to View Sample Template. This provides a sample template and detailed instructions on where to save it and how it needs to be named.

The sample template displayed includes examples of the print_custom_field() and get_custom_field() functions: these have to be used to get at the data you store in your custom fields. The samples include a sample view on how to use Output Filters: some types of data cannot simply be printed, so I’ve included examples of how to use the default Output Filter set for each custom field.

Step 13. Upload the template file

• Use a script editor to create the file and paste the code from the yellow window.
• Save it with the name indicated.
• Use FTP or your file manager to put the file in your template directory.
• After it’s been uploaded, you will be able to use the Appearance > Editor to make further changes if you want to work with it in that manner.

Step 14. Preview your new content

• Go to Movie on your dashboard menu.
• Click Preview.

• You will see a very crude layout of your content type and all it’s custom fields. The sample content template is only a starting point. You will still need to format the content on the page using css and some code. It’s intended to be just a starting point.
• At this point instead of going over layout. Let’s take a look at some other options that will be very important to you in creating custom post types.

Step 15. Set search parameters

• Go back to Custom Content Types > Custom Fields.
• Choose a field to edit.
• Scroll down the page to the Options pane.
• Click Set Search Parameters.

Step 16. Set search for MIME type

• Type image/jpeg into the post MIME type field.
• Save the parameters.

Click save again when you return to the edit page otherwise your changes won’t be saved.

• Go to Movies > Add New
• Choose a poster image to upload.
• Only jpg images now show in the selection list.

Step 17. Repeatable Fields

Repeat Steps 1-3 to create an entirely new post type called Actors. We’ll skip creating extra field and the template since they won’t be needed to demonstrate this concept.

Go to Custom Content Types and ceate a new content type with these fields:

• post type: actors
• menu name: Actors

Create a list of actors. After you have created the content type create several entries for your actors with their names in the titles, and some content in each body field.  

Step 18. Add a new custom field to the movie post type

• Return to Custom Content Types.
• Click Manage Custom Fields on the movie type.
• Click the Custom Fields tab.
• Click Create a custom field.
• Choose Relation and click Create.

Step 19. Relate it to Actors

• Fill in the label and name from actors.

Step 20. Set the search parameters

• Fill in the Button Label.
• Choose Set Permissions.

• Limit Post Types to Actors.
• Be sure to save this.

Step 21. Make it repeatable

• Click the check box under is Repeatable? This will make it so you can select from a list. A list to a developer is called an array. You need to know that for the next step.
• Scroll down to the output filter.

Step 22. Select Array as the output filter

Select Array (to_array) to make sure a list is created as an array.

Step 23. Associate it to the post type

• Associate it to the movie type.
• Save
• You have now added this field to the movies, and when you add new movie, you will see a button called Choose Actor (the button title you entered. and a list of actors to chose from. Because you chose “Repeatable” you will be able to select more than one actor and associate several with a single movie post.
• Now that you have added the new field, you’re going to need to adjust your template.

Step 25. Copy the sample template code that was added

Go back to custom content types, and View Sample Templates for movie again. You’ll see this additional code.

  This section was automtically added to the template.  

Actors: 

Step 26. Modify the code to get a better display

This will need to be added to the template file you create earlier. It will also need to be changed slightly so you get a better output. As it is written this only outputs the item id to the display.

To make the change let’s take a look at this line which tells WordPress to get the list (array) of actors.

$my_array = get_custom_field('actors');

If we want a different result, we can add a second filter to this, which will create the types of links we’re looking for. To do the second output filter to the line like this.

$my_array = get_custom_field('actors' , "to_link');

Make that change to your template file, save it, and view the result.

Now you have a useful output. It still needs work by a designer to make it look good, but Custom Content Type Manager has done most of the work for you.