A professional WordPress footer provides valuable content and navigation while maintaining site consistency. Theme Settings Free Version gives you complete control over footer content including branding, menus, latest posts, and copyright information—all without touching code after initial setup.
This tutorial shows you how to build a three-column footer with a bottom copyright section. The footer includes logo/about text, menu selection, category-filtered posts, and customizable copyright—all managed through a clean admin interface.
Footer Structure Overview
We’ll build a footer with two distinct sections:
Main Footer (3 Columns):
- Column 1: Logo, About text, Social icons
- Column 2: Selected menu display
- Column 3: Latest posts from selected category
Bottom Section:
- Centered copyright text
Final Structure:
┌──────────────────────────────────────────────────┐
│ Column 1 Column 2 Column 3 │
│ [Logo] Menu Links Recent Posts │
│ About text • Link 1 • Post Title │
│ [Social Icons] • Link 2 • Post Title │
│ • Link 3 • Post Title │
├──────────────────────────────────────────────────┤
│ © 2024 Your Company Name │
└──────────────────────────────────────────────────┘This footer is SEO-friendly, widget-free, and fully customizable through Theme Settings.
Step 1: Configure Theme Settings Fields
Add footer configuration fields to your settings-config.php file.
Footer Settings Configuration
'footer_settings' => [
'title' => 'Footer Settings',
'icon' => 'bi-layout-text-sidebar-reverse',
'sections' => [
// Column 1: Branding & About
'footer_branding' => [
'title' => 'Footer Branding (Column 1)',
'desc' => 'Logo, about text, and social links',
'fields' => [
'footer_logo' => [
'type' => 'media',
'label' => 'Footer Logo',
'desc' => 'Leave empty to use site title',
],
'footer_about' => [
'type' => 'textarea',
'label' => 'About Text',
'placeholder' => 'Brief description about your company...',
'rows' => 4,
'desc' => 'Short description displayed in footer',
],
'footer_facebook' => [
'type' => 'url',
'label' => 'Facebook URL',
'placeholder' => 'https://facebook.com/yourpage',
],
'footer_twitter' => [
'type' => 'url',
'label' => 'Twitter URL',
'placeholder' => 'https://twitter.com/yourhandle',
],
'footer_instagram' => [
'type' => 'url',
'label' => 'Instagram URL',
'placeholder' => 'https://instagram.com/yourprofile',
],
'footer_linkedin' => [
'type' => 'url',
'label' => 'LinkedIn URL',
'placeholder' => 'https://linkedin.com/company/yourcompany',
],
],
],
// Column 2: Menu Selection
'footer_menu' => [
'title' => 'Footer Menu (Column 2)',
'desc' => 'Select which menu to display in footer',
'fields' => [
'footer_menu_select' => [
'type' => 'menu_select',
'label' => 'Select Footer Menu',
'placeholder' => 'Choose a menu...',
'desc' => 'Select registered menu to display',
],
'footer_menu_title' => [
'type' => 'text',
'label' => 'Menu Column Title',
'default' => 'Quick Links',
'placeholder' => 'Quick Links',
],
],
],
// Column 3: Latest Posts
'footer_posts' => [
'title' => 'Latest Posts (Column 3)',
'desc' => 'Display recent posts from selected category',
'fields' => [
'footer_posts_category' => [
'type' => 'category_select',
'label' => 'Select Category',
'placeholder' => 'All Categories',
'desc' => 'Choose category for latest posts',
],
'footer_posts_count' => [
'type' => 'number',
'label' => 'Number of Posts',
'default' => 3,
'min' => 1,
'max' => 10,
],
'footer_posts_title' => [
'type' => 'text',
'label' => 'Posts Column Title',
'default' => 'Latest Posts',
'placeholder' => 'Latest Posts',
],
],
],
// Copyright Section
'copyright' => [
'title' => 'Copyright Section',
'desc' => 'Bottom footer copyright text',
'fields' => [
'copyright_text' => [
'type' => 'text',
'label' => 'Copyright Text',
'default' => '© 2024 Your Company. All rights reserved.',
'placeholder' => '© 2024 Your Company. All rights reserved.',
],
],
],
],
],What These Fields Do:
- ✅ footer_logo - Optional logo for footer
- ✅ footer_about - About text description
- ✅ social_links - 4 social media URLs
- ✅ footer_menu_select - Choose which menu to display
- ✅ footer_posts_category - Select category for posts
- ✅ footer_posts_count - How many posts to show
- ✅ copyright_text - Customizable copyright message
Step 2: Create Footer Template Structure
Create or edit your footer.php file with the three-column structure.
Main Footer Template
<?php
/**
* Footer template
*/
?>
</div><!-- #page -->
<footer class="site-footer">
<!-- Main Footer (3 Columns) -->
<?php get_template_part('template-parts/footer/footer-main'); ?>
<!-- Bottom/Copyright Section -->
<?php get_template_part('template-parts/footer/footer-bottom'); ?>
</footer>
<?php wp_footer(); ?>
</body>
</html>Footer Main Template (3 Columns)
Create template-parts/footer/footer-main.php:
<?php
/**
* Template part: Footer Main
* Three-column footer layout
*/
?>
<div class="footer-main">
<div class="container">
<div class="footer-columns">
<!-- Column 1: Branding & About -->
<div class="footer-column footer-column-1">
<?php
// Logo or Site Title
$footer_logo = ts_get_option('footer_logo');
$site_name = get_bloginfo('name');
if ($footer_logo) :
?>
<div class="footer-logo">
<img src="<?php echo esc_url($footer_logo); ?>"
alt="<?php echo esc_attr($site_name); ?>"
width="150">
</div>
<?php else : ?>
<div class="footer-title">
<h3><?php echo esc_html($site_name); ?></h3>
</div>
<?php endif; ?>
<!-- About Text -->
<?php
$about_text = ts_get_option('footer_about');
if ($about_text) :
?>
<div class="footer-about">
<p><?php echo esc_html($about_text); ?></p>
</div>
<?php endif; ?>
<!-- Social Icons -->
<?php
$facebook = ts_get_option('footer_facebook');
$twitter = ts_get_option('footer_twitter');
$instagram = ts_get_option('footer_instagram');
$linkedin = ts_get_option('footer_linkedin');
if ($facebook || $twitter || $instagram || $linkedin) :
?>
<div class="footer-social">
<?php if ($facebook) : ?>
<a href="<?php echo esc_url($facebook); ?>"
target="_blank"
rel="noopener noreferrer"
aria-label="Facebook">
<i class="bi bi-facebook"></i>
</a>
<?php endif; ?>
<?php if ($twitter) : ?>
<a href="<?php echo esc_url($twitter); ?>"
target="_blank"
rel="noopener noreferrer"
aria-label="Twitter">
<i class="bi bi-twitter"></i>
</a>
<?php endif; ?>
<?php if ($instagram) : ?>
<a href="<?php echo esc_url($instagram); ?>"
target="_blank"
rel="noopener noreferrer"
aria-label="Instagram">
<i class="bi bi-instagram"></i>
</a>
<?php endif; ?>
<?php if ($linkedin) : ?>
<a href="<?php echo esc_url($linkedin); ?>"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn">
<i class="bi bi-linkedin"></i>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<!-- Column 2: Menu -->
<div class="footer-column footer-column-2">
<?php
$menu_title = ts_get_option('footer_menu_title', 'Quick Links');
$selected_menu = ts_get_option('footer_menu_select');
if ($menu_title) :
?>
<h3 class="footer-column-title"><?php echo esc_html($menu_title); ?></h3>
<?php endif; ?>
<?php
if ($selected_menu) :
wp_nav_menu([
'menu' => $selected_menu,
'container' => 'nav',
'container_class' => 'footer-menu',
'menu_class' => 'footer-menu-list',
'fallback_cb' => false,
'depth' => 1,
]);
endif;
?>
</div>
<!-- Column 3: Latest Posts -->
<div class="footer-column footer-column-3">
<?php
$posts_title = ts_get_option('footer_posts_title', 'Latest Posts');
$posts_category = ts_get_option('footer_posts_category');
$posts_count = ts_get_option('footer_posts_count', 3);
if ($posts_title) :
?>
<h3 class="footer-column-title"><?php echo esc_html($posts_title); ?></h3>
<?php endif; ?>
<?php
// Query latest posts
$args = [
'posts_per_page' => $posts_count,
'post_status' => 'publish',
'no_found_rows' => true,
];
// Add category filter if selected
if ($posts_category) {
$args['cat'] = $posts_category;
}
$footer_posts = new WP_Query($args);
if ($footer_posts->have_posts()) :
?>
<div class="footer-posts">
<?php while ($footer_posts->have_posts()) : $footer_posts->the_post(); ?>
<article class="footer-post-item">
<?php if (has_post_thumbnail()) : ?>
<div class="footer-post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
</div>
<?php endif; ?>
<div class="footer-post-content">
<h4 class="footer-post-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h4>
<time class="footer-post-date" datetime="<?php echo get_the_date('c'); ?>">
<i class="bi bi-calendar"></i>
<?php echo get_the_date(); ?>
</time>
</div>
</article>
<?php endwhile; ?>
</div>
<?php
wp_reset_postdata();
endif;
?>
</div>
</div>
</div>
</div>Key Features:
- ✅ Column 1 - Logo fallback to site title, about text, conditional social icons
- ✅ Column 2 - Dynamic menu from admin selection
- ✅ Column 3 - Category-filtered posts with thumbnail and date
- ✅ Semantic HTML - Proper article, nav, time tags
- ✅ Accessibility - ARIA labels, proper links
- ✅ Performance -
no_found_rowsfor faster queries
Footer Bottom Template (Copyright)
Create template-parts/footer/footer-bottom.php:
<?php
/**
* Template part: Footer Bottom
* Copyright section
*/
$copyright = ts_get_option('copyright_text', '© ' . date('Y') . ' ' . get_bloginfo('name') . '. All rights reserved.');
?>
<div class="footer-bottom">
<div class="container">
<div class="footer-copyright">
<p><?php echo esc_html($copyright); ?></p>
</div>
</div>
</div>Features:
- ✅ Dynamic year - Uses current year if not specified
- ✅ Site name fallback - Uses bloginfo if not set
- ✅ Simple markup - Clean, centered text
Step 3: Register Footer Menu Location
Add menu registration to your functions.php:
/**
* Register navigation menus
*/
function mytheme_register_menus() {
register_nav_menus([
'primary' => __('Primary Menu', 'mytheme'),
'footer' => __('Footer Menu', 'mytheme'),
]);
}
add_action('after_setup_theme', 'mytheme_register_menus');Then create a footer menu:
- Go to Appearance → Menus
- Create a new menu named “Footer Menu”
- Add your pages/links
- Assign to “Footer Menu” location
- The menu will now appear in Theme Settings menu selector
Step 4: Enable Post Thumbnails
Ensure thumbnails are enabled for footer posts display:
/**
* Add theme support for post thumbnails
*/
function mytheme_theme_support() {
add_theme_support('post-thumbnails');
// Add custom image size for footer posts
add_image_size('footer-post-thumbnail', 80, 80, true);
}
add_action('after_setup_theme', 'mytheme_theme_support');Use in footer template:
<?php the_post_thumbnail('footer-post-thumbnail'); ?>Step 5: Admin Configuration Guide
For End Users - How to Configure:
Setting Up Footer Branding (Column 1)
- Go to WordPress Admin → Theme Settings
- Click Footer Settings tab
- Navigate to Footer Branding section
- Upload Footer Logo (optional):
- Click “Upload Logo”
- Choose from Media Library or upload new
- Recommended size: 150x50px
- Add About Text:
- Enter brief company description
- Keep it under 150 characters for best display
- Add Social Media Links:
- Enter full URLs for each platform
- Leave blank for platforms you don’t use
- Click Save Changes
Configuring Footer Menu (Column 2)
- In Footer Settings tab
- Go to Footer Menu section
- Select Footer Menu:
- Choose from dropdown (shows registered menus)
- Menu must be created first in Appearance → Menus
- Set Menu Title:
- Default: “Quick Links”
- Customize as needed
- Click Save Changes
Setting Up Latest Posts (Column 3)
- In Footer Settings tab
- Go to Latest Posts section
- Select Category (optional):
- Choose specific category
- Leave empty to show all posts
- Set Number of Posts:
- Default: 3 posts
- Range: 1-10 posts
- Set Column Title:
- Default: “Latest Posts”
- Customize as needed
- Click Save Changes
Customizing Copyright Text
- In Footer Settings tab
- Go to Copyright Section
- Enter Copyright Text:
- Example:
© 2024 Your Company. All rights reserved. - Use
{year}for auto-update (if implemented) - Use
{sitename}for site name (if implemented)
- Example:
- Click Save Changes
Complete Example Output
When properly configured, your footer will output clean HTML like this:
<footer class="site-footer">
<!-- Main Footer -->
<div class="footer-main">
<div class="container">
<div class="footer-columns">
<!-- Column 1 -->
<div class="footer-column footer-column-1">
<div class="footer-logo">
<img src="logo.png" alt="Site Name" width="150">
</div>
<div class="footer-about">
<p>We create amazing WordPress themes...</p>
</div>
<div class="footer-social">
<a href="https://facebook.com/page"><i class="bi bi-facebook"></i></a>
<a href="https://twitter.com/handle"><i class="bi bi-twitter"></i></a>
</div>
</div>
<!-- Column 2 -->
<div class="footer-column footer-column-2">
<h3>Quick Links</h3>
<nav class="footer-menu">
<ul>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- Column 3 -->
<div class="footer-column footer-column-3">
<h3>Latest Posts</h3>
<div class="footer-posts">
<article class="footer-post-item">
<div class="footer-post-thumbnail">
<img src="thumb.jpg" alt="Post">
</div>
<div class="footer-post-content">
<h4><a href="/post">Post Title</a></h4>
<time>January 15, 2024</time>
</div>
</article>
<!-- More posts... -->
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="footer-bottom">
<div class="container">
<div class="footer-copyright">
<p>© 2024 Your Company. All rights reserved.</p>
</div>
</div>
</div>
</footer>Template Hierarchy Best Practices
Organize footer components properly:
your-theme/
├── footer.php (main footer file)
├── template-parts/
│ └── footer/
│ ├── footer-main.php (3-column footer)
│ └── footer-bottom.php (copyright section)
└── themesettings/
└── settings-config.php (field configuration)Benefits:
- ✅ Modular - Each section isolated
- ✅ Maintainable - Easy to update
- ✅ Reusable - Can use parts elsewhere
- ✅ Clean code - Better organization
Advanced Features (Optional)
Dynamic Copyright Year
Update copyright text to support dynamic year:
// functions.php
function mytheme_process_copyright_shortcodes($text) {
$text = str_replace('{year}', date('Y'), $text);
$text = str_replace('{sitename}', get_bloginfo('name'), $text);
return $text;
}
// footer-bottom.php
$copyright = ts_get_option('copyright_text', '© {year} {sitename}. All rights reserved.');
$copyright = mytheme_process_copyright_shortcodes($copyright);
echo esc_html($copyright);Users can now use:
{year}→ Current year (2024){sitename}→ Site name
Post Excerpt in Footer
Add excerpt to footer posts:
// In footer-main.php, inside the loop
<div class="footer-post-excerpt">
<?php echo wp_trim_words(get_the_excerpt(), 12, '...'); ?>
</div>Footer Post Categories
Display post category in footer:
// In footer-main.php
<div class="footer-post-meta">
<?php
$categories = get_the_category();
if (!empty($categories)) :
?>
<span class="footer-post-category">
<i class="bi bi-folder"></i>
<?php echo esc_html($categories[0]->name); ?>
</span>
<?php endif; ?>
</div>Troubleshooting Common Issues
| Issue | Cause | Solution |
|---|---|---|
| Logo not showing | Wrong media ID | Re-upload logo in Theme Settings |
| Menu not displaying | Menu not selected | Choose menu in Footer Menu section |
| Posts not showing | No posts in category | Check category has published posts |
| Social icons missing | Bootstrap Icons not loaded | Verify icons CSS enqueued |
| Copyright empty | No text entered | Add default in settings config |
| Thumbnail missing | Thumbnails not enabled | Add theme support in functions.php |
Implementation Checklist
Theme Settings Configuration:
- ✅ Add footer fields to settings-config.php
- ✅ Configure branding fields (logo, about, social)
- ✅ Add menu selector field
- ✅ Configure posts settings (category, count)
- ✅ Add copyright text field
Template Files:
- ✅ Update footer.php main structure
- ✅ Create footer-main.php (3 columns)
- ✅ Create footer-bottom.php (copyright)
- ✅ Register footer menu location
- ✅ Enable post thumbnails support
Admin Setup:
- ✅ Upload footer logo (optional)
- ✅ Enter about text
- ✅ Add social media URLs
- ✅ Create and assign footer menu
- ✅ Select post category (optional)
- ✅ Enter copyright text
Testing:
- ✅ Verify all 3 columns display
- ✅ Check logo/title fallback works
- ✅ Test social links open correctly
- ✅ Confirm menu displays selected items
- ✅ Verify posts from correct category
- ✅ Check copyright text centered
- ✅ Test with no settings (defaults)
Performance Optimization
Query Optimization:
// In footer-main.php
$args = [
'posts_per_page' => $posts_count,
'post_status' => 'publish',
'no_found_rows' => true, // Faster query
'update_post_meta_cache' => false, // Don't load meta
'update_post_term_cache' => false, // Don't load terms
];Cache Footer Content:
// functions.php
function mytheme_get_footer_posts($category, $count) {
$cache_key = 'footer_posts_' . $category . '_' . $count;
$posts = get_transient($cache_key);
if (false === $posts) {
// Query posts...
set_transient($cache_key, $posts, HOUR_IN_SECONDS);
}
return $posts;
}Conclusion
With Theme Settings Free Version, building a professional three-column WordPress footer is straightforward and fully customizable. Users can manage branding, menus, content, and copyright text through an intuitive admin interface.
What You’ve Achieved:
- ✅ Three-column footer layout
- ✅ Dynamic logo and about section
- ✅ Flexible menu selection
- ✅ Category-filtered latest posts
- ✅ Customizable copyright
- ✅ Social media integration
- ✅ Clean, semantic HTML
- ✅ User-friendly admin controls
This footer structure is scalable, SEO-friendly, and fully manageable without code. Users update content through Theme Settings, and changes appear instantly on the frontend.
“A great footer completes the user experience—
make it functional, informative, and easy to manage.”
Next Steps:
- Add basic CSS for layout and styling
- Implement responsive column stacking
- Add widget areas for more flexibility
- Create footer variations for different pages
- Explore Theme Settings Pro for repeater-based widgets
