Elementor Missing Features? Here’s How I Added a 5-Post Tile News Section Manually

Elementor is a powerful page builder, but sometimes its built-in widgets might not offer the exact layout or customization you need, especially for specific post layouts like a 5-post tile news section. While Elementor Pro’s Loop Grid and Posts widgets offer significant flexibility, and third-party add-ons like Unlimited Elements or PowerPack Elements provide “Post Tile” widgets, you might prefer a more manual, code-based approach for ultimate control or if you’re trying to achieve something very specific without additional plugins.

Here’s how you can manually add a 5-post tile news section in Elementor by leveraging custom HTML, CSS, and a little bit of PHP (using a Code Snippets plugin or your child theme’s functions.php). This method gives you complete control over the markup and styling.

Prerequisites:

1. Elementor (Free or Pro): You’ll need Elementor installed. Elementor Pro’s Theme Builder offers more seamless integration for custom loops, but the principles here can be adapted.
2. Code Snippets Plugin (Recommended) or Child Theme: To add custom PHP code without modifying core WordPress files directly. Examples include “Code Snippets” by WPCode.
3. Basic HTML, CSS, and PHP Knowledge: Familiarity with these will be essential for customizing the layout and fetching posts.

Step-by-Step Guide: Adding a 5-Post Tile News Section Manually

This approach involves creating a custom shortcode to fetch and display your posts, which you can then embed in Elementor using the “Shortcode” widget or “HTML” widget.

Step 1: Create a Custom PHP Function (Shortcode) to Fetch Posts

You’ll create a PHP function that queries your latest posts and formats them into the desired HTML structure.

1. Install and Activate “Code Snippets” Plugin: If you don’t have it, go to Plugins > Add New, search for “Code Snippets,” install, and activate it.
2. Add a New Snippet: Go to Snippets > Add New.
3. Name your Snippet: Give it a descriptive name, e.g., “5 Post News Tile Section.”
4. Paste the following PHP code:

<?php
function custom_5_post_news_section() {
    ob_start(); // Start output buffering

    $args = array(
        'post_type'      => 'post', // Or your custom post type like 'news'
        'posts_per_page' => 5,
        'order'          => 'DESC',
        'orderby'        => 'date',
        'post_status'    => 'publish',
        // Add more query parameters if needed (e.g., 'category_name', 'tag')
        // 'category_name' => 'featured-news',
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<div class="custom-news-section-wrapper">'; // Main wrapper

        $post_count = 0; // To keep track of the post position for different layouts

        while ($query->have_posts()) {
            $query->the_post();
            $post_count++;

            // Get post data
            $post_id    = get_the_ID();
            $post_title = get_the_title();
            $post_link  = get_permalink();
            $post_excerpt = get_the_excerpt();
            $thumbnail_url = get_the_post_thumbnail_url($post_id, 'medium_large'); // Or 'full', 'large', or a custom size

            // Apply different classes for layout (e.g., first post larger, others smaller)
            $post_class = 'news-tile';
            if ($post_count === 1) {
                $post_class .= ' first-large-tile';
            } else {
                $post_class .= ' small-tile';
            }

            ?>
            <div class="<?php echo esc_attr($post_class); ?>">
                <a href="<?php echo esc_url($post_link); ?>" class="news-tile-link">
                    <?php if ($thumbnail_url) : ?>
                        <div class="news-tile-image" style="background-image: url('<?php echo esc_url($thumbnail_url); ?>');"></div>
                    <?php endif; ?>
                    <div class="news-tile-content">
                        <h3 class="news-tile-title"><?php echo esc_html($post_title); ?></h3>
                        <?php if ($post_count !== 1) : // Display excerpt for smaller tiles ?>
                            <p class="news-tile-excerpt"><?php echo wp_trim_words($post_excerpt, 20, '...'); ?></p>
                        <?php endif; ?>
                        <span class="read-more">Read More &rarr;</span>
                    </div>
                </a>
            </div>
            <?php
        }
        echo '</div>'; // Close main wrapper
    } else {
        echo '<p>No news posts found.</p>';
    }

    wp_reset_postdata(); // Reset post data to original
    return ob_get_clean(); // Return the buffered content
}
add_shortcode('five_post_news', 'custom_5_post_news_section');

1. Important Notes on the PHP Code:
   • post_type: Change 'post' to your custom post type slug if you’re using one (e.g., 'news', 'articles').
   • posts_per_page: Set to 5 as per your requirement.
   • thumbnail_url: Adjust the image size ('medium_large') to suit your design.
   • HTML Structure: The HTML output here creates a main wrapper (custom-news-section-wrapper) and individual news-tile divs. The first post gets an additional first-large-tile class, and subsequent ones get small-tile. This allows for distinct styling.
   • Excerpt: The excerpt is only shown for the smaller tiles ($post_count !== 1). You can adjust this logic.
   • ob_start() and ob_get_clean(): These are used for output buffering, which is crucial for shortcodes to return content correctly instead of printing it directly.
   • add_shortcode('five_post_news', 'custom_5_post_news_section');: This registers your PHP function as a shortcode [five_post_news].
