Paulund theme customizer controls added to the library

I’ve added paulund theme customizer controls to my WordPress library plugin to allow me to go from nothing to this [caption id=“attachment_1003” align=“aligncenter” width=“978”]Announcement Announcement[/caption] with as little code as possible.

Setting up the theme customize fields

I will add an “Announcement section” to the Theme Customize screen to have this happening [caption id=“attachment_1004” align=“aligncenter” width=“955”]Backend to frontend Backend to Frontend[/caption] and will do so using the ThemeCustomizeSection and Option classes that I’ve developed into my libraries.
In the current theme functions.php file I will define a function to add the option fields to the theme customizer

function acme_add_announcement_theme_customize_section()
{

    // add the section
    $section = new \tad\wrappers\ThemeCustomizeSection('Announcement', 'acme_announcement', 'Customize the home page event announcement', 'acme');

    // add a checkbox to toggle showing the announcement on the home page
    $section->addSetting('announcement_show', 'Show the announcement on the homepage', true, 'checkbox');

    // add a text field for the title, paulund-made control
    $section->addSetting('announcement_title', 'Title', 'Event title', 'textarea');

    // add a date picker for the date, paulund-made control
    $section->addSetting('announcement_date', 'Date', '', 'date-picker');

    // add a file upload field for the flyer
    $section->addSetting('announcement_flyer', 'Flyer', '', 'upload');
}

Using those fields

I will show the announcement on the page using a context setting function

function acme_the_announcement()
{

    // load the option
    $the = Option::on('acme_announcement');

    // return if the user decided not to show the announcement
    if (!$the->announcementShow) {
        return;
    }

    // create the context
    // the date must be formatted to a custom format
    $context['date'] = acme_get_formatted_date($the->announcementDate);
    $context['title'] = $the->announcementTitle;
    $context['flyer'] = $the->announcementFlyer;

    // render the template using Underscore.php
    echo __::template(
        file_get_contents(dirname(__FILE__) . '/templates/announcement.template.php'), $context
        );
}

and the template itself is as simple as it can get thanks to Underscore-provided templating possibility

<div class="frame">
    <div id="announcement">
        <h3 class="date"><%= $date %></h3>
        <h1 class="title"><pre>&ldquo;<%= $title %>&rdquo;</pre></h1>
        <h3 class="tagline line1">A conference</h3>
        <h3 class="tagline line2">by ACME</h3>
        <div class="line"></div>
        <div class="download">
            <a href="<%= $flyer %>" target="blank">Download the flyer here</a>
        </div>
    </div>   
</div>

A little fix

While adding paulund’s custom controllers to the library I’ve run into issues with the date picker control: it turned out that the original code did queue the jQuery UI Date Picker script and did not print the data attribute Backbone needs to save the control value. The modified working code included in the library is the one below

<?php

namespace paulund;

if (!class_exists('WP_Customize_Control')) return NULL;

/**
 * Class to create a custom date picker
 */
class DatePickerCustomControl extends \WP_Customize_Control
{

    /**
     * Render the content on the theme customizer page
     */
    public function render_content()
    {
?>
            <label>
              <span class="customize-date-picker-control">
                <?php echo esc_html($this->label); ?>
              </span>
              <input type="date" id="<?php echo $this->id; ?>" name="<?php echo $this->id; ?>" value="<?php echo $this->value(); ?>" class="datepicker" <?php $this->link(); ?>/>
            </label>
        <?php
    }
}
?>