Backstretch Headway block - 01

New client work means new needs. I’ve been asked to create a rotating, slider-like, background for the site. Since I will be building the theme using Headway and since the background is a theme-related functionality it only makes sense to create an Headway themes plugin block to add the functionality.


I will use Backstretch jQuery plugin to implement the effect. The plugin will take care of sizing the background to cover the body element and will carry out the slider-like function as well. I will be using my my set of libraries to make development easier on my side as well.

Theme user options

The theme user, the client in my situation, will be given the possibility to select none to many images to be used as the body background via the default WordPress theme customization screen. Any one of three possible choices on the theme user side will become a theme developer scenario and the block will allow the the theme designer to give the following questions an answer:

  • What should be done if the user selects no images?
  • What should be done if the user selects one image?
  • What should be done if the user selects more than one image?

Theme developer options

The features the block will offer are the bare minimum I’m needing, as both a plugin and a theme developer, to make the client site at hand, and will allow the theme developer to make decisions about the theme acting on the smaller set of theme user options outlined above.
The first iteration of the block plugin will offer the following options:

  • the user did not select an image
    • allow the user to select a body background color
    • use a default color for the body background
      • pick the color
    • use a default image
      • pick the image
  • the user did select one image alone
    • apply an effect to the image?
      • no - leave the image as is
      • yes - apply an effect to the image
        • pick the effect
    • the user did select two or more images
    • how to show images?
      • show the images slider-like
        • set slider times and effects
      • show a random image on each page load
    • apply an effect to the images?
      • no - leave the images as they are
      • yes - apply an effect to the images
        • pick the effect

Right now that list pretty much covers my needs and it’s a hefty list of features to start already.