How To Create And Customize A WordPress Child Theme

Why is a child theme important in WordPress?

You install WordPress, choose a good-looking theme for your site, install it but there is something that is missing from the theme. You want to make customization but can’t do it easily in the theme you installed because you know, your edits will be lost once you update the theme to a newer version.

That’s when Child themes comes in handy.

Child theme’s main purpose is to allow you to add your customization and edits in a way that won’t be lost if ever the parent theme that you use send in any new updates.

Child Themes are Update Proof

Whether using free WordPress themes from worpress.org repository or buying a premium theme from marketplace like Themeforest, most of these comes with some form of update mechanism. When there is a new update, you get a notification in your WordPress dashboard and with one click the files of your theme are replaced with new version.

In such a case if you have added customization into the core files of the theme then those files will be replaced by the new version that the theme author sends with update.

So, to not lose your hard work it’s always best to us a Child Theme to add your customization and edits.

How to create Child theme in WordPress

Creating child themes in WordPress very easy. You can either do it manually by creating a new theme folder in your themes folder or by Using Child Theme Wizard plugin.

Creating Child Themes Manually.

A child theme by default consist of two files from the parent theme.

  • style.css
  • functions.php

Create a new folder inside wp-content/themes folder and name it something unique like “sitename-child”. Make sure there are no spaces in the name or else it will throw an error while activating the theme.

Now create one new file inside that folder called “style.css” and Paste the following code at the top of the style.css file

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
Text Domain: twenty-fifteen-child
*/

This small piece of code is what will define your child theme and will let WordPress identity your child theme,

Now, Modify the code with details relevant to your theme.

  • Theme Name – Add something unique like “Site Name Child”. You can add spaces here
  • Theme URL: Add your sites url.
  • Description: Add a small description about the theme.
  • Author: Add Your Name
  • Author URL: You can add your URL here.
  • Template: This is the most important part. In the field you will have to write the exact folder name of your Parent Theme. If for an example, you are creating child theme of Twenty Fifteen then write “twentyfifteen”, If you are using some other theme then adjust accordingly.
  • Version: Start from 1.0.0 and update this line with every update you make to your theme.
  • Text Domain: Enter the folder name of your child theme. If your folder name is “site-name-child” then your Text domain will also be “site-name-child”

After this, create another file called “functions.php” andd paste following code into your functions.php file

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

The above example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all the Parent Theme dependencies.

If you child theme’s style.css also has custom css then you will have to enqueue that file as well.

Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. The complete (recommended) example becomes:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

where parent-style is the same $handle used in the parent theme when it registers its stylesheet. For example, if the parent theme is twentyfifteen, by looking in its functions.php for its wp_enqueue_style() call, you can see the tag it uses there is ‘twentyfifteen-style’. In your child code, replace the instance of ‘parent-style’ with ‘twentyfifteen-style’, like so:

$parent_style = 'twentyfifteen-style';

Failure to use the proper tag will result in a CSS file needlessly being loaded twice. This will usually not affect the site appearance, but it’s inefficient and extends your page’s loading time.
Now, your child theme is ready to be activated. Upload your child theme to your WordPress Dashboard and activate. You may have to re-save your Menu items, widgets and customizer options if you have added any new menu, widget or customizer panels.

Create Child Theme Using a Plugin

Go to your site’s Dashboard > Plugins >> Add New and search for the plugin called “Child Theme Wizard”. Install it and activate it.

The Child Theme Wizard lets you create a new child theme without the need for additional tools, right from within the WordPress admin interface.

Once activated, you can find it under Tools – Child Theme Wizard.

Specify a parent theme, customize options such as title and description and click Create Child Theme. Upon success, you will find your new theme under Appearance – Themes.

It’s generally a good idea and a recommended one to create a child theme if you want to customise your WordPress site. Modifying core theme files which you know will be replaced in future updates is a bad idea and that will waste a lot of your time and resources.

Build child themes and make your WordPress site free from future update problems.

How to make colored admin table by Post Status in WordPress ?

Sometime the default WordPress Admin panel can become a bit boring. If you want to jazz it up and want to show custom background color for each post status then following snippet of code can help. Just paste it in your theme’s functions.php and change the color accordingly

