How to create your own options in the WordPress Customizer.

With the Word­Press Cus­to­mi­zer, you can quick­ly and easi­ly pro­vi­de opti­ons for your the­me. I’ll show you how easy it is and how to crea­te your indi­vi­du­al sec­tions.

Extend theme #

In order for you to add your own sec­tions, we need to hook into Word­Press via an action hook.

For this we first crea­te the file “WordPressThemeCustomizer.php” in the the­me direc­to­ry. If it is not your the­me, you should do the who­le thing in a child the­me.

Then open the file and add the fol­lo­wing code:

class WordPressThemeCustomizer {
   public function __construct() {
      add_action( 'customize_register', array( $this, 'run' ));
   }

   public function run(WP_Customize_Manager $WPCustomizer ) {
   }
}
$WPTC = new WordPressThemeCustomizer();

Now, auto­ma­ti­cal­ly, as soon as Word­Press exe­cu­tes the action “customize_register” the func­tion “run” from your class “Word­Press­The­me­Cus­to­mi­zer” is cal­led.

Now chan­ge to the “functions.php” of your the­me and include the new class the­re.

require_once('WordPressThemeCustomizer.php');

How to create a section. #

You can now add a new sec­tion in the class “Word­Press­The­me­Cus­to­mi­zer” by exten­ding the func­tion “run”. The fol­lo­wing code shows you how to add a sec­tion with the name “Title of the sec­tion”.

public function run(WP_Customize_Manager $WPCustomizer ) {
        $WPCustomizer->add_section( 'deine_sektion', array(
	      'title'       => __( 'Titel der Sektion' ),
      	      'priority'    => 120,
              'description' => __( 'Beschreibung der Sektion')
        ) );
}

Once you have inser­ted the code, you can use the sec­tion for your con­trol­lers. Later the who­le thing looks like this:

Note: A sec­tion is only dis­play­ed if it has at least one “Con­trol­ler”. The­r­e­fo­re you will not see your sec­tion at the moment.

How to create a controller. #

Word­Press alre­a­dy offers you a ran­ge of con­trol­lers that you can use to map your opti­ons. If that’s not enough, you can always add your own con­trol­lers. I’ll show you how to access the exis­ting clas­ses of Word­Press to crea­te default opti­ons.

• WP_Customize_Control — Used for: Text fields, text­are­as, sel­ec­tion boxes, radi­os and check­bo­xes.
• WP_Customize_Color_Control — Allows you to add a color sel­ec­tion field.
• WP_Customize_Image_Control — Allows you to add images.

Add text field

Let’s get star­ted right away and inte­gra­te a simp­le text field. Extend the func­tion “run” in the class “Word­Press­The­me­Cus­to­mi­zer” with the fol­lo­wing lines:

$WPCustomizer->add_setting( '_hier_kommt_mein_text' );
$TextController = new \WP_Customize_Control(
      $WPCustomizer, 
      '_hier_kommt_mein_text', 
      array(
	     'label'   => __( 'Mein Text:'),
             'section' => 'deine_sektion',
      )
);
$WPCustomizer->add_control( $TextController );

You can find more infor­ma­ti­on about the para­me­ters in the Word­Press Codex.

Save the who­le thing and look at it in the Cus­to­mi­zer, you should now be able to see both the sec­tion and the text box.

Of cour­se, we can expand the who­le thing now.

Add image

$WPCustomizer->add_setting( '_logo' );
$LogoImageController = new \WP_Customize_Image_Control(
	$WPCustomizer, '_logo', array(
		'label'    => __( 'Logo hinzufügen'),
		'section'  => 'deine_sektion',
		'settings' => '_logo'
	)
);
$WPCustomizer->add_control( $LogoImageController );

Add color field

$WPCustomizer->add_setting( '_color' );
$TextColorController = new \WP_Customize_Color_Control(
	$WPCustomizer, '_color', array(
		'label'   => __( 'Farbe', 'forge12' ),
		'section' => 'deine_sektion'
	)
);
$WPCustomizer->add_control( $TextColorController );

Add selection field

$WPCustomizer->add_setting( '_decoration' );
$DecorationController = new \WP_Customize_Control(
	$WPCustomizer, '_decoration', array(
		'label'   => __( 'Dekoration', 'forge12' ),
		'section' => 'deine_sektion',
		'type'    => 'select',
		'choices' => array(
			'0' => __( 'Ohne' ),
			'1' => _( 'Unterstrichen' )
		)
	)
);
$WPCustomizer->add_control( $DecorationController );

This is what the whole thing looks like

Once you’­re done, it should look some­thing like this or some­thing like this.

How to retrieve the data #

Now we still need to inte­gra­te the data into the the­me. To access the para­me­ters, use the fol­lo­wing code:

get_theme_mod('<id des feldes>');

For exam­p­le, you can retrie­ve the text field crea­ted abo­ve with the fol­lo­wing PHP code:

echo get_theme_mod('_hier_kommt_mein_text');

Summary #

Using the Word­Press Cus­to­mi­zer to extend your the­me and offer a litt­le more usa­bi­li­ty is straight­for­ward. Word­Press pro­ves once again that through the modu­lar struc­tu­re, a gre­at fle­xi­bi­li­ty is gua­ran­teed.

I hope you enjoy­ed this short artic­le. If you have any ques­ti­ons or feed­back, feel free to lea­ve a com­ment.