This guide explains how to integrate Bricks with Frontend Admin to enable complete front-end content management. It covers setup, layout design, interactive elements, and testing. You can follow these instructions whether you wish to understand each step or quickly download and use a provided template.

---

1. Introduction

Frontend Admin is a powerful solution for managing front-end content without exposing backend functionalities to users. It lets your site’s users update content (such as posts) directly on the front end, while the integration with Bricks gives you full control over styling and layout. This documentation walks you through creating a dynamic front-end dashboard that is fully customizable to fit your site’s brand.

Note: A downloadable template is available here: Download Template

---

2. Overview

The integration provides two primary functionalities:

• Front-end content management: Logged-in users (e.g., administrators or post authors) can add, edit, and delete posts directly from the front end.
• Custom styling and layout: Use Bricks to control the appearance and structure of each element, such as headings, images, and interactive buttons.

When a site visitor is not logged in, none of the content management elements (edit, delete, new post buttons, etc.) appear, ensuring secure and user-specific access.

---

3. Setting Up Your Bricks Environment

3.1. Accessing the Bricks Editor

• Open the Bricks editor.
• Search for “frontend” within the elements list.
• All Frontend Admin components should be available—these include interactive buttons and forms.

3.2. Using the Template

If you prefer not to build from scratch:

• Download the template linked in the video description.
• Upload the template to your site to quickly activate the front-end dashboard.

---

4. Building the Front-End Layout

This section covers the structure and styling of the dashboard.

4.1. Creating the Main Structure

1. Div with Padding and Heading
   • Add a Div element to your page.
   • Apply padding to provide space around inner elements.
   • Insert a Heading element to serve as the title for your posts section.
2. Posts Container
   • Add another Div beneath the heading.
   • This container will hold all individual posts.
   • Use a query loop to dynamically pull in all posts.
3. Individual Post Layout
   • Inside the posts container, add a nested Div for each post.
   • Within each post Div, include:
     • Post Title
     • Featured Image (pulled in via dynamic data)
     • Excerpt
     • A button element that will later link to a YouTube video (using an ACF URL field).

4.2. Styling Considerations

• Flex Display:
  Set the main posts container to use a flex display, allowing easy horizontal or vertical alignment.
• Image and Container Sizing:
  • Limit the image width to 150px (or as desired).
  • Set each inner post Div’s maximum width to 300px.
• Spacing:
  Add column gaps between posts to ensure clear separation.

---

5. Integrating Interactive Buttons

Here, you add functionality for post management through interactive elements.

5.1. Adding the Delete Button

• Drag and Drop:
  Locate and drag the Delete Post element into your post layout, positioning it next to any video or link buttons.
• Built-In Conditions:
  The element includes default conditions (e.g., only administrators or authors can see and activate it).
  To adjust:
  • Access the Conditions panel.
  • Modify permissions as needed.

5.2. Adding the Edit Button

The edit functionality requires two components: an Off-Canvas element (which displays the edit form) and an Edit Button to trigger it.

5.2.1. Setting Up the Off-Canvas

1. Place the Off-Canvas Element:
   • Drag an Off-Canvas widget and drop it just below the Delete button.
   • Remove any placeholder content except the toggle button initially.
2. Configure the Toggle:
   • Change the toggle icon to an “X” (using Font Awesome).
   • Adjust its positioning (e.g., absolute positioning with set top and side offsets) so it appears in the intended location.
3. Editing Content:
   • Inside the Off-Canvas, add a Heading (e.g., “Edit Post”).
   • Drag in the Edit Post Form element.
     • This form includes fields for post title, featured image, content, excerpt, and additional ACF fields if available.
4. Dynamic Classes:
   • Assign a dynamic class using a pattern such as postedit-{post_id}.
     This ensures that each post’s Off-Canvas is uniquely linked to its corresponding Edit button.

5.2.2. Creating the Edit Button

• Button Placement and Interaction:
  • Add a button labeled “Edit” above (or near) the Delete button.
  • Configure its interaction so that on click, it toggles the Off-Canvas with the corresponding dynamic class (postedit-{post_id}).
• Access Conditions:
  • Add conditions so only administrators or the post author can see and use the edit button.

---

6. Adding New Post Functionality

Much like editing, you can add a new post using a similar approach.

6.1. Setting Up the New Post Form

• Duplicate Off-Canvas:
  • Copy the Off-Canvas element used for editing.
  • Change its content:
    • Modify the heading to “New Post”.
    • Switch the internal element to a New Post Form (select the appropriate post type).
• Dynamic Class for New Posts:
  • Remove the dynamic post-edit class and assign a new class (e.g., newpost).

6.2. Creating the New Post Button

• Button Addition:
  • Insert a button labeled “New Post” above the Off-Canvas.
  • In the interactions panel, set the button to toggle the Off-Canvas identified by the newpost class.
• Styling:
  • If the button does not display a pointer cursor on hover, add a custom URL (for example, #) to correct this.
  • Center the button within its container by setting the container’s display to flex and aligning it vertically.

---

7. Final Testing and Customization

Before going live, ensure that all elements work as expected:

7.1. Testing Logged-In vs. Logged-Out Behavior

• Logged-In Users:
  • Test adding, editing, and deleting posts.
  • Verify the Off-Canvas correctly opens with the edit or new post forms.
• Logged-Out Users:
  • Open the page in an incognito window.
  • Confirm that none of the interactive elements appear.

7.2. Verifying Form Functionality

• Edit Form:
  Try updating a post (e.g., changing “JavaScript” to “JS”) and check that the changes appear immediately.
• Delete Form:
  Click the delete button and ensure that the post is removed.
• New Post Form:
  Fill out the new post form with title, content, featured image, and YouTube link, and verify that the new post appears on the front end.

---

8. Conclusion

Using Bricks with Frontend Admin provides a dynamic and secure way to manage content directly on the front end. This guide covered everything from creating the layout, adding interactive buttons, to configuring permissions and testing functionality. By following these instructions, you’ll be able to provide your users with an intuitive front-end dashboard that maintains your site’s styling and branding.

Remember, you can download the ready-to-use template if you want to speed up the process. For further details, explore each section of this documentation and adjust settings (such as CSS or built-in conditions) to suit your project’s needs.