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.
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('←', 'Previous post link', 'narga') . '</span> %title'); ?></span>
<span class="nav-next"><?php next_post_link('%link', '%title <span class="meta-nav">' . _x('→', 'Next post link', 'narga') . '</span>'); ?></span>
</nav>
<?php
}
if (narga_options('post_author') == '1') { ?>
<div class="post-author">
<h3><?php _e('About the Author — ', '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') . '