forked from adampatterson/axe
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathREADME.html
More file actions
140 lines (79 loc) · 7.28 KB
/
README.html
File metadata and controls
140 lines (79 loc) · 7.28 KB
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="axe">Axe</h1>
<p>Axe is a simple bare bones WordPress starter structure. It is a theme meant to be a starting point to get you setup and running as fast as possible.</p>
<p>My build workflow might not be very orthodox but I typically review the design, Setup my Custom post types using <a href="https://en-ca.wordpress.org/plugins/custom-post-type-ui/">Custom Post Type UI</a> and setup any page data structures using <a href="http://www.advancedcustomfields.com/">ACF</a>.</p>
<p>Simply being able to plow ahead creating my site structures and loading in real or fake content lets me have something tangible to work with.</p>
<p>Another tip that I can provide is using <code>console.log</code> to output my ACF structures reducing the need to be to refer back to the admin pages. Check it out <a href="https://gist.github.com/adampatterson/711a101d5d93f3226fe1">here</a>.</p>
<h3 id="build">Build</h3>
<p>Included is a blower file preset with Bootstrap SASS, jQuery and a couple other commonly used packages. Bower is going to download packages to <code>/src/vendor</code>.</p>
<p>The <a href="https://github.com/adampatterson/Axe/tree/master/src">src folder</a> stores your SASS and JS that should be compiled into <code>/assets</code>.</p>
<p>Use whatever build tool you want. A CodeKit file has been included to get up and running FAST. Gulp and Grunt are fine but do you really need it?</p>
<h2 id="homepage">Home page</h2>
<p>Placing a file under <code>templates/content-home.php</code> will resolve the home page and would be used by <code>/</code></p>
<h3 id="pagetemplates">Page templates</h3>
<p>Placing a file under <code>templates/content-{slug}.php</code> will resolve the home page. Using <code>content-contact.php</code> would be used by <code>/contact</code></p>
<h3 id="subpagetemplates">Sub Page templates</h3>
<p>Placing a file under <code>templates/sub-{parent_slug}.php</code> will resolve the home page. Using <code>sub-services.php</code> would be used by all pages under service like <code>/services/design</code></p>
<h3 id="postformattemplates">Post format templates</h3>
<p>Placing a file under <code>templates/format-video.php</code> will resolve all video formats.</p>
<h3 id="customposttypetemplates">Custom Post Type templates</h3>
<p>Placing a file under <code>templates/single-books.php</code> will resolve all custom post type single posts.</p>
<h3 id="customtaxonomies">Custom Taxonomies</h3>
<p>Placing a file under <code>templates/archive-books.php</code> will resolve a custom taxonomy for Books <code>/books/sci-fi/</code> also using a custom loop. The default archive would be <code>archive-default.php</code> using the default post loop.</p>
<h3 id="customloops">Custom Loops</h3>
<p>If you have a custom post type called Books, creating <code>content-books.php</code> and loading a custom loop like <code>loop-books.php</code> with all the necessary “Loop” code would give you your custom book loop.</p>
<p>See <a href="https://github.com/adampatterson/Axe/blob/master/templates/loop-post.php">loop-post.php</a> for an example.</p>
<h2 id="helperfunctions">Helper Functions</h2>
<p><code>mix()</code> - Allows you to use Laravel Mix with WordPress <a href="https://www.adampatterson.ca/2018/axe-handle-updated-to-include-webpack-mix/">read more here</a></p>
<p><code>get_template_part_acf()</code> - Works exactly like <code>get_template_part()</code> except that it uses an include making it more suitable to use with ACF. You can include your custom content once which is already done for you. Have a look <a href="https://github.com/adampatterson/Axe/blob/master/index.php#L2">here</a>.</p>
<p><code>is_sub_page()</code> - Used to determine if you are on a sub page.</p>
<p><code>__t()</code> - Returns the template directory, It should be noted that this is easily over written in the child theme.</p>
<p><code>__a()</code>- Returns the assets relative to the template directory. <code>/assets/</code></p>
<p><code>__j()</code> - Prints the JS path. <code>/assets/js/</code></p>
<p><code>__i()</code> - Prints the Images path <code>/assets/img/</code></p>
<p><code>__c()</code> - Prints the CSS path <code>/assets/css/</code></p>
<p><code>__v()</code> - Prints the Vendor path (Bower, other libraries) <code>/assets/vendor/</code></p>
<p><code>__lib($path)</code> - Returns the lib path (custom theme classes like Navigation walkers)<code>/lib/</code></p>
<p><code>__m()</code> - Returns the <code>mix-manifest.json</code> file path.</p>
<p><code>__video()</code> - Echos the video path. <code>/assets/video/</code></p>
<h2 id="style">Style</h2>
<pre><code>@import "components/base-variables";
@import "components/bootstrap-variables";
@import "components/bootstrap-custom";
</code></pre>
<p>Since loading Bootstrap from the vendor folder means you can’t modify your variables without risk over overwriting them, A copy has been made in the <code>/src</code> folder.</p>
<p><code>base-variables</code> houses any site specific variables that you might need.</p>
<p><code>bootstrap-custom</code> allows you to easily comment out any unused Bootstrap code that you wont be using. This lets you output a more minimal css file.</p>
<h3 id="structure">Structure</h3>
<p>Another helpful inclusion is the <a href="https://github.com/adampatterson/Axe/blob/master/src/scss/components/_structure.scss">_structure.scss</a> file which gives you 5px incremental adjustments to padding and margins through out HTML.</p>
<p><strong>For example:</strong></p>
<pre><code><div class="p-top-50 p-sm-top-15 m-30"></div>
</code></pre>
<p>This would result in a 50px padding for everything except small where you would end up with a 15px top padding. This div would also have a margin of 30 on all sides.</p>
<h3 id="childtheme">Child theme</h3>
<p>https://github.com/adampatterson/Handle</p>
<p>If you will be using ACF with your child theme uncomment the <a href="https://github.com/adampatterson/Handle/blob/master/functions.php#L13">following</a> so that ACF will store the <code>.json</code> files in your working Child theme.</p>
<p>Opening <code>theme-helpers.php</code> and uncommenting the function on <a href="https://github.com/adampatterson/Handle/blob/master/lib/theme-helpers.php#L6">line 6</a> would allows the child theme to serve all of your themes assets.</p>
<h3 id="credits">Credits</h3>
<p>Template tags are heavily modified versions of <a href="http://underscores.me/">_S</a></p>
<h4 id="disclaimer">Disclaimer</h4>
<p>This theme is made for Me, and with my efficiencies in mind. That said, If you have anything to add then send me an email hello@adampatterson.ca</p>
<h2 id="tip">Tip</h2>
<p>This <code>.htaccess</code> tip from <a href="http://stevegrunwell.github.io/wordpress-git/#/13">Steve Grunwell</a> will attempt to load an upload file locally before trying your production server.</p>
<pre><code><IfModule mod_rewrite.c>
RewriteEngine on
# Attempt to load files from production if
# they're not in our local version
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule wp-content/uploads/(.*) \
http://{PROD}/wp-content/uploads/$1 [NC,L]
</IfModule>
</code></pre>
</body>
</html>