<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php
    if (has_post_thumbnail()) {
        echo '<div class="single-post-thumbnail clear">';
        echo '<div class="image-shifter">';
        the_post_thumbnail();
        echo '</div>';
        echo '</div>';
    }
    else  if ( get_post_meta( $post->ID, 'featured-div', true ) )
    {
        echo '<div style="max-width: 100%; overflow: hidden;" class="single-post-thumbnail clear">'; 
        echo '<div class="image-shifter">';
        echo get_post_meta($post->ID, 'featured-div', true);
        echo '</div>';
        echo '</div>';
    }
    else  if ( get_post_meta( $post->ID, 'featured-xpost', true ) )
    {
        // get custom post type xpost by slug, and insert
        // so that shortcodes are processed getting the content
        echo '<div style="max-width: 100%; overflow: hidden;" class="single-post-thumbnail clear">'; 
        echo '<div class="image-shifter">';
        $xpostslug = get_post_meta($post->ID, 'featured-xpost', true);
        $args = array(
          'name'        => $xpostslug,
          'post_type'   => 'xpost',
          'post_status' => 'publish',
          'numberposts' => 1
        );
        $my_posts = get_posts($args);
        if( $my_posts )
        {
          // echo 'ID on the first post found ' . $my_posts[0]->ID;
          // echo $my_posts[0]->post_content; // this wouldn't process the shortcodes
          $xpostID = $my_posts[0]->ID;
          echo do_shortcode(get_post_field('post_content', $xpostID));
        }
        else
        {
          echo 'ERROR: FEATURED XPOST NOT FOUND';
        }
        echo '</div>';
        echo '</div>';
    }
    ?>

WordPress Theme tinkering – featured div vs featured image

As I’m revising this blog (so far), retrospectively updating elements and enhancing my own plug-in, I decided it’d be cool to be able to have a “featured div” sometimes, in place of a “featured image”.

Doing this is easy! Well: for the post anyway. Content.php (for the blog-roll homepage) was a bit trickier as I also put in some absolutely positioned div-covers for the <a> links. I evolved from “featured-div” to “featured-xpost” for structure/tidyness when it comes to bigger inserts, and wrap the inserted post in do_shortcodes();

CODE SNAPSHOT 27th June 2017

  
content-single.php (EXTRACT)

...

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php
    if (has_post_thumbnail()) {
        echo '<div class="single-post-thumbnail clear">';
        echo '<div class="image-shifter">';
        the_post_thumbnail();
        echo '</div>';
        echo '</div>';
    }
    else  if ( get_post_meta( $post->ID, 'featured-div', true ) )
    {
        echo '<div style="max-width: 100%; overflow: hidden;" class="single-post-thumbnail clear">'; 
        echo '<div class="image-shifter">';
        echo get_post_meta($post->ID, 'featured-div', true);
        echo '</div>';
        echo '</div>';
    }
    else  if ( get_post_meta( $post->ID, 'featured-xpost', true ) )
    {
        // get custom post type xpost by slug, and insert
        // so that shortcodes are processed getting the content
        echo '<div style="max-width: 100%; overflow: hidden;" class="single-post-thumbnail clear">'; 
        echo '<div class="image-shifter">';
        $xpostslug = get_post_meta($post->ID, 'featured-xpost', true);
        $args = array(
          'name'        => $xpostslug,
          'post_type'   => 'xpost',
          'post_status' => 'publish',
          'numberposts' => 1
        );
        $my_posts = get_posts($args);
        if( $my_posts )
        {
          // echo 'ID on the first post found ' . $my_posts[0]->ID;
          // echo $my_posts[0]->post_content; // this wouldn't process the shortcodes
          $xpostID = $my_posts[0]->ID;
          echo do_shortcode(get_post_field('post_content', $xpostID));
        }
        else
        {
          echo 'ERROR: FEATURED XPOST NOT FOUND';
        }
        echo '</div>';
        echo '</div>';
    }
    ?>

content.php (EXTRACT)

