• antonybearpark

    (@antonybearpark)


    I have a bunch of categories which I’ve managed to appear as icons with background colours on the posts list. I would like the option to customise these css styles in my theme customizer so it is easier to change later for other users rather than rummaging around in the CSS.

    I tried adding the following code to my functions.php, code that I’ve found whilst trying to read tutorials online:

    /*Customizer Code HERE*/
    add_action('customize_register', 'category_1_customizer');
    function category_1_customizer($wp_customize){
    $wp_customize->add_section('category_1_definition', array(
      'title'          => 'Edit Category 1 Styles'
     ));
    $wp_customize->add_setting('background_color', array(
     'default'        => '#adfd46',
     ));
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
     'label'   => 'Change Background Colour',
      'section' => 'category_1_definition',
     'settings'   => 'background_color',
    )));
    
    $wp_customize->add_setting('category_icon');
    $wp_customize->add_control(new WP_Customize_Upload_Control($wp_customize,'category_icon',array(
     'label'      => __('Category Icon', 'invest'),
     'section'    => 'category_1_definition',
     'settings'   => 'category_icon',
     )));
    
    }
    
    function invest_customize_css()
    {
        ?>
             <style type="text/css">
                 .corporate .sticky-category, .corporate .bottom-category { background:url(<?php echo get_theme_mod('category_icon'); ?>) no-repeat <?php echo get_theme_mod('background_colour', '#adfd46'); ?>; }
             </style>
        <?php
    }
    add_action( 'customize_register', 'category_1_customizer');

    The style I want changing is the following:

    .corporate .sticky-category, .corporate .bottom-category {
    	height: 80px;
    	width: 80px;
    	background:url(/wp-content/uploads/2016/05/category-1.png) no-repeat #adfd46;
    	background-position:50% 50%;
    	float:left;
    	background-size:50px 50px;
    	margin-top:247px;
    }

    The Customizer options appear in the Customizer but nothing happens when I change a background colour, so there is something apparent I’m doing wrong but I cannot find a tutorial online to help me with this.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)

The topic ‘Customizer Options for Categories’ is closed to new replies.