Let’s say that you need a second logo image to be added in your header. And let’s assume that this should be editable feature. The easiest way to manage this task is to make a new option in the Customize panel (Appearance -> Customize) to upload a logo image and add a link to it. This tutorial will show you how you can do this.
On the back end we have tree different steps to make: we need to register a section, we need to set settings to the controls of this section, and of course we need to set the controls. All this is going to use the customize_api and will be hooked to customize_register.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<?php /* New Section in Customize */ add_action( ‘customize_register’,‘new_customize_option’); function new_customize_option( $wp_customize ) { /* ————–REGISTERING NEW SECTION ————— */ $wp_customize–>add_section( ‘rewp_logo’ , array( ‘title’ => __( ‘Second Logo’, ‘oxygen’ ), ‘priority’ => 260, ) ); /* ————– S E T T I N G S ————— */ /* Setting: Upload a logo image */ $wp_customize–>add_setting( ‘rewp-image-upload’ , array( ‘default’ => ‘6000’, ‘capability’ => ‘edit_theme_options’, ) ); /* Setting: Set a link */ $wp_customize–>add_setting( ‘rewp-link-path’ , array( ‘default’ => ‘http://’, ‘capability’ => ‘edit_theme_options’, ) ); /* ————– C O N T R O L S ————— */ /* Control: Upload Background */ $wp_customize–>add_control( new WP_Customize_Upload_Control( $wp_customize, ‘rewp-image-upload’, array( ‘label’ => __( ‘Upload your background image’, ‘oxygen’ ), ‘section’ => ‘rewp_logo’, ‘settings’ => ‘rewp-image-upload’, ‘priority’ => 1 ) ) ); /* Control: Set a link */ $wp_customize–>add_control( new WP_Customize_Control( $wp_customize, ‘rewp-link-path’, array( ‘label’ => __( ‘Link for the advertisment’, ‘oxygen’ ), ‘section’ => ‘rewp_logo’, ‘settings’ => ‘rewp-link-path’, ‘type’ => ‘text’, ‘priority’ => 1 ) ) ); } ?> |
First we have the $wp_customize->add_section($id, $args) more details here.
Second $wp_customize->add_setting($id, $args) for more references here.
And last $wp_customize->add_control($id, $args) check this details.
Now we have all these options in the Customize panel but how can we use them in the code. The way I get them from the database is by using get_theme_mods(). In our case we will have the following code to get the settings and assign them to some variables.
1 2 3 4 5 6 7 |
<?php $mods = get_theme_mods(); $back_image=$mods[‘rewp-image-upload’]; $link_image=$mods[‘rewp-link-path’]; ?> |
One response to “Add new options to any wordpress theme in the Customize panel”
[…] if you want to make this settings customizable from the admin panel – check the article for adding new options to the WordPress theme in the Customize panel of the […]