Girl Develop It

Building Themes for WordPress

With Ruby Sinreich

@ruby • lotusmedia.org

Based on the amazing work of Tracy Levesque: TheTracyL.com/gdi/building-themes

About you

Why do you want to build WordPress themes?

  • Your name and background
  • What project or site you're working on today
  • If you could visit any place in the world, where would you go?

About the TAs

Why do you want to help people build WordPress themes?

  • Your name and background
  • Why you're here
  • If you could visit any place in the world, where would you go?

About me

How I got here

Getting to know us

How many of us...

  • have used Wordpress as an administrator?
  • know HTML?
  • use CSS?
  • understand PHP?
  • know what "open source" means?

The rules

No question is stupid!

  • Raise your hand or speak up at any point and ask anything
  • Grab a TA whenever you need personalized help
  • "Learn and return"

Day 1

Today you will learn...

  • What WordPress themes are, how to install them and how they're structured
  • How to modify a theme with a child theme
  • How to make theme templates
  • Common WordPress template tags
  • How to use the WordPress Template Hierarchy
  • How to use Starter Themes

And

  • Take a lunch break

Ready?

Here we go...

What are Themes?

Official description from WordPress.org

Fundamentally, the WordPress Theme system is a way to 'skin' your weblog. Yet, it is more than just a 'skin.' Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.

Themes are

Powerful

A theme not only determines how a site looks, it can also add functionality to a site. You can build plugin-like functionality right into a theme.

Themes are

Often Free

There are thousands of free themes in the official WordPress Themes Directory.

Managing Themes

Appearance > Themes

WordPress currently comes with 3 themes: Twenty Eleven, Twenty Twelve and Twenty Thirteen.

Under Appearance > Themes you can see they are both installed. The theme in use is labeled "Current" and the other "Available."

Note: Twenty Fourteen and Twenty Fifteen are now available. This presentation is based on Twenty Thirteen.

Themes

Finding new themes

Themes

Installing themes

  • Install right from the "Install Themes" tab
  • Download a theme zip file and install it via the "upload" link
  • Unzip the theme files and upload it via FTP to the
    /wp-content/themes folder

Twenty Thirteen

WordPress default themes

The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.

See other official/default themes.

The Files

WordPress file and folder structure

  • wp-admin - Back-end core files, don't touch these!
  • wp-content - Theme, plugin and uploaded files
  • wp-includes - Front-end core files, don't touch these either!

The Files

Where theme files live

  • wp-content
    • plugins
    • themes
      • twentyeleven
      • twentythirteen
      • twentytwelve

Modifying Themes

So, now that I know where the theme files live I can just start hacking them, right?

NO!

#1 Rule of WordPress Development

Never EVER touch WordPress core code.

This means do not edit:

  • WordPress core files
  • Plugin files
  • Theme files

Why?

  • Stuff gets broken
  • Other plugins and themes may not work with your hacks
  • Updates wipe out your changes

So how do you customize a WordPress theme?

You create your own theme that is a "child" of another theme

  • Your child theme overrides the design elements you want changed and otherwise falls back to the parent.
  • Your child theme can also modify or add functionality to the parent theme.

How it Works

Your child theme's folder is a safe land where you can add css and php files without causing any permanent damage.

If you break something you can just hit undo or remove your file. All parent theme files will remain intact.

Making a Child Theme

We'll make a child theme for default WordPress theme, Twenty Thirteen

What Your Child Theme Needs

In order for your child theme to work it needs 2 things

Really, it only needs 1 thing, but 2 is cooler

What Your Child Theme Needs

Thing #1 - a style.css file

It tells WordPress to load the parent theme after your theme.


/*
Theme Name: [Your Theme Name]
Theme URI: [Your URL]
Description: The custom theme [Your Theme Name] using the parent theme Twenty Thirteen.
Author: [You]
Author URI: [Your URL]
Template: twentythirteen
Version: 1
*/

@import url("../twentythirteen/style.css");

What Your Child Theme Needs

Thing #1 - a style.css file

What Your Child Theme Needs

Thing #2 - a screenshot

This is the thumbnail image that shows up under Appearance > Themes in the WordPress admin.

What Your Child Theme Needs

Thing #2 - a screenshot

