Create a featured post for frontpage using Query Wrangler for WordPress

Query Wrangler provides an intuitive interface for creating complex WP queries as shortcodes and widgets. UI based on Drupal Views.

If you come from a Drupal background, you will no doubt have used Views. It was such an essential part of Drupal that it has made it's way into Drupal core as of Drupal version 8 for all the right reasons.

WordPress have had a similar plugin for some time now (in fact, for a few good years). It really has borrowed heavliy from Drupal Views. Anyway, not going into details about this plugin but all i can say is that it's nice to know something like this exist for WP even though it still isn't a powerful as Drupal View is, though that might be a factor due to WP itself.

Query Wrangler is a admin UI tool that helps you to query the DB for certain existing fields to be displayed either using shortcode, widget or programmically in the theme file. 

------------------------------------------------------

This article is about creating a featured post to be shown on frontpage and is a continution of previous article since we are going to build it into the same website. The article is 'Create a similar website like duvien.com in less than a day with WordPress'.

The demo site for this article is: https://wp.duvien.com/

You can download my theme used for this article: Pingraphy-child theme - https://github.com/vienie/pingraphy-child

This Featured frontpage post we will create is to show 1 latest post consisting of a page title, teaser text and the post image.

First of all, let's install Query Wrangler. Go to menu --> plugins --> add new. Search for query wrangler. When you find it, click on 'install now' button and activate the plugin.

Now you should see a new menu link item called 'Query Wrangler'. Click on this link and then click on 'add new' button.

Under Query name, enter: Featured frontpage post

For Query Type, leave it as: Widget

So it should look like in the image below:

Click 'create' button to create your Views.

To create our Featured frontpage post, these are the settings you need:

Under Basic Settings box:

Row style -
How should each post in this query be presented? Fields
Posting settings - complete post

Post per page -
1

Post status -
Publish

Under Fields box:

Click on add button.
Select Post title
Click update button

Click on add button.
Select Featured image
Click update button

Click on add button.
Select Custom Field: teaser_text
Click update button

Once you ahve add the 3 fields.

Click on Post Title field and make sure it looks like what is shown in the image below:

Do the same for Featured image:

Do the same for Custom Field: teaser_text:

Under Sort Options box:

Click on add button.
Select Date
Click update button

Click on Date and select: Descending in the dropdown list

--------

Under Filters box:

Click on add button.
Select Post Types
Click update button

Click on Post Types and select: Post

Here is the export views (below) you can import into your website for the same setup as above. To import, go to menu --> Query Wrangler --> import. Leave Query name blank and copy and paste the export code below, then click import button.

$query = array (
  'name' => 'Featured frontpage post',
  'slug' => 'featured-frontpage-post',
  'type' => 'widget',
  'path' => NULL,
  'data' => 
  array (
    'display' => 
    array (
      'title' => '',
      'style' => 'unformatted',
      'row_style' => 'fields',
      'post_settings' => 
      array (
        'size' => 'complete',
      ),
      'field_settings' => 
      array (
        'group_by_field' => '__none__',
        'fields' => 
        array (
          'post_title' => 
          array (
            'type' => 'post_title',
            'hook_key' => 'post_title',
            'name' => 'post_title',
            'weight' => '0',
            'link' => 'on',
            'label' => '',
            'rewrite_output' => 'on',
            'custom_output' => '<h1>{{post_title}}</h1>',
            'classes' => '',
            'empty_field_content' => '',
          ),
          'featured_image' => 
          array (
            'type' => 'featured_image',
            'hook_key' => 'featured_image',
            'name' => 'featured_image',
            'weight' => '1',
            'image_display_style' => 'pingraphy-child-large',
            'link' => 'on',
            'label' => '',
            'custom_output' => '',
            'classes' => '',
            'empty_field_content' => '',
          ),
          'meta_teaser_text' => 
          array (
            'type' => 'meta_teaser_text',
            'hook_key' => 'meta_teaser_text',
            'name' => 'meta_teaser_text',
            'weight' => '2',
            'meta_value_count' => '1',
            'meta_value_separator' => '',
            'display_handler' => 'acf_default',
            'image_display_style' => 'thumbnail',
            'label' => '',
            'hide_if_empty' => 'on',
            'custom_output' => '',
            'classes' => '',
            'empty_field_content' => '',
          ),
        ),
      ),
      'template_part_settings' => 
      array (
        'path' => '',
        'name' => '',
      ),
      'header' => '',
      'footer' => '',
      'empty' => '',
      'wrapper-classes' => '',
      'page' => 
      array (
        'pager' => 
        array (
          'type' => 'default',
          'previous' => '',
          'next' => '',
        ),
      ),
    ),
    'args' => 
    array (
      'posts_per_page' => '1',
      'post_status' => 'publish',
      'offset' => 0,
      'sorts' => 
      array (
        'date' => 
        array (
          'type' => 'date',
          'hook_key' => 'post_date',
          'name' => 'date',
          'weight' => '0',
          'order_value' => 'DESC',
        ),
      ),
      'filters' => 
      array (
        'post_types' => 
        array (
          'type' => 'post_types',
          'hook_key' => 'post_types',
          'name' => 'post_types',
          'weight' => '0',
          'post_types' => 
          array (
            'post' => 'post',
          ),
          'exposed_label' => '',
          'exposed_desc' => '',
          'exposed_key' => '',
          'exposed_settings' => 
          array (
            'type' => 'select',
          ),
        ),
      ),
    ),
  ),
);

Lastly, we want to display this new widget in the theme and show it only on frontpage.

To do this, we need to copy the index.php file from parent theme (pingraphy) to our child theme (pingraphy-child). Remember, this article is a follow up to: Create a similar website like duvien.com in less than a day with WordPress

So copy file: /wp-content/themes/pingraphy/index.php to /wp-content/themes/pingraphy-child/index.php

Add the code snippet to index.php file where you want to display your featured post:

<?php if( is_home() || is_front_page() ) : ?>
  <?php echo do_shortcode( '[query id=1]' ); ?>
<?php endif; ?>

Note: notice the id=1, that is the id of my Views. Your Id maybe different, check this in Query Wrangler. You'll see it under the details column.

This is what my index.php looks like after adding the above code:

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Pingraphy
 */

get_header(); ?>

<div id="primary" class="content-area content-masonry"> 
  <main id="main" class="site-main" role="main">
    <?php if( is_home() || is_front_page() ) : ?>
      <?php echo do_shortcode( '[query id=1]' ); ?>
    <?php endif; ?>
	
  <div id="masonry-container">
    <div class="masonry" class="clearfix">

    <?php if ( have_posts() ) : ?>

      <?php /* Start the Loop */ ?>
      <?php while ( have_posts() ) : the_post(); ?>

  <?php

  /*
  * Include the Post-Format-specific template for the content.
  * If you want to override this in a child theme, then include a file
  * called content-___.php (where ___ is the Post Format name) and that will be used instead. 
  */

  get_template_part( 'template-parts/content', get_post_format());
						
  ?>

      <?php endwhile; ?>
  <?php else : ?>

  <?php get_template_part( 'template-parts/content', 'none' ); ?>
   
  <?php endif; ?>
     </div>
  </div>

  <div class="infinite-scroll clearfix">
    <div class="la-ball-spin-clockwise la-dark la-2x">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
   </div>
  </div>

  <?php pingraphy_the_posts_navigation(); ?>
    </main><!-- #main -->
  </div><!-- #primary -->
<?php get_footer(); ?>

And that is it.

Now you just need to style your new Featured frontpage Post.