How to Use the New Post Widget in ACF Frontend

Summary

This article will detail the steps needed to use the New Post Form widget in ACF Frontend. The New Post Form widget enables a user to add a new post to a custom or WordPress standard post type from the frontend of a WordPress website.

Important: By default a user needs to be logged in and carry the “administrator” role to add a post. This can be changed, however, in the Permissions settings.

Requirements

The following tools or plugins need to be installed before reading further. All these plugins can be installed or downloaded from the WordPress Plugin Repository and can be accessed using the WordPress MENU and then clicking on PLUGINS and then the ADD NEW button at the top of the page.

  1. Elementor – Free or Pro
  2. Advanced Custom Fields – Free or Pro
  3. ACF Frontend – Free or Pro

Scenario

In this example on how to use the New Post Form widget, we will be adding the New Post Form widget to a new page and link it to the Standard WordPress Posts post type. We will then configure the appropriate settings within the New Post Form widget to add a new post from the frontend of our website. All this will be done using the Elementor Page Builder. Let’s get started.

Prerequisites

In order to proceed ensure you have the following already setup.

  • If you plan to use a custom post type, ensure that it is set up correctly with the appropriate fields. If you plan on using any of the standard WordPress posts like “Posts” or “Pages”, then you should be good to go.

Table of Contents

  1. Form Structure
  2. Actions
  3. New Post Settings
  4. Permissions
  5. Publish your form and try it out
  6. Adding an “add new post” button to any page

Form Structure

  • Log in to your WordPress Website
  • On the WordPress admin menu go to Pages. 
  • Create a new page to host the frontend form, in our case we called our page Add New Post
  • Once the page has created click Publish and then the Edit with Elementor button located at the top of your page.
  • Once Elementor has loaded, locate the Search Bar in the page builder and type in New Post Form. Click and Drag the widget to the right and onto the page in the Drag Widget Here area.
  • The widget should load and look similar to this:
  • In the widget’s Settings Panel click on the Form Structure dropdown to expand its settings. We will leave the Form Title as is, as well as the Form ID. In the form field section, we will add a field for the Post Content as well as the Post Category by clicking the Add Item button. The form on your page will change to reflect these new fields. We also changed the Submit Button text to read Add Post.

Post Title

  • For the Title field options, you can change the field label to meet your needs, in our case we called it Vehicle Name. 
  • For the Placeholder option, you can insert any text to inform the uploader what information to enter in the field. In our case, we entered Type in Vehicle Name
  • For the Instruction text, you can enter any additional information needed for this post type. It will appear under the field label.
  • You can also set the field as required by setting the Required setting to Yes

Categories

  • Next, we added a new field and set the type to Categories. In our example we’ll be adding a vehicle to our posts so we have added vehicle manufacturers to the Category of the Standard WordPress Posts that will be selected for each vehicle. We have entered all the helper text and set the display to Radio Button so a post author can only select one manufacturer. You can also set the field display to Checkboxes or Multi-Select to let the user choose multiple values or a single-value dropdown using the Appearance option
  • For the Add Term setting we have to set the option switch to Yes to allow the post author to add additional Vehicle Manufacturers.

Tags

  • Next, we added a new field and set the type to Tags. We’ll be using the Tags form field for Vehicle Colour, allowing the post author to select or add a color for each vehicle.

Actions

  • Click on the Actions dropdown to expand its settings. We will leave most of the settings as is.
  • On the Redirect After Submit setting, we change this to redirect the post author back to the Blog Archive page, by selecting Custom URL and typing in the URL of the Blog Archive Page.

New Post Settings

  • Click on the Post dropdown to expand its settings panel. We will leave most of the settings as is and only make a change on the Post Status by setting it to Published. Here you can set the Post Status to Pending Review if any of your posts need to be moderated before being published. In the New Post Type setting, we selected our post type as Post. If you have a custom post type for the new post, you can select it from the dropdown list.

Permissions

  • Click on the Permissions dropdown to expand its settings. Here we will set the permission for who can add a new post using this form. We only want logged in users with the administrator or editor roles to be able to add new posts.

Publish your form and try it out

  • The Display Options dropdown has various settings to control the layout of the form. We will leave all the settings as is for now. Make the appropriate changes for your scenario.
  • The Limit Submission dropdown is an ACF Frontend Pro feature and allows you to limit the number of submissions per author.
  • When you are ready, click the Green UPDATE button at the bottom of your page to save your settings.
  • Once the settings have been saved you can click on the Eye icon located next to the Update button to Preview your new form and to add a new post.
  • We completed our form and added a new test post to our blog and upon hitting the Add Post button we were redirected to the Blog Archive page to view our post.
  • If your Post Status was set to PendingReview, it would need to be approved before it appears on your Blog page. You can do this from the WordPress Dashboard by locating your post and setting it to published and saving the changes.

Adding an “add new post” button to any page

  • You may have noticed in our example blog archive page that we have an Add Vehicle button and are probably wondering how that is done. Well, it’s easy, all it takes is one small change under the Display Options dropdown on the New Post Form widget.
  • By setting the Show in Modal option to Yes. Your form will be displayed in a Popup after clicking on the Add Vehicle button. 
  • In our case, we simply dragged the New Post Form widget onto our blog Archive page below our content and then set the Show in Modal option to Yes and hit the green Update button. Now any logged-in post author can create a new post directly from the blog archive page.

End

Now you know how to use the New Post Form widget. Good luck!

Leave a Comment

Your email address will not be published. Required fields are marked *

Get the free plugin and receive updates