brianhansonxyz/homeproz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Step 1.6: Build footer template with contact info and social links

Browse Source
This commit is contained in:
Hanson.xyz Dev
2025-11-28 16:10:45 -06:00
parent 62f051376d
commit 43ad31df4c
7 changed files with 348 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-content/themes/homeproz/dist/assets/main.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-content/themes/homeproz/footer.php
+21
View File
@@ -0,0 +1,21 @@
<?php
/**
* The template for displaying the footer
*
* @package HomeProz
*/
// Prevent direct access
if (!defined('ABSPATH')) {
exit;
}
?>
<?php get_template_part('template-parts/footer/site-footer'); ?>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
wp-content/themes/homeproz/inc/template-functions.php
+13
View File
@@ -144,6 +144,19 @@ function homeproz_fallback_menu() {
echo '</ul>';
}
/**
* Fallback footer menu when no menu is assigned
*/
function homeproz_footer_fallback_menu() {
echo '<ul class="footer-menu">';
echo '<li class="menu-item"><a href="' . esc_url(home_url('/')) . '">Home</a></li>';
echo '<li class="menu-item"><a href="' . esc_url(home_url('/properties/')) . '">Properties</a></li>';
echo '<li class="menu-item"><a href="' . esc_url(home_url('/about/')) . '">About</a></li>';
echo '<li class="menu-item"><a href="' . esc_url(home_url('/blog/')) . '">Blog</a></li>';
echo '<li class="menu-item"><a href="' . esc_url(home_url('/contact/')) . '">Contact</a></li>';
echo '</ul>';
}
/**
* Get theme option (placeholder for future ACF options)
*
wp-content/themes/homeproz/src/main.scss
+1
View File
@@ -9,6 +9,7 @@
// Import component styles
@import '../template-parts/header/site-header.scss';
@import '../template-parts/footer/site-footer.scss';
// ============================================
// CSS Custom Properties (Design Tokens)
wp-content/themes/homeproz/template-parts/footer/site-footer.php
+112
View File
@@ -0,0 +1,112 @@
<?php
/**
* Site Footer Template Part
*
* @package HomeProz
*/
// Prevent direct access
if (!defined('ABSPATH')) {
exit;
}
$phone = homeproz_get_option('phone');
$email = homeproz_get_option('email');
$address = homeproz_get_option('address');
$facebook = homeproz_get_option('facebook');
$tiktok = homeproz_get_option('tiktok');
?>
<footer id="colophon" class="site-footer">
<div class="container footer-container">
<div class="footer-inner">
<!-- Company Info -->
<div class="footer-column footer-about">
<div class="footer-logo">
<?php if (has_custom_logo()) : ?>
<?php the_custom_logo(); ?>
<?php else : ?>
<span class="site-title"><?php bloginfo('name'); ?></span>
<?php endif; ?>
</div>
<p class="footer-tagline">Your trusted partner in Minnesota real estate. Finding homes, building futures.</p>
<?php if ($facebook || $tiktok) : ?>
<div class="footer-social">
<?php if ($facebook) : ?>
<a href="<?php echo esc_url($facebook); ?>" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
<?php endif; ?>
<?php if ($tiktok) : ?>
<a href="<?php echo esc_url($tiktok); ?>" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
</svg>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<!-- Quick Links -->
<div class="footer-column footer-links">
<h4 class="footer-heading">Quick Links</h4>
<?php
wp_nav_menu(array(
'theme_location' => 'footer',
'menu_class' => 'footer-menu',
'container' => false,
'depth' => 1,
'fallback_cb' => 'homeproz_footer_fallback_menu',
));
?>
</div>
<!-- Contact Info -->
<div class="footer-column footer-contact">
<h4 class="footer-heading">Contact Us</h4>
<ul class="contact-list">
<?php if ($phone) : ?>
<li class="contact-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
<a href="tel:<?php echo esc_attr(preg_replace('/[^0-9]/', '', $phone)); ?>"><?php echo esc_html($phone); ?></a>
</li>
<?php endif; ?>
<?php if ($email) : ?>
<li class="contact-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
<a href="mailto:<?php echo esc_attr($email); ?>"><?php echo esc_html($email); ?></a>
</li>
<?php endif; ?>
<?php if ($address) : ?>
<li class="contact-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
<span><?php echo esc_html($address); ?></span>
</li>
<?php endif; ?>
</ul>
</div>
</div>
<!-- Footer Bottom -->
<div class="footer-bottom">
<p class="copyright">
&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.
</p>
<p class="footer-credits">
Powered by <a href="https://developer.wordpress.org/" target="_blank" rel="noopener noreferrer">WordPress</a>
</p>
</div>
</div>
</footer>
wp-content/themes/homeproz/template-parts/footer/site-footer.scss
+199
View File
@@ -0,0 +1,199 @@
/**
* Site Footer Styles
*
* @package HomeProz
*/
.site-footer {
background-color: var(--color-bg-card);
border-top: 1px solid var(--color-border);
margin-top: auto;
}
.footer-container {
padding-top: 3rem;
padding-bottom: 1.5rem;
}
.footer-inner {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
@media (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
grid-template-columns: 2fr 1fr 1.5fr;
gap: 3rem;
}
}
// Footer Columns
.footer-column {
min-width: 0;
}
.footer-heading {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text);
margin-bottom: 1.25rem;
}
// About Column
.footer-about {
.footer-logo {
margin-bottom: 1rem;
img {
max-height: 50px;
width: auto;
}
.site-title {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--color-text);
}
}
.footer-tagline {
font-size: 0.875rem;
color: var(--color-text-muted);
margin-bottom: 1.25rem;
line-height: 1.6;
}
}
// Social Links
.footer-social {
display: flex;
gap: 1rem;
a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--color-bg-dark);
border-radius: 0.25rem;
color: var(--color-text-muted);
&:hover {
background-color: var(--color-accent);
color: white;
}
svg {
width: 20px;
height: 20px;
}
}
}
// Footer Menu
.footer-links {
.footer-menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu-item {
margin-bottom: 0.75rem;
&:last-child {
margin-bottom: 0;
}
a {
color: var(--color-text-muted);
font-size: 0.9375rem;
text-decoration: none;
&:hover {
color: var(--color-accent-light);
}
}
}
}
// Contact List
.contact-list {
list-style: none;
margin: 0;
padding: 0;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
font-size: 0.9375rem;
&:last-child {
margin-bottom: 0;
}
svg {
flex-shrink: 0;
color: var(--color-accent);
margin-top: 0.125rem;
}
a {
color: var(--color-text-muted);
text-decoration: none;
&:hover {
color: var(--color-accent-light);
}
}
span {
color: var(--color-text-muted);
}
}
// Footer Bottom
.footer-bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding-top: 1.5rem;
margin-top: 2rem;
border-top: 1px solid var(--color-border);
text-align: center;
@media (min-width: 768px) {
flex-direction: row;
justify-content: space-between;
}
p {
margin: 0;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.copyright {
color: var(--color-sold);
}
.footer-credits a {
color: var(--color-text-muted);
text-decoration: none;
&:hover {
color: var(--color-accent-light);
}
}
}