wordpress customizer default settings not working - php

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.

Related

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

wordpress customizer get_theme_mod no output

i am working on a theme for wordpress right now to see how it works etc. But now i want to implement some customizer settings/controls. So here is what i tried
function myfirsttheme_customizer_register($wp_customize){
$wp_customize->add_section('mycustomtheme_colors', array(
'title' => __('Colors','mycustomtheme'),
'description' => 'Modify the theme colors'
));
$wp_customize->add_setting('background_color', array(
'default' => '#fff',
));
$wp_customize->add_setting('link_color', array(
'default' => '#4b4b4',
));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
'label' => __('Edit Background Color', 'mycustomtheme'),
'section' => 'mycustomtheme_colors',
'settings' => 'background_color'
) ));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link-color', array(
'label' => __('Edit Link Color', 'mycustomtheme'),
'section' => 'mycustomtheme_colors',
'settings' => 'link_color'
) ));
}
add_action('wp_head','mycustomtheme_css_customizer');
add_action('customize_register','myfirsttheme_customizer_register');
and the HTML/CSS here
function mycustomtheme_css_customizer(){
?>
<style type="text/css">
article { background-color:<?php echo get_theme_mod('background_color');?> ; }
</style>
<?php
}
So when i change the line echo get_theme_mod('background_color'); with an actual color like #fff it works fine, but for some reason the get_theme_mod doesn't give an output and i can't understand why not.
add these line in your setting array
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
following code will work
function myfirsttheme_customizer_register($wp_customize){
$wp_customize->add_section('mycustomtheme_colors', array(
'title' => __('Colors','mycustomtheme'),
'description' => 'Modify the theme colors'
));
$wp_customize->add_setting('background_color', array(
'default' => '#fff',
'type' => 'theme_mod',
'capability' => 'edit_theme_options'
));
$wp_customize->add_setting('link_color', array(
'default' => '#4b4b4',
'type' => 'theme_mod',
'capability' => 'edit_theme_options'
));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
'label' => __('Edit Background Color', 'mycustomtheme'),
'section' => 'mycustomtheme_colors',
'settings' => 'background_color'
) ));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link-color', array(
'label' => __('Edit Link Color', 'mycustomtheme'),
'section' => 'mycustomtheme_colors',
'settings' => 'link_color'
) ));
}
add_action('customize_register','myfirsttheme_customizer_register');

WP Customizer on a webserver not changing the CSS

I created my own theme in WordPress in which users are able to set a custom background-color.
When running locally on XAMPP, I have no problem, but when I upload the theme to a web server the background color disappears. When I go into the Customizer tab the background color is correct. The WordPress on the webserver is a fresh install.
It seems like this line is responsible for the missing color:
<?php echo get_theme_mod('info_bg_color'); ?>
How it looks on a webserver where the header and footer should be green.
(Picture)
When I open the customizer tab the colors are correct.
(Picture)
This is just a part of the code.
Please contact me for the full site.
Can anyone help me?
/*
================================
Customize Appearance Options
================================
*/
function info_customize_register( $wp_customize ){
// Add setting
$wp_customize->add_setting('info_txt_color', array(
'default' => '#FFF',
'transport' => 'refresh',
));
$wp_customize->add_setting('info_bg_color', array(
'default' => '#287e43',
'transport' => 'refresh',
));
$wp_customize->add_setting('info_border_color', array(
'default' => '#ba2e25',
'transport' => 'refresh',
));
$wp_customize->add_setting( 'info_logo' );
$wp_customize->add_setting('text_setting', array(
'default' => 'Logo',
));
// Add section
$wp_customize->add_section('info_colors',array(
'title' => __('Farver','info'),
'priority' => 30,
));
$wp_customize->add_section('info_header_logo',array(
'title' => __('Logo','info'),
'priority' => 30,
'description' => 'Upload et logo som vil erstatte "Logo" teksten i din header',
));
$wp_customize->add_section('footer_settings_section', array(
'title' => 'Footer Text Section'
));
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'info_txt_color_control', array(
'label' => __('Tekst Farve','info'),
'section' => 'info_colors',
'settings' => 'info_txt_color',
)));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'info_bg_color_control', array(
'label' => __('Baggrunds Farve','info'),
'section' => 'info_colors',
'settings' => 'info_bg_color',
)));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'info_border_color_control', array(
'label' => __('Border Farve','info'),
'section' => 'info_colors',
'settings' => 'info_border_color',
)));
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'info_logo_control', array(
'label' => __( 'Logo', 'info' ),
'section' => 'info_header_logo',
'settings' => 'info_logo',
)));
$wp_customize->add_control('text_setting', array(
'label' => 'Logo Tekst',
'section' => 'info_header_logo',
'type' => 'textarea',
));
}
add_action( 'customize_register' , 'info_customize_register' );
/*
================================
Customize Appearance Options
================================
*/
function info_customize_css() { ?>
<style type="text/css">
header p, #digital-time {
color: <?php echo get_theme_mod('info_txt_color'); ?>;
}
header {
background-color: <?php echo get_theme_mod('info_bg_color'); ?>;
border-bottom: 4px solid <?php echo get_theme_mod('info_border_color'); ?>;
}
footer {
background-color: <?php echo get_theme_mod('info_bg_color'); ?>;
border-top: 4px solid <?php echo get_theme_mod('info_border_color'); ?>;
}
</style>
<?php }
add_action( 'wp_head' , 'info_customize_css' );

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

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' );

