WP theme setting 2 images in the header via custom-header - php

I have a WP template that set the header image using the following in the functions.php
add_theme_support( 'custom-header' );
$defaults = array(
'default-image' => get_template_directory_uri() . '/images/100.png',
'width' => 1100,
'height' => 500,
);
add_theme_support( 'custom-header', $defaults );
I want to be able to set 2 images in the header and update these via the admin appearance->header menu, is this possible? Any reference to documentation on this would help as I couldn't find any.
If I add the following, both are under one section, is there anyway to split them:
function example_customizer( $wp_customize ) {
$wp_customize->add_section(
'example_section_one',
array(
'title' => 'Example Settings',
'description' => 'This is a settings section.',
'priority' => 35,
)
);
$wp_customize->add_setting(
'copyright_textbox',
array(
'default' => 'Default copyright text',
)
);
$wp_customize->add_control(
'copyright_textbox',
array(
'label' => 'Copyright text',
'section' => 'example_section_one',
'type' => 'text',
)
);
}
add_action( 'customize_register', 'example_customizer' );
function example_customizer1( $wp_customize ) {
$wp_customize->add_section(
'example_section_img',
array(
'title' => 'Example img',
'description' => 'This is a settings img.',
'priority' => 36,
)
);
$wp_customize->add_setting( 'img-upload' );
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'img-upload',
array(
'label' => 'Image Upload',
'section' => 'example_section_one',
'settings' => 'img-upload'
)
)
);
}
add_action( 'customize_register', 'example_customizer1' );

Related

wp.customize is not a function

