theme wrangling 101

mikey arceHappiness Engineer @automattic @mikeyarce mikeyarce.com

THEME WRANGLING 101 GETTING STARTED WITH WORDPRESS THEMES

A B C

What are Themes?

Advanced Usage

Using Themes

D

Basic Customizing

A

What are Themes?

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

Same Site, different themes

Theme: Twenty Twelve

Theme: BaseWP

Theme: GovPress

Theme: Hueman

WordPress.org vs

WordPress.com

.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

B

USING THEMES

Installing a Theme

DEMO

C

BASIC CUSTOMIZING

Customize your Themes

CSS Customization !

Child Theming

CSS Customization

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

DEMO

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

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

Child Themes

For more information, go to: !

http://codex.wordpress.org/Child_Themes

D

ADVANCED USAGE

How WordPress worksMySQL Database

WordPress

Your Site

Customize your Themes

Custom Templates !

Custom Themes

Anatomy of a Theme

HEADER

CONTENT SIDEBAR

FOOTER

Anatomy of a Theme

header.php

index.php sidebar.php

footer.php

Anatomy of a Theme

header.php

index.php sidebar.php

footer.php

sidebar.php

Anatomy of a Theme

header.phpindex.php sidebar.php

footer.php

Custom Templates

Custom Templates

/** * Template Name: My Custom Template */

Template Hierarchy

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

Anatomy of a Theme

header.php

front.php sidebar.php

footer.php

Anatomy of a Theme

custom-home.php

footer.php

Custom Themes

Custom Themes

style.css index.php

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

Custom Themes style.css

_s Starter Theme

underscores.me

Enqueue it allwp_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);

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; ?>

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

E

BONUS ROUND

Choosing Themes

Free or Premium?

Choosing Themes

Don’t choose “All in one”

Themes

Choosing Themes

Does the theme get updates?

Choosing Themes

Is it supported? Documented?

Choosing Themes

Is it from a *reputable* developer or

shop?

Choosing Themes

Think about what happens if

you switch themes

Choosing Themes

StudioPress WooThemes

CreativeMarket Themeforest

Organic Themes Array

Elegant Themes The Theme Foundry

Further Readinghttps://make.wordpress.org/docs/

theme-developer-handbook/ !

Treehouse, Lynda.com

EH

Q & EH