videos.videopress.com/.../wcnyc-levesque_dvd.mp4

How's everybody doin'?

Is everybody having a fun WordCamp?

Audience: Yes!

Tracy: Awesome

My name is Tracy Levesque

I co-own a web design and development company in Philadelphia

called YIKES, Inc.

And what I like to do is build themes.

I build themes for WordPress every day.

I do a lot of talking in front of people about WordPress

and one thing I talk a lot about, historically, are Child Themes

I've done a lot of talking about Child Themes

Here, it looks like I'm closing my eyes while singing a song about Child Themes

Here I look like a Laptronica DJ

Spinning about Child Themes

Here I am at WordCamp New York!

The last time there was a WordCamp New York

I talked about Child Themes

while this dude did the crossword puzzle in the corner

I don't really know French at all

Even though I have a French last name

This was Google Translate

I am an instructor for Girl Develop It Philly

I do all the WordPress classes and here I have a theme class.

And the first thing I talk about is Child Themes

Two months ago, people!

I was talking about Child Themes at the WordPress 'burbs Meetup

Because I also co-lead the make.wordpress.org/training Team

And the module I was testing at the time was on Child Themes

This talk is not about Child Themes

In the evolution of a WordPress themer

I often say that the journey begins here

When you're beginning to learn how WordPress works

and you start to work on themes

And you want to make WordPress sites

that look the way you want them to look

The place you start is you go in the Free Themes Directory

You look around. You have a design in mind

and you look and you see, "oh, this one is kinda similar to the website I want to make."

You take it, you make a Child Theme of it

and then you have your site.

So you may start with the default theme that comes with WordPress

Like Twenty Founteen shown here

and turn it into something that looks like

this.

The WordCamp Philly site is really just

a customized version of Twenty Fourteen

Well, folks, it's time to up your game

It's time to stop taking other people's themes and using plugins

and start designing your own themes and writing your own functionality

to make your themes to look the way you want

If you want to do this for your job

If you want your job to be making WordPress themes for other people

You have to level up and gain some theming skills

And I am going to tell you 6 things you can do today

That you can learn and aren't difficult

That can really improve your theme-building skills

Number One: Use a Starter Theme

Why use a Starter Theme?

Starter Themes are meant to be modified.

The people who create Starter Themes

Create these themes that have all the basic WordPress functionality built in

But not a lot of design

So then you as a designer can take this theme

and modify it and make it your very own

You don't have to make a Child Theme

They're not meant to make Child Themes of

You just go, you take the theme

You hack it up. You modify it.

You turn it into something that gives you a big head start

when you start a new project

Maybe you work in your favorite framework

You have your templates kinda of basically

laid out the way you want

and then BOOM, you install and start on the ground running

Some starter themes already come with your favorite frameworks built in

Like if you're a fan of HTML5 Boilerplate

Or Bootstrap

There are some Starter Themes that already come

with those things

And they have very little design, some have almost no design

So you can completely make it your own.

My favorite Starter Theme is Underscores

So let's take a look at Underscores

If you go to underscores.me

You can type in a name for your theme

Hit the button

And now you have your theme all ready to go

Here I have a little local install of a basic WordPress site

with some dummy content in it.

It's just using Twenty Founteen

Let's install that Underscores that Tracy loves so much

And let's see what this looks like

Alright, now I have the theme active

We'll see what it looks like

Oh, that doesn't very nice at all, does it?

You're like, "Oh my gosh, now I have this really super plain website."

But that's ok.

Because you want to make this your job, right?

You want to do this for a living

You want to put the time into taking this

and turning it into your own starter theme

that has the basic layout that you want

So that's what we have done at YIKES

We have worked on a starter theme that is based on Underscores

I happen to be a Bootstap fan

Although all my sites do not look like Bootstrap sites

I also use, Iike the responsive grid of Bootstrap

And we also have done some other custom things to Underscores.

I'll show you what that looks like

And now we have this

Super basic

It uses a Bootstrap navwalker

to have the Bootstrap basic nav bars

It's responsive

And it's my starting place

Whenever I start a new project I install this

and then I modify it to suit my needs.

And it took a lot of work

because Underscores is very plain

It doesn't have a lot going on.

So I invested the time and I took the work

to make it exactly the way I wanted it

because that's my job.

And if you want to do this for your job

you should take that time as well

Here are some other popular starter themes

Bones is probably the second most popular

basic starter theme for WordPress

Bootstrap has Bootstrap built into it

I know some people like a little bit more

than absolutely nothing like Quark

It has a little bit more to it

More styled menus, some columns

So you are not completely starting from nothing

Number 2 - Know the WordPress Template Hierarchy

