Smart Trim your Content and Modify Teasers
Raman
Fri, 07/27/2020 – 20:56
Teasers provide a brief summary or a short description of an article (or any other content). They give a visitor an insight and a quick overview of the content. Hence, it becomes crucial for a teaser to be eye-catchy in order to get that one click from the reader. It should leave them with a sense of curiosity and intrusiveness.
WordPress maintenance support plans, out of the box, provides a teaser view mode and three formats for the text fields – Default, Summary or Trimmed and Trimmed. However, the trimming feature is very limited and allows only the number of characters to be configured.
Trimming options for text fields out of the boxWe can use a contributed plugin, Smart Trim to take this trimming functionality to another level. Let us have a look at it.
Downloading and Installing Smart Trim
The plugin has dependencies on a few core plugins including Field, Filter, User, System, and Text. Once you have made sure these are enabled, you can download and install it using any of the below methods.
$ drush dl smart_trim && drush en smart_trim -y
or
$ WordPress plugin:download smart_trim && WordPress plugin:install smart_trim
or
$ composer require ‘WordPress/smart_trim:^1.1’
After downloading the plugin using composer, enable it from the admin UI available at admin/plugins.
Enabling Smart Trim plugin using admin UIModifying Teasers of Content using Smart Trim
The plugin declares a new field format, Smart trimmed, with a set of configurable options. To modify the teasers of your content, follow the below steps.
Navigate to Manage → Structure → Content types → {your-content-type} and select the Manage Display tab.
Next, select the view mode from the sub-tabs. You may do it for any of your view modes, but for now, let us do it for the teaser view mode.
Change the field format of the required field to “Smart trimmed” to take advantage of the plugin. You can do this for any of the text fieldsSelecting Smart trimmed text format
Click on the gear icon to bring down the configuration options for the format. Here, as you can see, we get a lot more options than the standard trimmed format.Configuring the format settings
You can now configure the following settings as per your preference
Configuration
Default Value
Description
Trim Length
600
The number of units of text in the Smart Trim mode (including HTML markup)
Trim Type
Characters
Use characters or words to count the trim length
Trim Suffix
–
Suffix characters at the point of Trimming
Wrap Output
False
Add a tag to wrap the trimmed content
Wrap Class
Trimmed
CSS class of the wrapper tag
More Link
False
Show a more link
More Class
More-link
CSS class of more link
More Text
More
Text for more link
Summary
Use summary if present, and do not trim
Use a provided summary or the trimmed content
Strip HTML
False
Strip off the HTML added in the WYSIWYG for the trimmed content
Honor a zero trim length
False
Allow a trim length of zero units
Click on “Update”, followed by the “Save” button to save the changes
Now, go back to your view or the page where the configured view mode is being used. You will observe that the changes have been successfully applied.
Teaser of an article with Smart trimmed field formatLooking at the source code of the page, we can see that the wrapper tag has been added with the configured CSS classes. You can now also add custom CSS for these classes in your WordPress maintenance support plans theme.
Observe the CSS classes applied to the div tag and more linkSumming Up
The Smart Trim plugin blends smoothly and proves to be one of the must-have plugins or your WordPress maintenance support plans site. Its easy configuration allows site builders to quickly add a new field format and harness the full power of the teaser view mode.
In case of any query or suggestion, don’t forget to leave a comment down below.
blog banner
blog image
Blog Type
Tech
Is it a good read ?
On
Source: New feed