So I've been developing my own theme on a Mutlisite and one of the test sites I'm working on using a default theme I'm building is outputting the following error:
Uncaught TypeError: wp.customize is not a function
at HTMLDocument.<anonymous> (customizer.js?ver=4.9.5:3)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)
My functions.php has these functions included:
<?php
// Include Theme Customizer Settings
require_once('includes/customizer.php');
//
// MEDIA LIBRARY QUEUE
add_action('wp_enqueue_scripts', 'my_register_javascript', 100);
function my_register_javascript() {
wp_register_script('mediaelement', plugins_url('wp-mediaelement.min.js', __FILE__), array('jquery'), '4.8.2', true);
wp_enqueue_script('mediaelement');
}
// REQUIRE BS MENU
require_once get_template_directory() . '/includes/class-wp-bootstrap-navwalker.php';
// REGISTER MAIN MENU LOCATION
function register_my_menu() {
register_nav_menu('main-menu',__( 'Main Menu' ));
}
add_action( 'init', 'register_my_menu' );
// ADD LOGO SUPPORT TO THEME
function pb_custom_logo() {
add_theme_support( 'custom-logo', array(
'header-text' => array( 'site-title', 'site-description' ),
));
}
add_action( 'after_setup_theme', 'pb_custom_logo' );
function theme_prefix_the_custom_logo() {
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
}
// Add thumbnail support to posts
add_theme_support( 'post-thumbnails' );
// Create Services Post Type
function services_posttype() {
register_post_type( 'Services',
// CPT Options
array(
'labels' => array(
'name' => __( 'Services' ),
'singular_name' => __( 'Service' )
),
'public' => true,
'has_archive' => true,
'supports' => array('title','editor','thumbnail'),
'rewrite' => array('slug' => 'services'),
)
);
}
// Hooking up our function to theme setup
add_action( 'init', 'services_posttype' );
?>
Customizer.php:
<?php
function wpdocs_scripts_method() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/customizer.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
add_action( 'customize_register', 'pb_customizer_settings' );
function pb_customizer_settings( $wp_customize ) {
//
// MAIN HOME BANNER
//
$wp_customize->add_section( 'pb_front_page_banner' , array(
'title' => 'Front Page Banner',
'priority' => 30,
));
$wp_customize->add_setting( 'banner_image' , array(
'transport' => 'refresh',
));
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,'banner_image',array(
'label' => 'Banner Image',
'section' => 'pb_front_page_banner',
'settings' => 'banner_image',
'priority' => 2,
'description' => 'This will change your photo on the main header of the front page.',
)
)
);
// BANNER TITLE
$wp_customize->add_setting('banner_title', array(
'default' => 'This is the main header content.',
'transport' => 'postMessage',
));
$wp_customize->add_control( 'banner_title', array(
'label' => 'Banner Title',
'section' => 'pb_front_page_banner',
'type' => 'text',
'description' => 'This is the main title on the banner.',
));
// BANNER PARAGRAPH
$wp_customize->add_setting('banner_para', array(
'default' => 'This is the main content which will be displayed in a paragraph.',
'transport' => 'postMessage',
));
$wp_customize->add_control( 'banner_para', array(
'label' => 'Banner Paragraph',
'section' => 'pb_front_page_banner',
'type' => 'textarea',
'description' => 'This is the text under the main title on the banner.',
));
/////////////////////
// CONTACT DETAILS //
/////////////////////
// Create the section
$wp_customize->add_section('pb_foot_contact' , array(
'title' => 'Contact Details',
'priority' => 30,
));
//Telephone
$wp_customize->add_setting('contact_det_tel', array(
'default' => '',
'transport' => 'postMessage',
));
$wp_customize->add_control('contact_det_tel', array(
'label' => 'Telephone Number',
'section' => 'pb_foot_contact',
'type' => 'text',
'description' => 'This will display your telephone number so customers can call you.',
'input_attrs' => array(
'placeholder' => __('e.g 0151 123 4567'),
)
));
//Email Address
$wp_customize->add_setting('contact_det_email', array(
'default' => '',
'transport' => 'postMessage',
));
$wp_customize->add_control('contact_det_email', array(
'label' => 'E-Mail Address',
'section' => 'pb_foot_contact',
'type' => 'text',
'description' => 'This will show customers what E-Mail Address you can be contacted on.',
'input_attrs' => array(
'placeholder' => __( 'e.g info#powerbookings.com'),
)
));
//Company Address
$wp_customize->add_setting('contact_det_address', array(
'default' => '',
'transport' => 'postMessage',
));
$wp_customize->add_control('contact_det_address', array(
'label' => 'Company Address',
'section' => 'pb_foot_contact',
'type' => 'textarea',
'description' => 'This will display your trading address to your customers. Create a new line by typing <code><br></code>. ',
'input_attrs' => array(
'placeholder' => __('Company Address'),
)
));
//Company Address
$wp_customize->add_setting('contact_det_opening', array(
'default' => '',
'transport' => 'postMessage',
));
$wp_customize->add_control('contact_det_opening', array(
'label' => 'Opening Hours',
'section' => 'pb_foot_contact',
'type' => 'textarea',
'description' => 'Show your customers what times you are open, and when you are closed. Create a new line by typing <code><br></code>.',
'input_attrs' => array(
'placeholder' => __('Opening Hours'),
)
));
}
?>
Customizer.js
jQuery(document).ready( function($){
wp.customize( 'banner_title', function( value ) {
value.bind( function( newval ) {
$( '.mi-content h1' ).html( newval );
} );
} );
wp.customize( 'banner_para', function( value ) {
value.bind( function( newval ) {
$( '.mi-content p' ).html( newval );
} );
} );
wp.customize('contact_det_tel', function(value) {
console.log("postMessage");
value.bind(function(newval) {
$('.contact_det_tel').html(newval);
} );
});
wp.customize('contact_det_email', function(value) {
value.bind(function(newval) {
$('.contact_det_email').html(newval);
} );
});
wp.customize('contact_det_address', function(value) {
value.bind(function(newval) {
$('.contact_det_address').html(newval);
} );
});
wp.customize('contact_det_opening', function(value) {
value.bind(function(newval) {
$('.contact_det_opening').html(newval);
} );
});
});
Now it seems that the functions work when I edit the site using the WordPress customizer but when I view the site on the front end it gets the first message.
I'm assuming I'm linking the files somewhere else in the theme but I can't seem to grasp where, or how it's being included. The file in question is the customize.js so I just need to figure out what it is that's causing it.
That's all the information that I think is relevant to this, if someone has a solution I would be grateful if they could help me.
Many thanks
I ran into this same issue recently, and tried a number of things to solve the issue, including moving my hook out of functions.php and into, my customiser.php itself.
I managed to solve it by adjusting the following thanks to the WP
Codex;
add_action( 'customize_preview_init', 'theme_preview_register' );
function theme_preview_register() {
// Customizer JS
wp_enqueue_script(
'wpa-customizer',
get_stylesheet_directory_uri() . '/js/wpa-customizer.js',
array( 'jquery','customize-preview' ), // <<< Specify Dependencies...
true );
}
#Matty Clarke, you should enqueue your script in customize_preview_init hook.
i.e. This line
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
becomes
add_action( 'customize_preview_init', 'wpdocs_scripts_method' );

