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.
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).
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
5. Draw a full row 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
8. Give your View a name: e.g., Current User’s Ads.
9. In the Content Selection section, choose Ads.
10. Scroll down to the Filter section and click Add a filter.
A pop-up window opens.
11. From the drop-down menu, choose Post author.
12. Click Add query filter.
13. Select Post author is the same as the logged in user.
14. Save your filter.
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.
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.
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
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
28. Preview your layout.
The page should only list the ads created by you.
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.
1. Click on your View cell to open it for editing
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
5. Locate the CRED edit-post link button and click on it
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.
8. Scroll down the screen.
9. In the Link text field, remove %%POST_TITLE%%
10. Click Insert 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.
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.
The link to delete your ads has been added as a shortcode.
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.
Click Save and Close this view and return to the layout.
Preview your layout. Your page should look like the following image:
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.
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.
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.
- Go to Toolset->Access-> CRED Forms tab
- Expand the “Post Forms Front-end Access Group” section.
- 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.
- 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.
- Log in to your site as a Subscriber. You can use the user you registered while following Part 6.
- Visit the “My ads” page. You should see the “Edit” and “Delete” links now.
- 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.
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.
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.
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
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.
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.
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.
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.
The page should look like the following image:
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.