Custom WordPress Frontend Dashboard With A Free Plugin

In this tutorial & article, we’ll break down how to build a clean, functional dashboard using the free Frontend Admin plugin and Bricks Builder.

This approach is ideal for user-submitted content sites, membership platforms, or client sites that require a simplified, branded experience.

What You’ll Learn

• How to build a frontend post management dashboard
• How to create pages for adding, editing, and deleting posts
• How to use the Frontend Admin plugin with Bricks Builder
• How to pass dynamic post data between pages
• Best practices for UX and security in frontend dashboards

Tools You’ll Need

• Bricks Builder
• Frontend Admin (Free)

Step 1: Set the Foundation

Create three essential pages:

• Manage Posts – for viewing and accessing all user posts
• Add New Post – for creating content
• Edit Post – for editing existing content

These pages can remain blank for now. You’ll populate them with dynamic content shortly.

Step 2: Create a Post Loop on the Manage Posts Page

Using Bricks Builder:

1. Add a container and insert a block named post-card.
2. Inside this, add:
   • Featured image
   • Post Title
   • Post excerpt
   • Edit button
   • (Later, a delete button)

Apply semantic HTML: change the container to an unordered list and each post card to a list item.

Enable the query loop and set it to display WordPress posts ordered by publish date.

Then, style the layout using a CSS grid (3 columns, gap spacing, etc.). Apply dynamic data to each element, such as the post title and featured image.

Step 3: Build the Edit Post Form

In Frontend Admin:

1. Go to Forms > Add New Form > select Edit Post type.
2. Configure fields:
   • Post to Edit: Set to hidden
   • Post Status: Hidden, set to “pending” (requires admin review)
   • Post Title, Excerpt, Content, Featured Image, Categories
   • Use a WYSIWYG editor for content
   • Set media size restrictions and allowed file types if needed
3. Under form settings:
   • Choose to reload the current page after submit
   • Set a success message
   • Apply visibility conditions in Bricks (e.g., only show the form to logged-in admins)
4. Copy the shortcode and paste it into the Edit Post page using a Bricks shortcode element.
5. Link your edit buttons in the post cards to the edit page using dynamic URLs:
6. /edit-post/?post_ID={2918}

Step 4: Create the Add New Post Form

1. In Frontend Admin, create a New Post form.
2. Configure fields as above:
   • Hide Post Status and set it to “draft.”
   • Add all necessary fields: Title, Excerpt, Content, Featured Image, Categories.
3. Paste the form’s shortcode into the Add New Post page in Bricks.

Now, users can submit posts via the frontend, and they’ll be saved as drafts pending admin approval.

Step 5: Add a Delete Post Option

1. Create a new ‘Delete Post’ form in the Frontend Admin.
2. Configure:
   • Set the action to Delete Post
   • Choose whether to skip the trash (we recommend keeping it enabled for safety)
3. Add the shortcode as a second button on each post card.
4. When clicked, this button will move posts to the trash after confirmation.

Final Touches

• Security: Utilise Bricks’ conditional logic to restrict access to forms based on user role.
• UX Enhancements: Add success messages, style the buttons, and optionally use modal windows for forms.
• Scalability: You can use the same process for other post types, custom taxonomies, or user profiles.

Conclusion

With Bricks Builder and the free Frontend Admin plugin, you can build robust, intuitive frontend dashboards in WordPress, no coding required. From managing posts to handling secure deletions, everything stays in the front end, offering a cleaner and more controlled experience for your users or clients.