Adding a customized section in wordpress menu using wp_customize to select images

I have the following function in my function.php file;
function customize_images($wp_customize){
$wp_customize->add_section( 'customize_images_save', array(
'title' => __('Custom Image', 'themename'),
'description' => 'Select Image',
'priority' => 120,
));
$wp_customize->add_setting( 'image_option', array(
'default' => 'image.jpg',
'capability' => 'edit_theme_options',
'type' => 'option',
));
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'image_option', array(
'label' => __('Select Image', 'themename'),
'description' => '',
'section' => 'customize_images_save',
'priority' => 10,
'settings' => 'image_option',
)));
}
which is supposed to add a custom section in my WordPress customize menu.
Then the following codes to display the image in my home-page.php file;
<?php
$my_image_top = get_theme_mod( 'image_option', 'default.jpg' );
$image_top = wp_get_attachment_image_src( $my_image_top , 'full' );
?>
<img src="<?php echo $image_top ?>">
Unfortunately it's not displaying anything and it's just returning a blank <img src"">. I've been struggling to find the error, any help?
Found the issue, here's the correction in $wp_customize->add_setting.
Here's the setting reference from WordPress Codex;
<?php add_settings_field( $id, $title, $callback, $page, $section, $args ); ?>
Wrong Argument Old Code;
$wp_customize->add_setting( 'image_option', array(
'default' => 'image.jpg',
'capability' => 'edit_theme_options',
'type' => 'option',
));
I was having the image selector 'type' => 'option' as an option.
Here's the edited Code which fix this matter:
$wp_customize->add_setting( 'image_option', array(
'default' => 'image.jpg',
));
I hope it help someone in the future. More information about the $wp_customize->add_setting Usage here: WordPress Function Reference/add settings field

Adding new Icons to Visual Composer

