WordPress Custom Header Repeat and Full Width Options

0 Views

Ive been digging through the wp codex with no luck, i have the customizer custom header enabled and i can upload images, from there i can set some css to choose whether i want it to be full width or repeated, however i want to add a option to customizer to allow me to choose repeat or full width as the image might change and not always be a long banner.

currently using these parameters:

// Add Theme Support for Custom Header
//     ===========================================================================     //
 $defaults = array(

'width'           => 0,
'height'          => 0,
'flex-width'      => true,
'flex-height'     => true,
'uploads'         => true,
'random-default'  => false,
'header-text'     => false,
'default-text-color'  => '',
'wp-head'             => '',
'admin-head-callback' => '',
'admin-preview-callback' => '',
'default-image'   => get_template_directory_uri() . '/images/header.jpg',
);

add_theme_support( 'custom-header', $defaults );
Post Views: 0

Related posts

1 comment

  1. You say “repeat” as an option, I assume the image will be used as a background. You would have to use CSS for this, thus no setting available for custom header. However, you can make a separate control and setting, and add them to the custom header section. It would look something like this…

    <?php
$wp_customize->add_control(
    'header_background_size', 
    array(
        'label'    => __( 'Background Style', 'mytheme' ),
        'section'  => 'header_image',
        'settings' => 'header_background_size',
        'type'     => 'select',
        'choices'  => array(
            'cover'  => 'Cover',
            'contain' => 'Contain',
            'auto' => 'Normal',
        ),
    )
);

$wp_customize->add_setting( 'header_background_size' , array(
    'default'     => 'cover',
    'transport'   => 'refresh',
) );

$wp_customize->add_control(
    'header_background_repeat', 
    array(
        'label'    => __( 'Background Style', 'mytheme' ),
        'section'  => 'header_image',
        'settings' => 'header_background_repeat',
        'type'     => 'select',
        'choices'  => array(
            'repeat'  => 'Repeat',
            'repeat-x' => 'Repeat X',
            'repeat-y' => 'Repeat Y',
            'no-repeat' => 'No Repeat',
        ),
    )
);

$wp_customize->add_setting( 'header_background_repeat' , array(
    'default'     => 'repeat',
    'transport'   => 'refresh',
) );
?>

    And your header div would look something like this…

    <div class="header" 
<?php if ( get_custom_header() ) : ?>
style="
background-image: url(<?php header_image(); ?>);
background-size:<?php echo get_theme_mod('header_background_size', 'cover'); ?>; 
background-repeat:<?php echo get_theme_mod('header_background_repeat', 'repeat'); ?>;
"
<? endif; ?>>

Comments are closed.