You can find the 600px by 400px screenshot image file, screenshot.png, in
/wp-content/themes/twentythirteen

Open the file in your favorite graphics editor, turn it into your own screenshot and save it into your child theme's folder.

Upload your theme

  1. Create a folder for your theme in wp-content/themes (no spaces)
  2. Add your 2 theme files (style.css and screenshot) to your theme folder

Activate your theme

After you've added your theme go check out Appearance > Themes in the WP admin.

Your child theme is now listed under "Available Themes." Hit activate and now your theme will be in charge.

Where We're At Now

The 2 files in your theme illustrate how a child theme's files effect the parent's files -- they either modify and add functionality to its identically named file, or completely overwrite it.

Exercise time!

Practice making child themes

  • Create a child theme of Twenty Eleven, Twenty Twelve or Twenty Thirteen
  • Make sure you create a screenshot
  • Activate your theme

Modifying the Parent Theme

Making CSS Changes

Your style.css file will override styles in the parent theme's style.css file with the same selectors.

Modifying the Parent Theme

Making CSS Changes

Example: Changing the size of the header title. The font-size for .site-title is 60px. Use the css selector in your child theme to change it. 


.site-title {
    font-size: 50px;
}

Modifying the Parent Theme

Making Template Changes

First, an introduction to templates...

Templates

Official description from WordPress.org

Templates are the files which control how your WordPress site will be displayed on the Web.

Templates

  • Take the data from the database and display it in a web browser
  • Determines how a webpage or part of a webpage looks

Twenty Thirteen Template Files

In the twentythirteen folder is all the theme's the template files. You can create your own versions of these files in your child theme.

Some common template files

  • header.php - The global header for your site
  • footer.php - The global footer for your site
  • index.php - The posts (blog) page
  • page.php - Static pages
  • sidebar.php - Your sidebar widget areas
  • single.php - A single post

Modifying the Parent Theme

Making template changes

Example: Removing WordPress credit from footer.php

  1. Open footer.php in the twentythirteen folder and save a copy into your theme's folder.
  2. Alter the contents of .site-info and save the file.
				
<div class="site-info">
	<?php do_action( 'twentythirteen_credits' ); ?>
	<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>
</div?><!-- .site-info -->

Modifying the Parent Theme

Making your own templates

Twentythirteen has just one default template, a content area with a right sidebar.

You can make additional templates. Templates you create will appear in the Template drop-down menu on the Page edit screen.

What a template file needs

First, a name (this goes at the top of your file)


<?php
/*
Template Name: [Type your template name here]
*/
?>

Second, at least these 2 include tags


<?php get_header(); ?>

<?php get_footer(); ?>

Modifying the Parent Theme

Making your own templates

Example: Create a full-width, no sidebar template.

  1. Open page.php in the twentythirteen folder.
  2. Rename it page-fullwidth.php and save it into your theme's folder
  3. Add the Template Name: to top of the file
  4. Remove <?php get_sidebar(); ?>
  5. Adjust the css to make .entry-content full width.

Exercise time!

Practice modifying the parent theme

  • Make CSS changes to the parent theme with your child theme
  • Make your own version of templates that override the parent theme
  • Add a new template to your theme

Template tags

Template tags let you insert dynamic content into your templates.

Include tags

Used in a template to execute the HTML and PHP found in another template


<?get_search_form(); ?>
<?get_sidebar(); ?>
<?comments_template(); ?>


Check out the WordPress Codex Include Tags Page

Include tags

Using Include tags

Example: Add the search form to the header

  1. Open header.php in the twentythirteen folder and save a copy into your theme's folder.
  2. Add <?get_search_form(); ?> to the header just below the site description

Function tags

Used to display useful WordPress PHP functions


<?the_title(); ?>
<?the_content(); ?>
<?the_permalink(); ?>
<?the_excerpt(); ?>
<?get_the_post_thumbnail(); ?>


Check out the WordPress Codex Function Reference

Function tags

Using Function tags

Example: Add a copyright to the footer

  1. Open footer.php in your theme's folder.
  2. Add code to create a copyright line

Copyright © <?php echo date('Y'); ?> <a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a>

Conditional tags

Used to grab and display content depending on what page it is and the conditions it matches.


is_front_page()
is_home()
is_single() 
is_page()
is_category()


