Recent Posts Element
The Recent Posts Element lists your latest blog posts in columns, each with its featured image, title, meta data such as the date, and a short excerpt. New posts appear automatically as soon as they are published, so the list never has to be updated by hand.
It is a compact way to bring news onto the home page, a service page or a sidebar area. Three layouts cover most needs: a standard layout with the image above the text, thumbnails next to the text, or a date box on the side instead of an image.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Recent Posts Element
Add the Recent Posts Element and choose a Layout, the Number of Columns (up to six) and the Posts Per Page. Decide which posts appear with Pull Posts By category or tag, then pick the Categories or Tags to include or exclude; leave them empty to show all posts. Post Offset skips the newest posts, for example when the latest one is already featured elsewhere on the page.
Next decide what each post shows. Show Thumbnail displays the featured image, with Picture Size and a Hover Type effect. Show Title and Title Size control the heading, Show Meta and its sub-options the author, categories, date, comment count and tags. Text display shows an excerpt, the full content or no text, and Excerpt Length sets the number of words.
Pagination Type adds numbered pages, a load more button or infinite scrolling below the posts. It has no effect when Posts Per Page is set to -1, because all posts are shown at once then. Content Alignment is available for the standard layout only.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Layout | Select the layout for the element. |
| Picture Size | Fixed = width and height will be fixed. Auto = width and height will adjust to the image. |
| Hover Type | Select the hover effect type. |
| Number of Columns | Select the number of columns to display. |
| Posts Per Page | Select number of posts per page. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading. |
| Post Status | Select the status(es) of the posts that should be included or leave blank for published only posts. Posts with the selected statuses are shown to all visitors (title, excerpt and image; drafts, pending and scheduled posts without a link). |
| Post Offset | The number of posts to skip. for example 1. |
| Pull Posts By | Choose to show posts by category or tag. |
| Categories | Select a category or leave blank for all. |
| Exclude Categories | Select a category to exclude. |
| Tags | Select a tag or leave blank for all. |
| Exclude Tags | Select a tag to exclude. |
| Show Thumbnail | Display the post featured image. |
| Show Title | Display the post title below the featured image. |
| Title Size | Choose HTML tag of the title heading, either div or the heading tag, h1-h6. |
| Title Typography | Controls the title typography. |
| Show Meta | Choose to show all meta data. |
| Show Author Name | Choose to show the author. |
| Show Categories | Choose to show the categories. |
| Show Date | Choose to show the date. |
| Show Comment Count | Choose to show the comments. |
| Show Tags | Choose to show the tags. |
| Content Alignment | Select the alignment of contents. |
| Text display | Choose to display the post excerpt. |
| Excerpt Length | Controls the number of words in the excerpts. |
| Strip HTML | Strip HTML from the post excerpt. |
| Pagination Type | Choose the type of pagination. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Choose the Title Size to fit the page structure: under an H2 section heading, H3 or H4 titles keep the heading order correct.
- Leave Post Status empty on public pages. If you add drafts, scheduled, pending or private posts there, their titles and excerpts are listed for every visitor, only without a working link.
- The Date on Side layout never shows the featured image; the thumbnail and hover options are hidden for it.
- Give all posts a featured image of the same aspect ratio, or use Picture Size set to Fixed, so the columns line up.
- Strip HTML removes formatting from excerpts, which keeps the list clean when posts start with images, lists or headings.