2. Save and Activate: Save the snippet and ensure it’s set to “Run Everywhere” or “Only on frontend.”

Step 2: Add Custom CSS for the Tile Layout

Now, you’ll add CSS to style your news tiles. You can add this CSS in a few ways:

• Elementor Custom CSS (Page/Section/Column Level): Edit your Elementor page, select the section or column where you’ll place the shortcode, go to Advanced > Custom CSS. This is good for page-specific styles.
• WordPress Customizer: Go to Appearance > Customize > Additional CSS. This applies globally.
• Child Theme Stylesheet: Add it to your style.css file in your child theme. This is best for global, maintainable styles.

Here’s an example of CSS to create a 5-post tile layout (one large, four smaller):

/* Custom News Section Styles */
.custom-news-section-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for smaller tiles */
    gap: 20px; /* Adjust gap as needed */
    margin-bottom: 30px; /* Space below the section */
}

.custom-news-section-wrapper .news-tile {
    background-color: #ffffff; /* White background for tiles */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.custom-news-section-wrapper .news-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.custom-news-section-wrapper .news-tile-link {
    text-decoration: none;
    color: inherit;
    display: flex; /* Flex for image and content */
    flex-direction: column; /* Stack image and content */
    height: 100%; /* Ensure link takes full height of tile */
}

.custom-news-section-wrapper .news-tile-image {
    width: 100%;
    height: 200px; /* Default height for images */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0; /* Prevent image from shrinking */
}

.custom-news-section-wrapper .news-tile-content {
    padding: 15px;
    flex-grow: 1; /* Allow content to take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push read more to bottom */
}

.custom-news-section-wrapper .news-tile-title {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #333;
}

.custom-news-section-wrapper .news-tile-excerpt {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.custom-news-section-wrapper .read-more {
    font-size: 14px;
    color: #0073e6; /* Elementor blue or your brand color */
    font-weight: bold;
    align-self: flex-start; /* Align to the start of the flex container */
}

/* Specific styling for the first (large) tile */
.custom-news-section-wrapper .first-large-tile {
    grid-column: 1 / -1; /* Span across both columns */
    display: flex;
    flex-direction: row; /* Image and content side-by-side */
    min-height: 350px; /* Adjust height for the large tile */
}

.custom-news-section-wrapper .first-large-tile .news-tile-image {
    width: 60%; /* Adjust image width for large tile */
    height: auto; /* Allow height to adapt */
    min-height: 350px; /* Ensure minimum height */
}

.custom-news-section-wrapper .first-large-tile .news-tile-content {
    width: 40%; /* Adjust content width for large tile */
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

.custom-news-section-wrapper .first-large-tile .news-tile-title {
    font-size: 32px; /* Larger title for the first post */
    margin-bottom: 15px;
}

.custom-news-section-wrapper .first-large-tile .news-tile-excerpt {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767px) {
    .custom-news-section-wrapper {
        grid-template-columns: 1fr; /* Single column on mobile */
    }

    .custom-news-section-wrapper .first-large-tile {
        flex-direction: column; /* Stack image and content on mobile */
        min-height: unset;
    }

    .custom-news-section-wrapper .first-large-tile .news-tile-image {
        width: 100%;
        height: 250px; /* Adjust height for mobile large tile image */
        min-height: unset;
    }

    .custom-news-section-wrapper .first-large-tile .news-tile-content {
        width: 100%;
        padding: 15px;
        text-align: center;
    }

    .custom-news-section-wrapper .first-large-tile .news-tile-title {
        font-size: 24px;
    }
}

Step 3: Add the Shortcode to Your Elementor Page

1. Edit your page with Elementor.
2. Drag and Drop the Shortcode Widget: Search for the “Shortcode” widget (available in both free and pro versions) or the “HTML” widget.
3. Insert Your Shortcode: In the shortcode widget’s content field, simply paste your shortcode:

   [five_post_news]
   

4. Update and Preview: Save your Elementor page and view it on the frontend. You should now see your 5-post news section.

Benefits of this Manual Approach:

• Complete Control: You have 100% control over the HTML markup, CSS styling, and the exact WordPress query. This is ideal for highly custom designs that Elementor widgets or add-ons might not offer out-of-the-box.
• No Extra Plugin Dependencies (for layout): While you use a Code Snippets plugin for the PHP, you’re not relying on a specific Elementor add-on for the post display logic, which can reduce plugin bloat.
• Performance: A well-optimized custom shortcode can sometimes be more performant than complex widgets with many options, as it only renders what you explicitly define.
• Reusable: The shortcode can be used on any page or post on your site.

Potential Drawbacks:

• Requires Coding Knowledge: This method assumes you are comfortable with HTML, CSS, and basic PHP.
• Less “Visual” in Elementor Editor: You won’t see the full tiled layout directly in the Elementor editor preview. You’ll primarily see the shortcode, and the styling will apply on the frontend.
• Maintenance: If you need to change the layout or query, you’ll have to edit the PHP code snippet and CSS.

By following these steps, you can create a highly customized 5-post tile news section in Elementor that precisely matches your design requirements, even if the built-in features fall short.