WP ULike Proof of Concept

archive.php

<?php
/**
 * Override the theme template for displaying archive pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();

$description = "Wrap each post listing in an HTML5 details/summary tag. Add a like button a like counter next to each post title. " . get_the_archive_description();
?>

<?php if ( have_posts() ) : ?>

	<header class="page-header alignwide">
		<?php the_archive_title( '<h1 class="page-title">', '</h1>' ); ?>
		<?php if ( $description ) : ?>
			<div class="archive-description"><?php echo wp_kses_post( wpautop( $description ) ); ?></div>
		<?php endif; ?>
	</header>
  
  	<!-- .page-header -->

	<div class="posts-listing-likes">

	<!-- WP ULike Stuff -->
	<?php while ( have_posts() ) : the_post(); ?>
		<details>
    		<summary class="post-summary">
			<?php
				the_title();
				echo do_shortcode( "[wp_ulike id='" . get_the_ID() . "']" );
			?>
		</summary>
		<?php get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) ); ?>
		</details>
	<?php endwhile; ?>

	</div>

	<?php twenty_twenty_one_the_posts_navigation(); ?>

<?php else : ?>
	<?php get_template_part( 'template-parts/content/content-none' ); ?>
<?php endif; ?>

<?php get_footer(); ?>

ulike-styles.css

/** WP ULike POC styles */

summary {
	font-size: 2.25rem;
}

.posts-listing-likes {
	margin: 0 auto;
	width: 80%;
}
	
.posts-listing-likes .entry-header {
	display: none; /* Hide the second post title */
}
	
.post-summary:hover {
	cursor: pointer; /* Display a pointer when you hover over the first post title */
}

.wpulike,
.wpulike .wp_ulike_general_class {
	display: inline;
}

.wpulike button.wp_ulike_btn {
	padding: 0;
}