Many directory, listing, and membership sites need to allow users to manage their own items. In this tutorial, you will learn how to build a “My ads” page that allows users to edit and delete their ads.

Listing posts created by the logged-in user

To create a list of ads submitted by the logged-in user, we will create a View listing all ads and apply some filters.

Our View will include a filter that limits the results to ads created by the logged-in user only. Our ads are being submitted with the “pending” status, so we will add another filter to include pending ads (because the View will only list published items by default).

My ads page
My ads page

My Ads page
My Ads page

In your training site:
1. Go to Pages->Add new
2. Give your page a name, e.g., My ads
3. Click Save draft
4. Click Content Layout Editor

Adding a full-width cell
Adding a full-width cell

5. Draw a full row cell

View cell
View cell

6. Locate the View cell and insert it
7. On the Create new View cell screen stick to the default options and create the View

Creating a View that displays current user’s ads
Creating a View that displays current user’s ads

8. Give your View a name: e.g., Current User’s Ads.
9. In the Content Selection section, choose Ads.

Add filter
Add filter

10. Scroll down to the Filter section and click Add a filter.

Selecting the post author
Selecting the post author

A pop-up window opens.

11. From the drop-down menu, choose Post author.
12. Click Add query filter.

Selecting the Post author is the same as the logged in user option
Selecting the Post author is the same as the logged in user option

13. Select Post author is the same as the logged in user.
14. Save your filter.

Selecting Post status
Selecting Post status

We want to display both published posts and posts that await moderation, which are posts with the pending status.
15. Click the Add filter button again.
16. Choose Post status.
17. Click Add query filter.

Selecting published and pending posts
Selecting published and pending posts

18. Check the publish and pending fields.
19. Save your filter.

Now, we will decide how the output will look. We want to display the ads in a table and include the ad image, its title (as a link), the price field and the post status.

Selecting fields
Selecting fields

21. Scroll down to the Loop Output Editor.
22. Choose Loop Wizard.
23. Choose Table and make the table sortable by column.
24. Include the following fields:
a. Ad image
b. Post title with a link
c. Price
d. Post status
25. Check “Use a Content Template to group the fields in this View loop”
26. Click Finish
27. Click Save and Close this view and return to the layout

My ads page with a View
My ads page with a View

28. Preview your layout.

The page should only list the ads created by you.

Edit and delete links
Edit and delete links

Let us add the “Edit” and “Delete” links for each row of the table.
After completing this step, we want our page to look like the image to the left.

Let’s add the Edit link first.

Opening the View cell for editing
Opening the View cell for editing

1. Click on your View cell to open it for editing

Adding the Edit link
Adding the Edit link

2. Scroll down to the Templates for this View.
3. We want to add the “Edit” link right after the link to the ad, so you should position the cursor after the [wpv-post-link] shortcode.
4. Click Fields and Views

Adding the Edit link
Adding the Edit link

5. Locate the CRED edit-post link button and click on it

Adding the Edit link
Adding the Edit link

The CRED edit-post link screen opens

6. Click on the Using this layout – required drop-down list.

Here you will see all layouts that include CRED forms for editing posts.

7. Choose the Edit ad layout. That’s the layout we created in Part 5.

Adding the Edit link
Adding the Edit link

8. Scroll down the screen.
9. In the Link text field, remove %%POST_TITLE%%
10. Click Insert shortcode.

Edit link shortcode
Edit link shortcode

The link to your Edit form should now be added as a shortcode that reads: [toolset-edit-post-link layout_slug=”edit-ad”]Edit[/toolset-edit-post-link].

Next, we’ll add the Delete link.

Adding the Delete link
Adding the Delete link

1. Click on CRED Forms.
2. Choose Delete Post Link. A dialog with additional options appears.
3. In the Link text section enter the text that will be the visible part of your link. We want our link to be called “Delete” so remove the %TITLE% part from the default text.
4. Click Insert shortcode.

Delete link shortcode
Delete link shortcode

The link to delete your ads has been added as a shortcode.

Hint
If you want your Edit and Delete links to display in a new line, you can wrap the edit link and delete link shortcodes with the span HTML tag and make it a block element using CSS.

Adding additional HTML
Adding additional HTML

Click Save and Close this view and return to the layout.

Preview your layout. Your page should look like the following image:

My ads page with Edit and Delete links
My ads page with Edit and Delete links