function whe_posts_status_color(){

?>

<style>
  .status-draft{background: #FCE3F2 !important;}
  .status-pending{background: #87C5D6 !important;}
  .status-publish{/* default color works best here */}
  .status-future{background: #C6EBF5 !important;}
  .status-private{background:#F2D46F;}
</style>

<?php
}

add_action('admin_footer','whe_posts_status_color');

Best Free WordPress Themes July 2017

July 2017 was all about portfolio and business WordPress themes.  A lot of free WordPress themes were launched on the WordPress.org theme directory. Let’s looks at the 10 best free WordPress themes released in the month of July 2017.

Kokoro

Kokoro is a Responsive WordPress blog theme.

Download Theme

Chronus

Chronus is a fast and lightweight WordPress Theme created for magazines, news websites and personal blogs. The Featured Content section and flexible Magazine Widgets give you the ability to highlight your most important posts on the home page. The minimalistic and responsive design focuses on your content and looks great on any screen size.

Download Theme

Ignis

Ignis is a modern portfolio theme that features a custom home page template for displaying your projects, color and font options, multiple blog layouts and much more. In order to use the portfolio feature in Ignis, you need to have Jetpack installed.

Download Theme

Hamilton

Hamilton is a clean WordPress portfolio theme for creatives. It displays posts in a beautiful image grid that can be set to either two or three columns, which makes it a perfect fit for photographers, illustrators or graphic designers looking for a theme for their portfolio. It also features a dark mode, custom background color support, a resume page template, responsive design, Jetpack infinite scroll support, editor styling, and much more.

Download Theme

Begonia Lite

Begonia Lite is a blogging theme that frames your ideas and findings in a striking layout with a modern twist!

Download Theme

Magazine Point

Magazine Point is a WordPress magazine theme which is carefully crafted with high quality code, eyecatching design and satisfying features. With Magazine Point you can build any kind of news, magazine, blog website with in minutes and still manage your site to look beautiful like you always wanted. With easy to use features and easily customizable code we won’t be wrong if we call this theme one of the best magazine themes. Other than its quality craftmanship the theme uses the best clean SEO practices and is optimized to the highest limit, so it is fast too. Also, we tend to provide best and helpful support if you have any problem with the theme.

Download Theme

Yummy

Yummy is a restaurant oriented theme that provides a platform to expose your restaurant on the best manner and also provides feature to sell your delicious and remarkable food and drinks online. It is easily customizable theme build by using theme options panel based on powerful customizer API with live preview. It provides a pack of features such as layouts, multiple widgets and more. It is WooCommerce compatible and translation ready theme.

Download Theme

Magnetism

Magnetism is a WordPress theme designed especially for blogging and writing. Featuring pixel-perfect design and typography and fits creative writers, bloggers, freelancers, entrepreneurs or indeed anyone who wants to make their writing stand out. It has a widgetized footer and sidebar, is optimized for SEO and is Google Schema compliant. It is responsive, Retina ready, SEO friendly and will look fantastic on any device. We hope you love it!

Download Theme

Equity

Equity Theme is a professional, sophisticated, elegant and robustly built WordPress theme for lawyers, Law Firm and Attorney website. The theme is very versatile and can also be easily used by various types of corporations, business and any kind of sites. core feature of WordPress Has 4 Footer Widget Areas and lot more of customizer options.

Download Theme

Campus Lite

Campus Education WordPress theme is a Clean, Modern and Responsive. Campus WordPress theme comes with a creative design layout which is suitable for education sites, learning management sites, university, school, primary school, business and similar websites. Comes with few options in customizer like slider and colors etc. Courses section to display online courses on the homepage also build the course single page template.

Download Theme

How to Add Custom Body Classes in WordPress

The “body_class()”  in WordPress adds classes to the body tag of all the pages in your WordPress site. By default a WordPress theme should use the function “body_class()” in their theme files so that WordPress can automatically output correct classes to each page/post and archive.

The following example shows how to implement the body_class template tag into a theme.

<body <?php body_class(); ?>>

The actual HTML output might resemble something like this:

<body class="page page-id-2 page-parent page-template-default logged-in">

If you want to add your own custom class to the body then the easiest way is to add a add the custom class in this format:

<body <?php body_class( 'class-name' ); ?>>

which will output something like this:

<body class="page page-id-2 page-parent page-template-default logged-in class-name">

But the problem with this approach is that the custom class “class-name” will be add to each and every page and post of your site.

Now, In case you want to add the custom class only to specific pages/posts or archives then use following function and edit as per your requirement:

function wphe_body_classes( $classes ) {
	global $post;
	
	if ( is_singular( 'post' ) ) {  
		$classes[] = 'class-name';  // add custom class to all single posts
	}
	
	if ( is_singular( 'page' ) ) {  
		$classes[] = 'class-name';  // add custom class to all single pages
	}	
	
	if ( is_singular( 'customposttype' ) ) {  // change customposttype to your CPT slug
		$classes[] = 'class-name';  // add custom class to all single custom post types
	}		
	
	if ( is_home() ) {  
		$classes[] = 'class-name';  // add custom class to blog homepage
	}			
	
	if ( is_front_page() ) { 
		$classes[] = 'class-name';  // add custom class to blog static page frontpage
	}				
	
	if ( is_archive() ) { 
		$classes[] = 'class-name';  // add custom class to archive pages
	}					

	return $classes;
}
add_filter( 'body_class', 'wphe_body_classes' );

5 Best Related Post Plugins to Keep Your Readers Engrossed

According to a recent survey readers today only spend less than 15 seconds reading a blogposts before they leave never to come back. This is because our attention time in today’s world has been going down and down and we have too many things going to keep us distracted. If your content is not engaging and does helps the readers in anyway then they quickly jump to another site to look for something new.

To keep users on your own site you can showcase them your best work after they have finished reading the blogposts they have landed upon. Once a reader has read your blogposts and think you have something they can use then start looking for more content in your site and what better way than to show them more posts from own blog right after they have finished reading the current posts.

Best way to keep users engages is to show  them more related news below your posts. Below are 10 Best WordPress Related Posts Plugin to show more posts from your own blog content.

Related Posts by AddThis

Get visitors reading more of your posts and trafficking more pages on your site by installing the AddThis Related Posts WordPress plugin. With AddThis, you can recommend your site’s most popular content, and what’s most relevant to your visitors. Widgets and shortcodes are available for this plugin. You can also use our optional analytics to discover how your content is performing.

With the AddThis Related Posts WordPress plugin, you get tools such as:

  • Appears as users scroll down your post or page
  • Customize the title
  • Choose between light, gray, dark and transparent themes
  • Position this tool on either the bottom left or right side of your site
  • Appears on the bottom of your page
  • Customize the title
  • Choose between light, gray, and dark themes

Shareaholic

Shareaholic is the world’s leading all-in-one Content Amplification Platform, which includes related content recommendations, social sharing, following, social analytics and site monetization apps such as promoted content, native ads and affiliate links. This module makes it a snap for any website — big or small — to engage and grow their traffic, market their content, gain insights, and monetize their audience, all from one powerful but easy-to-use dashboard. All our Apps are designed to work well together, on any website.

Increases pageviews, engagement and time on site by highlighting relevant content that may not otherwise be discovered from across your site. Shareaholic is not just yet another related posts content plugin. It involves a simple installation that’s easy to update and tweak. You’ll be using well-engineered and optimized code that won’t slow or block your pages from loading.

  • Choose between several themes to seamlessly match your site’s theme, design and personality. and customize every pixel if you’d like
  • Make money by displaying sponsored content, at the bottom of your posts, in the sidebar, or both
  • Easily promote your product or service on thousands of blogs and websites
  • Automatically utilizes post keywords specified in the “All in One SEO Pack”, “WordPress SEO by Yoast”, “Add Meta Tags”, and other plugins
  • Optimized for mobile devices like the iPhone, iPod touch, iPad, Android mobile phones, and more

Yet Another Related Posts Plugin (YARPP)

Yet Another Related Posts Plugin (YARPP) displays pages, posts, and custom post types related to the current entry, introducing your readers to other relevant content on your site.

YARPP Basic for Standard Features

  • Thumbnail or list view of related content.
  • Related posts, pages, and custom post types.
  • Templating: The YARPP templating system gives you advanced control of how your results are displayed.
  • An advanced and versatile algorithm: Using a customizable algorithm considering post titles, content, tags, categories, and custom taxonomies, YARPP finds related content from across your site.
  • Related posts in feeds: Display related posts in RSS feeds with custom display options.

Related Posts – YUZO

Related posts (aaa+) Yuzo is intended to show related post plugin as accurate as possible, also has multiple features with more customization options +60 much as structure as design.

Also in this new version features a super widget to display related or the best post your wordpress blog. This fast to use and configure intuitive and the best thing is free.
Displays related post your stories with different features of text and image size.

Related Posts Thumbnails Plugin for WordPress

Related Posts by WPBrigade will add related posts thumbnails after the post. This Related Posts Plugin allows to customize thumbnail sizes, display settings and type of relation.

By default it uses generated by WordPress thumbnail for the first image appeared in the post, that was uploaded on the server with sizes as set in Media settings. You can select between ‘thumbnail’ and ‘medium’ size options. In addition if your theme supports Post Thumbnails feature introduced in WordPress 2.9 you can specify custom thumbnail size. You can also specify post custom field name to be used as thumbnails source.

Conclusion
Do Remember that related posts plugin add extra queries into your single posts and if you tons of posts than using these plugins could effect your site speed. Always use caching while using any of these plugin and test out various plugins to see which one works best for your site.

If you would like us to feature any other related posts plugin that you know off, then leave a comment and let us know about it.

How to Fetch and Show Posts from a RSS Feed in WordPress

RSS (Rich Site Summary) is a format for delivering regularly changing web content. Many news-related sites, weblogs and other online publishers syndicate their content as an RSS Feed to whoever wants it.

If you would like to use RSS feed of some other site to show their latest posts into your site/blog then WordPress has a handy function which you can use to pull the posts from another site.

Following code helps you fetch posts from an external RSS feed to display on your site.

    <?php // Get RSS Feed(s) include_once( ABSPATH . WPINC . '/feed.php' ); // Get a SimplePie feed object from the specified feed source. $rss = fetch_feed( 'http://wphelpguide.com/feed/' ); // enter your rss feed url here $maxitems = 3; if ( ! is_wp_error( $rss ) ) : // Checks that the object is created correctly // Figure out how many total items there are, but limit it to 5. $maxitems = $rss->get_item_quantity( 3 ); 
    
        // Build an array of all the items, starting with element 0 (first element).
        $rss_items = $rss->get_items( 0, $maxitems );
    
    endif;
    ?>

In above code, you first include the WordPress Core file called feed.php which enables the use of fetch_feed function to be used in your file. Then you enter the feed URL in the next line and then define the number of posts you would like to fetch. I would suggest to enter number not more than 10 as fetching large number of posts can slow down your site. After that the function checks the fetched quantity and makes sure function has pulled required number of posts from the RSS feed.

After that posts following code to show the fetched RSS feed output

    

<ul>
        <?php if ( $maxitems == 0 ) : ?>
            

<li><?php _e( 'No items', 'my-text-domain' ); ?></li>


        <?php else : ?>
            <?php // Loop through each feed item and display each item as a hyperlink. ?>
            <?php foreach ( $rss_items as $item ) : ?>        
                

<li>
                    <a target="_blank" href="<?php echo esc_url( $item->get_permalink() ); ?>"
                        title="<?php printf( __( 'Posted %s', 'my-text-domain' ), $item->get_date('j F Y | g:i a') ); ?>">
                        <?php echo $item->get_content(); ?>


<div style="clear:both;"></div>


                        <?php echo esc_html( $item->get_title() ); ?>
                    </a>
                </li>


            <?php endforeach; ?>
        <?php endif; ?>
    </ul>


This code first checks whether or not the posts are pulled and if correct number of posts are pulled then it shows the output. You can customize the output as per your requirement and include and exclude the elements which you want to show.

By default WordPress caches the RSS feed output for 12 hours, which means even if the external site has updated their RSS Feed, WordPress won’t show newer posts until 12 hours have passed. To change that value you can use another filter called wp_feed_cache_transient_lifetime to customize the default time. Paste following code into your theme’s functions.php file and edit the seconds numbers as per your requirement.

function return_cache_time( $seconds ) {
// change the default feed cache recreation period to 2 hours
return (int) 600;  time is given in seconds.. default is 43200
}
 
//set feed cache duration
add_filter( 'wp_feed_cache_transient_lifetime', 'return_cache_time');