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

Implement dynamic menus, search toggle with overlay, and series taxonomy with numbered layout

Browse Source
This commit is contained in:
Adolfo Reyna
2026-03-12 23:47:50 -04:00
parent 63fafb4489
commit e74d1268bc
4 changed files with 256 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
functions.php
View File

@@ -106,14 +106,46 @@ function wisdom1_customize_register( $wp_customize ) {
} }
add_action( 'customize_register', 'wisdom1_customize_register' ); add_action( 'customize_register', 'wisdom1_customize_register' );
/**
* Register Series Taxonomy
*/
function wisdom1_register_taxonomies() {
$labels = array(
'name' => _x( 'Series', 'taxonomy general name', 'wisdom1' ),
'singular_name' => _x( 'Series', 'taxonomy singular name', 'wisdom1' ),
'search_items' => __( 'Search Series', 'wisdom1' ),
'all_items' => __( 'All Series', 'wisdom1' ),
'parent_item' => __( 'Parent Series', 'wisdom1' ),
'parent_item_colon' => __( 'Parent Series:', 'wisdom1' ),
'edit_item' => __( 'Edit Series', 'wisdom1' ),
'update_item' => __( 'Update Series', 'wisdom1' ),
'add_new_item' => __( 'Add New Series', 'wisdom1' ),
'new_item_name' => __( 'New Series Name', 'wisdom1' ),
'menu_name' => __( 'Series', 'wisdom1' ),
);
$args = array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'series' ),
'show_in_rest' => true,
);
register_taxonomy( 'series', array( 'post' ), $args );
}
add_action( 'init', 'wisdom1_register_taxonomies' );
/** /**
* Menu fallback * Menu fallback
*/ */
function wisdom1_menu_fallback() { function wisdom1_menu_fallback() {
echo '<ul id="primary-menu" class="menu">'; echo '<ul id="primary-menu" class="menu">';
echo '<li><a href="' . esc_url( home_url( '/' ) ) . '">Home</a></li>'; echo '<li><a href="' . esc_url( home_url( '/' ) ) . '">Home</a></li>';
echo '<li><a href="' . esc_url( get_post_type_archive_link( 'post' ) ) . '">Articles</a></li>'; echo '<li><a href="' . esc_url( home_url( '/articles/' ) ) . '">Articles</a></li>';
echo '<li><a href="#">Series</a></li>'; echo '<li><a href="' . esc_url( home_url( '/series/' ) ) . '">Series</a></li>';
echo '<li><a href="#">About</a></li>'; echo '<li><a href="' . esc_url( home_url( '/about/' ) ) . '">About</a></li>';
echo '</ul>'; echo '</ul>';
} }

26
header.php
View File

@@ -6,10 +6,12 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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(); ?> <?php wp_head(); ?>
</head> </head>
<body <?php body_class(); ?>> <body <?php body_class(); ?> x-data="{ searchOpen: false }">
<?php wp_body_open(); ?> <?php wp_body_open(); ?>
<div id="page" class="site"> <div id="page" class="site">
<header id="masthead" class="site-header"> <header id="masthead" class="site-header">
@@ -19,8 +21,9 @@
<span class="logo-icon">W</span> <span class="logo-icon">W</span>
<span class="site-name">Wisdom for the Kingdom</span> <span class="site-name">Wisdom for the Kingdom</span>
</a> </a>
</div><!-- .site-branding --> </div>
<div class="nav-and-search">
<nav id="site-navigation" class="main-navigation"> <nav id="site-navigation" class="main-navigation">
<?php <?php
wp_nav_menu( wp_nav_menu(
@@ -32,6 +35,21 @@
) )
); );
?> ?>
</nav><!-- #site-navigation --> </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>
</div> </div>
</header><!-- #masthead --> </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>

455
style.css
View File

