Custom background/text color in twenty twenty theme

• 

  minemovo · Member · Jan 7, 2026 at 9:54 pm

  • Copy link
  • Add topic to favorites

  Hello,

  is there a way I can add custom text/background color to twenty-twenty theme color palette? I have tried modifying functions.php file by adding new array color item, but althought the new customized color is displayed in admin section correctly (when modifying a page), it doesnt get displayed when page is viewed by users.

  // Block Editor Palette.
  $editor_color_palette = array(
  array(
  
  ‘name’ => ‘stredisko’,
  ‘slug’ => ‘#a4d2b2’,
  ‘color’ => ‘#a4d2b2’,
  ), ………

  Obviously, I am doing something wrong. Can you help me please?

  The blog I need help with is: (visible only to logged in users)

• 

  james3265166 · Member · Jan 8, 2026 at 12:48 am

  • Copy link

  The reason your color shows in the admin area but not for users is that WordPress doesn’t automatically generate the CSS for new palette items. Registering the code in functions.php tells the editor to show the color, but you must manually add the corresponding styles to your stylesheet so the browser knows what that ‘slug’ means.To fix this, add the following to your ‘Additional CSS’ or style.css file:

  /* Text color class */.has-a4d2b2-color { color: #a4d2b2;}/* Background color class */.has-a4d2b2-background-color { background-color: #a4d2b2;}

  WordPress follows a strict naming convention for these classes: .has-[slug]-color and .has-[slug]-background-color. Since your slug is currently set to #a4d2b2, the classes above should resolve the issue immediately. As a tip for the future, it is usually easier to use a simple word for the slug (like stredisko-green) rather than a hex code to keep your CSS clean!

• 

  minemovo · Member · Jan 8, 2026 at 9:10 pm

  • Copy link

  Thank you james3265166 for kind help! I have followed your steps but still no luck :(

  Steps performed:

  • updated functions.php with custom color

  // Block Editor Palette.
  $editor_color_palette = array(
  array(
  ‘name’ => ( ‘Accent Color’, ‘twentytwenty’ ), ‘slug’ => ‘accent’, ‘color’ => twentytwenty_get_color_for_area( ‘content’, ‘accent’ ), ),

  array(
  ‘name’ => ‘stredisko’,
  ‘slug’ => ‘#a4d2b2’,
  ‘color’ => ‘#a4d2b2’,
  ), );

  • updated style.css

  /* CUSTOM COLORS */

  :root .has-accent-background-color {
  background-color: #cd2653;
  color: #fff;
  }

  :root .has-a4d2b2-background-color {
  background-color: #a4d2b2;
  }

  :root .has-accent-color {
  color: #cd2653;
  }

  :root .has-a4d2b2-color {
  color: #a4d2b2;
  }

  Unfortunately, the colors are displayed only in admin section and not on the the final (end-user visible) page. Maybe I am need to add this section also somewhere else?

  Thank you for kind help

• 

  james3265166 · Member · Jan 9, 2026 at 12:47 am

  • Copy link

  The reason your color shows in the admin area but not for users is often because the CSS classes need more ‘specificity’ to override the default theme styles. When you use :root .has-a4d2b2-color, it might not be strong enough to override the theme’s built-in color settings.To fix this, try simplifying your CSS in style.css to these standard block editor classes:

  /* Text color class */.has-a4d2b2-color { color: #a4d2b2 !important;}/* Background color class */.has-a4d2b2-background-color { background-color: #a4d2b2 !important;}

  By adding !important, you ensure that your custom color overrides any default theme settings that might be taking priority. Additionally, check that your slug in the functions.php file doesn’t contain a ‘#’ symbol; the slug should be a plain string like ‘a4d2b2’ rather than ‘#a4d2b2’, as WordPress uses that slug to create the class name (e.g., .has-a4d2b2-color). If the slug has a ‘#’ in it, the generated class name might be broken and won’t match your CSS.