WordCamp KC 2012: Simplifying Theme Functionality

Simplifying Theme Functionality

Chip Bennett, WordCamp Kansas City, 02 June 2012
@chip_bennett

Audience:
Developers
New and Derivative Themes

Why Simplify?

De-crappifying header.php

Streamlining functions.php

Reducing Theme Options

General Clean-Up of Theme Files

Unneeded Functions/Callbacks (Twenty Ten/Twenty Eleven Derivatives)

2 WordCamp Kansas City: 02 June 2012

Why Simplify?

“Make everything as simple as possible, but not simpler.”
- Albert Einstein


Why Simplify?

T h e m e M a in t e n a n c e & S u p p o r t
S im p lif y in g T h e m e f u n c t io n a lit y w ill


Why Simplify?

Theme Maintenance & Support
Simplifying Theme functionality will facilitate maintenance,

P l u g i n S u p p o r t /I n t e g r a t i o n


Why Simplify?

Theme Maintenance & Support
Simplifying Theme functionality will facilitate maintenance,

Plugin Support/Integration
Simplifying Theme functionality will facilitate out-of-the-box

C h ild T h e m e s


De-Crappifying header.php

...because what's there doesn't really need to be there



<?php wp_title(); ?>
<title><?php Your SEO Plugin is crying.
if (is_home()) {
bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found'; echo ' | ';
bloginfo('name');
} elseif (is_category()) {
echo 'Category:'; wp_title(''); echo
' | '; bloginfo('name');
} elseif (is_search()) {
echo 'Search Results'; echo ' | ';
bloginfo('name');
} elseif ( is_day() || is_month() ||
is_year() ) {
echo 'Archives:'; wp_title(''); echo '


<title><?php Your SEO Plugin is crying.
if (is_home()) {
bloginfo('name');
} elseif (is_404()) { The wp_title filter is your
echo '404 Not Found'; echo ' | ';
bloginfo('name');
friend.
echo 'Category:'; wp_title(''); echo ' | ';
bloginfo('name');
} elseif (is_search()) {
echo 'Search Results'; echo ' | ';
bloginfo('name');
} elseif ( is_day() || is_month() ||
is_year() ) {
echo 'Archives:'; wp_title(''); echo ' | ';


functions.php

f u n c t i o n t h e m e n a m e _f i l t e r _w p _t i t l e ( $ t i t l e )
{
$new_title = '';
if (is_home()) {
$new_title = esc_attr( get_bloginfo( 'name' ) );
} elseif (is_404()) {
$new_title = '404 Not Found' . ' | ' . esc_attr( get_bloginfo( 'name' ) );
// etc...

header.php
<title><?php wp_title(); ?></title>


RSS Feed Links
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS 2.0
Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="<?php bloginfo('name'); ?> RSS
Feed" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php
bloginfo('name'); ?> Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

Let WordPress do this for you!



RSS Feed Links

functions.php

function themename_setup_theme() {
a d d _t h e m e _s u p p o r t ( ' a u t o m a t i c - f e e d -
lin k s ' ) ;
}
add_action( 'wp_title', 'themename_setup_theme' );

header.php
<?php wp_head(); ?>



Script and Stylesheet Links
<link href="<?php echo bloginfo('template_url'); ?>/library/js/swfupload/default.css"
rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_directory'); ?>/library/css/slimbox.css"
rel="stylesheet" type="text/css" />
<script src="<?php bloginfo('template_directory'); ?
>/library/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?

How many things can you find wrong with this?

(If we have time, we'll come back to this slide later.)




functions.php: Scripts
function themename_enqueue_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'nivo', get_template_directory_uri() .
'/library/js/jquery.nivo.slider.pack.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themename_enqueue_scripts' );

header.php
<?php wp_head(); ?>



Protip: wp_enqueue_scripts() $deps parameter
wp_enqueue_script( ' j q u e r y ' );
'/library/js/jquery.nivo.slider.pack.js', a r r a y ( ' j q u e r y ' ) );
}



wp_enqueue_script( ' j q u e r y ' );
'/library/js/jquery.nivo.slider.pack.js', a r r a y ( ' j q u e r y ' ) );
}

Because 'jquery' is listed as a dependency of 'nivo', wp_enqueue_script() will
enqueue it automatically! No need to call wp_enqueue_script( 'jquery' ):



wp_enqueue_script( 'jquery' );
'/library/js/jquery.nivo.slider.pack.js', array( 'jquery' ) );
}
Because 'jquery' is listed as a dependency of 'nivo', wp_enqueue_script() will
enqueue it automatically! No need to call wp_enqueue_script( 'jquery' ):
f u n c t i o n t h e m e n a m e _e n q u e u e _s c r i p t s ( ) {
w p _e n q u e u e _s c r i p t ( ' n i v o ' ,
g e t _t e m p l a t e _d i r e c t o r y _u r i ( ) .
' /l i b r a r y /j s /j q u e r y . n i v o . s l i d e r . p a c k . j s ' , a r r a y ( ' j q u e r y ' ) ) ;
}
a d d _a c t i o n ( ' w p _e n q u e u e _s c r i p t s ' ,




functions.php: Stylesheets
function themename_enqueue_styles() {
wp_enqueue_style( 'swfupload-css', get_template_directory_uri() .
'/library/js/swfupload/default.css' );
wp_enqueue_style( 'slimbox-css', get_template_directory_uri() .
'/library/css/slimbox.css' );
}
add_action( 'wp_enqueue_scripts', 'themename_enqueue_styles' );




header.php
<?php wp_head(); ?>


IE Conditional Stylesheets




<!--[if lte IE9]>
But wp_enqueue_style() doesn't have a parameter for IE
conditionals...



Enter the $wp_styles class, and the $wp_styles->add_data()
member function:

wp_register_style( $handle, $src );
global $wp_styles;
$ w p _s t y l e s - >a d d _d a t a ( $ h a n d l e , ' c o n d i t i o n a l ' ,
$ c o n d it io n ) ;
wp_enqueue_style( $handle );

Just call $wp_styles->add_data() after the stylesheet is registered,
but before it is enqueued.



functions.php:

// Conditional stylesheets
global $wp_styles;
// IE6
wp_register_style( 'ie6-css', get_template_directory_uri() . '/library/css/ie6.css' );
$ w p _s t y l e s - >a d d _d a t a ( ' i e 6 - c s s ' , ' c o n d i t i o n a l ' ,
' lt IE 7 ' ) ;
wp_enqueue_style( 'ie6-css' );



functions.php:

// Conditional stylesheets
global $wp_styles;
// IE6
wp_register_style( 'ie6-css', get_template_directory_uri() . '/library/css/ie6.css' );
$wp_styles->add_data( 'ie6-css', 'conditional', 'lt IE7' );
wp_enqueue_style( 'ie6-css' );
// IE7
PROTIP: Possibly coming soon to a wp_enqueue_script() near you. See Trac
ticket #16024




header.php
<?php wp_head(); ?>



Comment-Reply Script
<?php
if (
comments_open() &&
is_singular() &&
get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
?>
Okay, this one's not bad. But it calls wp_enqueue_script(), so we should
put it in our script-enqueueing callback in functions.php, right?



<?php
if (
comments_open() &&
is_singular() &&
get_option( 'thread_comments' ) ) {
}
?>
Okay, this one's not bad. But it calls wp_enqueue_script(), so we should
put it in our script-enqueueing callback in functions.php, right?

How about an even better shortcut...?



Meet the 'comment_form_before' action hook




functions.php:
function themename_enqueue_comment_reply_script() {
if ( get_option( 'thread_comments' ) ) {
}
}
add_action( ' c o m m e n t _f o r m _b e f o r e ',
'themename_enqueue_comment_reply_script' );




functions.php:
function themename_enqueue_comment_reply_script() {
if ( get_option( 'thread_comments' ) ) {
}
}
add_action( ' c o m m e n t _f o r m _b e f o r e ',
'themename_enqueue_comment_reply_script' );

Thanks to changes in WordPress 3.3, we can now call wp_enqueue_script()
inline, rather than only in the header or footer.

By using the comment_form_before action hook, we can skip the conditional
checks for comments_open() and is_singular().



header.php
// Silence is golden

comments.php
<?php comment_form(); ?>



<?php body_class(); ?>
<?php
$bodyclass = '';
// Generic semantic
classes
if ( is_front_page() ) {
$bodyclass =
O <body <?php themename_custom_body_class(); ?>>
'home';
} else if { is_home() ) { R
$bodyclass = 'blog';
} else if { is_archive() ) {
$bodyclass =
'archive';
} else if { is_date() ) {
$bodyclass = 'date';
} else if { is_search() ) {


functions.php

function themename_filter_body_class( $ c l a s s e s ) {
$bodyclass = false;
if ( is_front_page() ) {
$bodyclass = 'home';
} else if { is_home() ) {
$bodyclass = 'blog';
} else if { is_archive() ) {
$bodyclass = 'archive';
} else if { is_date() ) {
// etc...
}
32 if ( $bodyclassWordCamp Kansas City: 02 June 2012
){



header.php
<body <?php body_class(); ?>




header.php
<body <?php body_class(); ?>

PROTIP: you can do the same thing for post_class(), via the 'post_class'
filter.


Plugin Territory
SEO Meta Tags


<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="Generator" content="WordPress" />
<meta name="Description" content="<?php
bloginfo('description'); ?>" />
<meta name="Keywords" content="<?php
bloginfo('description'); ?> , bunch, of, keywords, stuffed, in,
here" />
header.php

// silence is golden
// just let Plugins handle these


The 10-minute weight-loss plan for your Theme



Callback all the things

Function calls not explicitly hooked into an action hook via callback will fire at
after_setup_theme, which may not be the appropriate action hook for the
function being called.

Also, function calls not explicitly hooked into an action hook via callback cannot
be overridden via remove_action().



Before
add_theme_support( 'custom-background' );
add_theme_support( 'custom-header' );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'post-thumbnails' );
register_nav_menus( array(



Before

After
function themename_setup_theme() {
'header' => 'Header Menu'
) );


Before
register_sidebar( array(
// Args array
) );



Before
// Args array
) );

After
function themename_widgets_init() {
// Args array
) );
}
add_action( 'widgets_init', 'themename_widgets_init' );



Plugin Territory
All of these are functional, rather than presentational, and therefore should
be handled by Plugins rather than by the Theme:
// Clean up the <head>
function removeHeadLinks() {
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
}
add_action('init', 'removeHeadLinks');
remove_action('wp_head', 'wp_generator');

// Disable admin bar
function themename_disable_admin_bar() {
add_filter( 'show_admin_bar', '__return_false' );


Plugin Territory
// C l e a n u p t h e <h e a d >
f u n c t io n r e m o v e H e a d L in k s ( ) {
r e m o v e _a c t i o n ( ' w p _h e a d ' , ' r s d _l i n k ' ) ;
r e m o v e _a c t i o n ( ' w p _h e a d ' ,
' w l w m a n i f e s t _l i n k ' ) ;
}
a d d _a c t i o n ( ' i n i t ' , ' r e m o v e H e a d L i n k s ' ) ;
r e m o v e _a c t i o n ( ' w p _h e a d ' ,
' w p _g e n e r a t o r ' ) ;

43
WordCamp Kansas City: 02 June 2012


Plugin Territory
}

// D i s a b l e a d m i n b a r
f u n c t io n
t h e m e n a m e _d i s a b l e _a d m i n _b a r ( ) {


Plugin Territory
}

add_filter( 'show_admin_bar', '__return_false' );


Less is more.



Plugin Territory
The following options are functional, rather than presentational, and therefore
should be left to Plugins:
F a v ic o n



Plugin Territory
Favicon
G o o g le A n a ly t ic s



Plugin Territory
Favicon
Google Analytics
S E O M e t a Ta g s



Plugin Territory
Favicon
Google Analytics
SEO Meta Tags
R o b o ts .tx t



Plugin Territory
Favicon
Google Analytics
SEO Meta Tags
Robots.txt
D i s a b l i n g t h e A d m i n To o l b a r



Plugin Territory
Favicon
Google Analytics
SEO Meta Tags
Robots.txt
Disabling the Admin Toolbar
G Z i p p i n g /c o m p r e s s i n g /m i n i m i z i n g
r e s o u r c e s /c o n t e n t



Plugin Territory
Favicon
Google Analytics
SEO Meta Tags
Robots.txt
GZipping/compressing/minimizing resources/content
R e p la c in g c o r e -b u n d le d s c r ip t s w it h C D N -h o s t e d



Plugin Territory
Favicon
Google Analytics
SEO Meta Tags
Robots.txt
GZipping/compressing/minimizing resources/content
Replacing core-bundled scripts with CDN-hosted versions

Child Theme Territory
The following options are ideal candidates for customization via Child Theme
rather than via Theme options:
C us to m C S S


Pruning to stay healthy


U n n e e d e d Te m p l a t e F i l e s
U n m o d if ie d t e m p la t e f ile s ( a r c h iv e . p h p ,
a u t h o r . p h p , c a t e g o r y. p h p , d a t e . p h p , t a g . p h p , e t c . ) .
DRY


Unneeded Template Files
Unmodified template files (archive.php, author.php, category.php, date.php,
tag.php, etc.). DRY

U n n e e d e d Te m p l a t e - P a r t F i l e s
M in im a lly m o d if ie d t e m p la t e -p a r t f ile s
( s e a r c h fo r m .p h p )


tag.php, etc.). DRY

