Website Development Prices

Search Blog

Saturday, December 21, 2019

How to create child theme in wordpress

There is one main reason why I like to create child theme in Wordpress - if I make some changes in theme, for example, css or to the theme, when next update of theme comes and I update a theme, all changes will be gone. Unless I have a copy somewhere else, except on website, I would need to start over. While to keep a copy of website is good practice, it's also good practice to create a child theme.
The other reason is, whatever you have in child theme will overwrite what's in parent theme.   

Note: this child theme will be created locally - on my computer, not live website and I will be using twentyseventeen theme as an example. 

1) Go to your themes folder. Local Disk (C:) -> xampp -> htdocs -> police-dept-1 (this is the name of your database when you installed Wordpress) ->wp-content -> themes.




2) In folder themes create new folder, name it like your theme-child, in this example, twentyseventeen-child. You can name it however you want, but it's recommended this way.








3) Open your favorite text or code editor, mine is Sublime Text.
4) Create new file, going to top menu, File -> New File or press CTRL+N.
5) Save it as style.css, File -> Save or press CTRL+S. Navigate to folder twentyseventeen-child and save there. 




6) Type or copy and paste following lines in style.css. Don't forget Template line, because this line tells Wordpress to what parent theme your child teme belongs to.

/* 
Theme Name: Twenty Seventeen Child 
Theme URL: http://yourdomain.com/twentyseventeen-child
Description: Twenty Seventeen Child 
Theme Author: Your Name
Author URL: http://yourdomain.com
Template: twentyseventeen 
Version: 1.0.0 
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets...
Text Domain: twentyseventeen-child 

*/

7) Save this file = CTRL+S.
8) Create new file - CTRL+N and save it as functions.php.
9) Copy and paste this code to it.

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

?>

Note: if later you add some code to this file be sure that this code is at the beginning of the file.

This code will inherit the style sheet from parent theme.
10) Save it, CTRL+S.
11) Make screenshot or image of your theme or your theme's design. Size should be 880x660px saved as .png. 
12) Move image to twentyseventeen-child folder.
13) Activate your child theme. Login in to your wodpress. On left side click on Appereance -> Themes. Click button Activate. 




14) Go to your theme, localhost slash yourdatabase name, in this example, http://localhost/police-dept-1/
15) Taaadaaaaa :) 

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.