How to Display WordPress Custom Post Types From User-Generated Content

Need a front-end posting system to publish user-generated content? Here's the solution. Enjoy custom post type publishing, searching & more!

Are you planning to build a platform powered by users' submitted content? Or maybe a guest posting site? You just need the right tools to make it happen and ensure scalability. Today we're going to share a true story based on such a platform. Let's start!

About 8 years back, I worked on a project with Suspended Coffees, a non-profit organization focused on encouraging random acts of kindness. 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.

The project needed a solution that would work straight out of the box. It included front-end publishing, custom post types, member database, and so on.

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

We chose WordPress to add custom post types from the front-end. Formidable had everything we needed. We're going to share those experiences (and mistakes), so that you can hopefully achieve better, in less time, and with less stress.

We wanted to utilize the power of user-generated content in the age of Web 2.0. Because user-generated content is not just a trend. It actually helps define Web 2.0 and isn't going away. It shaped our story of WordPress front-end posting for custom post types.

Google's definition of Web 2.0.

Getting started with WordPress front-end posting

Have you ever worked on a project with this kind of requirement? Well, we had several ones! Our basic requirements included the following.

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.

User Generated Content via frontend publishing to populate business directory maps

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

We did some research and discovered the Create Posts feature in Formidable Forms premium. 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.

Read more: Create a WordPress Job Board

Simplest first

Form settings to create a front-end post.

To figure out Formidable Forms for the first time, we decided it'd be good to start with the simplest features first. We figured this was the user-submitted stories. John Sweeney, the founder of the Suspended Coffees movement already had an active blog. He wanted the option to add guest posts from time to time.

Once we'd read all the Formidable documentation on creating posts or pages from a front-end form, we were set to work. We set up a simple post submission form to allow guest blog/story submissions. It included fields for name, email address, post title, the story, category, and an image upload.

Formidable's Post Status feature

Two features surprised us immediately. The ability to create a WordPress front-end post in draft mode was the first. We 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, change the post meta, just the same as with a post created in the back-end of the website.

The second feature that really caught our eye was auto-populating the category choice drop-down. We'd expected the set up to be a bit more involved in the first place. We'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 we expected.

Building the member database

Encouraged by the early success, we decided to tackle the membership database next. The plan was simple: create another front-end 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é.

We didn't need any logged-in users or a profile builder. Hence, no complex user roles were required. Formidable handled the member database generation efficiently!

WordPress form to submit and display custom post types with frontend posting.

Form to submit & display custom post type with front-end posting.

It worked like a registration form for the café owners- with further reviews of course!

Utilizing a mapping plugin

We'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. 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.

Using 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 were 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. Front-end 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!

Making the user-generated directory searchable

By far the most taxing part of the whole process for us 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!

Yes, you could search Views in Formidable, but we were newbies. So, we spent a couple of weeks going round in circles trying out 3rd party search plugins and finding issues with every single one we tried. Eventually, we admitted defeat and opened a support ticket with Formidable.

A View is the answer to search submissions

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

A Dynamic View is what we needed, showing both the Listing Page with ALL our entries. And the Detail Page showed the specific data for a single entry. Both the Listing View and the Detail View could be customized to show only the information we 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.

Building 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 complemented each other.

Search and display custom post type with a WordPress frontend post

A Formidable View search results for Suspended Coffees.

Front-end publishing opens doors

The Suspended Coffees project is pretty old now and another developer has since taken over maintenance of the site. It was a big challenge for someone completely new to Formidable, and this powerful plugin allowed us to achieve things with WordPress front-end posting that we hadn't thought possible. Since then we've gone on to use Formidable on all sorts of projects where a front-end edit screen was needed. We'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.

Front-end publishing opens the door to user-generated content. It allows your visitors to get involved, while you build communities and the searchable directories to support them. If you need, you can create custom meta boxes, post types, and taxonomies as well.