More help customising HTML structure to match existing widgets

Resolved Alex
(@flaminhotdog)

2 months, 3 weeks ago

I love this plugin and have used it for years, but I wish I could tweak the style to match the “recent posts” section that sits above it. I’ve looked through this support section and followed some posts that seem to ask exactly what I am trying to do, but I’m struggling to tweak it to suit my needs and would greatly appreciate a more in-depth explanation.

I am trying to make it a list with bullet points, and separate the date from the link. Included below is a picture of the two lists, and a code snippet for the structure of the intended one.

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author

(@jeherve)

Jetpack Mechanic 🚀

I’ve just pushed a new update to the plugin that will allow you to do that. Once you run the latest version of the plugin (version 1.5.6), you can use a code snippet like this one to build a list of posts using an unordered list:

add_filter(
	'jeherve_posts_on_this_day_widget_before_posts',
	function () {
		return '<ul class="posts-on-this-day-list">';
	}
);

add_filter(
	'jeherve_posts_on_this_day_widget_after_posts',
	function () {
		return '</ul>';
	}
);

add_filter(
	'jeherve_posts_on_this_day_post_markup',
	function ( $markup, $post_id, $instance ) {
		$permalink       = get_permalink( $post_id );
		$title           = get_the_title( $post_id );
		$publishing_date = get_the_date( 'd M Y', $post_id );

		return sprintf(
			'<li><a href="%1$s">%2$s</a><span class="post-date">%3$s</span></li>',
			esc_url( $permalink ),
			esc_html( $title ),
			esc_html( $publishing_date )
		);
	},
	10,
	3
);

Feel free to customize the markup to match your needs of course!

Let me know if this helps.

Thread Starter

Alex

(@flaminhotdog)

2 months, 3 weeks ago

This is excellent, thank you so much for adding this in. It works perfectly!

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.