-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (153 loc) · 5.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Child Themes</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/tan-purple.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>Child Themes</h2>
<p>Megan Morsie | @megabyterose</p>
</section>
<section>
<h3>Theme Spectrum</h3>
<ul>
<li>Default Theme (ie Twenty Sixteen)</li>
<li>Theme You Found/Bought</li>
<li>Child Theme</li>
<li>Custom Theme From a Starter/Boilerplate (ie Underscores)</li>
<li>Custom Theme Using a CSS Framework (ie Bootstrap)</li>
<li>100% Custom Theme</li>
</ul>
<aside class="notes">
As you move into more advanced theme topics, you are able to customize more and have more control, but it's a trade-off for the amount of work/time you want to put into it.
</aside>
</section>
<section>
<h3>Reasons to Use a Child Theme</h3>
<ul>
<li>To Tweak or Enhance a Theme</li>
<li>To Learn How Themes Work</li>
<li>To Save Time/Hassle (vs. Finding Perfect Theme or Creating a Custom Theme)</li>
</ul>
</section>
<section>
<h3>Benefits of Using a Child Theme</h3>
<ul>
<li>You Can Receive All The Updates From The Parent Theme</li>
<li>Good Balance Between Quality/Stability of Parent Theme & Ability to Customize Site</li>
</ul>
<aside class="notes">
There are essentially 3 steps to create a child theme...
</aside>
</section>
<section>
<section>
<h3>Step 1</h3>
<p>Create a folder under: <code>wp-content/themes</code></p>
<ul>
<li>In FTP Client like FileZilla or Fetch.</li>
<li>In File Manager (will become more cumbersome over time).</li>
</ul>
<small>bit.ly/mc-child-themes</small>
</section>
<section>
<img src="img/ftp-themes.png">
<aside class="notes">
This is what it looks like in an FTP client.
</aside>
</section>
<section>
<img src="img/file-manager-themes.png">
<aside class="notes">
This is what it would look like in your file manager on your webserver.
</aside>
</section>
</section>
<section>
<h3>Step 2</h3>
<p>Create a stylesheet: <code>style.css</code></p>
<pre>/*
<strong>Theme Name: Twenty Thirteen Child</strong>
Theme URI: http://example.com/
Description: Child theme for the Twenty Thirteen theme
Author: Your name here
Author URI: http://example.com/about/
<strong>Template: twentythirteen</strong>
Version: 0.1.0
*/</pre>
<small>bit.ly/mc-child-themes</small>
<aside class="notes">
(The bold ones are required.)<br />
Theme Name – needs to be unique to your theme<br />
Template – the name of the parent theme directory
</aside>
</section>
<section>
<h3>Step 3</h3>
<p>Create <code>functions.php</code> file & enqueue parent styles.</p>
<pre>function <strong>example_enqueue_styles</strong>() {
// Enquque Parent Stylesheet
wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
}
add_action('wp_enqueue_scripts', '<strong>example_enqueue_styles</strong>');</pre>
<small>bit.ly/mc-child-themes</small>
<aside class="notes">
The bold is a function that you can name whatever you want. Note that when using a child theme, the function get_template_directory_uri() will retrieve the parent directory. If you need to use the child theme directory uri, use get_stylesheet_directory_uri.
</aside>
</section>
<section>
<section>
<h3>Template Hierarchy</h3>
<img src="https://developer.wordpress.org/files/2014/10/template-hierarchy.png">
<aside class="notes">
It's important to start to understand the structure of the template hierarchy. Basically, WordPress will look for certain files but will continue to fallback all the way to the index file.
</aside>
</section>
<section>
<img src="img/twentyfifteen-files.png">
<p>bit.ly/mc-wp-templates</p>
<aside class="notes">
When you start to look at the parent theme's files and see something you want to change/remove, copy the file into your child theme folder and modify it.
</aside>
</section>
</section>
<section>
<h2>Thank You!</h2>
<p>Find me on twitter @megabyterose<br />
I blog at megabyterose.com</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>