Customizer Option

You are here:
Estimated reading time: 1 min

IconPress has a built-in support for Customizer, which consists in a custom mod, that will browse for icon and insert into the page.



How to implement in your theme:

1. Enable Customizer option

Access IconPress > Options and enable the “WordPress Customizer” in Integrations option.

2. Create the IconPress custom controls.

Open your theme’s functions.php and insert this function and hook which contains 2 IconPress Customizer controls

function myTheme__customizerOptions( $wp_customize )
  $wp_customize->add_setting( 'iconpress_select_icon', [
    'default' => null,
    'sanitize_callback' => 'esc_attr',
    'transport' => 'postMessage'
  ] );

  $wp_customize->add_control( new \WP_Customize_IconPress_Control( $wp_customize, 'iconpress_select_icon', [
    'label' => esc_html__( 'Select Icon', 'iconpress' ),
    'section' => 'title_tagline',
    'settings' => 'iconpress_select_icon',
    'priority' => 0,

  ] ) );

  // with default
  $wp_customize->add_setting( 'iconpress_select_icon2x', [
    'default' => 'ICON_ID',
    'sanitize_callback' => 'esc_attr',
  ] );

  $wp_customize->add_control( new \WP_Customize_IconPress_Control( $wp_customize, 'iconpress_select_icon2x', [
    'label' => esc_html__( 'Select Icon 2', 'iconpress' ),
    'section' => 'title_tagline',
    'settings' => 'iconpress_select_icon2x',
    'priority' => 0,

  ] ) );
add_action( 'customize_register', 'myTheme__customizerOptions' );

As seen the function is hooked to the customize_register action. To extend further more, please follow the to see example and a much more detailed documentation.

Also, please notice the 'transport' => 'postMessage' argument in the first control, which basically will make the icon switch live, without reloading.

3. Add the display methods.

Wherever you want to display the icons, use any of these two examples:

// use wrapper for live customizer
echo IconPress__getCustomizerMod( 'iconpress_select_icon' );

// Just show the icon
echo IconPress__getSvgIcon( array( 'id' => get_theme_mod('iconpress_select_icon2x') ) );

The first example is a custom method which will make the icon live switch, without reloading. It’s used with 'transport' => 'postMessage' .

The second example is the built-in PHP method for displaying IconPress icons.

Was this article helpful?
Dislike 0
Views: 179