Customization is an important aspect of a modern website. It gives you the power to change a site to fit your needs and to ultimately deliver the best version of the site to your customers. And with the introduction of full site editing in WordPress, people are beginning to realize the power of changing a page’s layout and styles without ever needing to handle CSS or other potentially complicated aspects of site development. Customization allows you to separate out some of the more constant aspects of your site such as colors, font styles, spacing, and even layout—and create a system where you can tweak various settings to fit the site to your liking.
The Customizer
When working with a WordPress site, a great way to make your site customizable is with the Customizer—a default WordPress feature that is part of every WordPress site. The Customizer allows you to see a live preview of your site as you make changes, and thus work visually so as to achieve the perfect look. This setup can be accomplished by the use of custom settings in the Customizer along with the use of CSS variables.
Customizer Sections, Settings, and Controls
To start creating the site customization setup, you first need to set up the custom settings in the Customizer. This is done with settings and controls, as well as the optional use of sections to separate your custom options away from any default theme options.
A good place to start is with a “Color Scheme” section. This will allow you to set up all of the various color options that you want to be customizable on your site. All sections, settings, and controls for the Customizer are defined using the customize_register action hook.
function custom_theme_customizer_color_scheme_settings( $wp_customize ) {
// Add Color Scheme section.
$wp_customize->add_section(
'custom_theme_color_scheme',
array(
'title' => __( 'Color Scheme', 'custom_theme' ),
'priority' => 20,
)
);
}
add_action( 'customize_register', 'custom_theme_customizer_color_scheme_settings' );This piece of code adds a section to the theme customizer called “Color Scheme”, as seen below.
From here, you can then add individual color settings, such as a setting for “Text Color”.
function custom_theme_customizer_color_scheme_settings( $wp_customize ) {
. . .
// Add Text Color setting.
$wp_customize->add_setting(
'text_color',
array(
'default' => '#FFF',
'sanitize_callback' => 'sanitize_hex_color',
)
);
// Add Text Color control.
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'text_color',
array(
'label' => __( 'Text Color', 'custom_theme' ),
'section' => 'custom_theme_color_scheme',
'settings' => 'text_color',
)
)
);
}
add_action( 'customize_register', 'custom_theme_customizer_color_scheme_settings' );This creates a “Text Color” setting in the “Color Scheme” section of the Customizer.
The “Text Color” setting can then be changed as needed, and the value will be stored in your theme for later use.
You can also add additional color settings to this section, such as “Link Color”.
function custom_theme_customizer_color_scheme_settings( $wp_customize ) {
. . .
// Add Link Color setting.
$wp_customize->add_setting(
'link_color',
array(
'default' => '#FFF',
'sanitize_callback' => 'sanitize_hex_color',
)
);
// Add Link Color control.
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'link_color',
array(
'label' => __( 'Link Color', 'custom_theme' ),
'section' => 'custom_theme_color_scheme',
'settings' => 'link_color',
)
)
);
}
add_action( 'customize_register', 'custom_theme_customizer_color_scheme_settings' );The “Link Color” setting can be updated in the same way.
CSS Variables
Now that you have a custom section on your site where you can change these settings, what do you do with them? This is where CSS variables come into play. CSS variables are custom properties that can be defined in your CSS stylesheets and used throughout your styles by accessing their value with the function var(). With CSS variables and your custom color settings, you can set up your theme so that these CSS variables change depending on the value in your Customizer settings. This results in a heavily customizable site experience.
Setting up the connection between the Customizer and CSS variables is fairly simple. You can get the values of each customizer setting using the get_theme_mod() function along with the setting name, and then just save the values using the :root designation for CSS variables. It is common convention to prefix css variables with “–”, indicating that is a custom property meant to be used in other declarations using the var() function.
function custom_theme_customizer_variables() {
return '
:root {
--text-color:' . get_theme_mod( 'text_color' ) . ';
--link-color:' . get_theme_mod( 'link_color' ) . ';
}
';
}Then, you output those values as CSS.
function custom_theme_customizer_variables_wrap() {
echo '<style type="text/css">' . custom_theme_customizer_variables() . '</style>';
}
add_action( 'wp_head', 'custom_theme_customizer_variables_wrap' );
Now, these CSS variables are available for use anywhere you need them in your stylesheets and you can then set up your styles so that they change based on the value in the Customizer settings.
body {
color: var(--text-color);
}
a {
color: var(--link-color);
}Fonts Too!
Using the Customizer with CSS variables can also be useful when it comes to fonts. Just like with the custom settings for colors, you can set up a custom setting to change the font on your site. To start, add a “Fonts” section to the Customizer.
function custom_theme_customizer_font_settings( $wp_customize ) {
// Add Fonts section.
$wp_customize->add_section(
'custom_theme_fonts',
array(
'title' => __( 'Fonts', 'custom_theme' ),
'priority' => 21,
)
);
}
add_action( 'customize_register', 'custom_theme_customizer_font_settings' );
Then, add a select setting for choosing the font family.
function custom_theme_customizer_font_settings( $wp_customize ) {
. . .
// Add Font Family setting.
$wp_customize->add_setting(
'font-family',
array(
'default' => 'Open Sans',
)
);
// Add Font Family control.
$wp_customize->add_control(
'font_family',
array(
'label' => __( 'Font Family', 'custom_theme' ),
'section' => 'custom_theme_fonts',
'settings' => 'font_family',
'type' => 'select',
'choices' => array(
'Open Sans' => __( 'Open Sans', 'custom_theme' ),
'Inter' => __( 'Inter', 'custom_theme' ),
'Roboto' => __( 'Roboto', 'custom_theme' ),
'Source Sans Pro' => __( 'Source Sans Pro', 'custom_theme' ),
)
)
);
}
add_action( 'customize_register', 'custom_theme_customizer_font_settings' );
Now, with the font files located in a fonts folder in the theme, the fonts can be dynamically loaded based on the selection made in the Customizer.
function custom_theme_get_font_face_styles() {
$font_face = '<style type="text/css">';
$font_family = get_theme_mod( 'font_family' );
if ( 'Open Sans' === $font_family ) {
$font_face .= "
@font-face {
font-family: 'Open Sans';
src: url('" . get_theme_file_uri( 'fonts/OpenSans.woff2' ) . "') format('woff2');
}
";
}
if ( 'Inter' === $font_family ) {
$font_face .= "
@font-face {
font-family: 'Inter';
src: url('" . get_theme_file_uri( 'fonts/Inter.woff2' ) . "') format('woff2');
}
";
}
if ( 'Roboto' === $font_family ) {
$font_face .= "
@font-face {
font-family: 'Roboto';
src: url('" . get_theme_file_uri( 'fonts/Roboto.woff2' ) . "') format('woff2');
}
";
}
if ( 'Source Sans Pro' === $font_family ) {
$font_face .= "
@font-face {
font-family: 'Source Sans Pro';
src: url('" . get_theme_file_uri( 'fonts/SourceSansPro.woff2' ) . "') format('woff2');
}
";
}
$font_face .= '</style>';
return $font_face;
}
add_action( 'wp_head', 'custom_theme_get_font_face_styles' );
There are many other ways to customize a theme and many other types of variables that can be made customizable. You can customize layouts by using CSS variables when defining certain layouts. You can customize various text content throughout your site by using text settings in the Customizer. You can set a site phone number to be used in all of your menus or use a checkbox setting to toggle the display of various elements. You are really limited only by your imagination, as technically you can create a setting with any value in the Customizer and then perform any action in your theme based on the value of that setting. This opens up many exciting opportunities for theme customization and creates a bright future for users that wish to customize their sites as they see fit.
For help customizing your WordPress site, reach out to our web development experts.
Subscribe via RSS