Check out the WordPress Codex Conditional Tags Page and this blog post on is_front_page() vs. is_home()

Function tags

Using Conditional tags

Example: Add credit to the footer that only shows on the home page

  1. Open footer.php
  2. Add code to create a credit line

<?php
if(is_front_page()){
	echo "<p>Web design by [your name here]</p>";
}
?>

Exercise time!

Practice using template tags

  • Use an include tag. Suggestion: Add the search form to a template
  • Use a function tag. Suggestion: Use the function bloginfo to add the blog description to the footer.
  • Use a conditional tag. Suggestion: A show some text in the header only on the home page

Handy Template Tags

get_template_part

get_template_part is a special include tag that allows you to load any other template file into a template. It lets you to reuse code in multiple templates.

Important Dev rule #2 Don't Repeat Yourself.


Check out the WordPress Codex get template part

Handy Template Tags

get_template_part

	<?php get_template_part( 'content', 'none' ); ?>

Will load a template file named content-none.php

Handy Template Tags

the_post_thumbnail

	<?php the_post_thumbnail('medium'); ?>

This will create an img tag for the medium sized version of a post or page's "Featured Image"


Check out the WordPress Codex the post thumbnail

Handy Template Tags

the_post_thumbnail

You can bring up the thumbnail, medium, large, original or a custom size of the featured image. If no size is defined it will default to the thumbnail size. 


<?php the_post_thumbnail('thumbnail'); ?>
<?php the_post_thumbnail('medium'); ?>
<?php the_post_thumbnail('large'); ?>
<?php the_post_thumbnail('full'); ?>
<?php the_post_thumbnail( array(250,100) );  ?>

Handy Template Tags

get_template_directory_uri and get_stylesheet_directory_uri

  • get_template_directory_uri - Retrieves stylesheet directory address for the current theme.
  • get_stylesheet_directory_uri - Retrieves stylesheet directory address for the current theme/child theme.


Check out the WordPress Codex get template directory uri and get stylesheet directory uri

Handy Template Tags

get_template_directory_uri and get_stylesheet_directory_uri

To include images in your theme you can use the code below. 

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/image.png" />
VS. 
<img src="http://whatever.com/wp-content/mytheme/images/image.png" />

The WordPress Template Hierarchy

codex.wordpress.org says:

WordPress uses the Query String — information contained within each link on your web site — to decide which template or set of templates will be used to display the page.

The WordPress Template Hierarchy

What it is

If you name a template file a certain way, it will automatically apply to a certain page.

There's a chart on WordPress.org that shows how the naming conventions work.

The WordPress Template Hierarchy

The chart looks confusing, but if you break it down it's really pretty simple. We'll look at the template hierarchy for category archives.

The WordPress Template Hierarchy

How it works

If you name template a file a certain way they will affect the display of a certain page. Just follow the chart to find the correct naming convention.

The WordPress Template Hierarchy

How it works

Custom archive and post templates can be named by id or slug

  • category-$slug
  • category-$id
  • category-kittens
  • category-12


Check out this interactive version of the chart

The WordPress Template Hierarchy

Example: Make an archive term template

  1. Open category.php in the twentythirteen folder.
  2. Rename it category-[slug].php and save it into your theme's folder
  3. Modify the template

The WordPress Template Hierarchy

How it works

index.php is the end of the road. Any page that does not have another template file made for it will use index.php aka the default template for the posts (blog) page.

Exercise time!

Practice using the WordPress Template Hierarchy

  • Make a special template for a tag or category you create

Starter Themes

Child themes are great for modifying existing themes, but you can create your own custom theme with a starter theme.

Starter themes have base WordPress functionality, but very little or no style. Starter theme developers encourage you to hack it and make it your own.

Starter Themes

Starter themes can also come with a base framework, like HTML 5 Boilerplate, Twitter Bootstrap or a responsive grid if you enjoy using frameworks. There's no need to reinvent the wheel!

Starter Themes

Links to popular themes

Exercise time!

Install a Starter theme

  • Download and install a starter theme
  • Make it your own by editing style.css and screenshot.png

Resources

Essential WordPress Codex Articles

THE END of Day 1

Questions and 1-on-1 help time!

 

 

 

Click here to start Day 2.