I am trying to add a new font icon set to Visual Composer and although the name is appearing in the dropdown; No dropdown for the actual font icons are being loaded and I cannot figure out what's missing or wrong with my code below.
Any help would be much appreciated.
// Add new custom font to Font Family selection in icon box module
function reach_add_new_icon_set_to_iconbox( ) {
$param = WPBMap::getParam( 'vc_icon', 'type' );
$param['value'][__( 'Reach Icons', 'reach-rdp' )] = 'reach_icons';
vc_update_shortcode_param( 'vc_icon', $param );
}
add_filter( 'init', 'reach_add_new_icon_set_to_iconbox', 40 );
function reach_add_font_picker() {
vc_add_param( 'vc_icon', array(
'type' => 'iconpicker',
'heading' => esc_html__( 'Icon', 'reach-rdp' ),
'param_name' => 'icons_reach_icons',
'settings' => array(
'emptyIcon' => false,
'type' => 'reach_icons',
'iconsPerPage' => 20,
),
'dependency' => array(
'element' => 'icon_type',
'value' => 'reach_icons',
),
'group' => esc_html__( 'Icon', 'reach-rdp' ),
)
);
}
add_filter( 'vc_after_init', 'reach_add_font_picker', 40 );
function reach_vc_iconpicker_type_reach_icons( $icons ) {
// Add custom icons to array
$icons['Reach Icons'] = array(
array( "icon-arrow-left" => "Arrow Left" ),
);
// Return icons
return $icons;
}
add_filter( 'vc_iconpicker-type-reach_icons', 'reach_vc_iconpicker_type_reach_icons' );
/**
* Register Backend and Frontend CSS Styles
*/
add_action( 'vc_base_register_front_css', 'leadinjection_vc_iconpicker_base_register_css' );
add_action( 'vc_base_register_admin_css', 'leadinjection_vc_iconpicker_base_register_css' );
function leadinjection_vc_iconpicker_base_register_css(){
wp_register_style('reach_icons', get_stylesheet_directory_uri() . '/assets/css/reach-font.css');
}
/**
* Enqueue Backend and Frontend CSS Styles
*/
add_action( 'vc_backend_editor_enqueue_js_css', 'leadinjection_vc_iconpicker_editor_jscss' );
add_action( 'vc_frontend_editor_enqueue_js_css', 'leadinjection_vc_iconpicker_editor_jscss' );
function leadinjection_vc_iconpicker_editor_jscss(){
wp_enqueue_style( 'reach_icons' );
}
It looks like you do the most things correct, you just need to replace:
add_filter('init....)
to:
add_action('vc_after_init',....)
update:
Also you have a wrong param name in dependency.
it should be:
'element' => 'type',
And I also will recommend to use the weight attribute to make sorting better:
function reach_add_new_icon_set_to_iconbox( ) {
$param = WPBMap::getParam( 'vc_icon', 'type' );
$param['value'][__( 'Reach Icons', 'reach-rdp' )] = 'reach_icons';
$param['weight'] = 90;
vc_update_shortcode_param( 'vc_icon', $param );
}
and
function reach_add_font_picker() {
vc_add_param( 'vc_icon', array(
'type' => 'iconpicker',
'heading' => esc_html__( 'Icon', 'reach-rdp' ),
'param_name' => 'icons_reach_icons',
'settings' => array(
'emptyIcon' => false,
'type' => 'reach_icons',
'iconsPerPage' => 20,
),
'weight' => 80,
'dependency' => array(
'element' => 'type',
'value' => 'reach_icons',
),
)
);
}
I needed to achieve exactly the same thing - although the icon set I'm adding is selection of icons from the Font Awesome Pro set. Using the answer that almost worked above, here is my fully working version. This is tested and working in version 5.5.2 of WPBakery. I hope this helps someone!
// In the 'Icon library' dropdown for an icon content type, add a new family of icons.
function fapro_add_to_iconbox() {
$param = WPBMap::getParam( 'vc_icon', 'type' );
$param['value'][ __( 'FontAwesome Pro icons', 'js_composer' ) ] = 'fapro';
vc_update_shortcode_param( 'vc_icon', $param );
}
add_filter( 'vc_after_init', 'fapro_add_to_iconbox', 40 );
// This adds a new parameter to the vc_icon content block.
// This parameter is an icon_picker element,
// that displays when fapro is picked from the dropdown.
function fapro_add_font_picker() {
$settings = array(
'type' => 'iconpicker',
'heading' => __( 'Icon', 'js_composer' ),
'param_name' => 'icon_fapro',
'settings' => array(
'emptyIcon' => false,
'type' => 'fapro',
'iconsPerPage' => 20,
),
'dependency' => array(
'element' => 'type',
'value' => 'fapro',
),
'weight' => '1',
'description' => __( 'Select icon from library.', 'js_composer' ),
);
vc_add_param( 'vc_icon', $settings );
}
add_filter( 'vc_after_init', 'fapro_add_font_picker', 50 );
// Add all the icons we want to display in our font family.
function vc_iconpicker_type_fapro( $icons ) {
// Add custom icons to array.
$fapro_icons = array(
array( 'far fa-bacon' => 'Bacon' ),
array( 'fas fa-hamburger' => 'Hamburger' ),
);
// Return icons.
return $fapro_icons;
}
add_filter( 'vc_iconpicker-type-fapro', 'vc_iconpicker_type_fapro' );
// Enqueue the CSS file so that the icons display in the backend editor.
function enqueue_fapro_font() {
wp_enqueue_style( 'agilechilli-font-awesome', 'https://pro.fontawesome.com/releases/v5.7.2/css/all.css' );
}
add_action( 'vc_backend_editor_enqueue_js_css', 'enqueue_fapro_font' );

wordpress customizer default settings not working

I'm working on my first theme for wordpress and I am running in to some problems.
I was busy building a customizer page for the theme.
It went great up until the customizer wouldn't parse the default settings to the css.
I've tried building the functions file all over again but nothing worked.
Could you guys take a look t the code and tell me if there is anything wrong, or if anyone else had this problem tell me what the solution is.
here is the code of my funtions.php file
<?php
add_theme_support( 'menus' );
if ( function_exists( 'register_nav_menus' ) ) {
register_nav_menus(
array(
'header-menu' => 'main'
)
);
}
add_action( 'init', 'register_my_menus' );
add_theme_support( 'post-thumbnails' );
function claboxico_customize_register( $wp_customize ) {
//fonts array
$googlefonts = array(
'arial'=>'Arial',
'verdana'=>'Verdana, Geneva',
'trebuchet'=>'Trebuchet',
'trebuchet ms'=>'Trebuchet MS',
//this list contains way more fonts
);
//general panel
$wp_customize->add_panel( 'colors', array(
'title' => __( 'Colors' ),
'description' => 'Edit the general styling',
) );
//general colors section
$wp_customize->add_section('primairy_color', array(
'title' => __('Primairy Colors', 'claboxico'),
'panel' => 'colors',
'description' => 'Edit the primairy color of the theme.'
));
//primairy color setting
$wp_customize->add_setting('primairy_color', array(
'default' => '#43bfd8',
));
//primairy color control
$wp_customize->add_control( new WP_Customize_Color_control( $wp_customize, 'primairy_color', array(
'label' => __('Primairy Color', 'claboxico'),
'section' => 'primairy_color',
'setting' => 'primairy_color',
) ));
//link kleur
$wp_customize->add_section('link_color', array(
'title' => __('Link Colors', 'claboxico'),
'panel' => 'colors',
'description' => 'Edit the color of the links.'
));
$wp_customize->add_setting('link_color', array(
'default' => '#0eb1ed',
));
$wp_customize->add_control( new WP_Customize_Color_control( $wp_customize, 'link_color', array(
'label' => __('Link Color', 'claboxico'),
'section' => 'link_color',
'setting' => 'link_color',
) ));
//plain text color
$wp_customize->add_section('paragraph_color', array(
'title' => __('Paragraph Colors', 'claboxico'),
'panel' => 'colors',
'description' => 'Edit the paragraph text color.'
));
$wp_customize->add_setting('paragraph_color', array(
'default' => '#000',
));
$wp_customize->add_control( new WP_Customize_Color_control( $wp_customize, 'paragraph_color', array(
'label' => __('Link Color', 'claboxico'),
'section' => 'paragraph_color',
'setting' => 'paragraph_color',
) ));
//fonts panel
$wp_customize->add_panel( 'fonts', array(
'title' => __( 'Fonts' ),
'description' => 'Edit the fonts',
) );
//heading fonts section
$wp_customize->add_section('heading_font', array(
'title' => __('Heading fonts', 'claboxico'),
'panel' => 'fonts',
'description' => 'Edit the font for h1, h2 etc.'
));
$wp_customize->add_setting('heading_font', array(
'default' => 'Rokkitt',
));
$wp_customize->add_control( 'heading_font',array(
'type' => 'select',
'label' => __('Heading font', 'claboxico'),
'section' => 'heading_font',
'setting' => '',
'choices' => $googlefonts,
)
);
}
function claboxico_css_customizer() {
?>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=<?php
$font_sizes = ':300,400,700,900|';
$heading_google_font = get_theme_mod('heading_font');
$heading_font = str_replace(' ', '+', $heading_google_font);
echo $heading_font;
echo $font_sizes;
$paragraph_google_font = get_theme_mod('paragraph_font');
$paragraph_font = str_replace(' ', '+', $paragraph_google_font);
echo $paragraph_font;
echo $font_sizes;
?>);
body{font-family: '<?php echo get_theme_mod('paragraph_font'); ?>'; color: <?php echo get_theme_mod('paragraph_color'); ?> }
/* background color */
.header{background-color: <?php echo get_theme_mod('header_background_color'); ?> ;}
/* heading colors and font */
h1, h2, h3, header .logo{color: <?php echo get_theme_mod('primairy_color', '#43bfd8');?> ; font-family:'<?php echo get_theme_mod('heading_font'); ?>';}
/*link colors*/
a, a:hover{color: <?php echo get_theme_mod('link_color');?>;}
/* primairy colors */
header{border-bottom-color: <?php echo get_theme_mod('primairy_color', '#43bfd8');?> ;}
header .mobile-header-icon, header nav ul li a{color: <?php echo get_theme_mod('primairy_color', '#43bfd8');?> ;}
footer{border-top-color: <?php echo get_theme_mod('primairy_color', '#43bfd8');?> ;}
</style>
<?php
}
add_action('wp_head', 'claboxico_css_customizer');
add_action( 'customize_register', 'claboxico_customize_register' );
?>
I hope someone can help me with this problem.
Function get_theme_mod can take two parameters.
$name (required) = name of setting
$default (optional) = default value if there is no value set in the database
Check Codex page: https://codex.wordpress.org/Function_Reference/get_theme_mod
Example:
$color = get_theme_mod( 'link_color', '#ff0000' );
In this example default value of #ff0000 is passed. If value is set then that saved value will returned otherwise $color will get default value #ff0000.

