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
- Copy WP-ZEROTHEME
- Rename the folder to your theme
- During development, set
WP_DEBUG
totrue
in yourwp-config.php
- Find the string
ZEROTHEME
and replace with your theme name across the files - Update the information in style.css
- Replace or delete the placeholder images for favicon, apple-touch-icon, and apple-start-up-image in the
img/
folder - Replace the
screenshot.png
image to reflect your design - Review enabled features and VIP plugins in
inc/bootstrap.php
- Create custom taxonomies, post types, and field UIs in
inc/taxonomies.php
,inc/post-types.php
, andinc/fields.php
. - Review and change as needed the configuration in
functions.php
- Start themeing
Simple place your favicon.ico
file in img/
directory.
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/)
Simple place your your startup image in img/
directory and name them apple-touch-startup-image[-<X>x<Y>][-landscape][@2].png
.
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.
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 the <style>
added by the WordPress gallery.
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
.
The comment tree is generated with the HTML5 element of <article>
with the help of the ZEROTHEME_Walker_Comment
walker class.
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.
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.
Easy template AJAX callback.
- Create a function in
inc/ajax.php
to handle the call. - 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' );
?>
- You can make an AJAX call for the template as such:
jQuery.get( themeSettings.ajaxUrl, {action: 'my_custom_action' }, function( data, textStatus ){}, 'html' );
Adds WordPress' comment-reply script for moving the reply form below the comment replying to.
Adds a function ZEROTHEME_wp_title() with hook ZEROTHEME_wp_title to remove page title logic from the header.php.
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.
It enables the Homepage to appear in the menu editor within the Pages box.
Add ZEROTHEME_paginate_index_links
function that wraps paginate_links to work to create pagers for index and archive pages.
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' ) );
?>
<div <?php echo ZEROTHEME_get_formatted_attributes( array( 'class' => array('first', 'push1', 'span3'), 'id' => 'album', 'data-name' => 'french' ) ); ?>>
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
[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