How to Display a Custom Post Type from User Generated Content

Don't get left behind. Learn how to build searchable member databases, member directories, business directories and more.

Want to take on bigger jobs and earn new clients? User generated content is not just a trend. It actually helps define Web 2.0 and isn't going away.

Google's definition of Web 2.0

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

Harness the power of WordPress frontend post publishing, and level up your skills and prospects in no time.

My entry into frontend publishing was a little messy, but ultimately very productive. Here's my story.

I should say at the outset: this is a little more than the "three steps and presto it's done" that I usually write. This is because user generated content from WordPress frontend posts can really achieve a lot! This feature is so powerful, and can be utilized in so many ways. Even in this article, I'm only going to scratch the surface of what it can do.

The flexibility of a WordPress frontend post

Allowing your website users to submit posts is a hugely effective way to build a large, content rich website. The secret? Get others to do all the hard work! WordPress frontend post publishing opens the door for guest blog posts, member databases, community or company resource databases, document libraries, and much more.

Data is added as a normal WordPress blog post or custom post type, so many other plugins can still leave their mark. For example, a mapping plugin can take data from the WordPress frontend post, and add a pin to a map. Such user generated content would be perfect for a business directory.

One example of user generated content is a business directory map.

For a beginner, all these features can be quite daunting, as I found out myself. With my first-ever project using Formidable Forms a few years back, the ability to allow user generated content drew me in and got me hooked. But I'll admit it took me a while to figure it all out!

