Build a Free WordPress Frontend Dashboard with ACF and Frontend Admin

Creating a WordPress frontend dashboard can be a valuable addition to your website. It allows users to interact with your site in a more intuitive and user-friendly way. Together with WPTuts you will learn how to build a frontend dashboard using two plugins with free options: Advanced Custom Fields (ACF) and Frontend Admin.

Understanding the Basics

A WordPress frontend dashboard is a user interface that allows users to interact with your website from the frontend, rather than the WordPress admin area. The plugins we’ll be using, ACF and Frontend Admin, make the process of creating a frontend dashboard straightforward and accessible.

Setting Up the Required Plugins

Before we start building our frontend dashboard, we need to install and activate the necessary plugins. Here’s how:

1. Go to your WordPress admin area.
2. Navigate to “Plugins > Add New”.
3. Search for “Advanced Custom Fields” and “Frontend Admin“.
4. Install and activate both plugins.

Creating Custom Fields with ACF

Before creating our forms, we need to set up custom fields using ACF. These fields will be used in our forms.

1. In your WordPress admin area, go to “Custom Fields > Field Groups”.
2. Click “Add New”.
3. Name your field group (e.g., “Post Fields”).
4. Click “Add Field”.
5. Name your field (e.g., “Price”) and select the appropriate field type (e.g., “Number”).
6. Repeat the process to add a “Location” field, but select “Text” from the “Field Type” dropdown menu.
7. Click “Publish”.

Creating a New Post Form

With our plugins installed and activated, and our custom fields set up, we can start building our frontend dashboard. The first step is to create a new post form. This form will allow users to create new posts from the frontend of your website.

1. In your WordPress admin area, go to “Frontend Admin > Forms”.
2. Click “Add New”.
3. Name your form (e.g., “New Post Form”).
4. Select “New Post” from the “Form Type” dropdown menu.
5. Click “Save Changes”.

Now, we need to add custom fields to our form. For this example, we’ll add a “Price” field and a “Location” field.

1. In your form settings, click “Add Field”.
2. Select “Number” from the “Field Type” dropdown menu.
3. Name your field “Price”.
4. Click “Save Changes”.
5. Repeat the process to add a “Location” field, but select “Text” from the “Field Type” dropdown menu.

Finally, we’ll add a taxonomy (category) to our form.

1. Click “Add Field”.
2. Select “Taxonomy” from the “Field Type” dropdown menu.
3. Name your field “Category”.
4. Click “Save Changes”.

Creating an Edit Post Form

Next, we’ll create an edit post form. This form will allow users to edit their existing posts from the frontend of your website.

1. Go to “Frontend Admin > Forms”.
2. Click “Add New”.
3. Name your form (e.g., “Edit Post Form”).
4. Select “Edit Post” from the “Form Type” dropdown menu.
5. Click “Save Changes”.

Add the same custom fields and taxonomy to your edit post form as you did for your new post form.

Testing the WordPress Dashboard Frontend Forms

After creating your forms, it’s important to test them to ensure they’re working correctly. To do this, create a new page for each form, add the form shortcode to the page, and then view the page on the frontend of your website.

Additional Settings and Features

Both ACF and Frontend Admin offer additional settings and features that you can explore. For example, Frontend Admin allows you to control user permissions, manage form submissions, and customize the appearance of your forms. ACF, on the other hand, offers features like shortcodes for individual fields and the ability to show fields on the frontend only.