WordPress: Child Theme and File Locations

Creating a new Child Theme Directory

• A Child Theme imports CSS details from the Parent Theme via import url
• First Create a new Child Theme directory
  md D:\xampp\htdocs\wordpress\wp-content\themes\twentyfifteen-child
• Note: Both style.css and functions.php are located in the new Child Theme Directory
• Within this Directory create a new style.css file

   Directory : D:\xampp\htdocs\wordpress\wp-content\themes\twentyfifteen-child
   File      : style.css
     /*
     Theme Name: Level Up Child
     Theme URI: http://localhost
     Author: Helmut Hutzler
     Author URI: http://hhutzler.de/
     Description: Child Theme of twentyfifteen Theme
     Template: twentyfifteen
     Version: 1.0
     */
    @import url("../twentyfifteen/style.css");

    .hentry, .page-header, .page-content 
     {
        box-shadow: 4px 10px 15px rgba(0,0,0,0.8);
        border-radius: 15px;
                /* Content page color l - some sort of Light Grey */
        background-color:  #E4E4E4 !important;
     }

Location Details for Child and Parent Theme

 get_template_directory()        : D:\xampp\htdocs\wordpress/wp-content/themes/twentyfifteen
 get_template_directory_uri()    : http://localhost/wordpress/wp-content/themes/twentyfifteen
 get_stylesheet_directory()      : D:\xampp\htdocs\wordpress/wp-content/themes/twentyfifteen-child
 get_stylesheet_directory_uri()  : http://localhost/wordpress/wp-content/themes/twentyfifteen-child/style.css
 
 For PHP files                : Use get_template_directory()     or  get_stylesheet_directory(
 For Images, JavaScript, CSS  : Use get_template_directory_uri() or  get_stylesheet_uri()

Using PHP

 Directory : D:\xampp\htdocs\wordpress/wp-content/themes/twentyfifteen\php  [ Parent Theme ]
 D:\> dir php
 Verzeichnis von D:\xampp\htdocs\wordpress\wp-content\themes\twentyfifteen\php
  06.11.2015  11:55               288 info.php      // PHP file to display WP variables
  11.11.2015  14:03               425 slider.php    // PHP file to display the image section in our HTML page used by slider.js 
 
Code to include  PHP Code in our WordPress POST:  

  [insert_php]
     include( get_template_directory() . '/php/slider.php');
  [/insert_php]

Using JavaScript

 
  Directory : D:\xampp\htdocs\wordpress/wp-content/themes/twentyfifteen-child\scripts  
   D:> dir scripts
     Verzeichnis von D:\xampp\htdocs\wordpress\wp-content\themes\twentyfifteen-child\scripts 
     10.11.2015  17:41             4.673 slider.js                // Me own Slider Implementations based on   jquery.bbslider.min.js 
   Code to call JavaScript from our WordPress POST 
    <script>
     start_slider();
    </script>

Using Images

  Directory : D:\xampp\htdocs\wordpress\wp-content\themes\twentyfifteen-child\images
  D:\ >dir images
    Verzeichnis von D:\xampp\htdocs\wordpress\wp-content\themes\twentyfifteen-child\images
    26.10.2015  07:59           117.867 i1.jpg
  Code to  use an image in our  WordPress POST 
  
  <div><img  id="pict1" src="'.get_stylesheet_directory_uri().'/images/i1.jpg" alt="Start in Frankendorf"  /></div>

Using CSS

  Directory : D:\xampp\htdocs\wordpress\wp-content\themes\twentyfifteen-child\css
    D:> dir css
     Verzeichnis von D:\xampp\htdocs\wordpress\wp-content\themes\twentyfifteen-child\css
         11.11.2015  12:49             6.240 jquery.bbslider.css
  
  Including a CSS file in our project
  Directory : D:\xampp\htdocs\wordpress\wp-content\themes\twentyfifteen-child 
  File      : functions.php  
  function my_css_style() 
    {
    wp_enqueue_style ( 'CSS_script',  get_stylesheet_directory_uri(). '/css/jquery.bbslider.css',  array(), '1.0' );
    }
  add_action( 'wp_enqueue_scripts', 'my_css_style' );

Invoke a static HTML page from WordPress Blog Top Level Directory

<a href=https://www.hhutzler.de/blog/impressum.html>Simple Impressum</a>

Reference

• Adding Scripts to WordPress the Right Way
• How to create a WordPress Child Theme
• WordPress Child Themes