A presentation for WordCamp Louisville on how to prepare a theme for distribution. It mainly follows the theme review process outlined at WordPress.org. It also discusses reasons to release a theme and briefly highlights ways to stand out from the crowd.
82. CODE QUALITY
Themes are required to generate no
JavaScript errors.
Sounds good.
83. CODE QUALITY
Themes are required to have a valid HTML
document HEAD:
• Valid DOCTYPE declaration
• <html> tag includes language_attributes()
• Correct XFN profile link in <head> tag: <head profile="http://gmpg.org/
xfn/11"> (Exception: Wholly HTML 5 themes must not have the profile, as
HTML 5 does not support it.)
• Correct content-type meta declaration
• <title> includes bloginfo() for title and description
84. CODE QUALITY
Themes are required to have a valid HTML
document HEAD:
• Valid DOCTYPE declaration
85. CODE QUALITY: Valid Doctype
With HTML 5 it’s simple.
header.php
<!DOCTYPE html>
86. CODE QUALITY
Themes are required to have a valid HTML
document HEAD:
• Valid DOCTYPE declaration
• <html> tag includes language_attributes()
88. CODE QUALITY
Themes are required to have a valid HTML
document HEAD:
• Valid DOCTYPE declaration
• <html> tag includes language_attributes()
• Correct XFN profile link in <head> tag:
<head profile="http://gmpg.org/xfn/11">
(Exception: Wholly HTML 5 themes must not have the profile, as HTML 5 does not support it.)
90. CODE QUALITY
Themes are required to have a valid HTML
document HEAD:
• Valid DOCTYPE declaration
• <html> tag includes language_attributes()
• Correct XFN profile link in <head> tag:
<head profile="http://gmpg.org/xfn/11">
(Exception: Wholly HTML 5 themes must not have the profile, as HTML 5 does not support it.)
• Correct content-type meta declaration
91. CODE QUALITY: Content-Type
Again, with HTML 5 it’s easy.
header.php
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
92. CODE QUALITY
Themes are required to have a valid HTML
document HEAD:
• Valid DOCTYPE declaration
• <html> tag includes language_attributes()
• Correct XFN profile link in <head> tag:
<head profile="http://gmpg.org/xfn/11">
(Exception: Wholly HTML 5 themes must not have the profile, as HTML 5 does not support it.)
• Correct content-type meta declaration
• <title> includes bloginfo() for title and description
93. CODE QUALITY: <title> tag
Copied from the Twenty Ten theme.
header.php
<title>
<?php
// Print the <title> tag based on what is being viewed.
// Taken from the 2010 theme.
global $page, $paged;
wp_title('—', true, 'right');
// Add the blog name.
bloginfo('name');
// Add the blog description for the home/front page.
$site_description = get_bloginfo('description', 'display');
if ($site_description && (is_home() || is_front_page()))
echo " — $site_description";
// Add a page number if necessary:
if ($paged >= 2 || $page >= 2)
echo ' — ' . sprintf('Page %s', max($paged, $page));
?>
</title>
94. FUNCTIONALITY
Theme is required to incorporate the following
WordPress core functionality:
95. FUNCTIONALITY
Theme is required to incorporate the following
WordPress core functionality:
• Automatic Feed Links
96. FUNCTIONALITY: Automatic Feed Links
Add default posts and comments RSS feed links via wp_head()
functions.php
// Add default posts and comments RSS feed links to head
add_theme_support('automatic-feed-links');
97. FUNCTIONALITY
Theme is required to incorporate the following
WordPress core functionality:
• Automatic Feed Links
• Widgets
98. FUNCTIONALITY: Widgets
Initiate widget area in the admin and set HTML output. (1 of 2)
functions.php
function magnolia_widgets_init() {
register_sidebar(array(
'name' => 'Main Sidebar',
'id' => 'main-sidebar',
'description' => 'The main sidebar of the site.',
'before_widget' => '<section id="%1$s" class="secondary-block %2$s"><div>',
'after_widget' => '</div></section>',
'before_title' => '</div><header class="secondary-block-label"><h1 class="secondary-
block-title">',
'after_title' => '</h1></header><div class="secondary-block-content">',
));
}
//Register sidebars by running magnolia_widgets_init() on the widgets_init hook.
add_action('widgets_init', 'magnolia_widgets_init');
99. FUNCTIONALITY: Widgets
Define widget area in theme. (2 of 2)
sidebar.php
<?php if (!dynamic_sidebar('main-sidebar')) : ?>
<!-- STUFF -->
<?php endif; ?>
100. FUNCTIONALITY
Theme is required to incorporate the following
WordPress core functionality:
• Automatic Feed Links
• Widgets
• Comments
101. FUNCTIONALITY: Comments
Set single comment display and functionality (taken from Twenty Ten
theme). (1 of 4)
functions.php
if (!function_exists('magnolia_comment')) :
function magnolia_comment($comment, $args, $depth) {
// Comment function data from Twenty Ten theme.
}
endif;
102. FUNCTIONALITY: Comments
PHP template tag to output appropriate JS for threaded comments.
(2 of 4)
header.php
<?php if (is_singular()) { wp_enqueue_script('comment-reply'); } ?>
<?php wp_head(); ?>
</head>
105. FUNCTIONALITY: Comments
Call comments.php from single.php (and page.php). (3 of 4)
single.php & page.php
<aside class="comments">
<?php
// The first parameter is the file to call. Defaults to comments.php.
// The second parameter is whether to separate comments by comment type.
// (pingback, trackbacks, comment, etc.)
comments_template('', true);
?>
</aside>
106. FUNCTIONALITY: Comments
Copied from Twenty Ten theme. (4 of 4)
comments.php
// OTHER STUFF
// Copied from Twenty Ten theme.
// Have to change a few things though.
// Primarily the call to the function we created in functions.php
<?php wp_list_comments(array('callback' => 'magnolia_comment')); ?>
// OTHER STUFF
107. FUNCTIONALITY
Theme is recommended to incorporate the following
WordPress core functionality, but is not required to do so.
108. FUNCTIONALITY
Theme is recommended to incorporate the following
WordPress core functionality, but is not required to do so.
• Navigation Menus
109. FUNCTIONALITY: Navigation Menus
Register the navigation menu. (1 of 2)
functions.php
// This theme uses wp_nav_menu() in one location.
register_nav_menus(array(
'primary' => 'Primary Navigation',
));
110. FUNCTIONALITY: Navigation Menus
Add it to the theme. (2 of 2)
header.php
<?php if (has_nav_menu('primary')) { ?>
<nav class="main-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'container' => '',
'menu_class' => 'main-nav-list',
'depth' => '0', // Sub pages are shown beneath the tabs.
)
);
?>
<span class="clear"></span>
</nav>
<?php } ?>
111. FUNCTIONALITY
Theme is recommended to incorporate the following
WordPress core functionality, but is not required to do so.
• Navigation Menus
• Post Thumbnails
112. FUNCTIONALITY: Post Thumbnails
Register support. (1 of 2)
functions.php
// This theme uses post thumbnails
add_theme_support('post-thumbnails');
113. FUNCTIONALITY: Post Thumbnails
Add it to the theme. (2 of 2)
single.php, index.php & archive.php
<?php if (has_post_thumbnail()) { ?>
<p class="post-thumbnail"><?php the_post_thumbnail('thumbnail'); ?></p>
<?php } ?>
114. FUNCTIONALITY
Theme is recommended to incorporate the following
WordPress core functionality, but is not required to do so.
• Navigation Menus
• Post Thumbnails
• Custom Header
115. FUNCTIONALITY
Theme is recommended to incorporate the following
WordPress core functionality, but is not required to do so.
• Navigation Menus
• Post Thumbnails
• Custom Header
• Custom Background
116. FUNCTIONALITY
Theme is recommended to incorporate the following
WordPress core functionality, but is not required to do so.
• Navigation Menus
• Post Thumbnails
• Custom Header
• Custom Background
• Visual Editor CSS
117. TEMPLATE TAGS & HOOKS
All template tags and hooks used in a Theme are required
to be implemented properly. The following template tags
and hooks are required to be included where appropriate:
118. TEMPLATE TAGS & HOOKS
All template tags and hooks used in a Theme are required
to be implemented properly. The following template tags
and hooks are required to be included where appropriate:
• wp_head()
119. TEMPLATE TAGS & HOOKS
Required to be placed directly before the <body> tag.
header.php
<?php wp_head(); ?>
</head>
120. TEMPLATE TAGS & HOOKS
All template tags and hooks used in a Theme are required
to be implemented properly. The following template tags
and hooks are required to be included where appropriate:
• wp_head()
• body_class()
122. TEMPLATE TAGS & HOOKS
All template tags and hooks used in a Theme are required
to be implemented properly. The following template tags
and hooks are required to be included where appropriate:
• wp_head()
• body_class()
• $content_width
123. TEMPLATE TAGS & HOOKS
Used for images and content.
functions.php
/* Set width for content and images.
--- The layout is fluid with max- and min-width constraints.
The value below represents the half-way width between
*/
if (!isset($content_width))
$content_width = 556;
124. TEMPLATE TAGS & HOOKS
All template tags and hooks used in a Theme are required
to be implemented properly. The following template tags
and hooks are required to be included where appropriate:
• wp_head()
• body_class()
• $content_width
• post_class()
125. TEMPLATE TAGS & HOOKS
Same as the body_class() but for posts.
index.php, single.php & archive.php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
126. TEMPLATE TAGS & HOOKS
All template tags and hooks used in a Theme are required
to be implemented properly. The following template tags
and hooks are required to be included where appropriate:
• wp_head()
• body_class()
• $content_width
• post_class()
• wp_link_pages()
127. TEMPLATE TAGS & HOOKS
If a post or page is paginated.
index.php, single.php & archive.php
<?php wp_link_pages(array('before' => '<div class="post-pages">' . '<span class="post-pages-
label">Pages:</span> ', 'after' => '</div>')); ?>
128. TEMPLATE TAGS & HOOKS
All template tags and hooks used in a Theme are required
to be implemented properly. The following template tags
and hooks are required to be included where appropriate:
• wp_head()
• body_class()
• $content_width
• post_class()
• wp_link_pages()
• paginate_comments_links() or
previous_comments_link()/next_comments_link()
130. TEMPLATE TAGS & HOOKS
All template tags and hooks used in a Theme are required
to be implemented properly. The following template tags
and hooks are required to be included where appropriate:
• wp_head()
• body_class()
• $content_width
• post_class()
• wp_link_pages()
• paginate_comments_links() or
previous_comments_link()/next_comments_link()
• posts_nav_link(), or previous_posts_link()/
next_posts_link(), or paginate_links()
133. TEMPLATE TAGS & HOOKS
All template tags and hooks used in a Theme are required
to be implemented properly. The following template tags
and hooks are required to be included where appropriate:
• wp_head()
• body_class()
• $content_width
• post_class()
• wp_link_pages()
• paginate_comments_links() or
previous_comments_link()/next_comments_link()
• posts_nav_link(), or previous_posts_link()/
next_posts_link(), or paginate_links()
• wp_footer()
134. TEMPLATE TAGS & HOOKS
Directly before the closing </body> tag.
footer.php
<?php wp_footer(); ?>
</body>
135. INCLUDING FILES
If incorporated into the Theme, standard template files are
required to be called using the correct template tag
136. INCLUDING FILES
If incorporated into the Theme, standard template files are
required to be called using the correct template tag
header.php
137. INCLUDING FILES
If incorporated into the Theme, standard template files are
required to be called using the correct template tag
header.php
<?php get_header(); ?>
GOOD!
138. INCLUDING FILES
If incorporated into the Theme, standard template files are
required to be called using the correct template tag
header.php
<?php include(TEMPLATEPATH . '/header.php') ?>
BAD!
139. INCLUDING FILES
If incorporated into the Theme, standard template files are
required to be called using the correct template tag
header-secondary.php
<?php get_template_part('header', 'secondary'); ?>
140. INCLUDING FILES
If incorporated into the Theme, standard template files are
required to be called using the correct template tag
html5.js
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
141. SITE INFORMATION
If incorporated into the Theme, site information is
required to be called using the correct template tag.
This is what we talked
about in the “Build” section
142. WORDPRESS-GENERATED CSS CLASSES
Themes are required to support the following WordPress-
defined CSS classes, or similar elements
Alignment Classes:
.aligncenter
.alignleft
.alignright
Caption Related Classes:
.wp-caption
.wp-caption-text
.gallery-caption
143. WORDPRESS-GENERATED CSS CLASSES
Themes are required to support the following WordPress-
defined CSS classes, or similar elements
Alignment Classes:
.aligncenter
.alignleft
.alignright
Caption Related Classes:
.wp-caption
.wp-caption-text
.gallery-caption
146. WORDPRESS-GENERATED CSS CLASSES
Themes are required to support the following WordPress-
defined CSS classes, or similar elements
Alignment Classes:
.aligncenter
.alignleft
.alignright
Caption Related Classes:
.wp-caption
.wp-caption-text
.gallery-caption
149. WORDPRESS-GENERATED CSS CLASSES
Themes are recommended to support the following
WordPress-generated classes.
Post Classes:
.sticky
Comment Classes:
.bypostauthor
150. WORDPRESS-GENERATED CSS CLASSES
Themes are recommended to support the following
WordPress-generated classes.
Post Classes:
.sticky
Comment Classes:
.bypostauthor
153. WORDPRESS-GENERATED CSS CLASSES
Themes are recommended to support the following
WordPress-generated classes.
Post Classes:
.sticky
Comment Classes:
.bypostauthor
159. THEME TEMPLATE FILES
Submitted theme are recommended not to include files
named like the following.
• page-foobar.php
• category-foobar.php
• tag-foobar.php
• taxonomy-foobar.php
160. THEME TEMPLATE FILES
Themes are recommended to use core markup for the
following forms, using the indicated template tag:
• Login Form — wp_login_form()
• Search Form — wp_search_form()
161. THEME TEMPLATE FILES
Themes are recommended to use core markup for the
following forms, using the indicated template tag:
• Login Form — wp_login_form()
• Search Form — wp_search_form()
searchform.php
162. LICENSING
Themes are required to be 100% GPL-licensed, or use a
GPL-compatible license. This includes all PHP, HTML, CSS,
images, fonts, icons, and everything else.
All of the theme must be GPL-Compatible.
163. THEME NAME
Theme Name Guidelines are required for new Themes,
and recommended for existing Themes.
164. THEME NAME
Theme Name Guidelines are required for new Themes,
and recommended for existing Themes.
• Don’t use “WordPress” in the name
165. THEME NAME
Theme Name Guidelines are required for new Themes,
and recommended for existing Themes.
• Don’t use “WordPress” in the name
• Don’t use “Theme” in the name
166. THEME NAME
Theme Name Guidelines are required for new Themes,
and recommended for existing Themes.
• Don’t use “WordPress” in the name
• Don’t use “Theme” in the name
• Don’t use HTML or CSS or any other version-specific,
markup-related term
167. THEME NAME
Theme Name Guidelines are required for new Themes,
and recommended for existing Themes.
• Don’t use “WordPress” in the name
• Don’t use “Theme” in the name
• Don’t use HTML or CSS or any other version-specific,
markup-related term
• Don’t credit yourself in the name.
168. THEME NAME
Theme Name Guidelines are required for new Themes,
and recommended for existing Themes.
• Don’t use “WordPress” in the name
• Don’t use “Theme” in the name
• Don’t use HTML or CSS or any other version-specific,
markup-related term
• Don’t credit yourself in the name.
• Feel free to use the WP in the name.
169. CREDIT LINKS
Themes may optionally designate Author URI and Theme
URI in style.css.
Themes may optionally include a public-facing credit link
in the Theme footer.
Themes may optionally include a Theme Option to display
additional credit links or text.
BOOKMARK
http://themeshaper.com/sample-theme-options/
170. THEME DOCUMENTATION
Please be clear about the following in your
Theme documentation.
1. Indicate what the theme will do.
2. Adhere to the standard naming conventions.
3. Indicate deficiencies, if any.
4. Clearly reference anything out of the ordinary with comments in the code.
5. If you have any special requirements indicate these explicitly.
6. Provide contact information, if possible, for support and questions.
171. THEME UNIT TESTS
The Theme must meet all the requirements of the
Theme Unit Test.
Referenced in the beginning of
the “Build” section.
172.
173.
174.
175.
176. THEME OBSOLESCENCE
Themes must be kept current once submitted, approved,
and accepted into the Theme Repository.