WordPress Theme Development - Part IV (Creating Theme Customization Options)

Starting with version 3.4, WordPress offers the ability to customize an active theme directly from the control panel via an API, without the need to write any line of code.
In fact, the customization of a WordPress theme must come bundled with the implementation of options through which users logged in to the site can easily modify the theme without the need for them to have knowledge of PHP, HTML, JAVASCRIPT, etc.
If you are a WordPress developer then you will surely encounter situations in which customers will ask you to add such options for the custom theme created. At the same time, these options will have to correspond to the needs of the clients, offering them the possibility to be able to modify various sections of the site themselves, as the case may be.

In the rest of this article, we’ll show you how to create new settings options for the theme customization panel.

How are theme customization options structured?

All items on this page are created by default via the $ wp_cutomize object. The existing panel is implemented by assigning an action hook to the $ wp_cutomize object, respectively add_panel (‘the hook we link to’, ‘the necessary options’).
Inside the menu created by default by WordPress through the add_panel function, the following elements can exist or can be created:

section
settings
controls

To understand how they work, you can see the image below:

In order to better explain the methods by which these new sections can be created, along with the necessary settings and controls, we will exemplify the rest of the article through a few lines of code.

Default settings

To access the customization page, you’ll need to select Appearance> Customization from the control panel menu. Even if it is a newly created theme or a child theme, WordPress will implicitly offer in this page sections related to the following aspects:

title_tagline (offers the possibility to edit the title of the site and the favicon)
colors (customize the colors of certain items in the header and footer section)
Background_image (changing the background of pages, using the tag)
nav (basic options for customizing the main menu)
header_image (possibility to assign an image background for the header section)

What are sections?

The sections are sub-tabs of the customization page where we can add various settings or controls for customizing the theme.

Creating sections

Before you start, you should be aware that the customization menu can be manipulated via the ‘customize_register’ hook, which changes the $ wp_customize object. The code needed to implement these options can be written to a new file called customize.php. In order to be able to ‘link’ the content of this page to the WordPress dashboard, we will enter the following code in the functions.php file:

include_once('customize.php');

To add a new section, we will create in the customize.php file a function in which we will start adding the custom code, assigning to it as an argument the object $ wp_customize. We will call this function ‘custom_settings’, but it can have any other name. Before creating the function we will call the ‘customize_register’ hook to which we will assign the function created by us.

add_action('customize_register', 'setari_customizare');
function setari_customizare ($wp_customize) {
		// aici va fi introdus codul
}

Inside the function, let’s say we want to create a section where we can choose to select colors for the background of certain parts of the site. In this example, we will call this section ‘Theme Settings’.

$wp_customize->add_section(
        'Culori_pentru_Website',
        array(
            'title' => 'Setari Tema', //titlu
            'priority' =>  30 //ordinea in meniul de personalizare
            )
        );

After saving the file we can see that the last section will appear in the customization menu.

Creating settings and controls

Once the section is created, inside the ‘custom_settings’ function we can start adding some settings. For the first setting, we will try to change the background color of the menu in the header section. We will name the setting ‘menu_background_color’ as follows:

//schimbare fundal navbar
        $wp_customize->add_setting(
            'menu_background_color',
            array(
                'default'=>'#FFA500',
                'transport'=>'refresh' //update fara sa dai refresh la pagina
            )
            );

The ‘transport’ element will display the changes made in real time on the page when it has the value ‘refresh’. This way, there will be no need to reload the page in the browser after each change made. Also, ‘default’ gives us the option to opt for a default color.

Next we will create a controller for this setting:

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'menu_background_color', array(
            'label'        => 'Navbar background color',
            'section'    => 'Culori_pentru_Website',
            'settings'   => 'menu_background_color',
        ) ) );

Now that we’ve created this setting that we’ve assigned a controller to, we’ll need to link it to the CSS class of the navbar by creating a new function:

add_action('wp_head', 'culori_customizare');
function culori_customizare() {
?>
<style>
    .ast-primary-header-bar {
        background-color: <?php echo get_theme_mod('menu_background_color', '#FFA500'); ?>;
</style>
<?php
    }
}

Through this code, we will link to the header.php file via the ‘wp_head’ hook to which we assign the contents of the custom_color () function. Inside this function, we connect the CSS class of the navigation bar with the ‘menu_background_color’ setting that we created earlier. The full code will look like this:

add_action('customize_register', 'setari_customizare');
function setari_customizare ($wp_customize) {
		$wp_customize->add_section(
        'Culori_pentru_Website',
        array(
            'title' => 'Setari Tema', //titlu
            'priority' =>  30 //ordinea in meniul de personalizare
            )
        );


//schimbare fundal navbar
        $wp_customize->add_setting(
            'menu_background_color',
            array(
                'default'=>'#FFA500',
                'transport'=>'refresh' //update fara sa dai refresh la pagina
            )
            );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'menu_background_color', array(
            'label'        => 'Navbar background color',
            'section'    => 'Culori_pentru_Website',
            'settings'   => 'menu_background_color',
        ) ) );
}

add_action('wp_head', 'culori_customizare');
function culori_customizare() {
?>
<style>
    .ast-primary-header-bar {
        background-color: <?php echo get_theme_mod('menu_background_color', '#FFA500'); ?>;
</style>
<?php
    }
}

To edit certain texts on the site, we still use the following code inside the ‘customization_settings’ function:

//setari text 
            $wp_customize->add_setting(
                'descriere_text',
                array(
                    'default'   =>  'Lore ipsum ...',
                    'transport' =>  'refresh'
                )
            );


            //adaugare input text
            $wp_customize->add_control(
                'descriere_text', 
                 array(
                     'type'          => 'text',
                     'label'         => 'Descriere Site Footer',
                     'section'       => 'Culori_pentru_Website',
                     'settings'      => 'descriere_text',
                 ) 
         );

Using this code, we create a setting that we call ‘text_description’. As with the previously created color setting, we have ‘default’ and ‘transport’ options. Now, in order to make the changes in this panel, we need to replace in the theme code the text we want to replace with:

<?php echo <?php echo esc_url( get_theme_mod( 'descriere_text' ) ); ?>">

Next, we can add various settings, depending on the need of the project!