Do you want to learn how to use custom fields in WordPress guest posts? Custom fields are a powerful WordPress feature that allows you to store additional information related to your posts.
In this tutorial, we’ll show you how to allow users to submit information in custom fields using your WordPress forms.
Create Your User Submitted Posts Form Now
What Are Custom Fields in WordPress?
Custom fields are extra fields that you can create to collect information in WordPress. They’re sometimes called ‘post meta’.
Your site already has custom fields for WordPress themes and plugins. For example, the All in One SEO plugin uses custom fields for your meta description and meta title. Each time you create a new post in WordPress, All in One SEO uses those extra fields to save SEO metadata for it.
This is a perfect example of how custom fields work.
You can create your own custom fields to store extra information for any post, page, or custom post type. For example, as well as writing a review post, you could have another field for a rating.
Custom fields are handy if you want to:
- Make custom layouts – You can set up your template to always show information from your custom fields in the same place.
- Add content to your RSS feed – WordPress lets you add custom fields to your RSS fields. You could use this to insert extra content into your feed, like ads or brand logos.
- Control the way WordPress works – There are tons of neat tricks you can do with custom fields, like automatically expiring posts on a chosen date. To learn more about tricks with custom fields, check out this custom field 101.
Now we understand what custom fields are for, let’s create a guest post form with custom fields.
How to Use Custom Fields in WordPress Guest Posts
In this tutorial, we’ll customize your guest post submission form with an extra field using WPForms.
Then at the end, we’ll show you how to display the custom field data.
- Install the Advanced Custom Fields and WPForms Plugins
- Create Your Custom Field in ACF
- Create Your Frontend Guest Post Form
- Add Your Custom Field to Your Guest Post Form
- Add Your Custom Fields to Your Site
- Display Custom Fields With Elementor
We’re going to edit important WordPress files later on in the tutorial. Before you start, take a backup of your WordPress site so you can easily roll back the changes if you need to.
Ready? First, we’ll need to install the plugins.
Step 1: Install the Advanced Custom Fields and WPForms Plugins
WPForms makes it easy to get guest posts on the frontend of your website. For this tutorial, we’ll need WPForms Pro or higher.
That’s because we’ll need to use the Post Submissions addon to get guest posts. The addon comes with the Elite and Pro version.
So, let’s start by installing and activating the WPForms WordPress plugin. If you need help with this step, head over to this beginner’s guide to installing a plugin in WordPress.
Next, let’s install the Post Submissions addon so we can accept guest posts without giving writers access to the WordPress backend.
From the WordPress dashboard, click WPForms » Addons.
Scroll down and install the Post Submissions addon. You’ll see the switch turn green once it’s active.
Finally, let’s install the free Advanced Custom Fields plugin.
To install ACF, head to Plugins » Add New.
Now search for Advanced Custom Fields and click the Install Now button.
When the plugin’s installed, don’t forget to click Activate.
Great! Now we have everything set up. Let’s move on and create our custom field.
Step 2: Create Your Custom Field in ACF
Now we need to create a custom field in WordPress. In this example, we’re going to use a custom field to collect the name of our guest blogger’s website.
We installed the free Advanced Custom Fields (ACF) plugin to make this part easy.
To start, look to the sidebar and click Custom Fields » Add New.
At the top, give your new field group a name. It doesn’t matter what you type here because it won’t show up on the frontend.
Now click Add Field to start making your custom field.
You’ll notice that some options drop down underneath. You don’t need to fill all of these out. Here are the 2 we’re going to use for our example:
- Field Label – Give your new field a name.
- Field Type – We’re going to use a simple text field, so we left this set to Text.
You’ll notice that the Field Name field will automatically be filled in for you.
Go ahead and click Publish to save your new custom field.
You can see here that the new field’s been saved. Make a note of the Field Name – you’ll need that for the next step.
Now we can make the guest post form for the site frontend.
Step 3: Create Your Frontend Guest Post Form
In this step, we’re going to add our new custom field to a guest post submission form.
This will let us collect extra information from bloggers easily.
If you don’t already have a form for user submitted posts, start by clicking WPForms » Add New in the WordPress navigation bar.
Now click the Blog Post Submission Form to open it up.
To set up your form, jump over to this guide on creating a frontend form for user submitted posts.
When you have all the basics ready, come back to this tutorial.
Step 4: Add Your Custom Field to Your Guest Post Form
Now you have a user submitted post form, you’ll want to add the custom field we created in step 2.
Open up your form in the form builder if you haven’t already. You’ll see fields for your guest blogger to add their:
- Post content
- Featured image (file upload)
- Post title
- And more.
We’re going to configure an extra field to match our new custom field.
Let’s drag a Single Line Text field from the left hand panel onto the form preview on the right.
We’ll name this Website Name.
Now we’re ready to map the field to the field we created in the Advanced Custom Fields plugin.
To start, click Settings on the left-hand side, and then Post Submissions.
This screen shows all of the functionality and features for the Post Submissions addon. You can set the post status and other settings here.
To add the custom field, you’ll want to scroll all the way down to the Custom Post Meta section.
On the left, we pasted in the Field Name that we created earlier. And on the right, we can choose the Website Name form field that we just added to the form.
Now anything typed into the Website Name field will be saved in the custom field.
That’s it! Click Save to save your form.
You’ll want to click the Embed button to publish your form if you haven’t done that already. You can automatically add it to a page, or use a shortcode.
Now, when you view your guest post submission form on the frontend, you’ll see the extra field we added earlier.
Go ahead and fill out the form with a test entry. Once it’s submitted, we can display the field on the frontend of your site.
Step 5: Add Your Custom Fields to Your Website
There are many different ways to show custom field data in WordPress. We’re going to show you some easy examples.
This first method requires some knowledge of WordPress theme files. Before going ahead, make a child theme for your website and create a backup in case anything goes wrong.
In all of these examples, we’ll use the_field()
function in Advanced Custom Fields.
First, let’s edit our single post template to display the field. Go to Appearances » Theme Editor.
We’ve opened up the theme file called single.php
. In your theme, the name of this template file might be different.
Find a spot to display your field, then paste in this code. This is a super easy example to get started:
<?php if( get_field('author_website_name') ): ?> <h2>Author's Blog: <?php the_field('author_website_name'); ?></h2> <?php endif; ?>
Change the field name author_website_name
to the name of the field you created. When you save the template file, your field will show up in your blog posts where you placed the code.
You can also use custom fields to replace information in posts. For example, you can change the author name in a post to the guest author’s name automatically.
To do this, we made a field called guest_author
and used this code snippet to switch the names. If you want to try this, we recommend that you use the Code Snippets plugin instead of editing your functions.php
file directly.
function guest_author_name( $name ) { global $post; $author = get_post_meta( $post->ID, 'guest_author', true ); if ( $author ) $name = $author; return $name; }
If this looks a little tricky, we’ll quickly show you an easier way to use custom fields with Elementor.
Step 6: Display Custom Fields With Elementor
Before we finish the tutorial on using custom fields in user submitted posts, we wanted to quickly show you how to display a custom field in Elementor.
This method lets you easily build advanced templates for user submitted content.
In this example, we have a blank text block in Elementor. Click the icon at the top that’s labeled Dynamic Tags in this screenshot:
Now you can select ACF Field and choose the custom field you made in step 2.
Now the contents of your custom field will show up on your posts whenever you use this Elementor template. This makes it super easy to display custom field data that you collect in WPForms.
Create Your User Submitted Posts Form Now
Next Step: Get More Guest Post Submissions
Now you have a guest post form set up with custom fields, you’ll want to get more user submitted content for your site.
To do that, check out these tips on how to get more guest posts on your blog.
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes the Post Submissions addon and offers a 14-day money-back guarantee.
If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.
I am not able to show more that the three fields that already existed on Post Submission, in my final blog view! I tried custom fields but didnt succeed
Hi Maryam,
To help you with through insights on this, would you mind reaching out to us via support with additional details and our team will be happy to help!
Thanks 🙂
I need to use a true/false custom field for my post submissions. Currently this results in the field always being true because it always sends a non boolean value to the field. Is there an easy way to get the post to send a true/false boolean value to the custom field?
Hi Sondre,
Thanks for reaching out! To help you with a thorough response, kindly reach out to us via Support and we will be happy to assist 🙂