Customising the Customiser

Hello Thierry, I hope all is well.

I'm looking into adding/editing and removing options in the Customiser. My first attempt to add a logo section in the footer is as follows:

//customizer
add_action( 'customize_register', 'footer_logos' );

function footer_logos() {

    $fields = array(
        array(
            'id' => "footer_logo_1",
            'label' => 'Logo Image',
            'type' => 'WP_Customize_Image_Control',
            'transport' => 'refresh',
        ),
        array(
            'id' => "footer_logo_2",
            'label' => 'Logo Image',
            'type' => 'WP_Customize_Image_Control',
            'transport' => 'refresh',
        ),
        array(
            'id' => "footer_logo_3",
            'label' => 'Logo Image',
            'type' => 'WP_Customize_Image_Control',
            'transport' => 'refresh',
        ),
        array(
            'id' => "footer_logo_4",
            'label' => 'Logo Image',
            'type' => 'WP_Customize_Image_Control',
            'transport' => 'refresh',
        )        
    );

    beans_register_wp_customize_options( $fields, 'section_id', array( 'title' => 'Footer Logos' ) );

}

and then bringing in the info:

add_action( 'beans_footer_before_markup', 'footer_logos_area' );

function footer_logos_area() {

    ?><div class="footer-logos">
        <div class="uk-container uk-container-center">
            <div class="uk-grid uk-grid-width-medium-1-1" data-uk-grid-margin>
                <ul>
                <?php for( $i = 1; $i <= 4; $i++ ) : $src = get_theme_mod( "footer_logo_{$i}" ); ?>
                    <?php if ( $src ) { ?>
                    <li><img src="<?php echo esc_url( $src ); ?>" height="80" width="194"></li>
                    <?php } ?>
                <?php endfor; ?>
                </ul>
            </div>
        </div>
    </div><?php

}

This works well but i'm sure the code could be simplified more? Maybe the footer_logos function can be simplified similarly with for( $i = 1; $i <= 4; $i++ ){...} -but i haven't got that to work.

My main question is how to edit or remove the default options in the Customiser.

I have added a secondary logo('beans_logo_image_secondary') in the Site Identity section by adding the following code snippet in tm-beans/lib/admin/wp-customize.php

function beans_do_register_wp_customize_options() {

  $fields = array(
    array(
      'id' => 'beans_logo_image',
     'label' => __( 'Logo Image', 'tm-beans' ),
      'type' => 'WP_Customize_Image_Control',
     'transport' => 'refresh'
    ),
    array(
      'id' => 'beans_logo_image_secondary',
     'label' => __( 'Secondary Logo Image', 'tm-beans' ),
      'type' => 'WP_Customize_Image_Control',
     'transport' => 'refresh'
    )
 );

  beans_register_wp_customize_options( $fields, 'title_tagline', array( 'title' => __( 'Branding', 'tm-beans' ) ) );

but would like to do this via the theme functions.php instead.

Any help would be much appreciated!

Have a Great Day :)

Mike

Hey Mike,

Here is the code snippet to add your secondary logo and footer fields using a loop:

add_action( 'customize_register', 'example_wp_customize_options' );

function example_wp_customize_options() {

  // Secondary logo image.
  $fields = array(
        array(
            'id' => 'example_logo_image_secondary',
            'label' => 'Secondary Logo Image',
            'type' => 'WP_Customize_Image_Control',
            'transport' => 'refresh'
        )
    );

    beans_register_wp_customize_options( $fields, 'title_tagline' );

    // Footer fields.
  $total = 4;
 $fields = array();

    for ( $i = 1; $i <= $total; $i++ ) {

        $fields[] = array(
            'id' => "example_footer_logo_{$i}",
            'label' => "Logo Image {$i}",
            'type' => 'WP_Customize_Image_Control',
            'transport' => 'refresh',
        );

    }

    beans_register_wp_customize_options( $fields, 'section_id', array( 'title' => 'Footer Logos' ) );

}

Note that I prefixed the function and fields id with example_. All your functions and fields id in your project should be prefixed with a unique prefix of your choice. I would not advise to just have footer_logos as it may create conflicts in the future (for example if WordPress adds a function called footer_logos a the future version).

Regarding your secondary logo field, see that we just used the same section id title_tagline so that the field is added to that section instead of creating a new section like we do for the footer logos 😉

PS: never make changes in Beans Core files as it would be overwritten when you update. I think you just temporarly added your secondary logo field so make sure you remove it now that you added it via your child theme.

Thanks,

Thanks Thierry, some valuable info there! 🙂

Hey Thierry,

Am i correct in saying I can add this to the example_wp_customize_options function above...

global $wp_customize;

$wp_customize->remove_section('colors');

...to remove the Color section in the WP Customizer? It works, just want to know if it's the best way to do it within the Beans framework.

Cheers,

m

Hey Mike, yes it is fine to do so 🙂