Post List inspired by Spiegel.de

We really enjoy our SPIEGEL+ Membership and we’re genuinely in aw with the work they do on a daily basis, even when sometimes our opinion differ.

We wanted to have a very basic version of how they style their posts in the DER SPIEGEL App on Android. We’re using here a dynamic shortcode with added styling, which will then look like this:

Snippets

gooloo 1200x728

„Add a for “Logged-in”, “Logged-out”, and “All” Users selection to WordPress Navigation“

Hi, with the following code snippet there will appear a selection dropdown in your WordPress Navigation’s Items that will hide them for logged-out, logged-in, or all users or more so show them to only the specified users. This code is extremely helpful for things like Login and Logout Links in your Navigation. Add to your […]

3 Min | 0
gooloo 1200x728

„Aggressively block all notifications in WordPress Backend“

3 Min |
0
goolooDE
gooloo 1200x728

„Disable WordPress Link Security“

1 Min |
0
goolooDE
gooloo 1200x728

„Add HTML Tags to Author Bio“

1 Min |
0
goolooDE
gooloo 1200x728

„Add HSTS and Preload via PHP Snippet“

1 Min |
0
goolooDE

For this, we used the following shortcode:

[spiegel_posts category_id="16" posts_per_page="5"]

It does the following:

  • Fetches the category’s posts by using the provided ID
  • Adds the name of the category on top of the bright banner at the top.
  • Shows author profile picture or avatar
  • Fetches the post excerpt
  • Fetches the amount of comments
  • Evaluates the estimated time to read by using a count of 200 words per minute as the default, therefore 200 words = 1 minute
  • Fetches the author
  • Fetches the comments and links to each posts #respond URL.
  • NOTE: For the comments url to work, you need to disable the last trailing slash in your Post’s URL, by modifying the permalink structur in Settings > Permalinks.
  • NOTE: This Snippet relies on Font Awesome 6.0 or higher.

Maximum number of posts is 5, as this code is only meant for up to 5 posts. You can customize it at any time.

This Code can be stacked multiple times on a page, reflecting multiple categories below each other. To use this shortcode, add the following to your functions.php, or by using a Code Snippet Plugin.

Change the styling however you want. We’ve used or main blog’s color scheme, www.gooloo.de. Therefore it’s particularly bright. But you can tone it down at any given stage.

// Add the shortcode
function spiegel_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'category_id' => '',
            'posts_per_page' => 5,
        ),
        $atts,
        'spiegel_posts'
    );

    $category = get_category($atts['category_id']);
    $category_name = $category->name;
    $category_description = category_description($atts['category_id']);

    $query_args = array(
        'cat' => $atts['category_id'],
        'posts_per_page' => $atts['posts_per_page'],
    );

    $query = new WP_Query($query_args);

    ob_start();

    if ($query->have_posts()) {
        echo '<div class="spiegel-category" style="margin-bottom: 25px;">';
        echo '<h2 class="category-title">' . esc_html($category_name) . '</h2>';
        echo '<div class="category-description">' . wp_kses_post($category_description) . '</div>';
        echo '<div class="spiegel-posts">';
        
        $post_count = 0;
        while ($query->have_posts()) {
            $query->the_post();
            $reading_time = ceil(str_word_count(get_the_content()) / 200);
            $comment_count = get_comments_number();
            $author_id = get_the_author_meta('ID');
            $author_avatar = get_avatar_url($author_id, ['size' => 60]);
            $post_count++;
            
            if ($post_count == 1) {
                // First post style
                ?>
                <div class="spiegel-post first-post">
                    <a href="<?php the_permalink(); ?>">
                        <div class="post-thumbnail-large">
                            <?php the_post_thumbnail('large'); ?>
                        </div>
                        <div class="post-content">
                            <p class="post-title">„<?php the_title(); ?>“</p>
                        </a>
                        <p><?php echo get_the_excerpt(); ?></p>
                        <span class="reading-time">
                            <i class="fa fa-clock"></i> <?php echo $reading_time; ?> Min 
                            | <a href="<?php the_permalink(); ?>#respond"><i class="fa fa-comments"></i> <?php echo $comment_count; ?></a>
                        </span>
                    </div>
                </div>
                <?php
            } else {
                // Second to fifth post style
                ?>
                <div class="spiegel-post small-post">
                    <a href="<?php the_permalink(); ?>">
                        <div class="post-thumbnail-small">
                            <?php the_post_thumbnail('thumbnail'); ?>
                        </div>
                        <div class="post-content">
                            <p class="post-title">„<?php the_title(); ?>“</p>
                            <p class="post-author">Von <?php echo get_the_author(); ?></p>
                            <span class="reading-time">
                                <i class="fa fa-clock"></i> <?php echo $reading_time; ?> Min 
                                | <a href="<?php the_permalink(); ?>#respond"><i class="fa fa-comments"></i> <?php echo $comment_count; ?></a>
                            </span>
                        </div>
                    </a>
                    <img src="<?php echo esc_url($author_avatar); ?>" alt="<?php echo esc_attr(get_the_author()); ?>" class="author-avatar">
                </div>
                <?php
            }
        }
        
        echo '</div>'; // Close spiegel-posts
        echo '</div>'; // Close spiegel-category
    }

    wp_reset_postdata();

    return ob_get_clean();
}
add_shortcode('spiegel_posts', 'spiegel_shortcode');

// Add custom styles
function spiegel_custom_styles() {
    ?>
    <style>
        .spiegel-category {
            margin-bottom: 25px;
        }
        .category-title {
            font-size: 24px;
            background: linear-gradient(to right, #ff0080, #ff4da6);
            color: #000;
            padding: 10px;
            margin-bottom: 10px;
        }
        .category-description {
            font-size: 16px;
            margin-bottom: 20px;
            color: #000;
        }
        .spiegel-posts {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin: 20px;
        }
        .spiegel-post {
            display: flex;
            align-items: center;
            border-bottom: 4px dotted grey;
            padding: 10px 0;
            text-decoration: none; /* Remove underline from links */
            color: #000;
            width: 100%;
			background: linear-gradient(to right, rgb(250, 250, 250, 0.3) 0%, rgb(225, 234, 238, 0.3) 90%);
			margin-bottom: 15px; /* Added margin between posts */
        }
        .spiegel-post a {
            text-decoration: none; /* Ensure no underline on links */
        }
        .first-post .post-thumbnail-large img {
            width: 100%;
            height: auto;
			margin-bottom: 10px; /* Added margin below image */
        }
        .small-post .post-thumbnail-small img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            margin-right: 10px;
			margin-bottom: auto; /* Align with content */
        }
        .small-post {
            flex-direction: row;
			padding-left: 10px; /* Reduced left padding */
        }
        .post-content {
            flex-grow: 1;
			padding-left: 10px; /* Added padding between elements */
		}
		.post-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.post-author, .reading-time {
			font-size: 14px;
			color: #000;
		}
		.author-avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			border: 1px solid #fff;
			margin-left: auto; /* Align to right */
		}
    </style>
    <?php
}
add_action('wp_head', 'spiegel_custom_styles');

Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *