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

Among the plugins
Among the plugins

and once activated among Headway blocks too
Among the blocks
Among the blocks

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

Here it is the header customization option
Here it is the header customization option

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.

One thought on “Headway header block, with options – 01

I appreciate your input