| WordPress

pods framework logo wordpress plugin

For WordPress users who have moved beyond the basics, the inflexible content in WP can be frustrating.

Until recently, you could use a Post or a Page or you could do some fairly complex coding to create custom content types. We have a whole class explaining how that's done.

Pods can solve that problem. Pods can make it really easy to create a portfolio, a real estate site, a business directory, without using any code at all.

In this tutorial, we'll show how Pods can turn WordPress into a powerful content management system.

Step #1: Content types

  • Search for and Install "Pods - Custom Content Types and Fields"
  • Go to Pods Admin > Add New

You'll be presented with two choices. You can either create a completely new content type or you can build on an existing type such as Posts, Pages, User or Comments.

media_1379448634397.png

If you click "Create New" you'll be able to choose the name for your new content type.

This new content type will appear in the main WordPress admin menu. Bear in mind you don't want to be doing too much of this or you'll end up with a very long admin menu.

media_1379453131524.png

If you click "Extend Existing" you'll be asked to choose which content type you want to modify.

media_1379448706201.png

Step #2: Fields

Now that you have chosen to create a new content type or modify an existing one, it's time to add fields.

Click Add Field and you'll be presented with a screen like this.

media_1379453753385.png

The most important choice will be the type of field you select. Here are the default choices that you'll have:

media_1379448973546.png

In this example, I've chosen Plain Text which is the default option. I'm going to use this content type for a book listing, so I'm creating a field called Publisher.

The Name is important because you'll be using that often to place and design the layout of this information. The Name must be all lowercase.

media_1379453822912.png

Under the Additional Fields Options, you can HTML and shortcodes to be used in the field.

media_1379453970864.png

Under the Advanced tab, you can add a CSS class, define default values and tweak the access control for the field:

media_1379454018122.png

As you add several fields, you'll end up with a list the one in the image below. I have 7 fields in this example:

media_1379449885480.png

Please don't forget to click Save Pod at this point. When I was first using Pods, I forgot this several times and had to re-do my work.

Step #3: Templates

  • Go to Pods Admin > Components.

It's here where the possibilites of Pods really become clear. There are 10 advanced features to turn on. We're going to choose "Templates" which will allow us to design our content type without needing to create any theme files.

  • Click Enable next to Templates.
media_1379449986705.png
  • Go to Pods Admin > Components > Templates > Add new
  • Enter a name for the template. In this case its will be Books.
  • Enter the code for the template.

For the template code you can use regular HTML and CSS. You can enter the fields from your Pod using this syntax: {@field_name}. This is the Name we entered while creating the fields in Step 2.

In this example, I've entered these fields:

  • {@book_cover_image}
  • {@book_author}
  • {@book_publisher}
  • {@book_year_published}
  • {@book_pages}
  • {@book_description}
  • {@book_amazon}

Note that some of the fields are inside scr and href tags so that they become images and links.

media_1379451381862.png

#4: Using Pods in Content

  • Go to the content type that you added Pods to in Step #1.
  • You'll find your fields underneath the main body as in the image below.
media_1379450247103.png
  • Fill in the information for the fields:
media_1379450331320.png
  • Click the Pods icon next to Add Media, as in the image below:
media_1379450438230.png
  • You can choose from a variety of Pods choices. In this case, we're going to choose just a single Pod item:
media_1379450478213.png
  • Choose the template that you created.
media_1379450560513.png
  • We want to place just one item on this page and it's the same item we're just written. So, find the ID of the post in the URL bar and enter it into ID or Slug.
media_1379450587578.png
  • Your Pods shortcode will look like the image below. Your post id and the template name will be in the shortcode.
media_1379450673038.png
  • Save this content.

#5. View and adjust the content

Visit your new content, created with Pods. In the example shown in this tutorial, the image below shows the end result. At this point you'll probably want to go back and tweak your template.

However, your first Pod is now finished and you can re-use this for as many Pods as you wish.

media_1379451439561.png


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.