Temple Gate: An Accessible HTML5 WordPress Theme

Temple Gate (v2.0) has a new responsive design and it’s now a commercial WordPress theme!

You can still download Temple Gate WordPress v1.0.2.

Features Highlights

1. WordPress 3.0+ ready!
2. Multilingual translation ready! A “pot” (Portable Object Template) file is included for you to translate to your langauge.
3. Main Navigation: a main navigation for pages, categories and external link menus all in one place. Configure it directly from admin.
4. Theme Options (for logo, Feed icons, Twitter, Facebook profile and google analytics code from admin).
5. Widgets ready!
6. Sticky Post
7. A banner section – insert image in each post using Custom Field ‘banner’.
8. Show Popular Posts – Next to banner section. Required WordPress Popular Posts. Use other plugin/widget if you prefer.
9. Insert image in a post/page using Custom Field. In the Excerpt mode (see example in the homepage) it shows a thumbnail size, in posts page it shows a full size image.
10. Show 5 Related posts at the end of each article – required Related Posts by Category plugin
11. A Links template (a.k.a Bookmarks) – extra bit of usability and SEO. This template is very useful if you have a long list of sites that you want to link to, and don’t want it shows up in the sidebar widget. Setup the page from the Pages page and select the template.
12. An Archives template to display last 20 posts, posts by categories, posts by yearly and monthly. This thoughtful feature is useful if a site has been running for years and has hundreds of articles (in this case you probably don’t want the archives be displayed in the sidebar widget)
13. Linking post published dates to their archives – extra bit of usability care that your reader/visitor will appreciate!
14. Build with accessibility in mind: WCAG 2.0 AA and Section 508 quality
15. Search Engine Optimized from ground up – structural markup and image optimization
16. Highlight Author Comments by giving a different border color
17. Threaded comments
18. And yes, the theme works in IE6 despite how much I hated this browser my ethic will not allowed me not supporting it!

Plugins used

1. WP-PageNavi (once installed and activated, go to “Settings > PageNav”, uncheck “Use pagenavi-css.css” so that the default style sheet from the plugin won’t be loaded and overwrites the styles from the theme–this will save a HTTP request too!)
2. WordPress Popular Posts (once installed and activated, go to “Appearance > Widgets”, then drag the WordPress Popular Posts from Available Widgets area to hdr-right widget area). )
3. Related Posts by Category (once installed and activated, no further action needed. This plugin is implemented to the theme and the 5 Related Posts will show up at the end of each Post.)

Theme Setup

Download the above three plugins once you have the theme installed. If you don’t like to use them, ignore.

1. Custom Fields for Banner and Images.

   These are the keys for Custom Fields that you add from each post/page at Custom Fields section.

   • ‘banner’ = for the large image. A background image (banner.jpg (680x 300px) ) is used as a placeholder in the theme, to replace it, simply save your desired image with the dimensions of 680 x 300px in JPEG format and place it in the “templegate/images/” .
   • ‘banner-title’ = for the large image caption (optional).

     Example: with link

     Describe me and show my location

     or no link

     Describe me but hide my location

   • ‘image’ = for fixed placement image that you see in each post and homepage posts listing. (Optional).

     Code example (where “2010/09″ is generated by WordPress):

     wp-content/uploads/2009/09/your-image.png

     If you are setting up the first WordPress blog, when you write your first blog article, you need to add these keys in the Custom Fields before you can add ‘value’ (image path) to it.

2. Menus in header and footer sections

   This theme comes with two menus: 1) Primary Navigation; 2) Footer Navigation. You can mixed the categories, pages and external links to the menus. The theme does not offered Dropdown menu, if you wish to add a Dropdown menu for the primary navigation yourself, in the “header.php” file, change the “‘depth’ => 1″ to “2″ or remove it (if you want more than 2 level dropdown menu) somewhere around line #70.

   To configure the menus, go to “wp-admin > Appearance > Menus”:

   • Create two Menu names for “Main Menu – Quick Access” and “Footer Links” or name them anything you like. This will create two tabs for the respective menus.
   • Under Theme Locations block, select “Main Menu – Quick Access” from Primary Navigation and select “Footer Links” from Footer Naivation.
   • Add the “Custom Links”, “Pages” or “Categories” to the menu.

3. Sticky Post for homepage

   To assign a sticky post for homepage, simply select “Stick this post to the front page” at “Publish > Visibility”.

4. Widgets

   All the sidebar items (except the search and social media links) are placed in sidebar-middle. An extra sidebar-top is made ready for you to use in case you needed it.

5. @fontface

   Droid Sans for Headings – link directly to Google Font Directory.

   Museo San 500 for the rest – Though it’s a free font but I can’t distribute it in the theme package due to its license. Please find download links from the author’s site, then go to font squirrel to generate the “eot”, “woff”, “ttf” and “svg” formats.

   Place the generated fonts in “templegate/css/”. If you don’t want to bother with the download steps, simply ignore it; Lucida Sans or Arial will be used then.