Unneeded Template-Part Files
Minimally modified template-part files (searchform.php)

U n n e e d e d D e v e lo p m e n t F ile s
__M A C O S X


tag.php, etc.). DRY

Unneeded Template-Part Files
Minimally modified template-part files (searchform.php)

Unneeded Development Files
__MACOSX

U n n e e d e d V C S F ile s
. g it , . s v n , e t c .


Unneeded Callbacks/Functions

Purposeful derivatives of Twenty Ten and Twenty Eleven



Comment List Callback
function twentyeleven_comment( $comment, $args, $depth ) {}




Consider using the default comment-list walker:
// D e f a u l t o u t p u t
w p _l i s t _c o m m e n t s ( ) ;





// Default output
wp_list_comments();

// S p l i t C o m m e n t s a n d P i n g s
w p _l i s t _c o m m e n t s ( a r r a y ( ' t y p e ' => ' c o m m e n t ' ) ;
w p _l i s t _c o m m e n t s ( a r r a y ( ' t y p e ' => ' p i n g s ' ) ;





// Default output
wp_list_comments();

// Split Comments and Pings
wp_list_comments( array( 'type' => 'comment' );
wp_list_comments( array( 'type' => 'pings' );

// M o d i f y a v a t a r s i z e :
w p _l i s t _c o m m e n t s ( a r r a y ( ' a v a t a r _s i z e ' => ' 4 0 ' ) ;



Content Filters
If you don't need it, just remove it:
// C u s t o m e x c e r p t l e n g t h . D e f a u l t v a l u e i s 5 5 ; F i l t e r
v a lu e is 4 0
f u n c t i o n t w e n t y t e n _e x c e r p t _l e n g t h ( $ l e n g t h ) {
re turn 4 0 ;



Content Filters
// Custom excerpt length. Default value is 55; Filter value is 40
function twentyten_excerpt_length( $length ) {
return 40;
}
// C u s t o m e x c e r p t " m o r e " t e x t ( a u t o - g e n e r a t e d ) .
D e f a u l t v a l u e i s ' [ …] '
f u n c t i o n t w e n t y t e n _a u t o _e x c e r p t _m o r e ( $ m o r e ) {
r e t u r n ' & h e llip ; ' .



Content Filters
return 40;
}
// Custom excerpt "more" text (auto-generated). Default value is '[…]'
function twentyten_auto_excerpt_more( $more ) {
return ' …' . twentyten_continue_reading_link();
}
// C u s t o m e x c e r p t " m o r e " t e x t ( m a n u a l ) . D e f a u l t
v a lu e is ' [ . . . ] ' ;
f u n c t i o n t w e n t y t e n _c u s t o m _e x c e r p t _m o r e ( $ o u t p u t ) {
i f ( h a s _e x c e r p t ( ) & & ! i s _a t t a c h m e n t ( ) ) {
$ o u t p u t . = t w e n t y t e n _c o n t i n u e _r e a d i n g _l i n k ( ) ;
}



Content Filters
return 40;
}
// Custom excerpt "more" text (auto-generated). Default value is '[…]'
function twentyten_auto_excerpt_more( $more ) {
return ' …' . twentyten_continue_reading_link();
}
// Custom excerpt "more" text (manual). Default value is '[...]';
function twentyten_custom_excerpt_more( $output ) {
if ( has_excerpt() && ! is_attachment() ) {
$output .= twentyten_continue_reading_link();
}
// G a l l e r y s t y l e . O n l y u s e t h i s i f y o u i n t e n d t o d e f i n e
y o u r o w n G a lle r y C S S
a 68 d _f i l t e r ( ' u s e _d e f a u l t _g a l l e r y _s t y l e ' ,
d WordCamp Kansas City: 02 June 2012

Feedback

You’ve heard from me; now I want to hear from you



Questions?


WordCamp KC 2012: Simplifying Theme Functionality

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (16)

Ähnlich wie WordCamp KC 2012: Simplifying Theme Functionality

Ähnlich wie WordCamp KC 2012: Simplifying Theme Functionality (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

WordCamp KC 2012: Simplifying Theme Functionality