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

Add Facebook and TikTok social links to header

Browse Source 
- Added social icon links before phone button in header CTA area
- Icons styled with border, hover effects matching site aesthetic
- Only visible on desktop (>= 1024px) alongside phone button
- Uses theme options for URLs (same as footer)

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
2025-12-01 01:06:29 -06:00
parent f438d4fff7
commit 217c6ce8d6
3 changed files with 44 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/template-parts/header/site-header.php
+18
View File
@@ -45,6 +45,24 @@
<!-- Header CTA -->
<div class="header-cta">
<?php
$facebook = homeproz_get_option('facebook');
$tiktok = homeproz_get_option('tiktok');
?>
<?php if ($facebook) : ?>
<a href="<?php echo esc_url($facebook); ?>" class="header-social" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
<svg width="20" height="20" 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); ?>" class="header-social" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
<svg width="20" height="20" 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; ?>
<a href="tel:<?php echo esc_attr(preg_replace('/[^0-9]/', '', homeproz_get_option('phone'))); ?>" class="header-phone">
<?php echo esc_html(homeproz_get_option('phone')); ?>
</a>
wp-content/themes/homeproz/template-parts/header/site-header.scss
+25 -1
View File
@@ -140,7 +140,31 @@
flex-shrink: 0;
@media (min-width: 1024px) {
display: block;
display: flex;
align-items: center;
gap: 0.75rem;
}
.header-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--color-border);
border-radius: 0.25rem;
color: var(--color-text-muted);
text-decoration: none;
&:hover {
border-color: var(--color-accent);
color: var(--color-accent-light);
}
svg {
width: 18px;
height: 18px;
}
}
.header-phone {