Chronicles of a build - my first Headway custom code block 01

3-minute read

I’ve recently bought a license to use Headway Themes and I like the theme builder, and its drag and drop nature, very much.
While it’s way too early, I’ve used it for one day only, to express any kind of opinion the nerd in me is already leveraging the custom code block feature the theme builder offers to fiddle with it and get the wanted results.

What I want to do

I’d like to be able to create a landing page template that will show the page content on top of the page featured image. Nothing else. See attached ASCII drawing (it’s ASCII to purge me for using a drag and drop tool)

+------------------------------------------+
|                                          |
|         the page featured image          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|     +---------------------------------+  |
|     |                                 |  |
|     |         the page content        |  |
|     |                                 |  |
|     +---------------------------------+  |
+------------------------------------------+

First implementation

Following the motto “If you want to learn it build from scratch” I’m going to implement the code to obtain the wanted result incrementally via working iterations.
First iteration is this one and works as intended for the theme at hand

<?php
/**
 * Get the post thumbnail (featured image)
 */
$postThumbnailImageTag = null;
// if it's not a page use the header image
if (!is_page($post->ID) or !current_theme_supports('post-thumbnails') or !has_post_thumbnail($post->ID)) {
    // will return null if no header image or no header image support
    $postThumbnailImageTag = get_the_post_thumbnail($post->ID);
}
else {
    $postThumbnailImageTag = get_the_post_thumbnail($post->ID, 'full', array(
        'class' => 'attachment-$size max-width'
    ));
}
/**
 * Get the post content
 */
// set some defaults about the post content
// @todo should become block options
$shouldFilterPostContent = false;
$shouldOverlayToImage = false;
$contentHorizontalPosition = '';
$contentVerticalPosition = '';
$customClasses = array(
    'banner-style',
    'white'
);
// get the post content
$postContent = null;
if (is_page($post->ID)) {
    the_post();
    $postContent = get_the_content();
}
// apply filter to content
if ($shouldFilterPostContent) {
    $postContent = apply_filters('the_content', $postContent);
}
// init the classes to apply to the content
$contentClasses = array();
if ($shouldOverlayToImage) {
    $classes[] = 'overlay';
}
$classes = array_merge($contentClasses, $customClasses);
$classes[] = $contentHorizontalPosition;
$classes[] = $contentVerticalPosition;
$contentClasses = implode(' ', $classes);
?>
<div sytle="position:relative;">
    <?php
echo $postThumbnailImageTag; ?>
    <h1 class="<?php
echo $contentClasses; ?>">
    <?php
echo $postContent; ?>   
</h1>
</div>

Where I default to some CSS classes that make sense in the block current application and default them to values that make sense for the current theme design.

I share

My code is on GitHub and I will keep track of all my iterations there .