Last active
November 14, 2019 21:55
-
-
Save neilgee/2531c67100c1ccfae89d to your computer and use it in GitHub Desktop.
Set Background Image of Widget Area in Customizer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| add_action( 'customize_register', 'genesischild_register_theme_customizer' ); | |
| /* | |
| * Register Our Customizer Stuff Here | |
| */ | |
| function genesischild_register_theme_customizer( $wp_customize ) { | |
| // Create custom panel | |
| $wp_customize->add_panel( 'featured_images', array( | |
| 'priority' => 70, | |
| 'theme_supports' => '', | |
| 'title' => __( 'Featured Images', 'genesischild' ), | |
| 'description' => __( 'Set background images for certain widgets.', 'genesischild' ), | |
| ) ); | |
| // Add Featured Image for Hero Widget | |
| // Add section | |
| $wp_customize->add_section( 'hero_background' , array( | |
| 'title' => __('Hero Background','genesischild'), | |
| 'panel' => 'featured_images', | |
| 'priority' => 20 | |
| ) ); | |
| // Add setting | |
| $wp_customize->add_setting( 'hero_bg', array( | |
| 'default' => get_stylesheet_directory_uri() . '/images/hero-bg.jpg', | |
| 'description' => __('this is the description', 'genesischild'), | |
| ) | |
| ); | |
| // Add control | |
| $wp_customize->add_control( | |
| new WP_Customize_Image_Control( | |
| $wp_customize, 'hero_background_image', array( | |
| 'label' => __( 'Add Hero Background Here, the width should be approx 1400px', 'genesischild' ), | |
| 'section' => 'hero_background', | |
| 'settings' => 'hero_bg', | |
| ) | |
| ) | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| add_action( 'wp_enqueue_scripts', 'genesischild_css' ); | |
| /** | |
| * Output CSS for background image | |
| */ | |
| function genesischild_css() { | |
| wp_enqueue_style( 'genesischild', get_stylesheet_directory_uri() . '/style.css' ); | |
| $handle = 'genesischild'; | |
| $css = ''; | |
| $hero_bg_image = get_theme_mod( 'hero_bg' ); // Assigning it to a variable to keep the markup clean. | |
| $css = ( $hero_bg_image !== '') ? sprintf(' | |
| .herocontainer { | |
| background: url(%s) no-repeat center; | |
| background-size: cover; | |
| } | |
| ', $hero_bg_image ) : ''; | |
| if ( $css ) { | |
| wp_add_inline_style( $handle , $css ); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Register and unregister and position all the widgets. | |
| */ | |
| add_action( 'widgets_init', 'genesischild_extra_widgets' ); | |
| /** | |
| * Register new Widget areas and position them. | |
| */ | |
| function genesischild_extra_widgets() { | |
| genesis_register_sidebar( array( | |
| 'id' => 'hero', | |
| 'name' => __( 'Hero Home Page', 'genesischild' ), | |
| 'description' => __( 'This is the Hero Home Page area', 'genesischild' ), | |
| ) ); | |
| } | |
| add_action( 'genesis_after_header','genesischild_hero_widget' ); | |
| /** | |
| * Position the Hero Area. | |
| */ | |
| function genesischild_hero_widget() { | |
| genesis_widget_area( 'hero', array( | |
| 'before' => '<section class="herocontainer"><div class="wrap hero">', | |
| 'after' => '</div></section>', | |
| )); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment