Add Responsive Footer Widget Columns

README.md

@@ -108,8 +108,9 @@ Use one stylistic set at a time. See the CSS around `.hero-title` for a live the
 2. In WordPress administration, activate **Commander1024 2026** under **Appearance → Themes**.
 3. Configure the custom logo under **Appearance → Customize → Site Identity**.
 4. Assign the Primary and Footer menus under **Appearance → Menus**.
-5. Optionally configure the front-page video hero in the Customizer.
-6. Review block-editor palette, typography, spacing, and alignment controls when authoring content.
+5. Add widgets to **Appearance → Widgets → Footer column 1–3**. When at least one column contains a widget, the responsive three-column area is displayed above the footer sitewide.
+6. Optionally configure the front-page video hero in the Customizer.
+7. Review block-editor palette, typography, spacing, and alignment controls when authoring content.
 
 ## Development notes
 

footer.php

@@ -1,3 +1,12 @@
+<?php if ( is_active_sidebar( 'footer-1' ) || is_active_sidebar( 'footer-2' ) || is_active_sidebar( 'footer-3' ) ) { ?>
+	<aside class="footer-widgets" aria-label="<?php esc_attr_e( 'Footer widgets', 'c1024-2026' ); ?>">
+		<div class="footer-widgets-inner">
+			<?php dynamic_sidebar( 'footer-1' ); ?>
+			<?php dynamic_sidebar( 'footer-2' ); ?>
+			<?php dynamic_sidebar( 'footer-3' ); ?>
+		</div>
+	</aside>
+<?php } ?>
 <footer class="site-footer">
 	<div class="footer-inner">
 		<span>© <?php echo esc_html( wp_date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?></span>

functions.php

@@ -46,6 +46,24 @@ function c1024_2026_block_editor_assets() {
 }
 add_action( 'enqueue_block_editor_assets', 'c1024_2026_block_editor_assets' );
 
+/** Register the three sitewide widget columns rendered above the footer. */
+function c1024_2026_widgets_init() {
+	for ( $column = 1; $column <= 3; $column++ ) {
+		register_sidebar(
+			array(
+				'name'          => sprintf( __( 'Footer column %d', 'c1024-2026' ), $column ),
+				'id'            => 'footer-' . $column,
+				'description'   => __( 'Widgets displayed above the site footer on every page.', 'c1024-2026' ),
+				'before_widget' => '<section id="%1$s" class="footer-widget %2$s">',
+				'after_widget'  => '</section>',
+				'before_title'  => '<h2 class="footer-widget-title">',
+				'after_title'   => '</h2>',
+			)
+		);
+	}
+}
+add_action( 'widgets_init', 'c1024_2026_widgets_init' );
+
 // These settings drive the optional front-page hero without hard-coding media or copy.
 function c1024_2026_customize_register( $wp_customize ) {
 	$wp_customize->add_section(

style.css

@@ -977,6 +977,46 @@ h4 {
   background: var(--surface);
   color: var(--text);
 }
+.footer-widgets {
+  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
+  border-top: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.footer-widgets-inner {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: clamp(2rem, 5vw, 5rem);
+  max-width: var(--wide);
+  margin: auto;
+}
+
+.footer-widget {
+  min-width: 0;
+}
+
+.footer-widget-title {
+  margin: 0 0 1rem;
+  font-family: "Alpha Lyrae", sans-serif;
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1.16;
+}
+
+.footer-widget > :last-child {
+  margin-bottom: 0;
+}
+
+.footer-widget ul,
+.footer-widget ol {
+  padding-left: 1.25rem;
+  margin: 0;
+}
+
+.footer-widget li + li {
+  margin-top: 0.4rem;
+}
+
 .site-footer {
   padding: 2.5rem 1.5rem;
   border-top: 1px solid var(--line);
@@ -1047,6 +1087,10 @@ h4 {
   .hero {
     min-height: 55vh;
   }
+  .footer-widgets-inner {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
   .footer-inner {
     flex-direction: column;
   }