Table of Contents
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
“;[/insert_php]
<a href=[insert_php] echo site_url().'/impressum.html';[/insert_php]>Simple Impressum</a>