BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty eleven

How to Change Colors in the Twenty Eleven WordPress Theme: A Complete Guide

24 threads Sep 10, 2025 Theme → Twenty eleven

Content

Customizing the look of your WordPress site is a common task, and one of the most frequent requests is changing colors. For users of the classic Twenty Eleven theme, this can sometimes be confusing. This guide compiles the most effective methods for modifying colors throughout the theme, from the menu bar to the footer.

Why You Need a Child Theme or Custom CSS

Before making any changes, it is crucial to understand that directly editing the Twenty Eleven theme files is strongly discouraged. The 'Twenty Eleven' team, and the wider WordPress community, advise against this because any edits will be overwritten when the theme is updated. This will erase your customizations and could potentially break your site.

The recommended and safest method is to use a child theme. A child theme inherits all the functionality and styling of the parent theme (Twenty Eleven) but allows you to make changes without affecting the original files. If you are only making minor CSS changes, you can also use the built-in Additional CSS option found in the WordPress Customizer (Appearance → Customize → Additional CSS). Many users also find success with custom CSS plugins.

Common Color Customizations and Their Solutions

Based on frequent community questions, here are the CSS selectors and code snippets you need to change specific areas of the Twenty Eleven theme.

1. Changing the Main Navigation Menu Bar Color

The black navigation bar is a signature element of Twenty Eleven. To change its background color, target the #access selector.

#access {
    background: #b9cb13; /* Replace with your desired color */
}

2. Changing the Single Post Title Color and Alignment

To change the color and center the title on individual posts, use the .entry-title selector.

.singular .entry-title {
    color: #ff0000; /* Red color */
    text-align: center;
}

3. Changing Link and Link Hover Colors

To style all links, and their hover states, use the following selectors.

a {
    color: #1e73be; /* Normal link color */
}

a:hover {
    color: #dd3333; /* Hovered link color */
}

4. Changing the Sidebar Background Color

To add a background color to the main sidebar, target the #secondary selector.

#secondary {
    background: #f2f2f2; /* Light gray background */
    padding: 15px; /* Adds some space inside the sidebar */
}

5. Changing the Footer Background Colors

The footer in Twenty Eleven has two main sections. The upper widget area and the lower copyright bar.

/* For the upper widget area */
#supplementary {
    background: #689C48;
}

/* For the lower copyright bar */
#site-generator {
    background: #55bbeb;
}

6. Changing the Comment Form Background Color

The 'Leave a Reply' form has a gray background by default. To change it, use the #respond selector.

#respond {
    background: #ffffff; /* White background */
    border: 1px solid #d3d3d3;
}

7. Changing the Background on Specific Pages

WordPress automatically adds specific classes to the <body> tag, which you can use to target individual pages or page templates. For example, to change the background on pages using the 'Showcase Template':

/* For the Showcase Template */
.page-template-showcase-php #page {
    background: #ffffff;
}

/* For a page with a specific ID (e.g., ID 10) */
.page-id-10 #content {
    background: #ffffee;
}

Troubleshooting Tips

  • Specificity is Key: If your CSS changes aren't working, the theme's default styles might be overriding them. Make your CSS selector more specific. For example, body .entry-title is more specific than just .entry-title.
  • Use a Web Inspector: Browser tools like Chrome Developer Tools or Firefox Firebug are invaluable. You can right-click on any element on your page, select 'Inspect', and see exactly what CSS is controlling its style. This allows you to test changes in real-time before adding them to your child theme or Customizer.
  • Clear Your Cache: After making changes, remember to clear any caching plugins or server-side caches you might be using to see the changes immediately.

By following these methods and using the provided code snippets, you should be able to successfully customize the colors of your Twenty Eleven theme without affecting the core files. Always remember to use a child theme or the Additional CSS section for a future-proof website.

Related Support Threads Support