CRED allows you to create front-end forms for editing content and user information. In this tutorial, we show you how to display these editing forms, so that they can be used to edit the desired content.

Each post (page, post, or custom post type) and user has a URL on your site. This URL displays that item. For front-end editing, we need to create an alternative “editing mode”.

   
The normal “display mode” is how WordPress content appears The “editing mode” will include a form to edit the content, instead of displaying it

Designing the front-end “editing mode” for items

The “editing mode” for items includes a CRED form inside a template that we display when editing that kind of content. The CRED form includes the fields to edit. The template includes the form and anything else that we want to display on the page when editing.

1. Create the CRED form for editing

First, you will need to create a CRED form. When you create the form, you will choose what kind of content you wish to edit (note that, you will be editing content and not creating new content). You will include the editing fields that you need and style the form.

2. Create a layout or a Content Template that displays the editing form

Now that you have a form, you will need to display it. You need to create a layout or a Content Template that will be used to display the page with the editing form. Besides the form itself, this page can contain other relevant things that you want to show while editing.

Read documentation for version with:

Using Layouts

If you are using the Layouts plugin you need to create a layout that contains a CRED Post Form or CRED User Form cell for editing posts or user information. Consider this layout as the template for the “editing mode.”

Unlike the “display mode” layouts, which typically display the different fields that belong to the content and the “Post Content” cell, the “editing mode” layout must include the CRED form. Unless you want to display fields (not editable), this layout does not need to include anything else.

 

What to do Screenshot
Create the layout  
Insert the CRED cell  
Choose the CRED editing form that you already created  
Now you have a layout that includes the CRED form (and probably not much else).  

Using Content Templates without Layouts (expand)

If you are not using Layouts you need to create a Content Template that contains the CRED form.

What to do Screenshot
Create a new Content Template. No need to assign it to any contents.  
Click the CRED Forms button.  
In the dialog box that appears, select a post or a user editing form.
Finally, select whether to edit a current or specific post and click the Insert shortcode button.
The shortcode that renders the editing form is inserted into the Content Template.

Now that you have the form itself, and a layout or a Content Template to display it, you can add the links to the editing mode. You can add the links to the template to display “single” items, as well as to Views to display lists of items.

You will find the links to “edit more” in the Fields and Views menu, under the CRED editing section.

CRED Editing buttons in the "Fields and Views" dialog
CRED Editing buttons in the “Fields and Views” dialog

This is what these buttons do:

  • CRED edit-post link – inserts a link to the “edit mode” of a post (post, page, or custom type). You can choose to insert a link to edit a specific post, the currently displayed post, or a post in a View loop.
  • CRED edit-user link – inserts a link to the “edit mode” of a user. You can choose to insert a link to edit a specific user, the currently displayed user, or a user in a View loop.
  • CRED form message – displays the confirmation message that CRED wants to display after editing something. This needs to go into the template that displays the contents that are being edited. Please note that the CRED form message will not be displayed if your editing form is configured to “Display a message instead of a form” after submission.

Adding a link to “edit this post/user” to templates that display single items

When designing the templates for post types, you might want to display a link to edit the post that is being viewed.

The editing link displayed for single item
The editing link displayed for single item

Read documentation for version with:

Using Layouts

If you are using Layouts, you need to edit the respective layout template, use the Visual Editor cell, and use the Fields and Views button to insert the post editing link into it.

What to do Screenshot
Edit the template layout for your post type. In our example, we edited the layout for “Ads.”
Add a Visual Editor cell where you want the link for editing the post to appear.

The editing link displayed for single item
The editing link displayed for single item

In the Visual Editor cell’s dialog box, use the Fields and Views button to insert the CRED edit-post link.  

The process of selecting the settings for editing links is exactly the same as described in the previous sections.

Using Content Templates without Layouts

If you are not using Layouts, you need to edit the respective Content Template and insert the post editing link into it.

Using the Fields and Views button to insert post editing link into a Content Template
Using the Fields and Views button to insert post editing link into a Content Template

The process of selecting the settings for the editing links is exactly the same as described in the previous sections.

Adding links to “edit” to Views that list items

Let us say that you have a View that lists “Events” and you want to allow users with the right permission to edit each of the items in the list.

List of Events with an editing link for each
List of Events with an editing link for each

You will need to add the editing links to the View.

The easiest way to add fields to a View is to use the Loop Wizard. If the View is already created, you can use the Fields and Views button to add this link manually.

What to do Screenshot
Use the Loop Wizard to add the CRED edit-post link or CRED edit-user link field.  
Click the Edit button next to the CRED edit-post link or CRED edit-user link field to select the settings for them.
Please note that without setting up these options, the editing links will not work.
 
Select the settings for your editing links.

Select the Layout or Content Template that you created for the “editing mode,” which has the CRED form.

 

Displaying the CRED form messages

CRED allows you to display a success message after a post was edited. However, if the editing form is configured to redirect users back to the updated post the success message needs to be added to the template displaying that post.

Please note that you do not need to manually add the messages to the User forms because they will automatically be displayed.

Simple success message shown after editing the form
Simple success message shown after editing the form

To display the success message, you need to insert the CRED form message shortcode into the template. This shortcode displays the message only if the post was successfully edited by submitting the CRED editing form.

Read documentation for version with:

Using Layouts

What to do Screenshot
Edit the template layout and use a Visual Editor cell. In its editor, click the Fields and Views button and in the dialog box that appears click the CRED form message to insert the same.  
In the CRED form message dialog box, select the form message that should be displayed.  

 

Using Content Templates without Layouts

What to do Screenshot
Edit the Content Template and in the editor, click the Fields and Views button. In the dialog box that appears click the CRED form message to insert the same.  
In the CRED form message dialog box, select the form message that should be displayed.  

 

As you can see, this way, standard CRED form messages are displayed. You can customize the form messages to your liking on the CRED form editing page.

To use custom styling for displaying form messages, you can add any HTML markup to the messages for the related form.

Custom HTML markup added to the form's success message
Custom HTML markup added to the form’s success message

Using CRED editing forms to “edit your profile”

A specific use-case for CRED is to create forms for editing the profile of the user that is currently logged in.

“My Account” page with a link to edit your user profile The user profile editing page
   

 

In this case, the CRED form will only edit the “currently logged in user.” Therefore, instead of creating a template to display this form, we will insert it directly into a page, that we create for this purpose.

Read documentation for version with:

Using Layouts

To display an editing form directly on a page designed using a Content Layout, use the Visual Editor cell and the CRED Forms button, as displayed in the following table.

Steps Screenshot
Edit your page’s contents using Layouts.  
Insert the CRED User Form cell into the layout.  
Select the option to use an existing form and then select the user editing form you created previously (or you can create the form right here, if you have not created one already). Be sure to select or create a form that edits users.  

Using standard WordPress editor to insert the CRED form

To display an editing form directly on a page, you need to edit a page or a post and use the CRED Forms button, as displayed in the following table.

 

Steps Screenshot
1. Click the CRED Forms button.
2. Select an editing form to insert.
3. Select contents that will be edited by the form and click the Insert shortcode button.

 

After following the above steps, a CRED shortcode is inserted into the editor. On the front-end, the editing form will be displayed directly on that page.

Share your feedback

How do you like the workflow for using CRED editing forms? What do you think about this documentation page?

We prepared a very short survey and would greatly appreciate any feedback you share with us.

Share your feedback