Headway header block, with options - 01

The goal

I will create an Headway themes header block with two sides:

  • a theme user side that will allow a user to upload his own logo image and decide upon showing the site title
  • a theme developer side that will allow a theme developer to set the block behaviour according to the user choices (scenarios) I will use the default custom header options many WordPress themes offer for this experiment.

I will try to stick to the above naming convention for sanity and add a third role, the block developer, to model me implementing the block.

Follow along

The code shown in the post can be found on GitHub.

Basic block creation

After a quick templating using grunt-init the newly created block will show among the plugins [caption id=“attachment_722” align=“aligncenter” width=“1024”]Among the plugins Among the plugins[/caption] and once activated among Headway blocks too [caption id=“attachment_723” align=“aligncenter” width=“1024”]Among the blocks Among the blocks[/caption]

Adding the logo image user option

Tapping into WordPress Theme customization API I will add a logo image user option or, rather, will add theme support for it to have it show among theme options. In the includes/headerlogo/Main.php file the Main class now looks like this (I’m using my libraries and the ThemeSupport object to keep the code lean)

<?php
namespace headerlogo;

use tad\wrappers\ThemeSupport;

class Main
{
    protected $themeSupport;

    public function __construct(\tad\wrappers\ThemeSupport $themeSupport = null)
    {
        add_action('after_setup_theme', array($this, 'blockRegister'));
        add_action('init', array($this, 'extend_updater'));
        // add the custom header image theme support
        $this->themeSupport = new ThemeSupport();
        $this->themeSupport->add('custom-header');
    }

    public function blockRegister()
    {
        if (!class_exists('Headway')) {
            return;
        }
        return headway_register_block('\headerlogo\Block', plugins_url(false, __FILE__));
    }


    public function extend_updater()
    {
        if ( !class_exists('HeadwayUpdaterAPI') ) {
            return;
        }
        $updater = new \HeadwayUpdaterAPI(array(
            'slug' => 'headerlogo',
            'path' => plugin_basename(__FILE__),
            'name' => 'Header and Logo Block',
            'type' => 'block',
            'current_version' => HEADERLOGO_BLOCK_VERSION
            ));
    }
}

And the option to customize the header will appear in the Appearance menu
[caption id=“attachment_726” align=“aligncenter” width=“1024”]Here it is the header customization option Here it is the header customization option[/caption]

Theme user options are theme developer scenarios

The theme user is presented with the options to:

  • upload an header image or not
  • show the header text on the header or not

So the user gets 2 options for 4 possible combinations which means, in turn, that the theme developer has to handle, via the block options (block options and not theme options) 4 possible scenarios.
As a block developer I will grant the theme developer the possibility to deal with each scenario accordingly.

Theme developer scenarios are block developer work

Finally getting to the block developer side of it all I will allow a theme developer the options to set some general defaults:

  • a default header image
  • set the header image to a random default
  • set the width and/or height constraints for the header image

And some scenario specific options like:

  • the user did upload the image but wishes not to show the title
    • show the image in a position or use the image as background
  • the user did upload an image and wishes to show the title
    • show the tagline or not
    • show the image in a position or use the image as background
      • which position should the image be shown in relation to the title

and so on.
There are many other options I could add, and will probably add, but I do not want to magnify the scope of the project too much.