@@ -1,7 +1,7 @@
/* /*
Theme Name: Wisdom1 Theme Name: Wisdom1
Description: A modern-classic Christian blog theme for "Wisdom for the Kingdom". Description: A modern-classic Christian blog theme for "Wisdom for the Kingdom".
Version: 1.2.2 Version: 1.3.0
Text Domain: wisdom1 Text Domain: wisdom1
*/ */
@@ -33,7 +33,7 @@ img {
display: block; display: block;
} }
/* --- 2. Header & Navigation --- */ /* --- 2. Header & Navigation (Sticky) --- */
.site-header { .site-header {
padding: var(--wp--preset--spacing--30) 0; padding: var(--wp--preset--spacing--30) 0;
background-color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--base);
@@ -52,6 +52,12 @@ img {
padding: 0 var(--wp--preset--spacing--50); padding: 0 var(--wp--preset--spacing--50);
} }
.nav-and-search {
display: flex;
align-items: center;
gap: 30px;
}
.brand-mark { .brand-mark {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -87,8 +93,6 @@ img {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
flex-wrap: wrap;
justify-content: center;
} }
.main-navigation a { .main-navigation a {
@@ -99,13 +103,73 @@ img {
color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary);
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
white-space: nowrap;
} }
.main-navigation a:hover { .main-navigation a:hover {
color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent);
} }
/* Search Toggle */
.search-toggle {
background: none;
border: none;
color: var(--wp--preset--color--primary);
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
transition: color 0.3s ease;
}
.search-toggle:hover {
color: var(--wp--preset--color--accent);
}
/* Search Overlay */
.search-overlay {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--wp--preset--color--base);
padding: 40px 0;
border-bottom: 1px solid var(--wp--preset--color--border);
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.search-form-overlay {
display: flex;
gap: 20px;
max-width: 800px;
margin: 0 auto;
}
.search-field-large {
flex-grow: 1;
background: none;
border: none;
border-bottom: 2px solid var(--wp--preset--color--primary);
padding: 10px 0;
font-size: 24px;
font-family: var(--wp--preset--font-family--header-font);
color: var(--wp--preset--color--primary);
}
.search-field-large:focus {
outline: none;
border-color: var(--wp--preset--color--accent);
}
.search-submit-large {
background: var(--wp--preset--color--primary);
color: white;
border: none;
padding: 0 30px;
text-transform: uppercase;
font-weight: 700;
cursor: pointer;
}
/* --- 3. Hero Section (Landing Page) --- */ /* --- 3. Hero Section (Landing Page) --- */
.hero-section { .hero-section {
min-height: 80vh; min-height: 80vh;
@@ -121,18 +185,12 @@ img {
.hero-section::before { .hero-section::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0; left: 0; right: 0; bottom: 0;
left: 0; background: rgba(244, 241, 234, 0.6);
right: 0;
bottom: 0;
background: rgba(244, 241, 234, 0.6); /* Antique Parchment with transparency */
z-index: 1; z-index: 1;
} }
.hero-content { .hero-content { position: relative; z-index: 2; }
position: relative;
z-index: 2;
}
.hero-headline { .hero-headline {
font-family: var(--wp--preset--font-family--header-font); font-family: var(--wp--preset--font-family--header-font);
@@ -168,30 +226,30 @@ img {
color: white; color: white;
} }
/* --- 4. Archive & Category Header --- */ /* --- 4. Archive & Category Headers --- */
.category-header { .category-header {
background-color: var(--wp--preset--color--primary); background-color: var(--wp--preset--color--primary);
color: white; color: white;
padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50);
text-align: center; text-align: center;
} }
.series-label {
display: block;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 12px;
margin-bottom: 10px;
color: var(--wp--preset--color--accent);
}
.category-title { .category-title {
font-family: var(--wp--preset--font-family--header-font); font-family: var(--wp--preset--font-family--header-font);
font-size: clamp(2rem, 6vw, var(--wp--preset--font-size--heading)); font-size: clamp(2rem, 6vw, var(--wp--preset--font-size--heading));
margin: 0; margin: 0;
} }
.category-description { /* --- 5. Insights Grid & Cards --- */
font-size: clamp(1rem, 3vw, var(--wp--preset--font-size--subheading));
margin-top: 20px;
opacity: 0.8;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* --- 5. Insights Grid --- */
.section-header { .section-header {
text-align: center; text-align: center;
margin: var(--wp--preset--spacing--70) 0; margin: var(--wp--preset--spacing--70) 0;
@@ -213,7 +271,7 @@ img {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--wp--preset--spacing--50); gap: var(--wp--preset--spacing--50);
margin-bottom: var(--wp--preset--spacing--90); margin: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--90);
} }
.insight-card { .insight-card {
@@ -221,13 +279,9 @@ img {
padding: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--50);
border: 1px solid var(--wp--preset--color--border); border: 1px solid var(--wp--preset--color--border);
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
display: flex;
flex-direction: column;
} }
.insight-card:hover { .insight-card:hover { border-color: var(--wp--preset--color--hover); }
border-color: var(--wp--preset--color--hover);
}
.insight-card .post-thumbnail img { .insight-card .post-thumbnail img {
width: 100%; width: 100%;
@@ -236,10 +290,16 @@ img {
margin-bottom: 20px; margin-bottom: 20px;
} }
.insight-card .entry-title a:hover { .insight-card .entry-title a {
color: var(--wp--preset--color--hover); color: var(--wp--preset--color--primary);
text-decoration: none;
font-family: var(--wp--preset--font-family--header-font);
font-size: 24px;
line-height: 1.2;
} }
.insight-card .entry-title a:hover { color: var(--wp--preset--color--hover); }
.post-card-info { .post-card-info {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -250,342 +310,93 @@ img {
margin-top: 10px; margin-top: 10px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
letter-spacing: 0.05em;
} }
.dot-separator { .dot-separator { color: var(--wp--preset--color--accent); }
/* --- 6. Series Taxonomy (Steps) --- */
.series-steps-container {
max-width: 800px;
margin: var(--wp--preset--spacing--70) auto;
}
.series-step-card {
display: flex;
gap: 30px;
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid var(--wp--preset--color--border);
}
.step-number {
font-family: var(--wp--preset--font-family--header-font);
font-size: 48px;
color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent);
opacity: 0.3;
line-height: 1;
} }
.entry-meta { /* --- 7. Single Post Layout --- */
font-size: 12px;
text-transform: uppercase;
color: var(--wp--preset--color--accent);
margin-bottom: 15px;
font-weight: 700;
}
.entry-summary {
font-size: 15px;
margin-top: 20px;
opacity: 0.8;
}
/* --- 6. Single Post Layout --- */
.single-post-layout {
margin-top: var(--wp--preset--spacing--70);
}
.reading-container { .reading-container {
max-width: 680px; max-width: 680px;
margin: 0 auto; margin: 0 auto;
font-size: clamp(1.125rem, 4vw, 20px); font-size: clamp(1.125rem, 4vw, 20px);
line-height: 1.8; line-height: 1.8;
padding: 0 var(--wp--preset--spacing--50);
}
.single-entry-header {
text-align: center;
margin-bottom: var(--wp--preset--spacing--70);
padding: 0 var(--wp--preset--spacing--50);
} }
.single-title { .single-title {
font-family: var(--wp--preset--font-family--header-font); font-family: var(--wp--preset--font-family--header-font);
font-size: clamp(2rem, 7vw, 56px); font-size: clamp(2rem, 7vw, 56px);
margin-top: 10px;
line-height: 1.1;
}
.single-post-thumbnail {
margin-bottom: var(--wp--preset--spacing--70);
text-align: center; text-align: center;
width: 100%; line-height: 1.1;
} }
.single-post-thumbnail img { .single-post-thumbnail img {
width: 100%; width: 100%;
height: auto; aspect-ratio: 21 / 9;
aspect-ratio: 21 / 9; /* Cinematic ultra-wide for detail view */
object-fit: cover; object-fit: cover;
border-bottom: 1px solid var(--wp--preset--color--border); margin-bottom: var(--wp--preset--spacing--70);
} }
/* --- Content Images & Captions --- */ /* --- 8. Newsletter Strip --- */
.entry-content img {
height: auto;
margin-bottom: var(--wp--preset--spacing--30);
border: 1px solid var(--wp--preset--color--border);
padding: 5px;
background: #FFFFFF;
}
.wp-block-image {
margin-bottom: var(--wp--preset--spacing--50);
}
figcaption {
font-size: 13px;
text-align: center;
color: var(--wp--preset--color--accent);
font-style: italic;
margin-top: 10px;
font-family: var(--wp--preset--font-family--body-font);
}
/* Alignments */
.alignwide {
margin-left: -10%;
margin-right: -10%;
max-width: 120%;
}
.alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
}
@media (max-width: 768px) {
.alignwide, .alignfull {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}
.entry-date {
margin-left: 10px;
opacity: 0.5;
font-size: 12px;
text-transform: uppercase;
}
.post-navigation {
border-top: 1px solid var(--wp--preset--color--border);
margin-top: var(--wp--preset--spacing--90);
padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}
.nav-links {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.nav-links div {
flex: 1;
min-width: 200px;
}
.nav-links a {
color: var(--wp--preset--color--primary);
text-decoration: none;
font-weight: 700;
}
/* --- 7. Newsletter Strip --- */
.newsletter-strip { .newsletter-strip {
background-color: var(--wp--preset--color--primary); background-color: var(--wp--preset--color--primary);
color: white; color: white;
padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--70) 0;
} }
.newsletter-content { .newsletter-content {
max-width: 800px; max-width: 500px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.newsletter-text {
font-family: var(--wp--preset--font-family--header-font);
font-size: clamp(1.25rem, 4vw, 24px);
} }
.newsletter-form { .newsletter-form {
display: flex; display: flex;
width: 100%;
max-width: 500px;
border-bottom: 1px solid var(--wp--preset--color--accent); border-bottom: 1px solid var(--wp--preset--color--accent);
padding-bottom: 10px; margin-top: 20px;
} }
.newsletter-input { .newsletter-input {
background: transparent; background: none; border: none; color: white; flex-grow: 1; padding: 10px;
border: none;
color: white;
flex-grow: 1;
padding: 10px;
font-size: 16px;
min-width: 0;
} }
.newsletter-submit { /* --- 9. Comments Section --- */
background: transparent;
border: none;
color: var(--wp--preset--color--accent);
cursor: pointer;
flex-shrink: 0;
}
/* --- 8. Footer --- */
.site-footer {
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
text-align: center;
font-size: 14px;
background-color: var(--wp--preset--color--base);
}
/* --- 9. Additional Responsiveness --- */
@media (max-width: 768px) {
.header-container {
flex-direction: column;
gap: 20px;
}
.main-navigation ul {
gap: 20px;
}
.site-container {
padding: 0 var(--wp--preset--spacing--30);
}
}
@media (max-width: 480px) {
.insights-grid {
grid-template-columns: 1fr;
}
.cta-button {
width: 100%;
text-align: center;
}
.comment-meta {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
}
/* --- 10. Comments Section --- */
.comments-area { .comments-area {
margin-top: var(--wp--preset--spacing--90); margin-top: var(--wp--preset--spacing--90);
border-top: 1px solid var(--wp--preset--color--border); border-top: 1px solid var(--wp--preset--color--border);
padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--70);
}
.comments-title, .comment-reply-title {
font-family: var(--wp--preset--font-family--header-font);
font-size: clamp(1.5rem, 5vw, 32px);
margin-bottom: var(--wp--preset--spacing--50);
}
.comment-list {
list-style: none;
padding: 0;
} }
.comment-body { .comment-body {
margin-bottom: var(--wp--preset--spacing--50); background: white;
padding: var(--wp--preset--spacing--30); padding: 30px;
background: #FFFFFF;
border: 1px solid var(--wp--preset--color--border); border: 1px solid var(--wp--preset--color--border);
margin-bottom: 30px;
} }
.comment-meta { /* --- 10. Responsive --- */
display: flex; @media (max-width: 768px) {
align-items: center; .header-container { flex-direction: column; gap: 20px; }
gap: 15px; .nav-and-search { width: 100%; justify-content: center; }
margin-bottom: 15px;
}
.comment-author img {
border-radius: 50%;
}
.fn {
font-weight: 700;
font-style: normal;
}
.comment-metadata {
font-size: 11px;
opacity: 0.5;
text-transform: uppercase;
}
.comment-content {
font-size: 16px;
line-height: 1.6;
}
.reply {
margin-top: 15px;
}
.comment-reply-link {
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
color: var(--wp--preset--color--accent);
text-decoration: none;
}
/* Comment Form */
#commentform {
display: flex;
flex-direction: column;
gap: 20px;
}
#commentform label {
display: block;
font-weight: 700;
font-size: 14px;
margin-bottom: 5px;
}
#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
width: 100%;
padding: 12px;
border: 1px solid var(--wp--preset--color--border);
background: #FFFFFF;
font-family: var(--wp--preset--font-family--body-font);
font-size: 16px;
}
#commentform textarea {
height: 150px;
}
#commentform .submit {
align-self: flex-start;
background-color: var(--wp--preset--color--primary);
color: white;
border: none;
padding: 12px 30px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s ease;
}
@media (max-width: 480px) {
#commentform .submit {
width: 100%;
}
}
#commentform .submit:hover {
background-color: var(--wp--preset--color--accent);
} }

55
taxonomy-series.php Normal file
View File

@@ -0,0 +1,55 @@
<?php
/**
* The template for displaying series archive pages
*/
get_header(); ?>
<div class="category-header series-header">
<div class="site-container">
<span class="series-label">Devotional Series</span>
<h1 class="category-title"><?php single_term_title(); ?></h1>
<?php if ( term_description() ) : ?>
<div class="category-description"><?php echo term_description(); ?></div>
<?php endif; ?>
</div>
</div>
<div class="site-container">
<main id="primary" class="site-main">
<div class="series-steps-container">
<?php
if ( have_posts() ) :
$count = 1;
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'series-step-card' ); ?>>
<div class="step-number"><?php echo str_pad( $count, 2, '0', STR_PAD_LEFT ); ?></div>
<div class="step-content">
<header class="entry-header">
<?php the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' ); ?>
<div class="post-card-info">
<span class="reading-time"><?php echo wisdom1_reading_time(); ?></span>
</div>
</header>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
</div>
</article>
<?php
$count++;
endwhile;
the_posts_navigation();
else :
echo '<p>' . esc_html__( 'No posts found in this series.', 'wisdom1' ) . '</p>';
endif;
?>
</div>
</main>
</div>
<?php
get_footer();