NOTE: No parent theme files were harmed, modified, or otherwise abused in the making of this blog post.
Sometimes I do learn things! I was able to customize the layout of my blog using a child theme, some CSS, and some additions to my child theme’s functions.php file.
The Elemin theme from Themify is a great theme and I’m a satisfied customer. The only settings on my theme are on the Default Index Layout as follows:
- Display the sidebar on the right
- Display excerpts and not the full post content
- Post layout is in 2 columns
- Image size is 75×75 (for the featured image)
All the other settings are left to the default. Any customized CSS is handled in my child theme’s style.css file.
I like the layout of 2 columns of excerpts but also wanted to have 2 full content posts on top. My blog setting is to display 10 posts per page so that’s two posts on top and 8 excerpts afterwards in a 2 columns. Oh, and I want to maintain the scaling capability of the theme and do not want to modify copies of the parent theme files.
That turned out to be pretty straight forward. WordPress assigns a CSS class tag to each post with the post ID appended to it. So if this post ID was 4153, then a CSS class tag of post-4153 would be embedded in the generated HTML code. It’s done that way exactly so you can style individual posts like this.
For the latest 2 posts (for example ID 4153 and 4123), I want to generate CSS so that the width is now 100% and the featured picture, tagged with post-image class, is hidden. Also the second post I want to float left and adjust the left margin.
That CSS looks like this:
.post-4153 {
width: 100% !important;
}
.post-4153 .post-image a {
display: none !important;
}
.post-4123 {
width: 100% !important;
float: left !important;
margin-left: 0 !important;
}
.post-4123 .post-image {
display: none;
}
To generate this output, I need to get the last 2 published post IDs, generate the CSS, and insert it into the header using this code in my child theme functions.php.
//
// Get the last two published post IDs.
//
$args = array(
'numberposts' => 2,
'post_status' => 'publish' );
$mh_post = wp_get_recent_posts( $args );
$mh_post_ID1 = $mh_post['0']['ID'];
$mh_post_ID2 = $mh_post['1']['ID'];
//
// Add my CSS to wp_head
//
add_action( 'wp_head' , 'mh_first_two_posts' );
//
// Create the code for the header
//
function mh_first_two_posts() {
global $mh_post_ID1, $mh_post_ID2;
if (is_home()) { ?>
<!-- child theme header -->
<style type='text/css'>
.post-<?php echo $mh_post_ID1; ?> {
width: 100% !important;
}
.post-<?php echo $mh_post_ID1; ?> .post-image {
display: none !important;
}
.post-<?php echo $mh_post_ID2; ?> {
width: 100% !important;
float: left !important;
margin-left: 0 !important;
}
.post-<?php echo $mh_post_ID2; ?> .post-image {
display: none;
}
</style>
<!-- /child theme header -->
<?php }
}
That takes care of the CSS, but that only get’s me 2 full width excerpts. I want those 2 posts to output the whole content not an excerpt. The rest of the posts I want to remain in the excerpt format using two columns.
Easy to do because I can filter the excerpt and restrict my changes to just those two identified posts.
//
// Add my filter to the excerpt
//
add_filter( 'the_excerpt' , 'mh_excerpt_to_content' );
//
// Swap the excerpt for those two posts with the content.
// Don't forget to apply the filters to the content.
//
function mh_excerpt_to_content( $content ) {
global $mh_post_ID1, $mh_post_ID2;
$mh_id = get_the_ID();
if ( ( $mh_id == $mh_post_ID1 ) or ( $mh_id == $mh_post_ID2 ) ) {
$content = get_the_content();
$content = apply_filters( 'the_content' , $content );
}
return $content;
}
That works. The only disadvantage to this method is that the apply_filters get’s ran twice. If you have something that adds to the content, it will run once when the loop runs and again when I run it in functions.php. For me this isn’t a problem but I do want to see how I can clean that up.
The full content posts don’t look exactly like they do as a single post but I’m satisfied for now and I’ll keep playing with it for my amusement. Doing it this way really appeals to me because I’m able to maintain my blog’s changes and not worry about breaking something in the parent theme.
Like this:
Like Loading...
