Skip to content

Instantly share code, notes, and snippets.

@danielck

danielck/customizer-preview.js

Last active March 16, 2021 11:19
Download ZIP

Revisions

  1. danielck revised this gist Apr 22, 2017. 2 changed files with 47 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion customizer.php
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,7 @@ function my_customizer_controls( $wp_customize ) {
    'selector' => '.related-posts-container',
    'container_inclusive' => false,
    'render_callback' => function() {
    customizer_test_display_related_posts(); // you can use this same function in your template
    my_display_related_posts(); // you can use this same function in your template
    },
    ) );

    46 changes: 46 additions & 0 deletions related-posts.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    <?php
    /*
    Include this file in functions.php
    */

    /**
    * Displays a list of related posts. Should be called in single.php within the loop
    */
    function my_display_related_posts() {

    $number_of_posts = get_theme_mod( 'related_posts_number', 3 );

    // Get the categories for this post
    $post_categories_query = get_the_category();
    $post_categories_ids = wp_list_pluck( $post_categories_query, 'term_id' );

    // Get three posts with the same category
    $related_posts = new WP_Query( array(
    'posts_per_page' => absint( $number_of_posts ),
    'category__in' => $post_categories,
    'ignore_sticky_posts' => true,
    ) );

    // Loop over posts and display them
    if ( $related_posts->have_posts() ) {
    ?>
    <div class="related-posts-container">
    <h2><?php esc_html_e( 'Related posts', 'customizer-test' ); ?></h2>
    <ul class="related-posts-list">
    <?php
    while ( $related_posts->have_posts() ) {
    $related_posts->the_post();
    ?>
    <li>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
    <?php
    }
    ?>
    </ul>
    </div>
    <?php
    }
    wp_reset_postdata();

    }
  2. danielck revised this gist Apr 22, 2017. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions customizer-preview.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,13 @@
    /*
    Include this file in your theme and enqueue it like this in PHP:
    function my_customize_preview_js() {
    wp_enqueue_script( 'customizer-preview', get_template_directory_uri() . '/path/to/customizer.js', array( 'customize-preview' ), '20170422', true );
    }
    add_action( 'customize_preview_init', 'my_customize_preview_js' );
    */

    ( function( $ ) {

    // Site title and description.
  3. danielck created this gist Apr 22, 2017.
    30 changes: 30 additions & 0 deletions customizer-preview.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    ( function( $ ) {

    // Site title and description.
    wp.customize( 'blogname', function( value ) {
    value.bind( function( to ) {
    $( '.site-title a' ).text( to );
    } );
    } );
    wp.customize( 'blogdescription', function( value ) {
    value.bind( function( to ) {
    $( '.site-description' ).text( to );
    } );
    } );

    // Update footer address live
    wp.customize( 'footer_address', function( value ) {
    value.bind( function( to ) {
    $( '#js-footer-address' ).text( to );
    })
    } );

    // Update header colour live
    // Adjust the selector and styles according to your theme markup.
    wp.customize( 'header_color', function( value ) {
    value.bind( function( to ) {
    $( '.site-header' ).css( 'background', to );
    });
    } );

    } )( jQuery );
    103 changes: 103 additions & 0 deletions customizer.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    <?php
    /*
    Include this file in your theme functions.php
    */

    function my_customizer_controls( $wp_customize ) {

    // Add support for instant previewing of the built-in 'blogname' and 'blogdescription' options
    $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
    $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';

    //
    // RELATED POSTS: allow changing the number of related posts
    //
    // Create a section for related posts
    $wp_customize->add_section( 'related_posts_section', array(
    'title' => __( 'Related posts' ), // required
    'priority' => 160, // optional (default is 160)
    // Display this only on single posts
    'active_callback' => function() {
    return is_single(); // is_single(), is_page() type checks need to be inside a callback function
    }
    ) );

    // Add the setting for the number of related posts
    $wp_customize->add_setting( 'related_posts_number', array(
    'transport' => 'postMessage', // required for selective refresh, default is 'refresh'
    'sanizite_callback' => 'absint', // this can be the name of a function or an anonymous function
    'default' => 3,
    ) );

    // Add a control for the related posts setting
    $wp_customize->add_control( 'related_posts_number', array(
    'type' => 'number', // any HTML5 input type, select, textarea, dropdown-pages
    'section' => 'related_posts_section', // Required, core or custom.
    'label' => __( 'Number of posts to show' ),
    ) );

    // Register a partial for selectively updating the related posts component
    $wp_customize->selective_refresh->add_partial( 'related_posts_number', array(
    'selector' => '.related-posts-container',
    'container_inclusive' => false,
    'render_callback' => function() {
    customizer_test_display_related_posts(); // you can use this same function in your template
    },
    ) );

    //
    // ADDRESS IN THE FOOTER
    //
    $wp_customize->add_section( 'footer_address_section', array(
    'title' => 'Footer address',
    ) );

    $wp_customize->add_setting( 'footer_address', array(
    'transport' => 'postMessage', // required for live updating via JS
    'sanizite_callback' => 'esc_html',
    ) );


    //
    // CHANGE HEADER COLOUR
    //

    $wp_customize->add_setting( 'header_color', array(
    'default' => '#ffff00',
    'transport' => 'postMessage',
    ) );

    // This is a core custom control, you can also make your own by extending WP_Customize_Control
    $wp_customize->add_control(
    new WP_Customize_Color_Control(
    $wp_customize, // WP_Customize_Manager
    'header_color', // Setting id
    array( // Args, including any custom ones.
    'label' => __( 'Header Color' ),
    'section' => 'colors', // built-in
    )
    )
    );

    //
    // Want to learn more? Head to https://developer.wordpress.org/themes/customize-api/
    //

    }
    add_action( 'customize_register', 'my_customizer_controls' );

    /**
    * Hook into wp_head to dynamically set the background color of our heading.
    * Adjust the selector and styles according to your theme markup.
    */
    function my_custom_header_color() {
    $header_color = get_theme_mod( 'header_color' );
    ?>
    <style type="text/css">
    .site-header {
    background: <?php echo esc_html( $header_color ); ?>;
    }
    </style>
    <?php
    }
    add_action( 'wp_head', 'my_custom_header_color' );
    10 changes: 10 additions & 0 deletions example_footer.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <?php

    // Copy paste this code somewhere into your theme footer.php to show the address

    ?>
    <p id="js-footer-address"><?php
    $address = get_theme_mod( 'footer_address', '' );
    echo esc_html( $address );
    ?>
    </p>