Wordpress - How do I use the media library for customization options?

I'm using Underscores to build a Wordpress theme and I've added an image selector to the customization section, which appears just like the default Background Image section, except clicking 'Select Image' doesn't bring up the media library like I hoped it would. Here's the code I'm using:
function hi_customization_options( $wp_customize ) {
$wp_customize->add_section(
'landing_page_image',
array(
'title' => 'Landing Page Image',
'priority' => 35,
)
);
$wp_customize->add_setting(
'lp-image_selector',
array(
'default' => '',
)
);
$wp_customize->add_control(
'lp-image_selector',
array(
'label' => 'Landing Page Image',
'section' => 'landing_page_image',
'type' => 'image',
)
);
}
add_action( 'customize_register', 'hi_customization_options' );
I think I need to add a 'choices' array to the add_control section, but how do I use that to target the media library?
Thanks
I figured this out. For anyone facing the same issue, I ended up using this code instead:
function hi_customization_options( $wp_customize ) {
$wp_customize->add_section(
'landing_page_image',
array(
'title' => 'Landing Page Image',
'priority' => 35,
)
);
$wp_customize->add_setting(
'lp-image_selector',
array(
'default' => '',
)
);
$wp_customize->add_setting( 'img-upload' );
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'lp-image_selector',
array(
'label' => 'Landing Page Image',
'section' => 'landing_page_image',
'settings' => 'img-upload'
)
)
);
}
add_action( 'customize_register', 'hi_customization_options' );

Categories