WordPress Theme Wrangling 101

1. mikey arce
Happiness Engineer @automattic
@mikeyarce
mikeyarce.com

2. THEME
WRANGLING
101
GETTING STARTED
WITH WORDPRESS THEMES

3. A B C
What are
Themes?
Advanced
Usage
Using
Themes
D
Basic
Customizing

4. A
What are Themes?

5. What are Themes?
WordPress stores and serves your
content
!
Plugins extend functionalities by
adding features
!
Themes determine the look of
your site by adding styles and
templates

6. Same Site,
different themes

7. Theme: Twenty Twelve

8. Theme: BaseWP

9. Theme: GovPress

10. Theme: Hueman

11. WordPress.org
vs
WordPress.com

12. .com .org
Over 300 Free and
Premium Themes
!
Secure, never break
your site, WordPress
always up to date
!
Can’t add your own
themes
!
wordpress.com/themes
You can install your
own themes, free or
Premium
!
You do your own
maintenance.
!
Themes can be
insecure
!
Unlimited options

13. B
USING THEMES

14. Installing a Theme

15. DEMO

16. C
BASIC CUSTOMIZING

17. Customize your Themes
CSS Customization
!
Child Theming

18. CSS Customization
Add a stylesheet, don’t change
the theme’s default.
!
custom.css
!
Use a Custom CSS Plugin
(like Jetpack)

19. DEMO

20. Child Themes
Easy way to develop a theme
without breaking it
!
Means you can always update
the Parent theme without
worrying about breaking your
customizations
!
You can make many themes
based on one theme

21. Child Themes
function twentytwelve_child_enqueue_child() {
wp_register_style( 'twentytwelve',
get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'twentytwelve-child',
get_stylesheet_uri(), array( 'twentytwelve' ) );
}
add_action( 'wp_enqueue_scripts',
'twentytwelve_child_enqueue_child' );
Enqueue, dont @import

22. Child Themes
For more information, go to:
!
http://codex.wordpress.org/Child_Themes

23. D
ADVANCED USAGE

24. How WordPress works
MySQL Database
WordPress
Your Site

25. Customize your Themes
Custom Templates
!
Custom Themes

26. Anatomy of a Theme
HEADER
CONTENT SIDEBAR
FOOTER

27. Anatomy of a Theme
header.php
index.php sidebar.php
footer.php

28. Anatomy of a Theme
header.php
index.php sidebar.php
footer.php
sidebar.php

29. Anatomy of a Theme
header.php
index.php sidebar.php
footer.php

30. Custom Templates

31. Custom Templates
/**
* Template Name: My Custom Template
*/

32. Template Hierarchy

33. Template Hierarchy
Site Front Page
> front.php
Page
> Page Template
> $custom.php
> page-$slug.php
> page_$id.php
> page.php
Posts
> home.php
!
>> index.php

34. Anatomy of a Theme
header.php
front.php sidebar.php
footer.php

35. Anatomy of a Theme
custom-home.php
footer.php

36. Custom Themes

37. Custom Themes
style.css
index.php

38. Custom Themes
404.php
archive.php
category.php
comments.php
content-
quote.php
content-
page.php
content.php
footer.php
header.php
image.php
index.php
rtl.css
screenshot.png
search.php
single.php
style.css
tag.php

39. Custom Themes style.css

40. _s Starter Theme
underscores.me

41. Enqueue it all
wp_enqueue_style( 'slider',
get_template_directory_uri() . '/css/
slider.css',false,'1.1','all');
!
wp_enqueue_script( 'script',
get_template_directory_uri() . '/js/
script.js', array ( 'jquery' ), 1.1,
true);

42. The Loop
<?php if ( have_posts() ) : while ( have_posts() ) :
the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>

43. Customizing the Loop
<?php
$children =
wp_list_pages('title_li=&child_of='.$post-
>ID.'&echo=0');
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>

44. E
BONUS ROUND

45. Choosing Themes
Free or
Premium?

46. Choosing Themes
Don’t choose
“All in one”
Themes

47. Choosing Themes
Does the theme
get updates?

48. Choosing Themes
Is it supported?
Documented?

49. Choosing Themes
Is it from a
*reputable*
developer or
shop?

50. Choosing Themes
Think about
what happens if
you switch
themes

51. Choosing Themes
StudioPress
WooThemes
CreativeMarket
Themeforest
Organic Themes
Array
Elegant Themes
The Theme Foundry

52. Further Reading
https://make.wordpress.org/docs/
theme-developer-handbook/
!
Treehouse, Lynda.com

53. EH
Q & EH