...

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
    if( $wp_query->current_post == 0 && !is_paged() && is_front_page() ) { // Custom template for the first post on the front page
        if (has_post_thumbnail()) {
            echo '<div class="single-post-thumbnail clear">';
            echo '<div class="image-shifter">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            the_post_thumbnail();
            echo '</a>';
            echo '</div>';
            echo '</div>';
        }
        else  if ( get_post_meta( $post->ID, 'featured-div', true ) )
        {
            echo '<div class="single-post-thumbnail clear">';
            echo '<div class="image-shifter">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            echo '<div style="position: absolute; max-height: 240px; height: 100%; width: 100%; z-index: 5; overflow: hidden;">';
            echo get_post_meta($post->ID, "featured-div", true);
            echo '</div>';
            echo '</a>';
            echo '</div>';
            echo '</div>';
        }
        else  if ( get_post_meta( $post->ID, 'featured-xpost', true ) )
        {
            // get custom post type xpost by slug, and insert
            // so that shortcodes are processed getting the content
            echo '<div class="single-post-thumbnail clear">';
            echo '<div class="image-shifter">';
            $xpostslug = get_post_meta($post->ID, 'featured-xpost', true);
            $args = array(
              'name'        => $xpostslug,
              'post_type'   => 'xpost',
              'post_status' => 'publish',
              'numberposts' => 1
            );
            $my_posts = get_posts($args);
            if( $my_posts )
            {
              // echo 'ID on the first post found ' . $my_posts[0]->ID;
              // echo $my_posts[0]->post_content; // this wouldn't process the shortcodes
              $xpostID = $my_posts[0]->ID;
                echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
                echo '<div style="position: absolute; max-height: 240px; height: 100%; width: 100%; z-index: 5; overflow: hidden;">';
                echo do_shortcode(get_post_field('post_content', $xpostID));
                echo '</div>';
                echo '</a>';
            }
            else
            {
              echo 'ERROR: FEATURED XPOST NOT FOUND';
            }
            echo '</div>';
            echo '</div>';
        }

        echo '<div class="index-box';
        if (has_post_thumbnail()) { echo ' has-thumbnail'; };
        echo '">';
    } else {
        echo '<div class="index-box">';
        if (has_post_thumbnail()) {
            echo '<div class="small-index-thumbnail clear">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            echo the_post_thumbnail('index-thumb');
            echo '</a>';
            echo '</div>';
        }
        else  if ( get_post_meta( $post->ID, 'featured-div', true ) )
        {
            echo '<div class="small-index-thumbnail clear">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            echo '<div style="position: relative; max-height: 240px; height: 240px; height: 20vmax; width: 99%; margin: 0 auto;">';
            echo '<div style="position: absolute; top: 0;   height: 100%; width: 99%; z-index: 5;  overflow: hidden;">';
            echo get_post_meta($post->ID, "featured-div", true);
            echo '</div>';
            echo '</div>';
            echo '</a>';
            echo '</div>';

        }
        else  if ( get_post_meta( $post->ID, 'featured-xpost', true ) )
        {
            // get custom post type xpost by slug, and insert
            // so that shortcodes are processed getting the content
            echo '<div class="small-index-thumbnail clear">';
            $xpostslug = get_post_meta($post->ID, 'featured-xpost', true);
            $args = array(
              'name'        => $xpostslug,
              'post_type'   => 'xpost',
              'post_status' => 'publish',
              'numberposts' => 1
            );
            $my_posts = get_posts($args);
            if( $my_posts )
            {
              // echo 'ID on the first post found ' . $my_posts[0]->ID;
              // echo $my_posts[0]->post_content; // this wouldn't process the shortcodes
              $xpostID = $my_posts[0]->ID;
                echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
                echo '<div style="position: relative; max-height: 240px; height: 240px; height: 20vmax; width: 99%; margin: 0 auto;">';
                echo '<div style="position: absolute; top: 0;   height: 100%; width: 99%; z-index: 5;  overflow: hidden;">';
                echo do_shortcode(get_post_field('post_content', $xpostID));
                echo '</div>';
                echo '</div>';
                echo '</a>';
            }
            else
            {
              echo 'ERROR: FEATURED XPOST NOT FOUND';
            }
            echo '</div>';
        }


Just 4 days later, the code looks so different – mostly moving the <a> links and absolute on-top divs around so I don’t need to specify exact dimensions unnecessarily … it just makes more sense / is cleaner, and the <a> link will only apply to the absolute top cover div and not to contents of my featured div or featured xpost.

CODE SNAPSHOT 30th June 2017

  
content.php (EXTRACT – updated further as of 30th June)

...

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
    if( $wp_query->current_post == 0 && !is_paged() && is_front_page() ) { // Custom template for the first post on the front page
        if (has_post_thumbnail()) {
            echo '<div class="single-post-thumbnail clear">';
            echo '<div class="image-shifter">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            the_post_thumbnail();
            echo '</a>';
            echo '</div>';
            echo '</div>';
        }
        else if (has_post_video())
        {
            // https://wordpress.org/plugins/featured-video-plus/#installation
            // Xarta adding to Simone theme
            // adding an absolute div for the <a> link to the article ...
            // my reasoning is that even though that will mean it won't play on devices like Android phones,
            // since the video will be featured in the main article anyway, it doesn't really matter
            echo '<div class="single-post-thumbnail clear">';
            echo '<div class="image-shifter" style="position: relative; ">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            echo '<div style="position: absolute;  height: 100%; width: 100%; z-index: 5; overflow: hidden;">';
            echo '</div>';
            echo '</a>';
            echo get_the_post_video( $post->ID, "thumbnail" );
            echo '</div>';
            echo '</div>';
        }
        else  if ( get_post_meta( $post->ID, 'featured-div', true ) )
        {
            echo '<div class="single-post-thumbnail clear">';
            echo '<div class="image-shifter" style="position: relative; max-width: 1064px; width: 100%;">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            echo '<div style="position: absolute;  height: 100%; width: 100%; z-index: 5; overflow: hidden;">';
            echo '</div>';
            echo '</a>';
            echo get_post_meta($post->ID, "featured-div", true);
            echo '</div>';
            echo '</div>';
        }
        else  if ( get_post_meta( $post->ID, 'featured-xpost', true ) )
        {
            // get custom post type xpost by slug, and insert
            // so that shortcodes are processed getting the content
            echo '<div class="single-post-thumbnail clear">';
            echo '<div class="image-shifter" style="position: relative; max-width: 1064px; width: 100%;">';
            $xpostslug = get_post_meta($post->ID, 'featured-xpost', true);
            $args = array(
              'name'        => $xpostslug,
              'post_type'   => 'xpost',
              'post_status' => 'publish',
              'numberposts' => 1
            );
            $my_posts = get_posts($args);
            if( $my_posts )
            {
              // echo 'ID on the first post found ' . $my_posts[0]->ID;
              // echo $my_posts[0]->post_content; // this wouldn't process the shortcodes
              $xpostID = $my_posts[0]->ID;
                echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
                echo '<div style="position: absolute;  height: 100%; width: 100%; z-index: 5; overflow: hidden;">';
                echo '</div>';
                echo '</a>';
                echo do_shortcode(get_post_field('post_content', $xpostID));
            }
            else
            {
              echo 'ERROR: FEATURED XPOST NOT FOUND';
            }
            echo '</div>';
            echo '</div>';
        }

        echo '<div class="index-box';
        if (has_post_thumbnail()) { echo ' has-thumbnail'; };
        echo '">';
    } else {
        echo '<div class="index-box">';
        if (has_post_thumbnail()) {
            echo '<div class="small-index-thumbnail clear">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            echo the_post_thumbnail('index-thumb');
            echo '</a>';
            echo '</div>';
        }
        else if (has_post_video())
        {
            // https://wordpress.org/plugins/featured-video-plus/#installation
            // Xarta adding to Simone theme
            // adding an absolute div for the <a> link to the article ...
            // my reasoning is that even though that will mean it won't play on devices like Android phones,
            // since the video will be featured in the main article anyway, it doesn't really matter
            echo '<div class="small-index-thumbnail clear" style="position: relative; ">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            echo '<div style="position: absolute;  height: 100%; width: 100%; z-index: 5; overflow: hidden;">';
            echo '</div>';
            echo '</a>';
            echo get_the_post_video( $post->ID, "thumbnail" );
            echo '</div>';
        }
        else  if ( get_post_meta( $post->ID, 'featured-div', true ) )
        {
            echo '<div class="small-index-thumbnail clear" style="position: relative; height: 100%; max-width: 1064px; width: 100%; overflow: hidden;">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            echo '<div style="position: absolute; top: 0;   height: 100%; width: 100%; z-index: 5;  overflow: hidden;">';
            echo '</div>';
            echo '</a>';
            echo get_post_meta($post->ID, "featured-div", true);
            echo '</div>';

        }
        else  if ( get_post_meta( $post->ID, 'featured-xpost', true ) )
        {
            // get custom post type xpost by slug, and insert
            // so that shortcodes are processed getting the content
            echo '<div class="small-index-thumbnail clear" style="position: relative; max-height: 300px; height: 100%; max-width: 1064px; width: 100%; overflow: hidden;">';
            $xpostslug = get_post_meta($post->ID, 'featured-xpost', true);
            $args = array(
              'name'        => $xpostslug,
              'post_type'   => 'xpost',
              'post_status' => 'publish',
              'numberposts' => 1
            );
            $my_posts = get_posts($args);
            if( $my_posts )
            {
              // echo 'ID on the first post found ' . $my_posts[0]->ID;
              // echo $my_posts[0]->post_content; // this wouldn't process the shortcodes
              $xpostID = $my_posts[0]->ID;
                echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
                echo '<div style="position: absolute; top: 0;   height: 100%; width: 100%; z-index: 5;  overflow: hidden;">';
                echo '</div>';
                echo '</a>';
                echo do_shortcode(get_post_field('post_content', $xpostID));
            }
            else
            {
              echo 'ERROR: FEATURED XPOST NOT FOUND';
            }
            echo '</div>';
        }

    }
    // etc. etc.
    ?>


This post uses the example as in the picture above … I use my syntaxhighlighting shortcodes to wrap the php code as content, and for structure/neatness I paste it into a dedicated custom type post … one of my “xposts”. Then all I need do is put the slug in the custom field value.

Screenshot of XartaTech WordPress admin dashboard with Xpost custom post type selected showing list of latest xposts including some to use with custom field meta key value pairs for featured-div and featured-xpost
See my syntaxhighlighter plug-in on GitHub to see how I add my custom xpost post-type.

I’m a single user of this site … obviously I’d have to think about security implications of doing this.

Print Friendly, PDF & Email