Add new options to any wordpress theme in the Customize panel

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.

<?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.

<?php

$mods = get_theme_mods();
$back_image=$mods['rewp-image-upload'];
$link_image=$mods['rewp-link-path'];

?>

 


Comments

One response to “Add new options to any wordpress theme in the Customize panel”

  1. […] 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 […]

Leave a Reply

Your email address will not be published. Required fields are marked *