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
„Image Alt Text based on Post Title“
Hello, with the following Code Snippet you can update all your Images Alt Texts by clicking save on your posts. This works by adding the Post Title as the Image Alt Text when you save a post. This works on all already existing images and posts; you’ll need to update them/save them again, for the […]
3 Min
| 0
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');
Leave a Reply