Introduction to Pods: WordPress as a CMS

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

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
19 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
OST-User

Thanks for sharing Steve. This looks very useful. Something doesn’t look correct though. In “Step #3”, second screen shot image. You use “@description” and “@amazon” field names without prepending “book_”. Was that accidental or am I missing something? Thanks.

steve

Sorry, that’s a typo. I did change some of the names while working through the example.

OST-User

Thanks for the follow-up. Keep up the great work.

nek

I was very happy reading about Pods and afterwards installing as I have been missing the opportunity in WordPress. But I have un-installed it. After a Little while I suddenly got a fatal error all over wordpress. I then changed the memory in the .htaccess file to 64. That helped a while, but after using Pods a Little more I got a fatal error once more. Then I thought that I would not push my luck and de-installed it. Of course I miss it – but I now have a site that i working

vvesperr

Thanks for this incredibly straightforward tutorial! I’m using Pods for a client site and am amazed at how polished and powerful it is. Marvelous stuff.

steve

Great, glad that helped vvesperr!

Eduardo Hernández

And what about creating a Page that gets the ID or slug of the Pod from the URI. How to do that?

steve

Hi Eduardo. Yes, that would make a good follow-up tutorial. Using this set-up, there’s still some manual work involved for authors.

Gaurav

in Step #3: Templates

you said

Go to Pods Admin > Components > Templates > Add new

bt i dont find any link to Templates…
plz can you explain me to step by step how add template to pods///

Christen Dybenko

First enable Templates by click on the “Enable” link beneath Templates on the screenshot you shared.

Then, templates will appear under your “Pods Admin” menu.

Joanna Rejdych

Thank you so much!! I was about to give up and uninstall Pods!! I am the total beginner and this is the best tutorial for people like me 🙂 thanks

Kevin Mamaqi

Thank you for this tutorial, it really makes clear for what are pods templates.

Sean

Thanks for the tutorial, I would like to extend this a bit to call the new book form in a customized theme for frontend users, is there a short code or any code for this? Thanks

Eagle Travel

Thank you so much Steve! I’m going to try to work with Pods on my web site now, using you recommendations, and hope it will work!

cmsfaridabad

Nice article! I love Pods CMS as PODS is one of the most powerful WordPress Plugins I have seen so far!

Thanks for posting!
For more details please login to our website [url=http://webcarton.in]http://webcarton.in[/url]

Omar Basha

thanks for the wonderful job

please

i enabled the templates in the coponents window but when i try to add a new template there is no choice between form and layout as it was explained here : [url=https://github.com/pods-framework/pods-frontier]https://github.com/pods-fra…[/url]

any ideas to get the form builder please? because i have no idea about writing such codes.

thanks

Pete

Hi Steve, I think I’ve figured out how to do everything but I want to include an option to add a google map to a post. Am I right in thinking I won’t be able to add shortcode from another plugin to the template field {@field_name}

If I’m right, do you think there is a way to add an option for a google map. Would I be able to add an iframe from google maps itself?

Frederic Pierron

Great post ! How would you proceed if you want to show a table with multiple books in it for comparison ? For example, I want the 1rst column with the fields names and next columns with related data for, say, all the books from one author ? I should create a kind of loops somewhere, but can’t figure out. Any key ?

Mini

Thanks a lot for this tutorial, as it was told here, I was also about to give up despite the description of features is promising, but not enough tutorials for this plugin. I use it for custom post type in following way: I created new taxonomies, pods, templates and GF form, users post their articles on frontend in Gravity forms, that goes to Pods (with Pods+GF plugin) and with the template enabled, new posted article appears on the site.

19
0
Would love your thoughts, please comment.x
()
x