Customizing the Jetpack Related Posts module to match a Genesis child theme

This is Day 26 in the 30 Day Blogging Challenge. You can read Day 25’s post here.

Adding the Jetpack Related Posts widget

I decided today that since I’ve written a lot of posts lately, it was time to add a related posts widget to my site.

After consulting this article on related posts plugins, I decided to use Jetpack’s Related Posts module, for 3 reasons:

1. It was recommended by the article.
2. I already have Jetpack installed on my site.
3. It doesn’t put too much load on the host when in use like (for example) Yet Another Related Posts Plugin.

There are some provisos for using Jetpack Related Posts, listed here.

Assuming you have Jetpack installed,  enable the module by going to Jetpack, selecting the Related Posts module and activate it. Then visit Jetpack > Settings and select Configure for the module. This takes you to the Settings > Reading screen. I chose to enable both options listed.

I was quite pleased with the location of the display for the Related Posts section, but I wanted to customize the look of it to match my site better. I’m using the Beautiful Pro theme, a Genesis child theme.

Here’s what the widget looks like on my theme out of the box:

Modifying the Jetpack Related Posts widget

It’s pretty nice, but I decided I wanted to customize the look of it a bit.

Here’s the code I ended up using. I had to enable and paste this code into the Custom CSS section of Jetpack to get it to stick.

/*Jetpack related posts style*/
div#jp-relatedposts {
	display: none;
	padding: 0 1em 1em 2em;
	margin: 2em 0;
	position: relative;
	border: 1px solid #C14D8A;
}

div#jp-relatedposts h3.jp-relatedposts-headline {
	margin: 0 0 1em;
	display: inline-block;
	float: left;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: 700;
	font-family: inherit;
}

div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context, div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date {
	opacity: 1;
	color: #282828;
	font-size: 16px;
	font-size: 1.6rem;
}

div#jp-relatedposts div.jp-relatedposts-items p, div#jp-relatedposts div.jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 20px;
	margin: 0;
}

body div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 400;
	text-decoration: none;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

div#jp-relatedposts h3.jp-relatedposts-headline em:before {
	content: "";
	display: block;
	width: 100%;
	min-width: 30px;
	border-top: none;
	margin-bottom: 1em;
}

div#jp-relatedposts h3.jp-relatedposts-headline em:after {
	content: " Posts";
	display: inline;
	width: 100%;
	min-width: 30px;
	border-top: none;
	margin-bottom: 1em;
}

body div#jp-relatedposts div.jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
	text-transform: none;
	margin: 0;
	font-family: inherit;
	display: block;
	max-width: 100%;
	padding-top: 15px;
}

Here’s the end result:

Another method I could have used is to disable the Jetpack style altogether, and add my own.

This article in CSS Tricks tells you how to remove all the Jetpack styles.

I only need to remove the Related Posts CSS, so this is the snippet I would require:

// First, make sure Jetpack doesn't concatenate all its CSS
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

// Then, remove each CSS file, one at a time
function jeherve_remove_all_jp_css() {
  
  wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
  
}
add_action('wp_print_styles', 'jeherve_remove_all_jp_css' );

I will play with this another time!

Please share or comment if you found this article on customizing the Jetpack Related Posts module helpful.

Category: WordPress Tags: 30 day blogging challenge, Genesis, Jetpack, related posts, theme, widget