Six Ways to up Your Theme Game

AKA Stop hacking other people's themes and make your own

With Tracy Levesque / @liljimmi

Slides: slides.thetracyl.com/wcnyc2014

Hi, I'm Tracy

I talk about Child Themes

A LOT

It's time to up your game

#1: Use a Starter Theme

Why a starter theme?

They are meant to be hacked
They give you a head start
They often come with your favorite framework baked in
Have very little design so you can make it your own

Underscores

Popular Starter Themes

#2: Know the WordPress Template Hierarchy

Why learn that crazy-looking chart?

Know the power of the WordPress Template Hierarchy!
Make unique templates for all types of site pages

Name a template file a certain way and it will automatically apply to a certain page.

The WordPress Template Hierarchy for Category Archives

For the category "kittens"

#3: Register Nav menus

Why register Nav menus?

Put nav menus exactly where you want them
Make life easier for you and your clients

Register the menu in `functions.php`

	
register_nav_menus( array(
	'footer-nav' => 'Footer Menu',
) );

Check out the WordPress Codex register nav menus

Load the menu in a template

	
<?php wp_nav_menu( array( 
	'theme_location' => 'footer-nav', 
	'fallback_cb' => 'false', 
	) ); 
?>

Check out the WordPress Codex wp nav menu

#4: Register sidebars

Why register sidebars?

Use fewer plugins
Make life easier for you and your clients

Register the sidebar in `functions.php`

	
register_sidebar(array(
	'name' => __( 'Header Widget Area' ),
	'id' => 'headerwidget',
	'description' => __( 'The header widget area.' ),
	'before_widget' => '<div id="%1$s" class="headerwidget %2$s">',
	'after_widget' => '</div>',
	'before_title' => '<h4 class="headerwidgettitle">',
	'after_title' => '</h4>',
));

Check out the WordPress Codex register sidebar

Load the sidebar in a template

	
<?php dynamic_sidebar( 'headerwidget' ); ?>

Check out the WordPress Codex dynamic sidebar

#5: Register custom thumbnail sizes

Why register custom thumbnail sizes?

Control the width, height and crop of featured images
Use unique images sizes in loops
Keep layout consistent

Add custom images sizes to `functions.php`

	
add_image_size( 'my-img', 400, 400 ); // soft proportional crop mode
add_image_size( 'other-img', 200, 300, true ); // hard crop mode
add_image_size( 'third-img', 220, 220, array( 'left', 'top' ) ); // hard crop left top

x_crop_position accepts 'left' 'center', or 'right'
y_crop_position accepts 'top', 'center', or 'bottom'

Check out the WordPress Codex add image size

Load them in your templates

In a single post/page template

	
<?php the_post_thumbnail('my-img'); ?>

In a loop

	
<?php echo get_the_post_thumbnail($post->ID, 'my-img'); ?>

Check out the WordPress Codex add image size

#6: Write your own queries

Why write your own queries?

Use fewer plugins
Have control over fields pulled
Gain total design freedom

The Code

<!-- // The Query -->
<?php $myloop = new WP_Query( $args ); ?>

<ul>
<!-- // Loop starts -->
<?php while ($myloop->have_posts()) : $myloop->the_post(); ?>
	<li>
		<h2><?php the_title(); ?></h2>
		
		<p><?php the_content(); ?></p>
	</li>
<!-- // Loop ends -->	
<?php endwhile;  ?>
</ul>

Check out the WordPress Codex WP_Query

If inside the main loop

Use wp_reset_postdata();

<!-- // The Query -->
<?php $myloop = new WP_Query( $args ); ?>

<ul>
<!-- // Loop starts -->
<?php while ($myloop->have_posts()) : $myloop->the_post(); ?>
	<li>
		<h2><?php the_title(); ?></h2>
		
		<p><?php the_content(); ?></p>
	</li>	
<!-- // Loop ends -->	
<?php endwhile;  ?>
<?php wp_reset_postdata(); // restores the main loop  ?>
</ul>

`$args`

<!-- // The Query -->
<?php $myloop = new WP_Query( array( 
	'author_name' => 'tracy',
	'cat' => 'cooking', 
	'tag' => 'chocolate'
	'posts_per_page' => '5', 
	'orderby' => 'date', 
	'order' => 'DESC' 
) ); ?>

Protip! Use the Transients API

<?php 
// Check for transient. If none, then execute WP_Query
if ( false === ( $lastpostsloop = get_transient( 'home_lastposts_loop' ) ) ) {
	
    $lastpostsloop = new WP_Query( $args ));

	// Put the results in a transient. Expire after 12 hours.
	set_transient( 'home_lastposts_loop', $lastpostsloop, 12 * HOUR_IN_SECONDS );
} ?>

<!-- // The Loop -->
<?php while ($lastpostsloop->have_posts()) : $lastpostsloop->the_post(); ?>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

<!-- // The end of The Loop -->
<?php endwhile;  ?>	

<?php wp_reset_postdata(); ?>

Check out the WordPress Codex Transients API

Bonus: Up your design game

Use a CSS Preprocessor, like Sass or LESS

Why use a CSS Preprocessor?

It's fun
It's powerful
It makes your life better

Check out my blog post Start using Sass

Bonus: Up your dev game

Use version control, like Git or Subversion

Why use version control?

Have fewer "Oh, crap!" moments
Work well with others
Keep a file history
Raise your dev cred with a Github account

Go to Learn Version Control with Git
A step-by-step course for the complete beginner

P.S.

If you want to learn about Child Themes go to Gabriela Levit's presentation tomorrow at 3:15PM :-)

THE END

Questions?