CodePopular Sign In
Develop Theme Options Using Theme Customization API in WordPress

09 June 2020

To add your own options to the Customizer , you need to use a minimum of 2 hooks

  1. customize_register
  2. wp_head

customize_register

This hook allows you to define new Customizer panels, sections, settings, and controls.

wp_head

This hook allows you to output custom-generated CSS so that your changes show up correctly on the live website.

Add This flowing code in  functions.php

function codepopular_customize_register($wp_customize) {
  $wp_customize->add_section('codepopular_new_section',
  [
  'title' => ('Theme Options', 'text-domain'),  'priority' => 1  ]);   $wp_customize->add_setting('logo_text_color',   array('default' => '#000000',   'transport' => 'refresh',   ));   $wp_customize->add_setting('header_background',   array('default' => '#000000',    'transport' => 'refresh',    ));   $wp_customize->add_setting('footer_background',   array('default' => '#ffffff',    'transport' => 'refresh',    ));   $wp_customize->add_control(new WP_Customize_Color_Control(   $wp_customize, 'logo_text_color',    array(    'label' => __('Logo Text Color', 'text-domain'),     'section' => 'codepopular_new_section',     'settings' => 'logo_text_color',     'type' => 'color'     )));     $wp_customize->add_control(     new WP_Customize_Color_Control($wp_customize,  'header_background_color', array('label' => ('Header Background', 'text-domain'),
  'section' => 'codepopular_new_section',
 'settings' => 'header_background', 'type' => 'color')));
 $wp_customize->add_control(new WP_Customize_Color_Control(
 $wp_customize,
 'footer_background_color',
  array('label' => __('Footer Background', 'text-domain'),
 'section' => 'codepopular_new_section',
 'settings' => 'footer_background', 'type' => 'color'))); }
 add_action('customize_register', 'codepopular_customize_register');
 function mytheme_customize_css() { ? >
 .site-logo h2 a{  color: <?php echo get_theme_mod('logo_text_color', '#000000'); ?>; }  
 < ? php }
  add_action('wp_head', 'mytheme_customize_css');

Show Header Background Value

<?php echo get_theme_mod('header_background'); ?>

Show Footer Background Value

<?php echo get_theme_mod('footer_background'); ?>
Share on :
Tags :

Popular Post

07 Jun 2020 12:10:35 pm
28 Feb 2020 06:02:13 am