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

Migrate theme templates to Bootstrap 5 components and grids

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

83
header.php
View File

@@ -1,55 +1,72 @@
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
<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(); ?> x-data="{ searchOpen: false }">
<?php wp_body_open(); ?>
<div id="page" class="site">
<header id="masthead" class="site-header">
<div class="header-container">
<div class="site-branding">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="brand-mark">
<span class="logo-icon">W</span>
<span class="site-name">Wisdom for the Kingdom</span>
<body <?php body_class('bg-light'); ?> x-data="{ searchOpen: false }">
<?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">
<nav class="navbar navbar-expand-lg navbar-light container py-3">
<a href="<?php echo esc_url(home_url('/')); ?>"
class="navbar-brand fw-bold fs-4 d-flex align-items-center">
<span class="text-primary me-2">W</span>
<span class="d-none d-sm-inline">Wisdom for the Kingdom</span>
</a>
</div>
<div class="nav-and-search">
<nav id="site-navigation" class="main-navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#primary-menu-collapse" aria-controls="primary-menu-collapse" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="primary-menu-collapse">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
'container' => false,
'fallback_cb' => 'wisdom1_menu_fallback',
'menu_id' => 'primary-menu',
'menu_class' => 'navbar-nav mb-2 mb-lg-0 fw-medium',
'container' => false,
'fallback_cb' => 'wisdom1_menu_fallback',
// We're mostly mapping standard wp_nav_menu classes here.
// A full custom nav walker would be needed for perfect Bootstrap dropdowns,
// but standard ul/li works functionally with some styling tweaks.
)
);
?>
</nav>
<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">
<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>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</button>
</div>
</nav>
<button class="search-toggle" @click="searchOpen = !searchOpen" 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><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</button>
<!-- 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;">
<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">
<button type="submit" class="btn btn-primary btn-lg px-4">Search</button>
</form>
</div>
</div>
</div>
<!-- Search Overlay -->
<div class="search-overlay" x-show="searchOpen" x-transition:enter="fade-in" x-transition:leave="fade-out" @click.away="searchOpen = false" style="display: none;">
<div class="site-container">
<form role="search" method="get" class="search-form-overlay" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="search" class="search-field-large" placeholder="Search wisdom..." value="<?php echo get_search_query(); ?>" name="s" x-ref="searchInput">
<button type="submit" class="search-submit-large">Search</button>
</form>
</div>
</div>
</header>
</header>