seamusleahy / wp-zero

A base theme for WordPress

ARCHIVED

This is from many years ago (seven years at the time of archiving) when I did WordPress development.

WP-ZERO is a starter theme that gives you:

• minimal HTML and templates to start
• full usage of HTML5
• configured to use Compass and Sass
• features to improve HTML generated by WordPress from adding better class names to menu items to using the article element for coments
• features to magically add the HTML for favicon, apple-touch-icons, and apple-start-up-images
• starter for themeing your login screen
• helpers from pagination to slugify function
• templates that are called via AJAX
• and WP.com VIP ready

Usage

1. Copy WP-ZEROTHEME
2. Rename the folder to your theme
3. During development, set WP_DEBUG to true in your wp-config.php
4. Find the string ZEROTHEME and replace with your theme name across the files
5. Update the information in style.css
6. Replace or delete the placeholder images for favicon, apple-touch-icon, and apple-start-up-image in the img/ folder
7. Replace the screenshot.png image to reflect your design
8. Review enabled features and VIP plugins in inc/bootstrap.php
9. Create custom taxonomies, post types, and field UIs in inc/taxonomies.php, inc/post-types.php, and inc/fields.php.
10. Review and change as needed the configuration in functions.php
11. Start themeing

Features

Magiclly add icons and startup image

Favicon

Simple place your favicon.ico file in img/ directory.

Apple touch icon

Simple place your icons in img/ and name them apple-touch-icon[-<X>x<Y>][-precomposed].png. (Use the App icon template to assist: http://appicontemplate.com/)

Apple startup image

Simple place your your startup image in img/ directory and name them apple-touch-startup-image[-<X>x<Y>][-landscape][@2].png.

WYSIWYG styles

By using the convention of using the prose class name to signal body-content, the WYSIWYG editor is automatically kept up-to-date in styles. This is because sass/objects/_prose.scss partial is included in both screen.scss and editor.scss, and the prose class is added to the WYSIWYG editor for you. You may still want to tweak editor.scss for some overall base settings.

Cleaner and better WordPress HTML

Menu class names

Add better class names to the menu items generated by WordPress.

The wp_nav_menu() function container argument does not except <nav> by default. This allows the semantic <nav> element to be used.

Remove gallery CSS

Remove the <style> added by the WordPress gallery.

Make wp_page_menu better match wp_nav_menu

The wp_page_menu function almost matches the arguments and output as wp_nav_menu, but not exactly which can lead to display errors when wp_nav_menu defaults to wp_page_menu when the menu is empty.

The options 'container', 'container_id', and 'container_class' are added to wp_page_menu.

HTML5 comments

The comment tree is generated with the HTML5 element of <article> with the help of the ZEROTHEME_Walker_Comment walker class.

Header and footer templates

You should not need to modify the footer.php or header.php templates because they only handle the doctype, head element, body element, and html element.

To modify the start and end of the page, you can edit the body-header.php and body-footer.php templates.

Add before_nav_list and after_nav_list to wp_nav_menu

Adds the before_nav_list and after_nav_list arguments to wp_nav_menu() function. The the text for those options will appear before and after the list but within the container element.

AJAX templates

Easy template AJAX callback.

1. Create a function in inc/ajax.php to handle the call.
2. Register the function to the hook ZEROTHEME_themeajax_{$my_action}

<?php
function ZEROTHEME_my_custom_ajax_action() {
	// Output what you want to send
}
add_action( 'ZEROTHEME_themeajax_my_custom_action', 'ZEROTHEME_my_custom_ajax_action' );
?>

3. You can make an AJAX call for the template as such:

jQuery.get( themeSettings.ajaxUrl, {action: 'my_custom_action' }, function( data, textStatus ){}, 'html' );

Misc.

Threaded comments reply Javascript

Adds WordPress' comment-reply script for moving the reply form below the comment replying to.

Page titles

Adds a function ZEROTHEME_wp_title() with hook ZEROTHEME_wp_title to remove page title logic from the header.php.

Login customization

Make your login page look like it is part of your site instead of WordPress. It will link the WordPress logo to your site - instead of wordpress.org - and change the tooltip text to your site name; additionally, it also includes css/login.css (sass/login.scss) to allow you to customize the styles.

Homepage menu item

It enables the Homepage to appear in the menu editor within the Pages box.

Helper functions

Pagination for posts

Add ZEROTHEME_paginate_index_links function that wraps paginate_links to work to create pagers for index and archive pages.

Load templates while passing variables

It works like the WordPress core load_template function but this takes an additional parameter of custom variables.

<?php
ZEROTHEME_load_template( locate_template( 'custom-template.php' ),  array( 'foo' => 'The value for the $foo var in the template' ) );
?>

Format array as HTML attributes

<div <?php echo ZEROTHEME_get_formatted_attributes( array( 'class' => array('first', 'push1', 'span3'), 'id' => 'album', 'data-name' => 'french' ) ); ?>>

CSS Conventions

There aren't many CSS conventions that ZEROTHEME uses, it keeps a very small footprint on your styles. But there is one to keep because it results in less work and better UX.

Use the class name prose to mark the element that contains body content such as the content of a post, page, or comment. The first problem this solves is the issue with missing key styles for content because of a CSS reset. The second issue is it makes it simple for keeping the WYSIWYG styles matching the actually results because prose class is added to the root of the WYSIWYG editor.

Place all the prose styles in sass/object/_prose.scss. The prose

Good to know WP functions

• [sanitize_html_class()](http://codex.wordpress.org/Function_Reference/sanitize_html_class): Strips out anything not a letter, digit, underscore, or dash
• [sanitize_title_with_dashes()](http://codex.wordpress.org/Function_Reference/sanitize_title_with_dashes): lowercases the text and adds dashes for the spaces
• [sanitize_title()](http://codex.wordpress.org/Function_Reference/sanitize_title): Use for when adding a title into a URL
• [get_query_template()](http://codex.wordpress.org/Function_Reference/get_query_template): Attempt to load multiple templates