Categories
WordPress

WordPress: Create a child theme

Step 1: Create a child theme folder twentytwenty-child
Step 2: Inside child theme create style.css

This theme is child theme of twentytwenty theme. Template is name for the parent theme. Rest of the field is not important.

Custom style should, be placed in this file. It will override parent style.

/*
Theme Name: Twenty Twenty Child
Theme URI: http://example.com/twenty-fifteen-child/
description: >-
  Twenty Twenty Child Theme
Author: Abhay
Author URI: http://example.com
Template: twentytwenty
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-twenty-child
*/
Step 3: Include function.php file in child theme folder
<?php
//* this code is to inclue parent theme style

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

At this point go to admin panel Apperance->theme, you can see your theme in the list, click on activate the theme

Step 4: Override parent theme file

Create file in child theme with same name as parent theme, code in child theme will override parent theme

Step 5: Using function.php to customize theme

Use child theme function.php to customize parent function. Register a widget in footer, in file function.php

<?php

register_sidebar( array(
   'name'          => 'Footer Widget',
   'id'            => 'footer-widget',
   'before_widget' => '<div class="footer-widget">',
   'after_widget'  => '</div>'
) );

Add footer-widget in footer.php of child theme. It will add search widget in footer.

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the "site-content" div and all content after.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

   </div><!-- .site-content -->

   <footer id="colophon" class="site-footer" role="contentinfo">
      <div class="site-info">
      <?php if ( is_active_sidebar( 'footer-widget' ) ) :
            dynamic_sidebar( 'footer-widget' );
         endif;
      ?>
         <?php
            /**
             * Fires before the Twenty Fifteen footer text for footer customization.
             *
             * @since Twenty Fifteen 1.0
             */
            do_action( 'twentyfifteen_credits' );
         ?>
         <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
      </div><!-- .site-info -->
   </footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>
Step 6: theme hooks to modify theme

Theme hooks will add more function with previous function

function custom_footer_widget() {
   if ( is_active_sidebar( 'footer-widget' ) ) :
      dynamic_sidebar( 'footer-widget' );
   endif;
}

This was previous action, which was adding “wordpress credits” in the footer.

do_action( 'twentyfifteen_credits' );

This will “custom_footer_widget” with “twentyfifteen_credits” function.

add_action( 'twentyfifteen_credits', 'custom_footer_widget' );

Leave a Reply

Your email address will not be published. Required fields are marked *

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