Theme Needs
- A flexible theme. With lots of options for formatting content.
- A well-documented and laid-out theme.
- An accessible theme.
Theme Implementation
I picked the official WordPress twenty twenty-one theme. It is very flexible with wide and full-width container options and the ability to add backgrounds to most blocks. Beyond that, its code is well laid out, with files broken down into template parts based on uses. Also, it is well documented within the code. Finally, it was created with accessibility at the forefront.
Code from content-project.php
Below is the template part that loads for project archives and singles.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_singular() ) : ?>
<header class="entry-header alignwide">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<?php twenty_twenty_one_post_thumbnail(); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<div class="project-metadata">
<?php
$date = get_field( 'date' );
$dateTime = DateTime::createFromFormat( "F j, Y", $date );
if ( is_object( $dateTime ) ) {
$month = $dateTime->format( 'F' );
$year = $dateTime->format( 'Y' );
}
if ( $date ) { ?>
<p class="project-date"><?php echo 'Completed ' . $month . ' ' . $year; ?></p>
<?php }
if ( get_the_taxonomies() ) { ?>
<p class="project-taxonomies"><?php the_taxonomies(); ?></p>
<?php } ?>
</div><!-- .project-metadata -->
<?php
the_content(
twenty_twenty_one_continue_reading_text()
);
wp_link_pages(
array(
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyonechild' ) . '">',
'after' => '</nav>',
/* translators: %: page number. */
'pagelink' => esc_html__( 'Page %', 'twentytwentyonechild' ),
)
);
?>
</div><!-- .entry-content -->
<?php else : ?>
<header class="entry-header">
<?php the_title( sprintf( '<h2 class="entry-title default-max-width"><a href="%s">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
<?php twenty_twenty_one_post_thumbnail(); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<p><?php the_taxonomies();?></p>
<?php the_excerpt(); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<footer class="entry-footer default-max-width">
<?php twenty_twenty_one_entry_meta_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->