WordPress Component Library
10up Engineering

Blogroll

The Blogroll component is using the “BlogPosting” schema. When modifying this component, you should feel free to use any HTML that fits the structure and hierarchy of your project, while maintaining any of the schema-related HTML attributes (itemscope, itemtype, itemprop, etc.).

HTML

<div itemscope itemtype="https://schema.org/Blog">

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope itemtype="http://schema.org/BlogPosting" >

		<?php
		/*
		 * Customize w/ get_the_post_thumbnail() to add schema
		 * @link https://developer.wordpress.org/reference/functions/get_the_post_thumbnail
		 */
		if ( has_post_thumbnail() ) {
			the_post_thumbnail();
		} ?>

		<header class="entry-header">
			
			<!-- Name of the article -->
			<?php
			the_title( '<h2 class="entry-title" itemprop="headline"><a href="' . esc_url( get_permalink() ) . '" itemprop="url" rel="bookmark">', '</a></h2>' );
			?>

			<!-- publication date -->
			<p>
				<strong><?php esc_html_e( 'Publish Date', 'tenup' ); ?></strong>:
				<span itemprop="datePublished">
					<time datetime="<?php echo esc_attr( get_the_time( 'Y-m-d' ) ); ?>" pubdate>
						<?php the_date(); ?>
					</time>
				</span>
			</p>

			<!--Author-->
			<p>
				<strong><?php esc_html_e( 'Author', 'tenup' ); ?></strong>:
				<span itemprop="author"><?php the_author_link(); ?></span>
			</p>

		</header>

		<!-- A description of the post content - the excerpt -->
		<div itemprop="description">
			<?php
			/**
			 * Customize the Read More link by using the "excerpt_more" filter
			 *
			 * @link https://developer.wordpress.org/reference/functions/the_excerpt/
			 * @link https://codex.wordpress.org/Customizing_the_Read_More
			 */

			the_excerpt();
			?>
		</div><!--/itemprop=description-->

	</article><!--/itemtype=BlogPosting-->

	<!--
		Add more blogroll items here
	-->

</div><!--/itemtype=Blog-->
<div itemscope itemtype="https://schema.org/Blog">

	<article itemscope itemtype="http://schema.org/BlogPosting">

		<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
		    <img src="https://www.fillmurray.com/100/100" srcset="https://www.fillmurray.com/100/100 1x, https://www.fillmurray.com/200/200 2x" alt="header image" />
		    <meta itemprop="url" content="https://www.fillmurray.com/100/100" />
		    <meta itemprop="width" content="100" />
		    <meta itemprop="height" content="100" />
		</div><!--/itemprop=image-->

		<header>

			<!-- Name of the article -->
			<h2 itemprop="headline">
				<a href="http://www.example.com/" itemprop="url">Blogroll Post Title</a>
			</h2>
			
			<!-- publication date -->
			<p><strong>Publish Date</strong>:
			<span itemprop="datePublished">
			    <time datetime="2016-05-01">May 1, 2016</time>
			</span>
			</p>

			<!--Author-->
			<p><strong>Author</strong>:
			    <span itemprop="author">Jane Doe</span>
			</p>

		</header>

		<!-- A description of the post content - the excerpt -->
		<div itemprop="description">
			<p>This would be the "description" or the excerpt of the blog post content.</p>
			<a href="http://www.example.com/" itemprop="url">Read More... <span class="screen-reader-text">Post Title</span></a>
		</div><!--/itemprop=description-->

	</article><!--/itemtype=BlogPosting-->

	<!--
		Add more blogroll items here
	-->

</div><!--/itemtype=Blog-->

Resources