How to use Featured Post Image in NARGA child theme

I’ve crafted NARGA as WordPress starter theme to help me make another WordPress theme without built it from zero and save loads of time in the process.
Child themes are not as difficult as they may appear. The benefits of working off a parent theme means you don’t need to write all the HTML/CSS from scratch. A child theme will automatically use any template files you include, such as content.php or footer.php. But if they are missing, then your child theme will pull the same files from its parent.
When you write a post, you will find the way to set a featured image of post, that’s aweasome feature to make your website more attraction. In this short tutorial I am going to display and explain the code for getting the Featured Images to fit your needs.

How to use Featured Post Image in NARGA child theme
How to use Featured Post Image in NARGA child theme

Now lets start.
Note: All code snippets in this guide that’s using in this current NARGA Child theme: NARGA Press).

Create a simple child theme

Very easy to create a child theme from NARGA, all things you can do is create a folder with style.css

/*
Theme Name:     NARGA Press
Theme URI:      https://www.narga.net/wordpress-themes/narga-press
Description:    Narga.net v8 - Improved version of Neir, child theme from Narga WordPress Framework
Author:         Nguyễn Đình Quân
Author URI:     https://www.narga.net/about/
Template:       narga
Version:        8.5.1
*/
@import url("../narga/style.css");

Add Custom Featured Post Image size

Add the code snippet into your NARGA child theme functions.php, adjust the image size accordingly as you want for your single post featured image to perfectly fit in your child theme content width.

if ( function_exists( 'add_image_size' ) ) { 
	add_image_size( 'post-thumbnail', 346, 135, true ); # image size is 346x135 and cropped
}

The code snippet above will tell WordPress create new image size when you set Featured Post Image with 346x135px.

Choose the position of Featured Post Image

The NARGA’s post loop function store in content.php file. So if you want display the Featured Post Image in homepage loops, category loop… you need copy the original content.php from narga parent theme folder. Look into it:

<?php
/**
* The default template for displaying content. Used for both single and index/archive/search.
*
* @package WordPress
* @subpackage NARGA
* @since NARGA 1.2
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> role="article">
    <header>
        <?php if ( is_single() ) : ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php else : ?>
        <h2 class="entry-title">
            <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'View %s', 'narga' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <?php endif; // is_single() ?>
        <?php if (narga_options('post_meta')!= '1' ) { narga_entry_meta(); } ?>
    </header>
    <section class="entry-content<?php if ( has_post_format( 'video' )) {echo ' flex-video';}?>">
        <?php the_content(); ?>
    </section>
    <footer>
<?php wp_link_pages(array('before' => '<nav id="page-nav"><p>' . __('Pages:', 'narga'), 'after' => '</p></nav>' )); ?>
<?php
if (is_singular()) {
    if (narga_options('display_tags') == '1') {
        echo '<p class="tags">';
        the_tags('<span class="radius label">','</span> <span class="radius label">','</span>');
        echo '</p>';
    }
    if (narga_options('posts_navigation') == '1') { ?>
        <nav class="nav-single">
            <h3 class="assistive-text"><?php _e( 'Post navigation', 'narga' ); ?></h3>
            <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'narga' ) . '</span> %title' ); ?></span>
            <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'narga' ) . '</span>' ); ?></span>
        </nav>      
        <?php 
    }
    if (narga_options('post_author') == '1') { ?>
        <div class="post-author">
            <h3><?php _e('About the Author &#151; ', 'narga'); ?><?php the_author_posts_link(); ?></h3>
            <div class="post-author-info"><?php echo get_avatar(get_the_author_meta('ID'), '80', '', 'The author avatar');?>
            <p><?php echo get_the_author_meta("description");?></div>
        </div>
        <?php }
}?>
    </footer>
</article>

In general using, the Featured Post Image often places on/below Post Title or the left/right side of content block. Now, we look in to line #12 and #21 then add a code snippet to display your custom image.

Display on/below Post Title

    <header>
        <?php if ( is_single() ) : ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php else : ?>
        <h2 class="entry-title">
            <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'View %s', 'narga' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <?php endif; // is_single() ?>
        <?php if (has_post_thumbnail()) {
        echo '<div class="post-thumb">
            <a href="' . get_permalink() . '" title="' . get_the_title() . '">' . the_post_thumbnail( 'post-thumbnail' ) . '</a>
        </div>';
        } ?>
        <?php if (narga_options('post_meta')!= '1' ) { narga_entry_meta(); } ?>
    </header>

Display at left/right side of content block

    
' . the_post_thumbnail( 'post-thumbnail' ) . '
'; } ?>

Use default featured post image

If you create a theme with post grid like this site, you will find it’s look ugly if one of posts in loop hasn’t Featured Post Image. So I create a small condiction to display default image when it’s not.

# Post Thumbnail Control 
if (!function_exists('narga_post_thumbnail')) :  
    function narga_post_thumbnail() {
        if (!is_sticky()) {
        echo '
'; if (has_post_thumbnail()) { echo '' . the_post_thumbnail( 'post-thumbnail' ) ) . ''; } else { echo ''; } echo '
'; } } endif;

Errh, wait, what’s about Featured Post Image for Sticky Post

Oh, like you see, in the code snippet about, I had if (!is_sticky()) {. If I want use difference Featured Post Image size for Sticky Post, I’m just using:
In functions.php:

if ( function_exists( 'add_image_size' ) ) { 
	add_image_size( 'post-thumbnail', 346, 135, true ); # image size is 346x135 and cropped
	add_image_size( 'sticky-thumbnail', 346, 346, true ); # image size is 346x135 and cropped
}

In content.php:

# Post Thumbnail Control 
if (!function_exists('narga_post_thumbnail')) :  
    function narga_post_thumbnail() {
        echo '
'; if (!is_sticky()) { if (has_post_thumbnail()) { echo '' . the_post_thumbnail( 'post-thumbnail' ) . ''; } else { echo ''; } } else { if (has_post_thumbnail()) { echo '' . the_post_thumbnail( 'sticky-thumbnail' ) . ''; } else { echo ''; } } echo '
'; } endif;

Save it and it’s all done! You will have Featured Image shown on theme!
Now, finish the job by adjusting the CSS.

More advance WordPress condiction

If you were to change is_sticky to something slightly different you would get an entirely different outcome, so:

if ( is_category() ) return;

This makes sure Featured Images do not display on Category pages; but does show everywhere else.

if ( is_page() ) return;

This makes sure Featured Images do not display on Pages; but does show everywhere else.

if ( is_single() ) return;

This makes sure Featured Images do not display on Single Posts pages; but does show everywhere else.
Hope you can make Featured Post Image appear at the position that you want.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.