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/wcphilly2014

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


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
And go to Tracy Rotton's presentation at 4:35

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 Jeremy Pry and Liam Dempsey's presentation at 2:35

P.S.

If you want to learn about Child Themes go to Lisa Yoder's presentation at 11:45 in the User track :-)

THE END

Questions?

Slides: slides.thetracyl.com/wcphilly2014