|
1 | 1 | HTML5 Boilerplate for Wordpress
|
2 | 2 | ===============================
|
3 | 3 |
|
4 |
| -This is template based on the [HTML5 Boilerplate](http://html5boilerplate.com/) by Paul Irish and Divya Manian, and Bruce Lawson's [Designing a Blog with HTML5](http://html5doctor.com/designing-a-blog-with-html5/) |
| 4 | +This theme is built on the [HTML5 Boilerplate](http://html5boilerplate.com/) by Paul Irish and Divya Manian. The sole purpose of this theme is to save developers the time it takes to apply the HTML5 Boilerplate to WordPress. The "HTML5 Boilerplate" name is used with permission from Paul Irish. |
| 5 | + |
| 6 | +The layout is based on Bruce Lawson's [Designing a Blog with HTML5](http://html5doctor.com/designing-a-blog-with-html5/) |
5 | 7 |
|
6 | 8 | Instead of using only DIVs for content layout, it uses new HTML5 tags, including [header](http://html5doctor.com/the-header-element/),
|
7 | 9 | [footer](http://www.w3schools.com/html5/tag_footer.asp),
|
8 | 10 | [nav](http://www.w3schools.com/html5/tag_nav.asp),
|
9 | 11 | [article](http://www.w3schools.com/html5/tag_article.asp),
|
10 | 12 | and [section](http://html5doctor.com/the-section-element/).
|
11 | 13 |
|
12 |
| -It's a very bare layout, including only the base styles that come with the boilerplate, so layout is up to you. |
| 14 | +It's a very bare layout, including only the base styles that come with the boilerplate and required WordPress styles, so layout is up to you. Alternatively, you could apply the methods used here to other themes. |
13 | 15 |
|
14 | 16 | Getting Started
|
15 | 17 | ---------------
|
16 |
| -1. Add the html-boilerplate-for-wordpress folder to your wp-content/themes folder. |
| 18 | +1. Add the html5-boilerplate-for-wordpress folder to your wp-content/themes folder. |
17 | 19 | 2. Activate the theme. WP-Admin > Appearance > Themes
|
18 |
| -2. Add the items in the "root" folder to the root of your website (read the Root Files section below). |
19 |
| -3. Style away, knowing that you're building on a super solid base with HTML5 awesomeness. |
| 20 | +3. Add some of the "Root Files" to the root directory of your website (explained below). |
| 21 | +4. Style away, knowing that you're building on a super solid base with HTML5 awesomeness. |
20 | 22 |
|
21 | 23 | Root Files
|
22 | 24 | ----------
|
23 |
| -### 404 Pages |
24 |
| -If you use permanlinks (WP-Admin > Settings > Permalinks), then WordPress handles any 404s with the 404.php included in the theme. If you don't use permalinks, then you need to add the 404.html file from the "root" folder to the root of your site. |
| 25 | +These files can be found in the html5-boilerplate folder in the theme (html5-boilerplate-for-wordpress/html5-boilerplate). Some of the files listed here should be (carefully) moved to the root of your site (same level as the wp-content directory). Read on for specific instructions. |
| 26 | + |
| 27 | +### 404 Page |
| 28 | +If you use permanlinks (WP-Admin > Settings > Permalinks), then WordPress handles any 404s with the 404.php included in the theme. If you don't use permalinks, then add the 404.html file to the root of your site. |
25 | 29 |
|
26 | 30 | ### .htaccess
|
27 |
| -In the root folder you'll fin _htaccess.txt. Add the contents of this file to the .htaccess already at the root of your site, after the existing content. htaccess files are sometimes hidden because they begin with a period (.), so if you don't see one at the root of your site you may need an FTP browser to view/edit it. Read _htaccess.txt for more info on what it does. |
| 31 | +**Do not copy to the root of your site.** This may overwrite the WordPress htaccess, and break Wordpress. Instead, copy and paste the contents of this file to the .htaccess already at the root of your site, after the existing content. It would be good to make a comment where the Boilerplate content begins, like "# Begin HTML5 Boilerplate". Read htaccess file for more info on what it does. |
| 32 | +**This file may not be visible if you're viewing the folder on your computer. Files that start with a "." are often hidden. It should be visible through your FTP browser once uploaded.** |
28 | 33 |
|
29 |
| -### favicon.ico |
30 |
| -The favicon is the icon shown to the left of the URL at the top of your browser window. An example is provided. Better to use that one than none at all. |
31 |
| - |
32 |
| -### apple-touch-icon.png |
33 |
| -On iPhones and iPads you can book mark a web page and have it show up on the home screen as an icon. The apple-touch-icon.png becomes this icon if used. Rounded corners and glossy finish are added by the device. |
| 34 | +### nginx.conf |
| 35 | +Used for a different type of web server than Apache. You don't need it. |
34 | 36 |
|
35 | 37 | ### crossdomain.xml
|
36 | 38 | If you don't know what this is, you probably don't need it.
|
37 | 39 | www.adobe.com/devnet/flashplayer/articles/cross_domain_policy.html
|
38 | 40 |
|
39 | 41 | ### robots.txt
|
40 |
| -Tells all search engines that they can read and index all pages. |
| 42 | +Tells all search engines that they can read and index all pages. This is handled by WordPress so you shouldn't need to move this to the root. |
| 43 | + |
| 44 | +Root Images |
| 45 | +----------- |
| 46 | +These aren't included with the HTML5 Boilerplate, but links to them are, so these were created so that you don't return a 404 when the browser requests them. Better to include these or make your own, than not include any. The can be found in the images folder of the theme (html5-boilerplate-for-wordpress/images). |
| 47 | + |
| 48 | +### favicon.ico |
| 49 | +The favicon is the icon shown to the left of the URL at the top of your browser window. |
| 50 | + |
| 51 | +### apple-touch-icon.png |
| 52 | +On iPhones and iPads you can book mark a web page and have it show up on the home screen as an icon. The apple-touch-icon.png becomes this icon if used. Rounded corners and glossy finish are added by the device. |
| 53 | + |
0 commit comments