The Latest Posts Block allows you to dynamically display your most recent posts in an organized and visually appealing layout. This powerful block helps keep your website content fresh and encourages visitors to explore more of your articles.
Prerequisites:
• Active installation of Magazine Blocks (Free or Pro)
• For installation instructions, see our Installation Guide for Magazine Blocks Free or Magazine Blocks Pro Installation Guide.
Getting Started #
Here’s how you can start using the latest posts block:
Enable the Latest Posts Block #
- Navigate to Magazine Blocks > Blocks in your WordPress website.
- Locate the Latest Posts Block in the list.
- Toggle the switch to enable the block if it’s disabled.
Add the Latest Posts Block to Your Page/Post #
- Go to the page/post where you want to add the Latest Posts Block.
- Click the [+] button in the editor to open the block inserter.
- Search for “Latest Posts” under Magazine Blocks.
- Click or drag the block into your editor.
Customization Options for Latest Posts Block #
Like other blocks from Magazine Blocks, you can customize the Latest Posts block through the following settings. So, click on the block, and you will see the block settings on the right side of your interface:
You can fully customize both the functionality and appearance of your post displays using these three settings: General, Style, and Advanced.
General Settings #
This panel contains all content and structural options that determine what posts are displayed and how they’re organized.
General
- Preset: Click on the edit icon to choose between two different layout designs, which further gives you different styles.
- Column: Display posts in either 2 or 4 columns.
Query
- Category: Select specific categories to include.
- Tag: Filter posts by selected tags.
- Order By: Sort by Date, Title, or Random.
- Order: Choose Ascending or Descending order to display posts.
- Excluded Category: Specify categories to exclude from display.
- Authors: Filter posts by specific authors.
- Offset: Skip a number of posts from the beginning.
Heading
- Enable: Toggle to show/hide the section heading.
- Label: Change the default label from Hot Topics, the default label, to anything else.
Post Title
- Enable: Toggle to show/hide post titles.
- HTML Markup: Choose heading level to show (H1, H2, H3, H4, H5, or H6).
Image
For the image, you can choose the hover animation so that visitors can see some animation when they hover over the image.
- Hover Animation: Select effects like Zoom In, Zoom Out, Opacity, etc.
Meta
- Position: Control the placement of meta information
- Author: Toggle to show the author name for the latest post
- Date: Toggle to show date and vice-versa
Other General Settings
- Excerpt: Enable/disable excerpt in the latest post.
- Read More: Enable/disable the Read More link
- Pagination: Enable/disable pagination controls
Style #
The Style panel lets you customize the visual appearance of every element within your Latest Posts Block.
General
Gap: Adjust the spacing between posts by dragging the slider. You can customize for Desktop, Mobile, and Tablet.
Heading
- Heading Color: Change the color of the section heading for normal and on hover activity.
- Border Color: Customize the heading’s border color from here.
Post Title
- Typography: Change the typography of the latest post title by clicking on the edit icon. You can also set weight, font size, line height, letter spacing, and style from here.
- Text Color: Change the text color of the post title from here.
Image
- Height: Control the height of featured images from here by dragging the slider.
Meta
- Icon Color: Change the color of the meta icon from here.
- Link Color: Change the color of the links, like author and date, from here.
Excerpt: Similarly, you can also change the text color and margin of the excerpt text.
Read More
- Text Color: Customize the read more link text color.
- Background: Change the background color of the Read More link.
- Spacing: Control margin around the read more link.
- Padding: Adjust the internal spacing of the Read More link.
- Border: Enable/disable border around read more link.
Pagination
- Text Color: Change the color of pagination text/numbers.
- Background: Adjust the background color of pagination controls.
- Spacing: Control margin around pagination elements.
- Padding: Customize padding within pagination controls.
- Border: Enable/disable border around pagination elements.
Advanced #
For fine-tuning and technical customizations, the Advanced panel provides spacing controls, element positioning, device-specific visibility options, and custom CSS/HTML capabilities that give you complete control over how the block integrates with your site.
Spacing
- Block Margin: Set specific margin values with units (px, em, %, rem) for different devices (Desktop, Tablet, Mobile).
- Block Padding: Customize padding with various units and device-specific settings.
Z-Index
- Control the stacking priority of the Latest Posts Block relative to other elements.
Responsive Condition
Selectively show/hide the block on different devices:
- Hide on Desktop: Toggle to hide the block on desktop screens.
- Hide on Tablet: Toggle to hide the block on tablet screens.
- Hide on Mobile: Toggle to hide the block on mobile screens.
Advanced
- CSS ID: Add a custom ID to style this specific block instance.
- Additional CSS Class(es): Add custom classes for styling.
- Block HTML: Change the HTML element (default is div, but you can use address, article, aside, etc.)
Example: Add a class latest-posts-width to customize only this block’s width:
.latest-posts-width {
width: 70%;
}Once you’re satisfied with everything, you can publish the page or post to let visitors see your latest posts. Next, using the Magazine Blocks, you can add an advertisement block to show ads on your website.