Alright how many people have seen this chart?

Whenever this chart makes an appearance at a WordCamp

Some people are like "woah, what is that?"

And it looks really confusing - there's a lot going on

But it's really not so bad

So we're just going to take a look

and break down one branch

of the WordPress Template Hierarchy

And why should you know the WordPress Template Hierarchy

There is a lot of power in understanding that chart

because what that chart does

is it allows you to make a template

that will apply to a certain kind of page

All you have to do is name the file a certain way

and it will automatically apply to a certain kind of page

And you can use this to create all kinds of lists

It works really well to use posts

for purposes other than just posts

Let's take a look at category archives

An archive page is any kind of page

that groups post into:

tags, categories, author or date

If you're looking at a blog post

and you see the tags that are listed

or the categories that are listed

underneath of it

and you click on of those

You then go to the archive page for that term

In terms of category archives

you can make a template specifically for one category term

or the slug of the category

All categories or all archive pages

meaning tags, categories, author and date

And at the end of the road

if you don't have a template file

named a certain way that matches

one of these criteria it'll go to index.php

index.php will be the file that renders that page

Here, for example, if you had the category of "kittens"

If you had a whole bunch of posts

and one of your category terms was "kittens"

If you made a template file called category-kittens.php

It would then apply to only that term

Only if people clicked on kittens would they see category-kittens.php

If you had a file called category.php

that template would apply to all categories

regardless of the terms if it didn't have

one that matched it exactly

archive.php would then apply to all archives that did not have a specific template

It keeps going down the line

and WordPress keeps looking for these templates

and if they don't exist then it defaults to the next one

And at the very end of the road

Is index.php

index.php is also known as the page

for your list of posts or your blog page

Back to my awesome demo site

Under posts I has assigned my blog posts

to this Posts page

And I have a few categories

I have bunnies - looks pretty typical, right?

Like a basic archive page

Dogs - same thing.

Then I have...

Kittens!

Now I think the main difference

between this one and the other archive pages

is that I'm using the excerpt instead of the content

And a little bit of decoration

How is this helpful?

My very first WordCamp talk I attended was about Technically Philly

And how they used the Template Hierarchy

to create big huge listings of Companies and Jobs

And all they did was use their tags and categories

on their posts to create listings of Jobs and Companies

You can use these template pages

to have a unique style for a category archive

and use that as a listing.

And they're paginated

You can go 10 listings at a time

to have a Company list

or a Staff list

You can use these templates in the Template Hierarchy

to do some things without having to use a plugin

Or some other 3rd party solution

Number Three: Register Nav Menus

Why register nav menus?

Well you can put your nav menus exactly

where you want them to be.

For a lot of clients they have multiple navigation

Maybe they'll have a top nav with some basic things

They'll have their main nav

and then they'll have some footer navs

And then a super boring nav at the bottom

with all the legalise stuff

If I want my client to manage those

navigation menus moving forward

I should register nav menus for them

So they can manage them with the

Custom Menu Manager in WordPress

It makes life easier for me and for them

So, often times when you...

There's 2 parts to the next few things I'm going to explain

There's registering the nav menu

and then there's rendering it on the front end of the site

'Cause if you register a nav menu and there's

nothing to show it on the front end of the site

does it really exist?

The first thing you do is you would

go into your functions.php file

and put in this code register nav menus

Here I registered a nav menu caller Footer Menu

I gave it the ID of footer-nav

and the regular name "Footer Menu"

That regular name is what will actually

show up in the Custom Menu Manager

And then part two

I load this menu in a template

I take this little snippet of code

and I put this in one of the front-end templates

where I want the menu to actually render

You can use this tag without registering a nav menu first

You could create a custom menu in the menu manager

and then bring it up using this tag

by calling it in your template file

So for my test site

I registered 2 nav menus

I have Primary Menu and Footer Menu

So I pre-created a menu for the Footer

and I am just going to assign it

to that nav menu area

Save

Get out of the crazy cat page

And now I have this menu in the footer

So I registered my menu so it shows up in the Menu Manager

And then I dropped that code into the footer

so it shows up in the footer

This make life easier, managing multiple nav menu areas

Number Four: Register Sidebars

Have you ever had a point in time

where you had a client or maybe you got

a design from a print designer

and they're just going crazy with the Sidebars?

Loading different content on different pages in Sidebars

And then you have to download one of those

Sidebar widget plugins that has all these

complicated configuration settings.

Like show it on this page, but not on that page...

You can skip all that by just registering sidebars

Just like with the nav menus

you first go into your functions.php file

and you register the sidebar area.

You give it a name and an ID

and a description

And then you can put some HTML around

wrap HTML around the elements in your sidebar