If you are satisfied with the appearance, click Update to save your layout and publish the “My ads” page.
Test the new links you added.
After clicking on the Edit link, you should see the form for editing ads.
After clicking the Delete button, you should see a pop-up asking you for a confirmation to delete the ad.

Making sure that only the ad owner can edit and delete ads

The Edit and Delete links are ready, but you won’t see them if you view the “My ads” page as a Subscriber.

That’s because the training site includes the Toolset Access plugin. By default, Access displays links to Post Forms for the administrator only.

We will use the Access plugin to allow users with the Subscriber role to edit and delete their own posts from the front end.


Toolset hint
If you don’t use Toolset Access plugin, the Edit and Delete links will be visible for everyone.

For security reasons, it is recommended to use the Toolset Access plugin to set strict access control. We want to avoid others from editing and deleting ads if they have the “Edit” and “Delete” links.

Setting access permissions using the Toolset Access plugin
Setting access permissions using the Toolset Access plugin

  1. Go to Toolset->Access-> CRED Forms tab
  2. Expand the “Post Forms Front-end Access Group” section.
  3. Locate the “Delete Own Posts using CRED” row and check “Subscriber.”You have just granted permissions for Subscribers to delete their own posts, including ads.
  4. Locate the Edit Own Custom Post with CRED Form “Edit ad” row and check “Subscriber.”You have just granted permissions to users with the subscriber role to edit their own ads.
  5. Log in to your site as a Subscriber. You can use the user you registered while following Part 6.
  6. Visit the “My ads” page. You should see the “Edit” and “Delete” links now.
  7. Go ahead and open one of your ads for editing. You should see the Edit form you built in Part 5.

If you saved the URL of the Edit page now and tried to access it while logged in as a different user with the Subscriber role, you wouldn’t see the form. Your forms are secure now.

Note that the Edit links appears for published posts only. For pending ads you will see the Delete link only. Refer to the image below.

That’s because the ads in our training site are submitted with the pending review status (compare Part 1) and Toolset displays the Edit links for published post only. To see edit links for your new ads, you need to approve these ads first.

Edit links appears for published posts only
Edit links appears for published posts only

Hint
If a subscribed user clicks on the post link for an ad that hasn’t been approved yet, they will end up with a 404 error page. If you want to allow your Subscribers to see the single post pages for pending ads as well, go to Access Control -> Post types tab -> Ads and check Subscriber in the Preview any column.

How to allow your Subscribers to see the single post pages for pending ads
How to allow your Subscribers to see the single post pages for pending ads

Displaying the My ads page for logged-in users only

The “My ads” page is meant for logged-in users only so they can manage their ads. We need to hide this page from users that are not logged-in.

We will use Post Groups; the method introduced in Part 7.

Displaying the My ads page for logged-in users only
Displaying the My ads page for logged-in users only

1. Go to Toolset -> Access Control
2. Switch to the Post Groups tab
3. Locate the Logged in users only group (the one you created in Part 7)
4. Click Modify Group

Displaying the My ads page for logged-in users only
Displaying the My ads page for logged-in users only

5. Look up the My ads page and add it to your group.
6. Save your changes.

If you test your site on the front-end as a visitor (i.e., a user that is not logged-in), you will notice that the My ads page has disappeared from your navigation. If you visit that page by entering the correct URL in your browser, you will see a login form instead.

The My ads page is available only to logged-in users. Visitors will see the login form instead.

Login form
Login form

Final touches

To make the “My ads” page complete, let’s add the link to the “Place your free ad” page you created in Parts 1 and 2 and some custom styling.

Adding the link to the “Place a free ad” page
Adding the link to the “Place a free ad” page

1. Open the “My ads” page for editing.
2. Open the content layout for editing.
3. Add a new row.
4. Insert the Visual Editor cell.
5. Use the link button to Insert a link to the page for adding new ads.
6. Save your changes.
7. View the My ads page to test the new link.

Custom styling

Feel free to add custom styling to your table.
In our example we changed the table headings and added some custom styling to make the Edit and Delete links look like buttons.

Changes in table headings
Changes in table headings

Styling links to make them look like buttons.
Styling links to make them look like buttons.

The page should look like the following image:

My ads page
My ads page

Summary

1. We created a View with the Post author is the same as the logged in user filter to display ads belonging to the logged-in user.
2. For each post in that View we inserted the Edit and Delete links.
3. We used the Access Control -> CRED Forms features to allow users with the Subscriber role to edit and delete their own posts from the front end.
4. We hid the My ads page from visitors using Post Groups by Toolset Access.