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
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap"
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(); ?>
</head>
<body <?php body_class('bg-light'); ?> x-data="{ searchOpen: false }">
<body <?php body_class('bg-light'); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site d-flex flex-column min-vh-100">
<header id="masthead" class="site-header sticky-top bg-white shadow-sm">
@@ -48,7 +46,8 @@
?>
<button
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"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
@@ -58,13 +57,13 @@
</div>
</nav>
<!-- Search Overlay (Alpine.js) -->
<div class="search-overlay position-absolute w-100 bg-white border-bottom shadow-sm" x-show="searchOpen"
x-transition @click.away="searchOpen = false" style="display: none; top: 100%; z-index: 1050;">
<!-- Search Overlay (Bootstrap Collapse) -->
<div class="collapse search-overlay position-absolute w-100 bg-white border-bottom shadow-sm"
id="searchCollapse" style="top: 100%; z-index: 1050;">
<div class="container py-4">
<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..."
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>
</form>
</div>