How To Create A Read More Toggle In Posts

How To Create A Read More Toggle In Posts

If you would like to use a Read More Toggle in your post template, to display long content, credits, or other uses, all from the WP Block Editor for users and clients, you may do so using a Custom Field. In this example we will use the free version of Advanced Custom Fields. You may download this from the WP repository,  

Let』s Get Started

Follow along below. For this tutorial we will be leaving the default settings on most options for now. These can be modified later for more advanced customization.

Creating A Custom Field

Create a new custom field group (example: Read More). Create one custom field (example: Read More Content).  Give this a unique Field Label. The Field Name should auto generate. This will be the permalink key. Select the WYSIWYG editor from the Field Type dropdown.Fill in a description and other requirements here. For your first one, it is safe to leave everything below the field type dropdown at the default. These can be modified as needed later.Publish your custom field by clicking the blue button in the grey right column.

Note: If the Label Name or Field Name is edited at a later time, you will need to re-link it as shown in the Single Post steps below.

Create New Post(s)

Create at least one new post in order to populate the custom fields for the next step. You will see your custom field editor at the bottom of the block editor content. You may use this just like the classic editor and insert text, headings and media. Publish or update your post(s).

Create Or Edit Your Single Post Template

In your single post template, insert a Toggle Widget just below the Post Content Widget. Set the description to the dynamic ACF field (example: Read More), by using the small dynamic icon , and in the settings we will choose the key we named in our steps above (example: Read More Content). Publish or Update your Single Post Template with the correct display conditions. For more info about the Single Post Template click here. 

View The New Post(s)

If you have gotten the steps correct you will now see the Read More Toggle in your posts. You may edit the Single Post Template from the admin bar for further styling modifications.

發表回覆

您的電子郵箱地址不會被公開。 必填項已用 * 標註