How to Change Footer Colors on Specific Pages in WordPress

How to Change Footer Colors on Specific Pages in WordPress: A Step-by-Step Guide

When designing your WordPress website, you might find the need to change the appearance of certain elements, like the footer, on specific pages. For instance, you may want a unique footer color on a contact page to make it stand out from the rest of the site. This can enhance user experience and help certain pages align with your brand’s design goals. In this post, we’ll walk through how to change the footer color on a specific page in WordPress using the Advanced Custom Fields (ACF) plugin and some custom PHP and CSS code.

Why You Might Want to Change Footer Colors on Specific Pages

You may want to change footer colors on specific pages can offer several benefits:

  • Differentiate From Body: We wrote this guide after implementing this fix on our own site. Some of our pages have sections that were the same color as our sitewide footer and we wanted a way to swap the footer colors on specific pages
  • Enhanced Visual Appeal: You might want a different footer color on certain pages to emphasize a call-to-action or create a unique design for that page.
  • Branding: Specific pages may have their own branding elements (such as product pages or promotional landing pages) that require different color schemes.
  • Usability: A color change can improve readability, especially when the page content has a specific color background that needs to blend seamlessly with the footer.

Steps to Change the Footer Color on Specific Pages

Let’s get started with a step-by-step guide to achieve this using Advanced Custom Fields (ACF) and custom PHP and CSS.

1. Install the Advanced Custom Fields Plugin

First, you’ll need to install the Advanced Custom Fields (ACF) plugin to add custom fields to your pages.

How to Install ACF:

  1. In your WordPress dashboard, go to Plugins > Add New.
  2. Search for Advanced Custom Fields. (You can also download directly from the WordPress Plugin directory here and install on your site)
  3. Click Install Now, then Activate.

This plugin will allow you to create a custom field where you can decide whether or not to apply the new footer color on a specific page.

2. Add a New Field Group for Pages

Once ACF is installed, you’ll need to create a field group that will control whether or not a footer color change should be applied to a specific page.

Steps to Add a New Field Group:

  1. Go to Custom Fields > Add New in your WordPress dashboard.
  2. Enter a title for the field group, such as “Footer Color Toggle.”

3. Set the Conditions for Displaying the Field Group

To ensure that the field group only appears on pages, set up display conditions.

Assign Field Group to Pages:

  1. Scroll down to the Location section.
  2. Set the condition to: Show this field group if Post Type is equal to Page.

This ensures that this field group will only appear when you’re editing a WordPress page.

4. Add a True/False Field

Next, create a custom field that allows you to toggle the footer color change on and off.

How to Add a True/False Field:

  1. Click on Add Field.
  2. In the Field Label, add Flip Footer.
  3. In the Field Name, add flip_footer.
  4. Choose the True/False field type.
  5. Save the field group.

Now, this will add a true/false toggle to the backend of all pages, allowing you to specify if the footer should have a different color for that specific page.

5. Set Up a Child Theme

To make sure that any changes you make to the theme (like adding custom code to functions.php) aren’t lost when your theme is updated, you’ll need to create and activate a child theme.

Install Child Theme Configurator Plugin:

  1. In your dashboard, go to Plugins > Add New.
  2. Search for Child Theme Configurator. (You can also download directly from the WordPress Plugin directory here and install on your site)
  3. Install and activate the plugin.

Once the plugin is installed, you can easily create a child theme from your existing theme.

Steps to Create and Activate a Child Theme:

  1. Go to Tools > Child Themes.
  2. Follow the prompts to create a child theme from your current theme.
  3. Activate the child theme after it has been created.

6. Add Custom Code to the Functions.php File

Now, we’ll add custom code to your child theme’s functions.php file. This will check whether the Flip Footer field is set to true and apply a CSS class to the body if it is.

How to Add Custom Code:

  1. In the WordPress dashboard, go to Appearance > Theme Editor.
  2. Select the functions.php file of your child theme.
  3. Add the following code to your functions.php file:

function add_flipfooter_class($classes) {
// Check if the ACF 'flip_footer' field is true for the current page
if (function_exists('get_field') && get_field('flip_footer')) {
// Add the 'flipfooter' class to the array of body classes
$classes[] = 'flipfooter';
}

return $classes;
}
add_filter('body_class', 'add_flipfooter_class');

This code adds a custom body class named “flipfooter” to pages where the Flip Footer field is set to “true.”

7. Add a CSS ID to Your Footer Section

Now that we’ve set up a custom class (flipfooter) for pages with the toggle enabled, you can target specific sections of your footer using CSS.

How to Add an ID to a Footer Section:

  • If you’re using a page builder (like Elementor or the default block editor), assign an ID to the section of the footer you want to change.
  • In this example, we’ll assign the ID #footer-contact to a contact form section in the footer.

8. Add Custom CSS to Change the Footer Color

Now that you have the flipfooter class and the specific footer-contact ID, you can use custom CSS to change the footer color on pages where the toggle is enabled.

Add Custom CSS:

  1. Go to Appearance > Customize > Additional CSS.
  2. Add the following CSS:

.flipfooter #footer-contact {background: #F9F7F3;}

This CSS targets pages with the flipfooter class and applies the new background color to the #footer-contact section of the footer.

In our scenario, we also wanted to change the colors on our Gravity Form that appeared in the footer, so we added the following CSS to change the background color of the input fields to white:

.flipfooter #footer-contact .gform_wrapper input, .flipfooter #footer-contact .gform_wrapper select, .flipfooter #footer-contact .gform_wrapper textarea { background: #fff;}

Conclusion

By following this guide, you can easily customize the footer color on specific pages of your WordPress site without affecting the global footer design. Using Advanced Custom Fields and a few lines of custom code, you can give yourself full control over your footer’s appearance based on the unique needs of each page.

If you need help with more advanced customization or want to implement similar design changes across your website, Masthead Technology offers professional WordPress development services to make your vision a reality. Contact us today to discuss your project!

FAQs

1. Can I use this method for other design changes besides footer colors?
Yes! You can use this same approach to make other design changes, like font sizes, margins, or even switching entire layouts on specific pages.

2. Do I need coding knowledge to implement this?
Basic knowledge of CSS and WordPress file structure is helpful, but we’ve provided step-by-step instructions that should make it easy even for beginners.

3. What is the benefit of using a child theme?
A child theme ensures that your customizations (like changes to functions.php) are not lost when the parent theme receives updates.

4. Can I change the footer color on multiple pages using this method?
Yes! You can enable the Flip Footer field on any number of pages where you want the custom footer color applied.

5. Are there any alternatives to using Advanced Custom Fields?
Yes, you could use custom post meta or other page builder-specific settings, but ACF is a flexible, powerful tool that provides a simple way to manage custom fields across your site.