Page Accent Color From an ACF Color Picker
Turns an ACF color picker on posts and pages into a --page-accent CSS variable, so each page can have its own highlight color.
Opens WPIDE on
Code
// Color picker field name.
$wpide_acf_color_field = 'accent_color';
add_action( 'wp_head', function () use ( $wpide_acf_color_field ) {
if ( ! is_singular() || ! function_exists( 'get_field' ) ) {
return;
}
$color = sanitize_hex_color( (string) get_field( $wpide_acf_color_field, get_queried_object_id() ) );
if ( $color ) {
echo '<style id="page-accent">:root{--page-accent:' . esc_html( $color ) . '}</style>' . "\n";
}
} );Notes
Use var(--page-accent) in your CSS, e.g. a { color: var(--page-accent, inherit); }.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.