Archived topic
Blog post makeover
7 replies · Started by Anders Nielsen on November 23, 2020
Hi
I need a redesign of the blog posts and and the blog in general.
What is the best way doing this?
Using the elements or a childtheme and rebuild from the start?
I have inserted a post-link to the design I'm trying to do
Hi there,
The post hero could be done with the Elements module (e.g Header Element) and some Custom code.
I would do something like this:
1. Create a new Header Element
2. Add this to the Header Element content:
<div class="hero-grid">
<div class="hero-image">
{{custom_field._thumbnail_id}}
</div>
<div class="hero-content">
<span class="date meta">Published on: {{post_date}}</span>
<span class="category meta">{{post_terms.category}}</span>
<h1>{{post_title}}</h1>
[page_hero_excerpt]
</div>
</div>
3. Set Display Rules to Entire Posts.
4. Now we need to add a PHP snippet to create our post excerpt shortcode [page_hero_excerpt]:
function db_page_hero_excerpt() {
ob_start();
global $post;
if ( has_excerpt( $post->ID ) ) {
?>
<div class="page-hero-excerpt">
<?php echo the_excerpt(); ?>
</div>
<?php
}
return ob_get_clean();
}
add_shortcode( 'page_hero_excerpt','db_page_hero_excerpt' );
5. To set the size of the Featured Image that is pulled into the header element you can add this PHP Snippet:
add_filter( 'generate_hero_thumbnail_id_size', function() {
return 'large';
} );
You can change large for any registered attachment size, without that filter it will default to medium
6. Now some CSS to make the 2 column grid on desktop and style the elements:
@media(min-width: 769px) {
.hero-grid {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.hero-grid>div {
flex: 1 0 50%;
padding: 40px;
}
}
.hero-grid .meta {
display: block;
}
.hero-grid>div.hero-content {
padding: 30px;
}
Thanks David - i'll try :)
Let us know!
Hi David
I found this plugin.. is it yours at generatepress?
And can it setup the the blog overview?
Yes, WP Show Posts is also created by Tom.
Its designed to display post lists on static pages. It is how the Dispatch Sites home page is built:
https://generatepress.com/site-library/#dispatch
Although you can replace the Blog page and Taxonomy archives ( see here ) with WP Show Posts, i personally only use it on static pages, and style the GP blog to match. aka how Dispatch works.
ok, look interesting... my only concern is, the update frequency.. it's been updated recently - but two years between updates?
Will the plugin be at your focus in the future?
:)
WP Show Posts has taken a lower priority in our development stack. Mainly because it did such a good job when it was first conceived. There are plans for updates, they will never as frequent as GeneratePress and GenerateBlocks, as there isn't a great deal of improvements to be made. The focus will be a Block for the plugin.