theme wrangling 101

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

Upload: mikeyarce

Post on 22-Jun-2015

144 views

Category:

Internet


0 download

DESCRIPTION

WordPress Theme Wrangling 101

TRANSCRIPT

Page 1: Theme Wrangling 101

mikey arceHappiness Engineer @automattic @mikeyarce mikeyarce.com

Page 2: Theme Wrangling 101

THEME WRANGLING 101 GETTING STARTED WITH WORDPRESS THEMES

Page 3: Theme Wrangling 101

A B C

What are Themes?

Advanced Usage

Using Themes

D

Basic Customizing

Page 4: Theme Wrangling 101

A

What are Themes?

Page 5: Theme Wrangling 101

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

Page 6: Theme Wrangling 101

Same Site, different themes

Page 7: Theme Wrangling 101

Theme: Twenty Twelve

Page 8: Theme Wrangling 101

Theme: BaseWP

Page 9: Theme Wrangling 101

Theme: GovPress

Page 10: Theme Wrangling 101

Theme: Hueman

Page 11: Theme Wrangling 101

WordPress.org vs

WordPress.com

Page 12: Theme Wrangling 101

.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

Page 13: Theme Wrangling 101

B

USING THEMES

Page 14: Theme Wrangling 101

Installing a Theme

Page 15: Theme Wrangling 101

DEMO

Page 16: Theme Wrangling 101

C

BASIC CUSTOMIZING

Page 17: Theme Wrangling 101

Customize your Themes

CSS Customization !

Child Theming

Page 18: Theme Wrangling 101

CSS Customization

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

Page 19: Theme Wrangling 101

DEMO

Page 20: Theme Wrangling 101

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

Page 21: Theme Wrangling 101

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

Page 22: Theme Wrangling 101

Child Themes

For more information, go to: !

http://codex.wordpress.org/Child_Themes

Page 23: Theme Wrangling 101

D

ADVANCED USAGE

Page 24: Theme Wrangling 101

How WordPress worksMySQL Database

WordPress

Your Site

Page 25: Theme Wrangling 101

Customize your Themes

Custom Templates !

Custom Themes

Page 26: Theme Wrangling 101

Anatomy of a Theme

HEADER

CONTENT SIDEBAR

FOOTER

Page 27: Theme Wrangling 101

Anatomy of a Theme

header.php

index.php sidebar.php

footer.php

Page 28: Theme Wrangling 101

Anatomy of a Theme

header.php

index.php sidebar.php

footer.php

sidebar.php

Page 29: Theme Wrangling 101

Anatomy of a Theme

header.phpindex.php sidebar.php

footer.php

Page 30: Theme Wrangling 101

Custom Templates

Page 31: Theme Wrangling 101

Custom Templates

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

Page 32: Theme Wrangling 101

Template Hierarchy

Page 33: Theme Wrangling 101

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

Page 34: Theme Wrangling 101

Anatomy of a Theme

header.php

front.php sidebar.php

footer.php

Page 35: Theme Wrangling 101

Anatomy of a Theme

custom-home.php

footer.php

Page 36: Theme Wrangling 101

Custom Themes

Page 37: Theme Wrangling 101

Custom Themes

style.css index.php

Page 38: Theme Wrangling 101

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

Page 39: Theme Wrangling 101

Custom Themes style.css

Page 40: Theme Wrangling 101

_s Starter Theme

underscores.me

Page 41: Theme Wrangling 101

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

Page 42: Theme Wrangling 101

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

Page 43: Theme Wrangling 101

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

Page 44: Theme Wrangling 101

E

BONUS ROUND

Page 45: Theme Wrangling 101

Choosing Themes

Free or Premium?

Page 46: Theme Wrangling 101

Choosing Themes

Don’t choose “All in one”

Themes

Page 47: Theme Wrangling 101

Choosing Themes

Does the theme get updates?

Page 48: Theme Wrangling 101

Choosing Themes

Is it supported? Documented?

Page 49: Theme Wrangling 101

Choosing Themes

Is it from a *reputable* developer or

shop?

Page 50: Theme Wrangling 101

Choosing Themes

Think about what happens if

you switch themes

Page 51: Theme Wrangling 101

Choosing Themes

StudioPress WooThemes

CreativeMarket Themeforest

Organic Themes Array

Elegant Themes The Theme Foundry

Page 52: Theme Wrangling 101

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

theme-developer-handbook/ !

Treehouse, Lynda.com

Page 53: Theme Wrangling 101

EH

Q & EH