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[/caption] and once activated among Headway blocks too [caption id=“attachment_723” align=“aligncenter” width=“1024”] 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[/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.