The name is the actual name that will show up under widgets

And the description also shows up under widgets

So you can type in real words there

that makes sense to humans

And then part 2 is you load the sidebar in a template

So you use the dynamic sidebar tag

and just put the ID of the widgitized area that you made

In this example I made "header widget"

I would take this template tag

and I'd put it in the header.php template file

So I have 5 widget areas registered for this website

I have 4 footer widget areas

I have a lot of clients that want lots of information

all jammed into the footer

So I made 4 footer widget areas.

I'm just gonna pop some content in them

Oops, I lost one. Oh, well.

And now it'll be super easy for my clients to manage those footer widget areas

All they have to do is go into Appearance > Widgets

and they can drag and drops stuff in there and they can move it around

They can change the order, they can put custom menus in there

Instead of hard coding things in the sidebars or having to use plugins

And some of those widget plugins are just Crazytown

There's some themes that just have a bazillion complicated widget configuraton settings

Number Five: Register Custom Thumbnail Sizes

One thing that's nice about registering custom thumbnail sizes

is controlling the consistency of image sizes

If you're using the featured images for posts

like perhaps in your list of posts you are showing the featured image

and then they can pop pretty much anything in there

and they can be all weird sized

Or if you have a nice grid layout of something

and you're using the featured image you want all the thumbnails

to be nice and consistent.

But you don't necessarily want to use the ones that come build into WordPress

WordPress allows you to have four image sizes in the Media Manager

You have the original, large, medium and thumbnail

And you can control the sizes of that,

but maybe you want something unique

And you want to keep the medium size

but you also want to have a unique size as well.

So to add a custom image size you just pop this in your functions.php

You add an image size, you give it an ID

and then you give the dimensions

Like you can say I want it 400 by 400

And there's 2 different modes of cropping

There's the soft proportional crop mode meaning that

if you have a rectangle, in the first example

it'll shrink the longest or widest down to 400

and then keep it a rectangle

If you put "true" in there that's the hard crop mode

Meaning it'll take the shortest width or height

shrink that down and then chop the top and bottom off

or chop the sides off so you have a nice perfectly filled image

I'm a fan of the hard crop

Because I want all of my images to look the same

I don't want some this way some that way

Just looks inconsistent and ugly

And kind of new is you can determine where you want the crop to start from

You can have it start from the top or the center

or left or right or the bottom

Instead of just by default it focuses in on the center

and crops from there

Then again you have to use them in your templates

In a single post or page you can use the post thumbnail

and then you just enter in the ID of the custom thumbnail size you just used

And then in a Loop you can say get the post thumbnail

and you put in the ID

So in my example I made a custom thumbnail size

for featured images on my Posts page

And they're all nice and consistent and the same size

Instead of having to say to the client,

"well you gotta like crop it first in Photoshop

and then upload it."

It does all the work for them

Number Six, and this is the big one

Write your own queries

And why would you want to learn how to do something like that?

Use fewer plugins

It's handy to be able to bring up a list of posts on your pages

Clients often want News on their home page in a nice box

that maybe shows their last few posts

or Announcements or Events or something like that

Then you'd have to go and find a plugin that kinda does what you want

But they're never completely perfect

There's always something weird about it

And then it doesn't style right and they're a pain.

When you write your own queries you can bring up the exact

information you want and the exact fields you want

You can wrap the HTML you want around it

and style it exactly the way you want so it looks perfect

So here is the code

First you name your query and then you have a Loop

The Loop is, like I like to say, making a sandwich

When you make a sandwich you have your bread

you have your ingredients and you have your other piece of bread

It's a set of instructions of what ingredients you want in your sandwich

In the case of WPQuery, or the Loop

You're saying I want to show the Title, I want the Content,

I want the Date and I'm done

So that's writing your own Loops, writing your own queries

Telling a template what to get from the database and display it

and how many times you want it displayed

Every page on WordPress has its own Loop

that displays that page, that post or list of posts

or whatever content that you're looking at

That's the main Loop

If you want to add an additional query inside the main Loop

you gotta tack on this wp reset post data

that restores the main Loop so you don't break the page

And here is further detail on the kind of arguements

that you can put into your query

You can have author name

So in my query I say show me all posts written by Tracy

categorized as cooking, tagged with chocolate.

I want you to show 5 posts, ordered by date in descending order

You could have a whole week-long WPQuery camp

there is so much you can do with this

But in its most basic form you just tell it

exactly what you want to display and how many posts you want to display

And then a Pro Tip: Put your WPQuery in the Transients API

Every time WordPress runs a query

it needs to go to the database, find the data,

grab the data, display it on a page

This happens in seconds, but it takes up resources

