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!