Wordpress functions don't save

I am making a wordpress theme for free download.
I made some theme functions with $wp_customize what looks like this:
<?php
// theme options
function basilico_customizer_register($wp_customize) {
// Blog styling
$wp_customize->add_section('basilico_blog_styling', array(
'title' => __('Blog styling', 'basilico'),
'description' => 'Styling the blog'
));
$wp_customize->add_setting('main_color', array(
'default' => '#1b9145',
));
$wp_customize->add_control( new WP_Customize_color_Control($wp_customize, 'main_color', array(
'label' => __('Edit main background', 'basilico'),
'section' => 'basilico_blog_styling',
'settings' => 'main_color'
) ));
$wp_customize->add_setting('background_pattern', array(
'default' => get_template_directory_uri() . '/includes/bg.png',
));
$wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'background_pattern', array(
'label' => __('Edit background pattern', 'basilico'),
'section' => 'basilico_blog_styling',
'settings' => 'background_pattern'
) ));
// General settings
$wp_customize->add_section('basilico_general_settings', array(
'title' => __('Change logo', 'basilico'),
'description' => 'setting the general settings'
));
$wp_customize->add_setting('logo_image', array(
'default' => get_template_directory_uri() . '/includes/logo.png',
));
$wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'logo_image', array(
'label' => __('Edit logo image', 'basilico'),
'section' => 'basilico_general_settings',
'settings' => 'logo_image'
) ));
}
function basilico_css_customizer() {
?>
<style type="text/css">
.article_header,.button a,#bar1,#bar2,#bar3,thead th,.widget_title,#footer,nav ul li a:hover,nav ul li.current-menu-item > a,.nav-previous a,.nav-next a{
background-color:<?php echo get_theme_mod('main_color'); ?>;
}
.single_article_author span,.single_article_author span a,.cbp-spmenu .menu-item-has-children:before,ol li,h1,h2,h3,h4,hr,a{
color:<?php echo get_theme_mod('main_color'); ?>;
}
hr{
border-top: 2px solid <?php echo get_theme_mod('main_color'); ?>;
}
#overflow_container,body{
background-image:url(<?php echo get_theme_mod('background_pattern'); ?>);
}
</style>
<?php
}
add_action('customize_register', 'basilico_customizer_register');
add_action('wp_head', 'basilico_css_customizer');
?>
I tried to open my theme in a clean wordpress install, but all the defaults do not show..
Does someone know how to save these settings so the default settings show immediately after installing the theme.

Categories