Migrate theme templates to Bootstrap 5 components and grids

This commit is contained in:
Adolfo Reyna
2026-03-12 23:56:36 -04:00
parent 75a2173dc2
commit c2c018ff6f
7 changed files with 301 additions and 221 deletions

View File

@@ -5,61 +5,70 @@
get_header(); ?>
<main id="primary" class="site-main single-post-layout">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header single-entry-header">
<div class="entry-meta">
<?php echo get_the_category_list( ', ' ); ?>
<span class="entry-date"><?php echo get_the_date(); ?></span>
</div>
<?php the_title( '<h1 class="entry-title single-title">', '</h1>' ); ?>
</header>
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail single-post-thumbnail">
<?php the_post_thumbnail( 'full' ); ?>
</div>
<?php endif; ?>
<div class="entry-content reading-container">
<?php
the_content();
wp_link_pages(
array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'wisdom1' ),
'after' => '</div>',
)
);
<main id="primary" class="site-main container my-5">
<div class="row">
<div class="col-lg-8 mx-auto">
<?php
while (have_posts()):
the_post();
?>
</div><!-- .entry-content -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header text-center mb-5">
<div class="entry-meta text-uppercase text-muted small fw-semibold mb-3">
<?php echo get_the_category_list(', '); ?>
<span class="mx-2">•</span>
<span class="entry-date"><?php echo get_the_date(); ?></span>
</div>
<?php the_title('<h1 class="entry-title display-4 fw-bold mb-4">', '</h1>'); ?>
</header>
<footer class="entry-footer">
<div class="entry-tags">
<?php the_tags( '<span class="tags-links">Related: ', ', ', '</span>' ); ?>
</div>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->
<?php if (has_post_thumbnail()): ?>
<div class="post-thumbnail mb-5">
<?php the_post_thumbnail('full', array('class' => 'img-fluid rounded shadow-sm')); ?>
</div>
<?php endif; ?>
<nav class="navigation post-navigation">
<div class="nav-links">
<div class="nav-previous"><?php previous_post_link( '%link', 'Previous: %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', 'Next: %title' ); ?></div>
</div>
</nav>
<div class="entry-content fs-5 lh-lg font-serif">
<?php
the_content();
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
wp_link_pages(
array(
'before' => '<div class="page-links mt-4"><strong>' . esc_html__('Pages:', 'wisdom1') . '</strong>',
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
endwhile; // End of the loop.
?>
<footer class="entry-footer mt-5 pt-4 border-top">
<div class="entry-tags">
<?php the_tags('<span class="badge bg-light text-dark text-decoration-none me-2 p-2">Related: ', '</span><span class="badge bg-light text-dark text-decoration-none p-2">', '</span>'); ?>
</div>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->
<nav class="navigation post-navigation mt-5" aria-label="Posts">
<div class="row justify-content-between g-4">
<div class="col-sm-6 text-start">
<?php previous_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Previous</div>%link', '%title', false, ''); ?>
</div>
<div class="col-sm-6 text-end">
<?php next_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Next</div>%link', '%title', false, ''); ?>
</div>
</div>
</nav>
<?php
// If comments are open or we have at least one comment, load up the comment template.
if (comments_open() || get_comments_number()):
comments_template();
endif;
endwhile; // End of the loop.
?>
</div>
</div>
</main><!-- #main -->
<?php