1 00:00:19,457 --> 00:00:20,791 How's everybody doin'? 2 00:00:20,791 --> 00:00:22,031 Is everybody having a fun WordCamp? 3 00:00:22,031 --> 00:00:23,307 Audience: Yes! 4 00:00:23,307 --> 00:00:25,031 Tracy: Awesome 5 00:00:28,190 --> 00:00:30,949 My name is Tracy Levesque 6 00:00:30,949 --> 00:00:33,601 I co-own a web design and development company in Philadelphia 7 00:00:33,601 --> 00:00:34,521 called YIKES, Inc. 8 00:00:34,521 --> 00:00:37,832 And what I like to do is build themes. 9 00:00:37,832 --> 00:00:40,661 I build themes for WordPress every day. 10 00:00:44,622 --> 00:00:48,123 I do a lot of talking in front of people about WordPress 11 00:00:48,124 --> 00:00:53,454 and one thing I talk a lot about, historically, are Child Themes 12 00:00:53,454 --> 00:00:56,454 I've done a lot of talking about Child Themes 13 00:00:59,155 --> 00:01:04,005 Here, it looks like I'm closing my eyes while singing a song about Child Themes 14 00:01:06,925 --> 00:01:10,765 Here I look like a Laptronica DJ 15 00:01:10,765 --> 00:01:14,096 Spinning about Child Themes 16 00:01:14,096 --> 00:01:16,106 Here I am at WordCamp New York! 17 00:01:16,106 --> 00:01:17,466 The last time there was a WordCamp New York 18 00:01:17,466 --> 00:01:19,096 I talked about Child Themes 19 00:01:19,096 --> 00:01:23,057 while this dude did the crossword puzzle in the corner 20 00:01:24,257 --> 00:01:25,746 I don't really know French at all 21 00:01:25,746 --> 00:01:27,556 Even though I have a French last name 22 00:01:27,556 --> 00:01:30,476 This was Google Translate 23 00:01:32,286 --> 00:01:36,696 I am an instructor for Girl Develop It Philly 24 00:01:36,696 --> 00:01:40,736 I do all the WordPress classes and here I have a theme class. 25 00:01:40,736 --> 00:01:44,847 And the first thing I talk about is Child Themes 26 00:01:46,287 --> 00:01:47,769 Two months ago, people! 27 00:01:47,769 --> 00:01:51,659 I was talking about Child Themes at the WordPress 'burbs Meetup 28 00:01:51,659 --> 00:01:57,489 Because I also co-lead the make.wordpress.org/training Team 29 00:01:57,489 --> 00:02:01,349 And the module I was testing at the time was on Child Themes 30 00:02:04,199 --> 00:02:08,814 This talk is not about Child Themes 31 00:02:13,723 --> 00:02:15,913 In the evolution of a WordPress themer 32 00:02:15,913 --> 00:02:20,543 I often say that the journey begins here 33 00:02:20,543 --> 00:02:24,153 When you're beginning to learn how WordPress works 34 00:02:24,153 --> 00:02:25,853 and you start to work on themes 35 00:02:25,853 --> 00:02:27,753 And you want to make WordPress sites 36 00:02:27,753 --> 00:02:30,884 that look the way you want them to look 37 00:02:30,884 --> 00:02:34,454 The place you start is you go in the Free Themes Directory 38 00:02:34,454 --> 00:02:37,134 You look around. You have a design in mind 39 00:02:37,134 --> 00:02:41,803 and you look and you see, "oh, this one is kinda similar to the website I want to make." 40 00:02:41,803 --> 00:02:45,093 You take it, you make a Child Theme of it 41 00:02:45,093 --> 00:02:48,713 and then you have your site. 42 00:02:51,133 --> 00:02:54,397 So you may start with the default theme that comes with WordPress 43 00:02:54,397 --> 00:02:56,237 Like Twenty Founteen shown here 44 00:02:56,237 --> 00:02:59,838 and turn it into something that looks like 45 00:02:59,838 --> 00:03:01,329 this. 46 00:03:01,329 --> 00:03:03,228 The WordCamp Philly site is really just 47 00:03:03,228 --> 00:03:05,888 a customized version of Twenty Fourteen 48 00:03:08,808 --> 00:03:11,948 Well, folks, it's time to up your game 49 00:03:11,948 --> 00:03:15,809 It's time to stop taking other people's themes and using plugins 50 00:03:15,809 --> 00:03:20,659 and start designing your own themes and writing your own functionality 51 00:03:20,659 --> 00:03:24,520 to make your themes to look the way you want 52 00:03:24,520 --> 00:03:26,220 If you want to do this for your job 53 00:03:26,220 --> 00:03:30,360 If you want your job to be making WordPress themes for other people 54 00:03:30,360 --> 00:03:34,880 You have to level up and gain some theming skills 55 00:03:34,880 --> 00:03:38,260 And I am going to tell you 6 things you can do today 56 00:03:38,260 --> 00:03:40,219 That you can learn and aren't difficult 57 00:03:40,219 --> 00:03:44,112 That can really improve your theme-building skills 58 00:03:48,415 --> 00:03:52,536 Number One: Use a Starter Theme 59 00:03:54,356 --> 00:03:57,017 Why use a Starter Theme? 60 00:03:57,017 --> 00:03:59,407 Starter Themes are meant to be modified. 61 00:03:59,407 --> 00:04:01,048 The people who create Starter Themes 62 00:04:01,048 --> 00:04:05,777 Create these themes that have all the basic WordPress functionality built in 63 00:04:05,777 --> 00:04:07,348 But not a lot of design 64 00:04:07,348 --> 00:04:09,818 So then you as a designer can take this theme 65 00:04:09,818 --> 00:04:13,457 and modify it and make it your very own 66 00:04:13,457 --> 00:04:14,747 You don't have to make a Child Theme 67 00:04:14,747 --> 00:04:16,797 They're not meant to make Child Themes of 68 00:04:16,797 --> 00:04:18,877 You just go, you take the theme 69 00:04:18,877 --> 00:04:20,497 You hack it up. You modify it. 70 00:04:20,497 --> 00:04:23,797 You turn it into something that gives you a big head start 71 00:04:23,797 --> 00:04:25,727 when you start a new project 72 00:04:25,727 --> 00:04:28,427 Maybe you work in your favorite framework 73 00:04:28,427 --> 00:04:30,507 You have your templates kinda of basically 74 00:04:30,507 --> 00:04:32,627 laid out the way you want 75 00:04:32,627 --> 00:04:36,768 and then BOOM, you install and start on the ground running 76 00:04:36,768 --> 00:04:42,147 Some starter themes already come with your favorite frameworks built in 77 00:04:42,147 --> 00:04:45,407 Like if you're a fan of HTML5 Boilerplate 78 00:04:45,407 --> 00:04:46,637 Or Bootstrap 79 00:04:46,637 --> 00:04:48,368 There are some Starter Themes that already come 80 00:04:48,368 --> 00:04:50,547 with those things 81 00:04:50,547 --> 00:04:53,537 And they have very little design, some have almost no design 82 00:04:53,537 --> 00:04:55,623 So you can completely make it your own. 83 00:04:58,179 --> 00:05:01,485 My favorite Starter Theme is Underscores 84 00:05:01,485 --> 00:05:03,841 So let's take a look at Underscores 85 00:05:07,052 --> 00:05:09,073 If you go to underscores.me 86 00:05:09,073 --> 00:05:12,504 You can type in a name for your theme 87 00:05:16,094 --> 00:05:17,928 Hit the button 88 00:05:19,128 --> 00:05:22,488 And now you have your theme all ready to go 89 00:05:24,238 --> 00:05:29,179 Here I have a little local install of a basic WordPress site 90 00:05:29,179 --> 00:05:30,858 with some dummy content in it. 91 00:05:30,858 --> 00:05:33,559 It's just using Twenty Founteen 92 00:05:33,559 --> 00:05:37,808 Let's install that Underscores that Tracy loves so much 93 00:05:37,808 --> 00:05:40,361 And let's see what this looks like 94 00:05:51,274 --> 00:05:54,543 Alright, now I have the theme active 95 00:05:54,543 --> 00:05:57,123 We'll see what it looks like 96 00:05:57,643 --> 00:06:00,703 Oh, that doesn't very nice at all, does it? 97 00:06:01,113 --> 00:06:05,774 You're like, "Oh my gosh, now I have this really super plain website." 98 00:06:05,774 --> 00:06:06,893 But that's ok. 99 00:06:06,893 --> 00:06:09,193 Because you want to make this your job, right? 100 00:06:09,193 --> 00:06:10,433 You want to do this for a living 101 00:06:10,433 --> 00:06:12,923 You want to put the time into taking this 102 00:06:12,923 --> 00:06:16,463 and turning it into your own starter theme 103 00:06:16,463 --> 00:06:21,343 that has the basic layout that you want 104 00:06:21,343 --> 00:06:24,144 So that's what we have done at YIKES 105 00:06:24,144 --> 00:06:28,333 We have worked on a starter theme that is based on Underscores 106 00:06:28,333 --> 00:06:30,403 I happen to be a Bootstap fan 107 00:06:30,403 --> 00:06:34,813 Although all my sites do not look like Bootstrap sites 108 00:06:34,813 --> 00:06:39,934 I also use, Iike the responsive grid of Bootstrap 109 00:06:39,934 --> 00:06:45,073 And we also have done some other custom things to Underscores. 110 00:06:45,073 --> 00:06:47,186 I'll show you what that looks like 111 00:06:54,643 --> 00:06:56,339 And now we have this 112 00:06:56,339 --> 00:06:58,349 Super basic 113 00:06:58,349 --> 00:07:00,810 It uses a Bootstrap navwalker 114 00:07:00,810 --> 00:07:04,213 to have the Bootstrap basic nav bars 115 00:07:08,326 --> 00:07:10,740 It's responsive 116 00:07:12,180 --> 00:07:13,820 And it's my starting place 117 00:07:13,820 --> 00:07:16,560 Whenever I start a new project I install this 118 00:07:16,560 --> 00:07:19,596 and then I modify it to suit my needs. 119 00:07:22,612 --> 00:07:24,197 And it took a lot of work 120 00:07:24,197 --> 00:07:27,677 because Underscores is very plain 121 00:07:27,677 --> 00:07:29,596 It doesn't have a lot going on. 122 00:07:29,596 --> 00:07:33,117 So I invested the time and I took the work 123 00:07:33,117 --> 00:07:35,307 to make it exactly the way I wanted it 124 00:07:35,307 --> 00:07:38,417 because that's my job. 125 00:07:38,417 --> 00:07:40,687 And if you want to do this for your job 126 00:07:40,687 --> 00:07:43,150 you should take that time as well 127 00:07:47,503 --> 00:07:50,259 Here are some other popular starter themes 128 00:07:50,259 --> 00:07:52,638 Bones is probably the second most popular 129 00:07:52,638 --> 00:07:57,208 basic starter theme for WordPress 130 00:07:57,208 --> 00:07:59,978 Bootstrap has Bootstrap built into it 131 00:07:59,978 --> 00:08:01,959 I know some people like a little bit more 132 00:08:01,959 --> 00:08:03,888 than absolutely nothing like Quark 133 00:08:03,888 --> 00:08:05,368 It has a little bit more to it 134 00:08:05,368 --> 00:08:08,048 More styled menus, some columns 135 00:08:08,048 --> 00:08:11,439 So you are not completely starting from nothing 136 00:08:15,139 --> 00:08:19,964 Number 2 - Know the WordPress Template Hierarchy 137 00:08:21,294 --> 00:08:25,162 Alright how many people have seen this chart? 138 00:08:26,583 --> 00:08:29,492 Whenever this chart makes an appearance at a WordCamp 139 00:08:29,492 --> 00:08:33,052 Some people are like "woah, what is that?" 140 00:08:38,292 --> 00:08:40,362 And it looks really confusing - there's a lot going on 141 00:08:40,362 --> 00:08:41,682 But it's really not so bad 142 00:08:41,682 --> 00:08:42,933 So we're just going to take a look 143 00:08:42,933 --> 00:08:44,642 and break down one branch 144 00:08:44,642 --> 00:08:46,482 of the WordPress Template Hierarchy 145 00:08:49,472 --> 00:08:52,573 And why should you know the WordPress Template Hierarchy 146 00:08:54,003 --> 00:08:56,972 There is a lot of power in understanding that chart 147 00:08:56,972 --> 00:08:58,493 because what that chart does 148 00:08:58,493 --> 00:09:00,693 is it allows you to make a template 149 00:09:00,693 --> 00:09:03,852 that will apply to a certain kind of page 150 00:09:04,922 --> 00:09:07,732 All you have to do is name the file a certain way 151 00:09:07,732 --> 00:09:11,113 and it will automatically apply to a certain kind of page 152 00:09:11,113 --> 00:09:15,922 And you can use this to create all kinds of lists 153 00:09:16,962 --> 00:09:19,602 It works really well to use posts 154 00:09:19,602 --> 00:09:23,242 for purposes other than just posts 155 00:09:29,283 --> 00:09:32,342 Let's take a look at category archives 156 00:09:33,252 --> 00:09:35,982 An archive page is any kind of page 157 00:09:35,982 --> 00:09:38,482 that groups post into: 158 00:09:38,482 --> 00:09:43,472 tags, categories, author or date 159 00:09:43,472 --> 00:09:45,862 If you're looking at a blog post 160 00:09:45,862 --> 00:09:47,572 and you see the tags that are listed 161 00:09:47,572 --> 00:09:49,103 or the categories that are listed 162 00:09:49,103 --> 00:09:50,132 underneath of it 163 00:09:50,132 --> 00:09:51,622 and you click on of those 164 00:09:51,622 --> 00:09:55,712 You then go to the archive page for that term 165 00:09:58,062 --> 00:10:00,722 In terms of category archives 166 00:10:01,882 --> 00:10:05,652 you can make a template specifically for one category term 167 00:10:05,652 --> 00:10:07,802 or the slug of the category 168 00:10:08,762 --> 00:10:12,442 All categories or all archive pages 169 00:10:12,442 --> 00:10:15,683 meaning tags, categories, author and date 170 00:10:16,203 --> 00:10:17,582 And at the end of the road 171 00:10:17,582 --> 00:10:20,193 if you don't have a template file 172 00:10:20,193 --> 00:10:21,933 named a certain way that matches 173 00:10:21,933 --> 00:10:24,023 one of these criteria it'll go to index.php 174 00:10:24,023 --> 00:10:29,273 index.php will be the file that renders that page 175 00:10:31,901 --> 00:10:36,081 Here, for example, if you had the category of "kittens" 176 00:10:36,081 --> 00:10:37,482 If you had a whole bunch of posts 177 00:10:37,482 --> 00:10:40,521 and one of your category terms was "kittens" 178 00:10:40,521 --> 00:10:44,811 If you made a template file called category-kittens.php 179 00:10:44,811 --> 00:10:46,821 It would then apply to only that term 180 00:10:46,821 --> 00:10:50,982 Only if people clicked on kittens would they see category-kittens.php 181 00:10:51,822 --> 00:10:54,371 If you had a file called category.php 182 00:10:54,371 --> 00:10:57,141 that template would apply to all categories 183 00:10:57,141 --> 00:11:00,611 regardless of the terms if it didn't have 184 00:11:00,611 --> 00:11:02,201 one that matched it exactly 185 00:11:03,201 --> 00:11:09,232 archive.php would then apply to all archives that did not have a specific template 186 00:11:09,232 --> 00:11:12,012 It keeps going down the line 187 00:11:12,012 --> 00:11:14,252 and WordPress keeps looking for these templates 188 00:11:14,252 --> 00:11:17,081 and if they don't exist then it defaults to the next one 189 00:11:17,081 --> 00:11:19,003 And at the very end of the road 190 00:11:19,003 --> 00:11:20,571 Is index.php 191 00:11:20,571 --> 00:11:23,611 index.php is also known as the page 192 00:11:23,611 --> 00:11:26,672 for your list of posts or your blog page 193 00:11:31,721 --> 00:11:34,771 Back to my awesome demo site 194 00:11:34,771 --> 00:11:37,711 Under posts I has assigned my blog posts 195 00:11:37,711 --> 00:11:39,031 to this Posts page 196 00:11:40,101 --> 00:11:42,861 And I have a few categories 197 00:11:42,861 --> 00:11:47,472 I have bunnies - looks pretty typical, right? 198 00:11:47,472 --> 00:11:52,711 Like a basic archive page 199 00:11:52,711 --> 00:11:55,591 Dogs - same thing. 200 00:11:55,591 --> 00:11:57,842 Then I have... 201 00:11:57,842 --> 00:12:00,575 Kittens! 202 00:12:01,025 --> 00:12:02,765 Now I think the main difference 203 00:12:02,765 --> 00:12:05,434 between this one and the other archive pages 204 00:12:05,434 --> 00:12:09,255 is that I'm using the excerpt instead of the content 205 00:12:11,205 --> 00:12:13,944 And a little bit of decoration 206 00:12:14,524 --> 00:12:15,964 How is this helpful? 207 00:12:20,454 --> 00:12:23,584 My very first WordCamp talk I attended was about Technically Philly 208 00:12:23,584 --> 00:12:25,375 And how they used the Template Hierarchy 209 00:12:25,375 --> 00:12:29,895 to create big huge listings of Companies and Jobs 210 00:12:29,895 --> 00:12:32,984 And all they did was use their tags and categories 211 00:12:32,984 --> 00:12:39,335 on their posts to create listings of Jobs and Companies 212 00:12:39,335 --> 00:12:42,694 You can use these template pages 213 00:12:42,694 --> 00:12:46,054 to have a unique style for a category archive 214 00:12:46,054 --> 00:12:47,164 and use that as a listing. 215 00:12:47,164 --> 00:12:48,455 And they're paginated 216 00:12:48,455 --> 00:12:51,574 You can go 10 listings at a time 217 00:12:51,574 --> 00:12:53,694 to have a Company list 218 00:12:53,694 --> 00:12:55,535 or a Staff list 219 00:12:55,535 --> 00:12:59,324 You can use these templates in the Template Hierarchy 220 00:12:59,324 --> 00:13:04,734 to do some things without having to use a plugin 221 00:13:06,404 --> 00:13:09,135 Or some other 3rd party solution 222 00:13:14,045 --> 00:13:18,255 Number Three: Register Nav Menus 223 00:13:20,785 --> 00:13:22,524 Why register nav menus? 224 00:13:22,524 --> 00:13:24,875 Well you can put your nav menus exactly 225 00:13:24,875 --> 00:13:26,905 where you want them to be. 226 00:13:28,025 --> 00:13:31,835 For a lot of clients they have multiple navigation 227 00:13:31,835 --> 00:13:34,704 Maybe they'll have a top nav with some basic things 228 00:13:34,704 --> 00:13:36,154 They'll have their main nav 229 00:13:36,154 --> 00:13:37,414 and then they'll have some footer navs 230 00:13:37,414 --> 00:13:39,055 And then a super boring nav at the bottom 231 00:13:39,055 --> 00:13:40,875 with all the legalise stuff 232 00:13:41,475 --> 00:13:43,064 If I want my client to manage those 233 00:13:43,064 --> 00:13:45,184 navigation menus moving forward 234 00:13:45,184 --> 00:13:47,355 I should register nav menus for them 235 00:13:47,355 --> 00:13:49,064 So they can manage them with the 236 00:13:49,064 --> 00:13:52,345 Custom Menu Manager in WordPress 237 00:13:52,345 --> 00:13:56,284 It makes life easier for me and for them 238 00:13:58,874 --> 00:14:01,082 So, often times when you... 239 00:14:03,002 --> 00:14:07,702 There's 2 parts to the next few things I'm going to explain 240 00:14:07,702 --> 00:14:09,512 There's registering the nav menu 241 00:14:09,512 --> 00:14:12,082 and then there's rendering it on the front end of the site 242 00:14:12,082 --> 00:14:14,553 'Cause if you register a nav menu and there's 243 00:14:14,553 --> 00:14:17,342 nothing to show it on the front end of the site 244 00:14:17,342 --> 00:14:20,452 does it really exist? 245 00:14:20,492 --> 00:14:22,322 The first thing you do is you would 246 00:14:22,322 --> 00:14:23,712 go into your functions.php file 247 00:14:23,712 --> 00:14:27,392 and put in this code register nav menus 248 00:14:27,392 --> 00:14:31,752 Here I registered a nav menu caller Footer Menu 249 00:14:33,922 --> 00:14:35,952 I gave it the ID of footer-nav 250 00:14:35,952 --> 00:14:38,832 and the regular name "Footer Menu" 251 00:14:38,832 --> 00:14:40,672 That regular name is what will actually 252 00:14:40,672 --> 00:14:44,152 show up in the Custom Menu Manager 253 00:14:45,332 --> 00:14:46,412 And then part two 254 00:14:46,412 --> 00:14:49,592 I load this menu in a template 255 00:14:51,152 --> 00:14:53,822 I take this little snippet of code 256 00:14:53,822 --> 00:14:56,323 and I put this in one of the front-end templates 257 00:14:56,323 --> 00:15:00,002 where I want the menu to actually render 258 00:15:00,002 --> 00:15:05,252 You can use this tag without registering a nav menu first 259 00:15:05,252 --> 00:15:08,512 You could create a custom menu in the menu manager 260 00:15:08,512 --> 00:15:10,922 and then bring it up using this tag 261 00:15:10,922 --> 00:15:14,212 by calling it in your template file 262 00:15:17,773 --> 00:15:20,572 So for my test site 263 00:15:23,992 --> 00:15:26,552 I registered 2 nav menus 264 00:15:26,552 --> 00:15:31,142 I have Primary Menu and Footer Menu 265 00:15:31,732 --> 00:15:35,512 So I pre-created a menu for the Footer 266 00:15:35,512 --> 00:15:38,472 and I am just going to assign it 267 00:15:39,162 --> 00:15:41,353 to that nav menu area 268 00:15:41,633 --> 00:15:43,142 Save 269 00:15:46,562 --> 00:15:49,022 Get out of the crazy cat page 270 00:15:52,792 --> 00:15:56,032 And now I have this menu in the footer 271 00:15:56,032 --> 00:16:00,002 So I registered my menu so it shows up in the Menu Manager 272 00:16:00,002 --> 00:16:02,012 And then I dropped that code into the footer 273 00:16:02,012 --> 00:16:03,872 so it shows up in the footer 274 00:16:03,872 --> 00:16:08,232 This make life easier, managing multiple nav menu areas 275 00:16:16,652 --> 00:16:21,492 Number Four: Register Sidebars 276 00:16:25,662 --> 00:16:27,372 Have you ever had a point in time 277 00:16:27,372 --> 00:16:29,872 where you had a client or maybe you got 278 00:16:29,872 --> 00:16:32,992 a design from a print designer 279 00:16:32,992 --> 00:16:35,672 and they're just going crazy with the Sidebars? 280 00:16:35,672 --> 00:16:38,732 Loading different content on different pages in Sidebars 281 00:16:38,732 --> 00:16:41,073 And then you have to download one of those 282 00:16:41,073 --> 00:16:44,272 Sidebar widget plugins that has all these 283 00:16:44,272 --> 00:16:47,012 complicated configuration settings. 284 00:16:47,012 --> 00:16:50,582 Like show it on this page, but not on that page... 285 00:16:50,582 --> 00:16:54,993 You can skip all that by just registering sidebars 286 00:17:00,072 --> 00:17:01,802 Just like with the nav menus 287 00:17:01,802 --> 00:17:04,172 you first go into your functions.php file 288 00:17:04,172 --> 00:17:06,972 and you register the sidebar area. 289 00:17:06,972 --> 00:17:08,642 You give it a name and an ID 290 00:17:08,642 --> 00:17:09,663 and a description 291 00:17:09,663 --> 00:17:12,671 And then you can put some HTML around 292 00:17:12,671 --> 00:17:16,942 wrap HTML around the elements in your sidebar 293 00:17:16,942 --> 00:17:22,143 The name is the actual name that will show up under widgets 294 00:17:22,143 --> 00:17:24,202 And the description also shows up under widgets 295 00:17:24,202 --> 00:17:27,313 So you can type in real words there 296 00:17:27,313 --> 00:17:29,652 that makes sense to humans 297 00:17:31,792 --> 00:17:36,043 And then part 2 is you load the sidebar in a template 298 00:17:36,043 --> 00:17:38,372 So you use the dynamic sidebar tag 299 00:17:38,372 --> 00:17:41,552 and just put the ID of the widgitized area that you made 300 00:17:41,552 --> 00:17:43,532 In this example I made "header widget" 301 00:17:43,532 --> 00:17:45,632 I would take this template tag 302 00:17:45,632 --> 00:17:50,978 and I'd put it in the header.php template file 303 00:18:03,264 --> 00:18:13,419 So I have 5 widget areas registered for this website 304 00:18:13,419 --> 00:18:16,110 I have 4 footer widget areas 305 00:18:16,110 --> 00:18:19,870 I have a lot of clients that want lots of information 306 00:18:19,870 --> 00:18:21,470 all jammed into the footer 307 00:18:21,470 --> 00:18:24,570 So I made 4 footer widget areas. 308 00:18:27,670 --> 00:18:33,380 I'm just gonna pop some content in them 309 00:18:49,431 --> 00:18:52,620 Oops, I lost one. Oh, well. 310 00:18:55,930 --> 00:19:01,701 And now it'll be super easy for my clients to manage those footer widget areas 311 00:19:01,701 --> 00:19:05,600 All they have to do is go into Appearance > Widgets 312 00:19:05,600 --> 00:19:08,521 and they can drag and drops stuff in there and they can move it around 313 00:19:08,521 --> 00:19:12,731 They can change the order, they can put custom menus in there 314 00:19:12,731 --> 00:19:19,500 Instead of hard coding things in the sidebars or having to use plugins 315 00:19:21,200 --> 00:19:24,121 And some of those widget plugins are just Crazytown 316 00:19:24,121 --> 00:19:31,594 There's some themes that just have a bazillion complicated widget configuraton settings 317 00:19:38,047 --> 00:19:42,001 Number Five: Register Custom Thumbnail Sizes 318 00:19:45,641 --> 00:19:49,911 One thing that's nice about registering custom thumbnail sizes 319 00:19:49,911 --> 00:19:54,440 is controlling the consistency of image sizes 320 00:19:55,020 --> 00:19:57,391 If you're using the featured images for posts 321 00:19:57,391 --> 00:20:04,371 like perhaps in your list of posts you are showing the featured image 322 00:20:04,371 --> 00:20:06,711 and then they can pop pretty much anything in there 323 00:20:06,711 --> 00:20:10,980 and they can be all weird sized 324 00:20:10,980 --> 00:20:13,911 Or if you have a nice grid layout of something 325 00:20:13,911 --> 00:20:16,291 and you're using the featured image you want all the thumbnails 326 00:20:16,291 --> 00:20:17,870 to be nice and consistent. 327 00:20:17,870 --> 00:20:21,412 But you don't necessarily want to use the ones that come build into WordPress 328 00:20:21,412 --> 00:20:26,990 WordPress allows you to have four image sizes in the Media Manager 329 00:20:26,990 --> 00:20:31,310 You have the original, large, medium and thumbnail 330 00:20:31,310 --> 00:20:33,491 And you can control the sizes of that, 331 00:20:33,491 --> 00:20:36,050 but maybe you want something unique 332 00:20:36,050 --> 00:20:39,450 And you want to keep the medium size 333 00:20:39,450 --> 00:20:42,771 but you also want to have a unique size as well. 334 00:20:45,791 --> 00:20:51,370 So to add a custom image size you just pop this in your functions.php 335 00:20:51,370 --> 00:20:55,190 You add an image size, you give it an ID 336 00:20:55,190 --> 00:20:57,391 and then you give the dimensions 337 00:20:57,391 --> 00:21:00,191 Like you can say I want it 400 by 400 338 00:21:00,191 --> 00:21:02,190 And there's 2 different modes of cropping 339 00:21:02,190 --> 00:21:05,050 There's the soft proportional crop mode meaning that 340 00:21:05,050 --> 00:21:10,211 if you have a rectangle, in the first example 341 00:21:10,211 --> 00:21:14,430 it'll shrink the longest or widest down to 400 342 00:21:14,430 --> 00:21:17,131 and then keep it a rectangle 343 00:21:17,131 --> 00:21:21,971 If you put "true" in there that's the hard crop mode 344 00:21:21,971 --> 00:21:26,750 Meaning it'll take the shortest width or height 345 00:21:26,750 --> 00:21:28,791 shrink that down and then chop the top and bottom off 346 00:21:28,791 --> 00:21:32,450 or chop the sides off so you have a nice perfectly filled image 347 00:21:32,450 --> 00:21:34,490 I'm a fan of the hard crop 348 00:21:34,490 --> 00:21:37,370 Because I want all of my images to look the same 349 00:21:37,370 --> 00:21:39,611 I don't want some this way some that way 350 00:21:39,611 --> 00:21:42,950 Just looks inconsistent and ugly 351 00:21:42,950 --> 00:21:49,610 And kind of new is you can determine where you want the crop to start from 352 00:21:49,610 --> 00:21:52,311 You can have it start from the top or the center 353 00:21:52,311 --> 00:21:55,631 or left or right or the bottom 354 00:21:55,631 --> 00:21:59,490 Instead of just by default it focuses in on the center 355 00:21:59,490 --> 00:22:01,410 and crops from there 356 00:22:01,410 --> 00:22:05,731 357 00:22:05,731 --> 00:22:08,370 Then again you have to use them in your templates 358 00:22:08,370 --> 00:22:12,190 In a single post or page you can use the post thumbnail 359 00:22:12,190 --> 00:22:17,931 and then you just enter in the ID of the custom thumbnail size you just used 360 00:22:17,931 --> 00:22:22,310 And then in a Loop you can say get the post thumbnail 361 00:22:22,310 --> 00:22:24,590 and you put in the ID 362 00:22:24,590 --> 00:22:29,551 363 00:22:29,551 --> 00:22:33,350 So in my example I made a custom thumbnail size 364 00:22:33,350 --> 00:22:39,790 for featured images on my Posts page 365 00:22:39,790 --> 00:22:44,970 And they're all nice and consistent and the same size 366 00:22:44,970 --> 00:22:46,351 Instead of having to say to the client, 367 00:22:46,351 --> 00:22:48,471 "well you gotta like crop it first in Photoshop 368 00:22:48,471 --> 00:22:50,032 and then upload it." 369 00:22:50,032 --> 00:22:53,071 It does all the work for them 370 00:22:53,071 --> 00:23:01,210 371 00:23:01,210 --> 00:23:03,790 Number Six, and this is the big one 372 00:23:03,790 --> 00:23:10,570 Write your own queries 373 00:23:10,570 --> 00:23:14,871 And why would you want to learn how to do something like that? 374 00:23:14,871 --> 00:23:18,711 Use fewer plugins 375 00:23:18,711 --> 00:23:23,291 It's handy to be able to bring up a list of posts on your pages 376 00:23:23,291 --> 00:23:30,170 Clients often want News on their home page in a nice box 377 00:23:30,170 --> 00:23:32,130 that maybe shows their last few posts 378 00:23:32,130 --> 00:23:35,270 or Announcements or Events or something like that 379 00:23:35,270 --> 00:23:39,751 Then you'd have to go and find a plugin that kinda does what you want 380 00:23:39,751 --> 00:23:42,130 But they're never completely perfect 381 00:23:42,130 --> 00:23:43,590 There's always something weird about it 382 00:23:43,590 --> 00:23:48,890 And then it doesn't style right and they're a pain. 383 00:23:48,890 --> 00:23:51,491 When you write your own queries you can bring up the exact 384 00:23:51,491 --> 00:23:53,951 information you want and the exact fields you want 385 00:23:53,951 --> 00:23:57,430 You can wrap the HTML you want around it 386 00:23:57,430 --> 00:24:01,450 and style it exactly the way you want so it looks perfect 387 00:24:01,450 --> 00:24:04,831 388 00:24:04,831 --> 00:24:07,630 So here is the code 389 00:24:07,630 --> 00:24:13,851 First you name your query and then you have a Loop 390 00:24:13,851 --> 00:24:18,750 The Loop is, like I like to say, making a sandwich 391 00:24:18,750 --> 00:24:20,511 When you make a sandwich you have your bread 392 00:24:20,511 --> 00:24:22,631 you have your ingredients and you have your other piece of bread 393 00:24:22,631 --> 00:24:28,351 It's a set of instructions of what ingredients you want in your sandwich 394 00:24:28,351 --> 00:24:32,090 In the case of WPQuery, or the Loop 395 00:24:32,090 --> 00:24:36,231 You're saying I want to show the Title, I want the Content, 396 00:24:36,231 --> 00:24:40,390 I want the Date and I'm done 397 00:24:40,390 --> 00:24:45,331 So that's writing your own Loops, writing your own queries 398 00:24:45,331 --> 00:24:50,110 Telling a template what to get from the database and display it 399 00:24:50,110 --> 00:24:54,950 and how many times you want it displayed 400 00:24:54,950 --> 00:25:02,031 Every page on WordPress has its own Loop 401 00:25:02,031 --> 00:25:05,231 that displays that page, that post or list of posts 402 00:25:05,231 --> 00:25:07,310 or whatever content that you're looking at 403 00:25:07,310 --> 00:25:09,090 That's the main Loop 404 00:25:09,090 --> 00:25:12,110 If you want to add an additional query inside the main Loop 405 00:25:12,110 --> 00:25:15,610 you gotta tack on this wp reset post data 406 00:25:15,610 --> 00:25:20,430 that restores the main Loop so you don't break the page 407 00:25:20,430 --> 00:25:25,011 408 00:25:25,011 --> 00:25:28,650 And here is further detail on the kind of arguements 409 00:25:28,650 --> 00:25:32,231 that you can put into your query 410 00:25:32,231 --> 00:25:35,210 You can have author name 411 00:25:35,210 --> 00:25:40,851 So in my query I say show me all posts written by Tracy 412 00:25:40,851 --> 00:25:44,091 categorized as cooking, tagged with chocolate. 413 00:25:44,091 --> 00:25:49,911 I want you to show 5 posts, ordered by date in descending order 414 00:25:49,911 --> 00:25:55,810 You could have a whole week-long WPQuery camp 415 00:25:55,810 --> 00:25:57,210 there is so much you can do with this 416 00:25:57,210 --> 00:26:00,210 But in its most basic form you just tell it 417 00:26:00,210 --> 00:26:06,490 exactly what you want to display and how many posts you want to display 418 00:26:06,490 --> 00:26:14,591 And then a Pro Tip: Put your WPQuery in the Transients API 419 00:26:14,591 --> 00:26:16,931 Every time WordPress runs a query 420 00:26:16,931 --> 00:26:21,350 it needs to go to the database, find the data, 421 00:26:21,350 --> 00:26:23,751 grab the data, display it on a page 422 00:26:23,751 --> 00:26:26,410 This happens in seconds, but it takes up resources 423 00:26:26,410 --> 00:26:29,530 it takes up computer memory 424 00:26:29,530 --> 00:26:33,111 With the Transients API you can cache a query 425 00:26:33,111 --> 00:26:43,571 So I can say put the results in a transient and expire after 12 hours 426 00:26:43,571 --> 00:26:46,491 So what happens is it takes a picture of this query 427 00:26:46,491 --> 00:26:49,891 and then just displays it without having to do all that stuff of 428 00:26:49,891 --> 00:26:51,831 going to the database, getting the content, 429 00:26:51,831 --> 00:26:53,930 getting it out, displaying it for you. 430 00:26:53,930 --> 00:26:55,631 This is cached for 12 hours 431 00:26:55,631 --> 00:26:59,471 And where you determine the amount of time 432 00:26:59,471 --> 00:27:05,011 is over here, so I'm saying 12 times hours in seconds 433 00:27:05,011 --> 00:27:09,730 So I can say 1 times hours in seconds, that would be 1 hour 434 00:27:09,730 --> 00:27:12,850 Save my query for 1 hour and then go see if anything's changed 435 00:27:12,850 --> 00:27:14,470 save it again 436 00:27:14,470 --> 00:27:19,510 You can set it to days, however time you want 437 00:27:19,510 --> 00:27:21,410 depending on the frequency that 438 00:27:21,410 --> 00:27:24,251 this information it is querying is updated. 439 00:27:24,251 --> 00:27:31,870 440 00:27:31,870 --> 00:27:34,391 So I created a simple little query 441 00:27:34,391 --> 00:27:37,751 on the homepage template that I made 442 00:27:37,751 --> 00:27:42,370 named page-home.php 443 00:27:42,370 --> 00:27:48,791 I'm just saying I want the latest 4 posts that I posted 444 00:27:48,791 --> 00:27:54,530 I'm going to put it in a box on the home page 445 00:27:54,530 --> 00:27:57,550 446 00:27:57,550 --> 00:28:02,751 So I'm going to go to the home page and switch to that template 447 00:28:02,751 --> 00:28:12,230 448 00:28:12,230 --> 00:28:15,330 And now here is my WPQuery 449 00:28:15,330 --> 00:28:18,071 and it shows the last 4 posts 450 00:28:18,071 --> 00:28:21,411 Simple, right? 451 00:28:21,411 --> 00:28:31,130 452 00:28:31,130 --> 00:28:34,890 I know I said there 6 things, but I got 2 bonus things at the end here 453 00:28:34,890 --> 00:28:38,291 Bonus thing number 1 to up your design game 454 00:28:38,291 --> 00:28:42,511 is use a CSS pre-processor like Sass or LESS 455 00:28:42,511 --> 00:28:48,650 I'd say, maybe, I dunno, a year ago. 456 00:28:48,650 --> 00:28:51,231 I was totally that guy that said, 457 00:28:51,231 --> 00:28:55,530 "Oh, I know I should really be using a CSS pre-processor, but..." 458 00:28:55,530 --> 00:28:57,791 Maybe it was fear of learning curve 459 00:28:57,791 --> 00:29:01,550 Maybe it was I didn't really totally understand how awesome it was 460 00:29:01,550 --> 00:29:06,270 But I kind of blew it off until WordPress core started using Sass 461 00:29:06,270 --> 00:29:08,091 And I was kind of going between 462 00:29:08,091 --> 00:29:09,410 should I use LESS, should I use Sass 463 00:29:09,410 --> 00:29:12,150 I don't know 464 00:29:12,150 --> 00:29:13,931 And then when WordPress core decided to use Sass 465 00:29:13,931 --> 00:29:16,331 I was like "well, I gotta learn it now." 466 00:29:16,331 --> 00:29:20,871 And I think it took me a day... 467 00:29:20,871 --> 00:29:23,851 Well, I just sat down, I did some tutorials on the web 468 00:29:23,851 --> 00:29:26,890 It took me maybe, I don't know 469 00:29:26,890 --> 00:29:30,291 15 minutes to get the gist of the whole thing 470 00:29:30,291 --> 00:29:33,390 and an hour to learn the basics 471 00:29:33,390 --> 00:29:40,951 And a day to never EVER want to do CSS the old way ever again 472 00:29:40,951 --> 00:29:45,350 Tracy Rotton did a Sass talk earlier today 473 00:29:45,350 --> 00:29:47,230 So I would have mentioned it, but it already happened. 474 00:29:47,230 --> 00:29:51,091 But anyway, look it up on wordpress.tv when it comes up 475 00:29:51,091 --> 00:29:55,591 Oh, I got the times up sign 476 00:29:55,591 --> 00:29:56,331 Sass is great! 477 00:29:56,331 --> 00:29:57,390 Learn it, it's not hard 478 00:29:57,390 --> 00:29:59,350 I wrote a blog post on it 479 00:29:59,350 --> 00:30:00,990 It's awesome, it'll change your life 480 00:30:00,990 --> 00:30:03,271 And it's fun! It makes CSS fun again. 481 00:30:03,271 --> 00:30:05,230 I am not lying 482 00:30:05,230 --> 00:30:08,991 Bonus Two: Up Your Dev Game 483 00:30:08,991 --> 00:30:11,570 Use version control like Git or Subversion 484 00:30:11,570 --> 00:30:13,791 Now I'm a designer, right? 485 00:30:13,791 --> 00:30:18,391 I'm not some command line expert 486 00:30:18,391 --> 00:30:23,171 But I use Git and it's great 487 00:30:23,171 --> 00:30:27,651 and I can't imagine ever wanting to develop ever again without it 488 00:30:27,651 --> 00:30:30,811 and I hear so many excuses why not to use version control 489 00:30:30,811 --> 00:30:34,670 And I think people really just haven't used it 490 00:30:34,670 --> 00:30:37,510 And they're afraid of it, because it seems complicated 491 00:30:37,510 --> 00:30:40,610 It's not complicated 492 00:30:40,610 --> 00:30:43,030 I have a link to learn version control with Git 493 00:30:43,030 --> 00:30:45,050 It has really great tutorials 494 00:30:45,050 --> 00:30:47,151 All super designer friendly 495 00:30:47,151 --> 00:30:48,590 You don't have to do it at the command line 496 00:30:48,590 --> 00:30:50,030 I don't use the command line 497 00:30:50,030 --> 00:30:55,650 I use Tortoise Git for Windows 498 00:30:55,650 --> 00:30:58,050 and all I have to do is right-click and make commits 499 00:30:58,050 --> 00:30:59,330 and it's great. 500 00:30:59,330 --> 00:31:02,131 It's great when you're working with a team especially 501 00:31:02,131 --> 00:31:03,791 You never have one of those 502 00:31:03,791 --> 00:31:06,050 "Oh, crap" moments ever again 503 00:31:06,050 --> 00:31:09,971 Even when you don't mean to in FTP 504 00:31:09,971 --> 00:31:11,971 you can accidentally overwrite the home page 505 00:31:11,971 --> 00:31:13,530 Just by accident you put it in the wrong folder 506 00:31:13,530 --> 00:31:14,910 and you didn't mean to. And you're like, 507 00:31:14,910 --> 00:31:19,631 "oh my god, now the page that is live right now is wrong." 508 00:31:19,631 --> 00:31:21,530 You don't have to do that ever again 509 00:31:21,530 --> 00:31:22,931 You don't have to worry ever again 510 00:31:22,931 --> 00:31:25,151 about putting something in the wrong place 511 00:31:25,151 --> 00:31:28,110 and messing up a live site 512 00:31:28,110 --> 00:31:34,590 So I would say please start using version control 513 00:31:34,590 --> 00:31:37,730 Oh, and PS, if you do want to learn about Child Themes 514 00:31:37,730 --> 00:31:43,450 You can go to Gabriela Levi's presentation tomorrow at 3:15 515 00:31:43,450 --> 00:31:45,811 The end! 516 00:31:45,811 --> 00:31:51,110 [Applause] 517 00:31:51,110 --> 00:32:00,590 Tracy: Questions? 518 00:32:00,590 --> 00:32:02,271 Audience member: A couple times you mentioned 519 00:32:02,271 --> 00:32:05,531 putting things in your theme's function file 520 00:32:05,531 --> 00:32:06,350 Tracy: Yes 521 00:32:06,350 --> 00:32:08,771 Audience member: I've got caught on a couple of my clients 522 00:32:08,771 --> 00:32:10,951 when they decided to install something like 523 00:32:10,951 --> 00:32:14,671 WPTouch or theme switcher for mobile 524 00:32:14,671 --> 00:32:16,271 As an easy fix 525 00:32:16,271 --> 00:32:19,651 And, of course, all my custom stuff that was in the function file 526 00:32:19,651 --> 00:32:23,911 wasn't copied over to the mobile theme 527 00:32:23,911 --> 00:32:28,271 Why not do a custom plugin that just goes along with your theme? 528 00:32:28,271 --> 00:32:30,110 And keep the functions file cleaner 529 00:32:30,110 --> 00:32:36,830 Tracy: [laughs] I got a head shake and a head nod in the row 530 00:32:36,830 --> 00:32:40,990 So the question was. 531 00:32:40,990 --> 00:32:44,591 You talked about putting stuff in your functions file 532 00:32:44,591 --> 00:32:49,190 but then the client installs a plugin that makes a mobile version of the site 533 00:32:49,190 --> 00:32:51,470 We don't really do that anymore 534 00:32:51,470 --> 00:32:53,270 We do everything responsive 535 00:32:53,270 --> 00:32:55,870 So for us and the work we do at YIKES 536 00:32:55,870 --> 00:32:58,110 It's kind of a non issue 537 00:32:58,110 --> 00:33:03,291 But I suppose that if you do foresee that 538 00:33:03,291 --> 00:33:05,810 your client is going to use something like WPTouch 539 00:33:05,810 --> 00:33:08,811 you could put it in a plugin 540 00:33:08,811 --> 00:33:10,071 Audience member: Well also, if your client suspects 541 00:33:10,071 --> 00:33:11,770 that something is wrong and can't get a hold of you, 542 00:33:11,770 --> 00:33:14,591 they can deactivate your custom plugin 543 00:33:14,591 --> 00:33:18,651 Where they can't deactivate your functions file of the theme 544 00:33:18,651 --> 00:33:25,131 Tracy: That's true, but I rarely put anything too crazy in the functions file 545 00:33:25,131 --> 00:33:30,530 Especially if we're doing stuff like registering nav menus 546 00:33:30,530 --> 00:33:33,811 and widget areas, that's not anything too wacky 547 00:33:33,811 --> 00:33:36,011 that's going to wreck anything 548 00:33:36,011 --> 00:33:38,090 That's basic WordPress functionality 549 00:33:38,090 --> 00:33:39,890 I mean that's a hard question for me 550 00:33:39,890 --> 00:33:41,730 because I'd have look at it on a case-by-case basis 551 00:33:41,730 --> 00:33:46,530 Like what's the client doing that's breaking the site all the time 552 00:33:46,530 --> 00:33:52,931 You know? I don't know. 553 00:33:52,931 --> 00:33:57,171 Anything else? 554 00:33:57,171 --> 00:33:59,610 Tom are you raising your hand or are you saying I gotta go 555 00:33:59,610 --> 00:34:02,031 Audience member: I have a suggestions, you could put an include 556 00:34:02,031 --> 00:34:03,190 file in if you want to 557 00:34:03,190 --> 00:34:08,270 Tracy: Yeah, but still it's up to us to comment it 558 00:34:08,270 --> 00:34:13,211 out if they can't get a hold of us. 559 00:34:13,211 --> 00:34:16,811 Bye everybody!