The code snippet below demonstrates how to customize the typography in Divi theme using the WordPress Customizer. This code can be useful when you want to provide your users with the ability to customize the typography of their Divi-powered website.
function wpsnippets_customize_typography( $wp_customize ) {
// Add a new section for typography customization
$wp_customize->add_section( 'wpsnippets_typography_section', array(
'title' => __( 'Typography', 'text-domain' ),
'priority' => 30,
) );
// Add a setting for the body font size
$wp_customize->add_setting( 'wpsnippets_body_font_size', array(
'default' => '16px',
'sanitize_callback' => 'sanitize_text_field',
) );
// Add a control for the body font size
$wp_customize->add_control( 'wpsnippets_body_font_size', array(
'label' => __( 'Body Font Size', 'text-domain' ),
'section' => 'wpsnippets_typography_section',
'type' => 'text',
) );
// Add a setting for the heading font size
$wp_customize->add_setting( 'wpsnippets_heading_font_size', array(
'default' => '24px',
'sanitize_callback' => 'sanitize_text_field',
) );
// Add a control for the heading font size
$wp_customize->add_control( 'wpsnippets_heading_font_size', array(
'label' => __( 'Heading Font Size', 'text-domain' ),
'section' => 'wpsnippets_typography_section',
'type' => 'text',
) );
}
add_action( 'customize_register', 'wpsnippets_customize_typography' );
This code adds a new section in the WordPress Customizer called “Typography” where you can customize the body font size and heading font size. The add_section() function is used to create the section, while the add_setting() and add_control() functions are used to add settings and controls respectively. The sanitize_text_field function is used as a callback to sanitize the user input.
Examples
Example 1: Customizing Heading Typography in Divi
This use case demonstrates how to customize the typography of headings in Divi using the wpsnippets_custom_heading_typography() function.
function wpsnippets_custom_heading_typography() {
return array(
'h1' => array(
'font-size' => '36px',
'font-weight' => 'bold',
'color' => '#000000',
),
'h2' => array(
'font-size' => '30px',
'font-weight' => 'bold',
'color' => '#333333',
),
'h3' => array(
'font-size' => '24px',
'font-weight' => 'bold',
'color' => '#666666',
),
);
}
add_filter( 'et_builder_typography_options', 'wpsnippets_custom_heading_typography' );
This code example adds a custom function wpsnippets_custom_heading_typography() that returns an array of CSS properties for different heading levels (h1, h2, h3). The function is then hooked into the et_builder_typography_options filter to apply the custom typography settings to the Divi builder.
Example 2: Customizing Body Text Typography in Divi
This use case demonstrates how to customize the typography of body text in Divi using the wpsnippets_custom_body_typography() function.
function wpsnippets_custom_body_typography() {
return array(
'font-size' => '16px',
'font-weight' => 'normal',
'color' => '#333333',
);
}
add_filter( 'et_builder_typography_options', 'wpsnippets_custom_body_typography' );
This code example adds a custom function wpsnippets_custom_body_typography() that returns an array of CSS properties for the body text. The function is then hooked into the et_builder_typography_options filter to apply the custom typography settings to the Divi builder.
Example 3: Customizing Link Typography in Divi
This use case demonstrates how to customize the typography of links in Divi using the wpsnippets_custom_link_typography() function.
function wpsnippets_custom_link_typography() {
return array(
'font-size' => '16px',
'font-weight' => 'bold',
'color' => '#007bff',
'text-decoration' => 'none',
);
}
add_filter( 'et_builder_typography_options', 'wpsnippets_custom_link_typography' );
This code example adds a custom function wpsnippets_custom_link_typography() that returns an array of CSS properties for links. The function is then hooked into the et_builder_typography_options filter to apply the custom typography settings to the Divi builder.