My first experience of leveraging user generated content was building the website for Suspended Coffees. (It's a non-profit organisation focused on encouraging random acts of kindness.) I'm going to share my own experiences (and mistakes), so that you can hopefully achieve better, in less time, and with less stress.

The brief for this project was simple: a raft load of features on a tiny budget! We didn't have funds for any custom coding or development. We needed a solution that would work straight out of the box, and Formidable had everything we needed.

>> Read more: Create a WordPress Job Board

How I started with WordPress frontend posting

I wish I could say I got this job because I was super-talented. Or because I'd submitted a design brief that was simply impossible to ignore. But the truth is, I was just nearby. John Sweeney is the founder of the movement, and although I didn't know it at the time, he lived less than half a mile from me. One morning I woke to a Facebook message on my business page from John. We started talking about his ideas and what was possible for a website using frontend publishing. A directory of members would be a big feature. The basic requirements included:

• new member signups,
• members to update their own listings
• the ability to be searchable, and
• users needed to be displayed on a map.

Allowing users to submit their own stories was also high on the wish list. With all of this user generated content, admin moderation was going to be an essential feature too.

I did some research, and discovered the pro version Create Posts feature in Formidable Forms. This feature (in addition to the Views feature discovered later) covered everything we needed. So after a lot of planning and pre-sale questions, we took the plunge and started building.

In over my head

Before we start, let me just remind you that this was a few years ago. I'd been doing web design work for a while, but I'd been old school HTML for years and had always used Dreamweaver as my tool of choice. WordPress was new to me, and I'd really only started looking at it seriously in the last 12 months. So not only was Formidable new to me, but also the entire system. I'm not ashamed to admit I was in over my head —but I do enjoy a challenge! Basically if "me from 5 years ago" could make it work, anyone can! Also, looking at the site now, I know I could do it a lot better if I did it today.

Start simple

To figure out Formidable Forms for the first time, I decided it'd be good to start with the simplest features first. I figured this was the user submitted stories. John already had an active blog, and wanted the option to add guest posts from time to time. Once I'd read all the Formidable documentation on creating posts from a frontend form, I brewed a fresh pot of coffee and set to work. We set up a simple form to allow guest blog/story submissions. It included fields for name, email address, title for the story, the story, category, and an image upload.

Read more: How to setup front-end posting in WordPress

Formidable's Post Status feature

Two features immediately struck me as genius. The ability to create a WordPress frontend post in draft mode was the first. I set up an email notification so the site admin would always be aware of new submissions. Then these submissions could be checked before appearing on the site. This prevented any unwanted material from being published. We also loved that we could edit user generated submissions. We could even format them and add images, just the same as with a post created in the back-end of the website.

The second feature that really caught my eye was auto-populating the category choice drop-down. I'd expected the set up to be a bit more involved in the first place. I'd also expected to manually update the form any time new categories were added. Not so with Formidable!

For this form we didn't need to set up a custom post type. These submissions would be appearing in the main blog along with all the other posts. The first cup of coffee was still warm when the form was published. We tested it and tweaked the finer details within the next hour. This part of the project was completed much more quickly than I expected.

Build the members database

Encouraged by my early success, I decided to tackle the membership database next. The plan was simple: create another frontend form that created posts in a custom post type. This time the form would include a lot more detail, allowing people signing up to include social media and website links, contact information, and a full write-up/promo of their café.

Utilize a mapping plugin

I'd found a WordPress mapping plugin that could take address fields from a WordPress custom post type and display them on a map (Codespacing Progress Map). This was so we could not only build a great directory, we could also have a map view and search function to display all participating cafés. This is where a LOT of trial and error came in. I will admit that while the initial build was quick, we soon realized our mapping plugin wouldn't do everything we needed, so we had to re-visit the search function later in the build.

Read more: How to embed a Google map with WordPress form submissions

Use a view to display custom post type submissions

The next challenge was to get the submitted data to look good in the created post. For this we chose the "Customize Post Content" option to create a new View. Using some HTML along with the field shortcodes, we we able to display all the submitted details in a simple, custom layout that was easy on the eye. It even included a mini map showing the location of the featured café.

With our custom post type set up, our form created, and the mapping plugin configured to accept the submitted addresses, we uploaded our database of members and made the site live. Frontend publishing, here we go! Then we sat back and watched happily as new signups came in nearly every day.

Pro Tip: Don't make this mistake!

We had initially planned to use the search function in Progress Maps, so our original form used one long address field. After a LOT of work and frustration, we found it didn't work well for global searches. As many people would be searching for locations near holiday destinations or overseas family, we decided to switch things up and use the more powerful search and filter functions of Formidable instead.

At this point we realized that having separate fields for town/city/state/country, etc. would allow us to filter results much more effectively. Our database of nearly 3000 participating businesses was exported as a CSV and because of the nuances of international addresses, it had to be manually edited. To split up these fields before re-importing the data was a nightmare job that took one very patient team member nearly 3 weeks! The lesson? It's easy to combine separate fields, so always start that way!

Make the user-generated directory searchable

By far the most taxing part of the whole process for me was the search function. Not because it's actually hard to do, but because of bad planning (See the Pro Tip above) and simple stubbornness!

I knew you could search Views in Formidable, but I was a newbie. I barely understood what a Post was and I hadn't a clue what Views were. So, I spent a couple of weeks going round in circles trying out 3rd party search plugins and finding issues with every single one I tried. Eventually I admitted defeat and opened a support ticket with Formidable.

A View is the answer to searching submissions

This is when Jamie explained to me that Views are simply ways of displaying the data submitted via a form.

A Dynamic View is what I needed, showing both the Listing Page with ALL my entries, and the Detail Page which showed the specific data for a single entry.  Both the Listing View and the Detail View could be customized to show only the information I needed. (Too much info on the Listing page could look messy.) The [detaillink] shortcode made entries on the Listing page automatically clickable to take users to the individual listing.

Build the search form

The final step was to build the search form. We followed the guide and set ours up to allow filtering by country and state, as well as café name and address. We were amazed at how easy it was to find any entry we needed. Now our users could use the visual interactive map to browse participating locations near them, or use the Formidable search for specific café names or locations. The two perfectly complimented each other.

Frontend publishing opens doors

This project is a few years old now and another developer has since taken over maintenance of the site. But I will admit I'm still kinda proud of it. It was a big challenge for someone completely new to Formidable, and this powerful plugin allowed me to achieve things with WordPress frontend posting that I hadn't thought possible. Since then I've gone on to use Formidable on all sorts of projects where frontend publishing was needed. I've even included it on some projects where it wasn't actually necessary, but the site owner simply found the Formidable Forms interface more user friendly than the WordPress interface.

Frontend publishing opens the door to user generated content. It allows your viewers to get involved, while you build communities and the searchable directories to support them. How could WordPress frontend posting change your online presence? Get started today.