adolforeyna/WFK_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor search toggle to Bootstrap and add search results template

Browse Source
This commit is contained in:
Adolfo Reyna
2026-03-13 11:57:56 -04:00
parent bd5222443f
commit 7ffd5532f9
2 changed files with 59 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
header.php
View File

@@ -9,12 +9,10 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap"
rel="stylesheet"> rel="stylesheet">
<!-- Alpine.js for lightweight interactivity -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.min.js"></script>
<?php wp_head(); ?> <?php wp_head(); ?>
</head> </head>
<body <?php body_class('bg-light'); ?> x-data="{ searchOpen: false }"> <body <?php body_class('bg-light'); ?>>
<?php wp_body_open(); ?> <?php wp_body_open(); ?>
<div id="page" class="site d-flex flex-column min-vh-100"> <div id="page" class="site d-flex flex-column min-vh-100">
<header id="masthead" class="site-header sticky-top bg-white shadow-sm"> <header id="masthead" class="site-header sticky-top bg-white shadow-sm">
@@ -48,7 +46,8 @@
?> ?>
<button <button
class="btn btn-outline-secondary ms-lg-3 rounded-circle p-2 d-flex align-items-center justify-content-center" class="btn btn-outline-secondary ms-lg-3 rounded-circle p-2 d-flex align-items-center justify-content-center"
@click="searchOpen = !searchOpen" aria-label="Toggle search"> data-bs-toggle="collapse" data-bs-target="#searchCollapse" aria-expanded="false"
aria-controls="searchCollapse" aria-label="Toggle search">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle> <circle cx="11" cy="11" r="8"></circle>
@@ -58,13 +57,13 @@
</div> </div>
</nav> </nav>
<!-- Search Overlay (Alpine.js) --> <!-- Search Overlay (Bootstrap Collapse) -->
<div class="search-overlay position-absolute w-100 bg-white border-bottom shadow-sm" x-show="searchOpen" <div class="collapse search-overlay position-absolute w-100 bg-white border-bottom shadow-sm"
x-transition @click.away="searchOpen = false" style="display: none; top: 100%; z-index: 1050;"> id="searchCollapse" style="top: 100%; z-index: 1050;">
<div class="container py-4"> <div class="container py-4">
<form role="search" method="get" class="d-flex" action="<?php echo esc_url(home_url('/')); ?>"> <form role="search" method="get" class="d-flex" action="<?php echo esc_url(home_url('/')); ?>">
<input type="search" class="form-control form-control-lg me-2" placeholder="Search wisdom..." <input type="search" class="form-control form-control-lg me-2" placeholder="Search wisdom..."
value="<?php echo get_search_query(); ?>" name="s" x-ref="searchInput"> value="<?php echo get_search_query(); ?>" name="s">
<button type="submit" class="btn btn-primary btn-lg px-4">Search</button> <button type="submit" class="btn btn-primary btn-lg px-4">Search</button>
</form> </form>
</div> </div>

55
search.php
View File

@@ -8,47 +8,66 @@ get_header();
<div class="bg-light py-5 border-bottom mb-5"> <div class="bg-light py-5 border-bottom mb-5">
<div class="container text-center"> <div class="container text-center">
<h1 class="display-5 fw-bold mb-3"> <?php if (have_posts()): ?>
<?php <h1 class="display-4 fw-bold mb-3 font-serif">
/* translators: %s: search query. */ <?php printf(esc_html__('Search Results for: %s', 'wisdom1'), '<span class="text-primary">' . get_search_query() . '</span>'); ?>
printf(esc_html__('Search Results for: %s', 'wisdom1'), '<span>' . get_search_query() . '</span>');
?>
</h1> </h1>
<p class="lead text-muted mx-auto w-75 font-sans">
<?php printf(esc_html__('Showing results matching your query.'), 'wisdom1'); ?>
</p>
<?php else: ?>
<h1 class="display-4 fw-bold mb-3 font-serif"><?php esc_html_e('Nothing Found', 'wisdom1'); ?></h1>
<p class="lead text-muted mx-auto w-75 font-sans">
<?php esc_html_e('Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'wisdom1'); ?>
</p>
<?php endif; ?>
</div> </div>
</div> </div>
<main id="primary" class="site-main container mb-5"> <div class="container mb-5">
<main id="primary" class="site-main">
<div class="row g-4"> <div class="row g-4">
<?php if (have_posts()): ?>
<?php <?php
/* Start the Loop */ if (have_posts()):
while (have_posts()): while (have_posts()):
the_post(); the_post();
get_template_part('template-parts/content', 'card'); get_template_part('template-parts/content', 'card');
endwhile; endwhile;
echo '</div>'; // close row
the_posts_navigation(array( the_posts_navigation(array(
'screen_reader_text' => 'Posts navigation', 'screen_reader_text' => 'Posts navigation',
'prev_text' => '<span class="btn btn-outline-primary">&larr; Older Results</span>', 'prev_text' => '<span class="btn btn-outline-primary">&larr; Older Results</span>',
'next_text' => '<span class="btn btn-outline-primary">Newer Results &rarr;</span>', 'next_text' => '<span class="btn btn-outline-primary">Newer Results &rarr;</span>',
'class' => 'd-flex justify-content-between my-5 col-12' 'class' => 'd-flex justify-content-between my-5'
)); ));
else: else:
?> ?>
<div class="col-12 text-center py-5"> <div class="col-12 col-md-8 mx-auto text-center py-5">
<h2 class="h3 mb-4">Nothing Found</h2> <div class="card border-0 bg-light p-5 rounded-4 text-center">
<p class="lead text-muted mb-4">Sorry, but nothing matched your search terms. Please try again with some <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
different keywords.</p> stroke-linecap="round" stroke-linejoin="round" class="text-muted mx-auto mb-4">
<div class="search-container mx-auto" style="max-width: 500px;"> <circle cx="11" cy="11" r="8"></circle>
<?php get_search_form(); ?> <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<h3 class="h4 font-serif fw-bold mb-3">No matching articles found.</h3>
<p class="text-muted mb-4">Try searching for different keywords or explore our latest articles
below.</p>
<form role="search" method="get" class="d-flex w-75 mx-auto"
action="<?php echo esc_url(home_url('/')); ?>">
<input type="search" class="form-control form-control-lg me-2" placeholder="Search wisdom..."
value="<?php echo get_search_query(); ?>" name="s">
<button type="submit" class="btn btn-primary btn-lg px-4">Search</button>
</form>
</div>
</div> </div>
</div> </div>
<?php <?php
endif; endif;
?> ?>
</div><!-- .row --> </main>
</main><!-- #main --> </div>
<?php <?php
get_footer(); get_footer();