it takes up computer memory

With the Transients API you can cache a query

So I can say put the results in a transient and expire after 12 hours

So what happens is it takes a picture of this query

and then just displays it without having to do all that stuff of

going to the database, getting the content,

getting it out, displaying it for you.

This is cached for 12 hours

And where you determine the amount of time

is over here, so I'm saying 12 times hours in seconds

So I can say 1 times hours in seconds, that would be 1 hour

Save my query for 1 hour and then go see if anything's changed

save it again

You can set it to days, however time you want

depending on the frequency that

this information it is querying is updated.

So I created a simple little query

on the homepage template that I made

named page-home.php

I'm just saying I want the latest 4 posts that I posted

I'm going to put it in a box on the home page

So I'm going to go to the home page and switch to that template

And now here is my WPQuery

and it shows the last 4 posts

Simple, right?

I know I said there 6 things, but I got 2 bonus things at the end here

Bonus thing number 1 to up your design game

is use a CSS pre-processor like Sass or LESS

I'd say, maybe, I dunno, a year ago.

I was totally that guy that said,

"Oh, I know I should really be using a CSS pre-processor, but..."

Maybe it was fear of learning curve

Maybe it was I didn't really totally understand how awesome it was

But I kind of blew it off until WordPress core started using Sass

And I was kind of going between

should I use LESS, should I use Sass

I don't know

And then when WordPress core decided to use Sass

I was like "well, I gotta learn it now."

And I think it took me a day...

Well, I just sat down, I did some tutorials on the web

It took me maybe, I don't know

15 minutes to get the gist of the whole thing

and an hour to learn the basics

And a day to never EVER want to do CSS the old way ever again

Tracy Rotton did a Sass talk earlier today

So I would have mentioned it, but it already happened.

But anyway, look it up on wordpress.tv when it comes up

Oh, I got the times up sign

Sass is great!

Learn it, it's not hard

I wrote a blog post on it

It's awesome, it'll change your life

And it's fun! It makes CSS fun again.

I am not lying

Bonus Two: Up Your Dev Game

Use version control like Git or Subversion

Now I'm a designer, right?

I'm not some command line expert

But I use Git and it's great

and I can't imagine ever wanting to develop ever again without it

and I hear so many excuses why not to use version control

And I think people really just haven't used it

And they're afraid of it, because it seems complicated

It's not complicated

I have a link to learn version control with Git

It has really great tutorials

All super designer friendly

You don't have to do it at the command line

I don't use the command line

I use Tortoise Git for Windows

and all I have to do is right-click and make commits

and it's great.

It's great when you're working with a team especially

You never have one of those

"Oh, crap" moments ever again

Even when you don't mean to in FTP

you can accidentally overwrite the home page

Just by accident you put it in the wrong folder

and you didn't mean to. And you're like,

"oh my god, now the page that is live right now is wrong."

You don't have to do that ever again

You don't have to worry ever again

about putting something in the wrong place

and messing up a live site

So I would say please start using version control

Oh, and PS, if you do want to learn about Child Themes

You can go to Gabriela Levi's presentation tomorrow at 3:15

The end!

[Applause]

Tracy: Questions?

Audience member: A couple times you mentioned

putting things in your theme's function file

Tracy: Yes

Audience member: I've got caught on a couple of my clients

when they decided to install something like

WPTouch or theme switcher for mobile

As an easy fix

And, of course, all my custom stuff that was in the function file

wasn't copied over to the mobile theme

Why not do a custom plugin that just goes along with your theme?

And keep the functions file cleaner

Tracy: [laughs] I got a head shake and a head nod in the row

So the question was.

You talked about putting stuff in your functions file

but then the client installs a plugin that makes a mobile version of the site

We don't really do that anymore

We do everything responsive

So for us and the work we do at YIKES

It's kind of a non issue

But I suppose that if you do foresee that

your client is going to use something like WPTouch

you could put it in a plugin

Audience member: Well also, if your client suspects

that something is wrong and can't get a hold of you,

they can deactivate your custom plugin

Where they can't deactivate your functions file of the theme

Tracy: That's true, but I rarely put anything too crazy in the functions file

Especially if we're doing stuff like registering nav menus

and widget areas, that's not anything too wacky

that's going to wreck anything

That's basic WordPress functionality

I mean that's a hard question for me

because I'd have look at it on a case-by-case basis

Like what's the client doing that's breaking the site all the time

You know? I don't know.

Anything else?

Tom are you raising your hand or are you saying I gotta go

Audience member: I have a suggestions, you could put an include

file in if you want to

Tracy: Yeah, but still it's up to us to comment it

out if they can't get a hold of us.

Bye everybody!