theme wrangling 101
DESCRIPTION
WordPress Theme Wrangling 101TRANSCRIPT
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
.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