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 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');

How to Add Unique Image Class in WordPress

If you want to dynamically add your own class to every image added from WordPress Editor then use following code. Add the code into your theme’s functions.php file and change the class according to your requirement.

function wphe_image_class_filter($classes) {
	return $classes . ' your_class_name_here'; //make sure to add a space in front of the class name
}
add_filter('get_image_tag_class', 'wphe_image_class_filter');

How to Bulk Remove Featured Images in WordPress

In WordPress, you can only remove post featured image one by one by editing each post and clicking on the “Remove Featured Image” link, which  is easier to do if you have only few posts but if you have hundreds of posts then removing them one by one can be a daunting task.  But fear not, there is a simpler and easier way to bulk remove  featured image in WordPress.

Copy the following code and paste it in your theme’s functions.php file.

global $wpdb;
$wpdb->query( "
    DELETE FROM $wpdb->postmeta 
    WHERE meta_key = '_thumbnail_id'
" );

Note: This code will only remove the featured image from the posts, It will not delete the images from your Media Library or from your uploads folder.

Copy the code and open your site’s Dashboard  and it will immediately remove all the featured image.  After that, please go back to your theme’s functions.php and remove the code from the file or else it will keep removing the featured images afterwards.

Hope this article helped you.

How to Show Default Image if Featured Image is not Added

The “the_post_thumbnail()” function for featured image in WordPress does not shows anything if a featured image is not attached to the post. In case you want to show a default image in your theme if a user has not attached any featured image then use following script:

     <a href="<?php the_permalink(); ?>"> // adds a hyperlink to the image
        <?php
        if ( has_post_thumbnail() ) { //check if featured image is added or not
            the_post_thumbnail( 'medium', array( 'class' => 'img-responsive' )  );  //echos featured image if added
        } 
        else {
        ?>
        <img src="<?php echo get_template_directory_uri(); ?>/images/defaultimg.png" class="img-responsive" alt="">  // outputs default image if not . change the url to match your image.                              
        <?php } ?>
    </a>                            

How to Hide Admin Bar for Logged in Users

If you have a WordPress site where end users have to login and you do not want to show the Admin bar to those users then you can disable the Admin bar globally for all users by adding following line of code into your theme’s functions.php file.

//Disable WordPress Admin Bar for all users. */
show_admin_bar(false);

If you want to disable the Admin Bar for end user but still want to show it for Administrator then use following code:

//Disable WordPress Admin Bar for all users except admins */
function wphelp_remove_adminbar() {
if (!current_user_can('administrator') && !is_admin()) {
  show_admin_bar(false);
}
}
add_action('after_setup_theme', 'wphelp_remove_adminbar');