 And this side of the court, the flying fat broad. I have been, first of all, I want to tell you, I have a slap stick routine, which is I tend to get a slide ahead of myself or behind. You will hear me swearing cleanly from time to time while that happens. And maybe now that I've said that, it won't. This is based on a talk I gave last summer in Columbus, where I asked a bunch of designers if they wanted to do something with WordPress that I will not repeat here. It is on WordPress TV, however. But the question is with designers, it's always about how do you get WordPress to do what you want it to do? How do you get the power and the freedom, which are two different questions, actually, to make a WordPress site look like anything? Because a lot of people think a WordPress site, particularly the homepage, looks the same. And of course it doesn't. It looks like all kinds of things. But I've been beating that horse for a while. I mean, here's what I said in 2012. One theme, many variations. In 13, it was set your design mind-free, standardized framework. That was just after I bought the Genesis ProPack. Best investment I ever made, by the way. Three files in 14, unlimited design options. Hell, last summer in Kansas City in 15, I was lamenting how phone views all look alike, even though now we have to be mobile first. I've done a few things about that. But you know what? We are not the only people at the table. You know, there are some people who are like representing the client and the users. And you know, when we start getting off on these, but it needs to look different, and I want the freedom to do anything and they show us this. No, we've got to keep the crap where the eyeballs are. Oh, come on. We're designers. Where else are they going to look? I mean, they're not going to keep looking at the upper left-hand corner. There's nothing there. There's a pink dot. I think that's where they're going to look now. Now this is power. We are pushing the eyeballs anywhere we want. We can make them go anywhere we please. But, and you know, that situation is great. You know, when the application, you know, or the use case, as my engineer husband says, calls for visual stimulation, inspiration, excitement, you know, if we're in fashion or design or the arts, but you know, sometimes our user just wants to fill out the form and get a damn car loan, in which case maybe we better pay attention a little bit more to the heat maps. You know, I mean, the point of having this kind of power is not to make anybody's life difficult. Am I right, you know, or is this really how we're going to design that car loan form? You think? I mean, I think that would drive us crazy. In fact, a lot of developers have a lot of common sense about this. This is my friend Jiminy, he's about a year older than my daughter. He lives in West Virginia, splits his time between there and the Bay Area, because he's a great developer. And being in West Virginia, he spends a lot of time around regular people, you know, who use the Internet for stuff. I mean, we do too. You know, we're certainly not going to take out a piece of paper and fax our car loan application. Yes, you are cordially invited to have a car loan. No, that's a spam email. So just as I was talking the other day or thinking to myself, I was sort of rehearsing talking to y'all. I now say y'all because it's fewer characters on Twitter than you guys. And there's what Jiminy said, and you know, he's right. You know, consider aesthetics, consider design freedom, but it's about the task. And it's about the user. And really, that's what we say in branding too. Every now and then, though, we get a good client. And we can break the mold based, of course, on the brief. And we can build something new. My poor husband, he sees these damn tennis balls just about every damn day. For five years now, this site, you know, it's pretty out there for a home page. By the way, this is a Genesis site. Does it look like any Genesis site you normally see in a day? No, no, no, no header, no footer. You know, that's one of my opening lines when I'm getting on my high horse about a few things. Mark was just talking about ideation. You know, who says we need a header? Who says we need a footer? Yeah, we probably need some navigation. You know, going around the ball? Here's where we talk about ideation. It's not like this concept came from nowhere. It started mostly because I did too, with a print piece, this folder. But that didn't come from a vacuum. And the reason I'm talking about this is because when I submitted the talk, it said, if you want your designs to go everywhere and really be creative, my first recommendation is thumbnails, ideation. And my second is widget areas. And the widget area part only takes about six minutes when we get to that. So I was back in St. Louis a week ago. And I dug out my old concept notebook and found the thumbnails for that folder. Here they are. And when I'm really being old lady about it, it sounds like I'm saying, do pages and pages of these? Well, I do one page of these. And it led to first this with the old club logo. And the widget evolved into this. And then this. And then I'm supposed to go back to the folder again here. But we'll just go right into the site. Eventually, this. Oh, which came from this when we did the website like a year later after the folder. Now, how do we execute this in WordPress? Now we get to the short part of the speech of the session. Widget areas. If you can master widget areas in WordPress, you can do anything design-wise. You have to know a little bit about functions and JavaScript to do anything functionality-wise. I still do a lot with plugins. So what is the difference between this, which looks more normal, and this in terms of the markup? What's the difference? Anybody? And really, that's it. There basically isn't one. They both started with this. One box, three widget areas. There are 8 million stories in the Naked City. Some old show that I'm at 56, even two young two have ever watched. 50 ways to leave your lover. Four ways in CSS to line up those three boxes. You know the four ways? What are they? Floats, Flexbox, Display, Floats, Flexbox, Display, layout grid, which isn't really a thing. Oh, and display table. I don't even know what that's for. Let's just not even talk about that. I thought we got rid of tables back when I was learning CSS in about 2007. I was just a sniff of a girl then. I was 47. So let's take a look and see how we actually do this. Here is your classic markup. This could be any page, a blog page, a special page you've created for a reason. There are a couple of these that I should have had up for something before now. And life got crazy, so it didn't happen. This, my notes, it's hiding my notes. This happens to be, say, my notes and underscores page. So there's the visual reference. I think I'm supposed to, say, take the clothes off of it at some point. Yeah, let's take the clothes off these divs. And there's some code here. So basically, you take the clothes off these divs, and now you see where we're going to move them to line them up here. And that's supposed to have some sort of heading. So let's code it up. One of these is Genesis. I'm a Genesis person. So first thing we want to do is we will have a template page, whether it's frontpage.php, or page, whatever, event, whatever. Or maybe it's just an archive page that we're going to throw a bunch of widgets on. So our markup's going to look something like this. Each of our widgets is going to get a name, like home center, home right, home left. And then, just very simply, you'll know what an array is who doesn't. It's a list of things. On one side, you have the things, and on the other side, you have what you're going to call them. What you're going to call them. We're going to call it home center. We're going to give it its class name. We're going to describe it. This is how it's going to be in the markup. We can even add the markup before it. And then, we go to functions.php, and we are going to register the widget areas. You know how at the bottom of functions.php, there's that section where it says, register sidebar array, or register sidebar. And then, you put in the name of it. Or in this case, you might do Genesis widget area. It has all sorts of names. But it always talks about, again, the name, the description, the ID, which I think is in case you want to do something in JavaScript, and a little bit of markup that describes the classes and the title if you want. Those are optional. Yeah, I'm noticing that. Pardon? OK. Yeah, there sure is. OK. My kind young friend is on it. Yeah, I noticed that was cut off, and a couple other things were cut off, and it's making it hard to understand. Probably should have done these as four on three. Hi. I'm vamping for the still camera. I can hide behind here. Oh, lovely. Just so we only see one thigh at a time. Yes. On my brand pages, I always make sure you just see part of the head, and one shoulder maybe. Takes about 100 pounds off. Should we go back? Let's go back. So in functions.php, we're going to register these sidebars. Still not great, is it? And you can all read everything on it, at least in the first few rows. Good, good. Here we are with the markup that goes on your actual page. Now, depending what else you're doing on that page, you may or may not want to disable the loop. Who here knows what the loop is? Do we need to explain it? Your basic page or your basic post gets content because of this thing called the loop. If you're messing with a template or with an archive page in Genesis, you will see a block of code that says, while have posts, the post, and some other things around it. If you just want your widgets and not any chronological display of posts, you start with slash asterisk. Do you ever wonder why that site is called slash dot? It's because slash dot, except it's really an asterisk. And then at the end of that block of code, you go asterisk slash. That's called commenting out if code is new to you. That's not so hard. And you can sound really, really sophisticated tonight at the after party and say, well, you just comment that out. People will think you've been developing for 10 years. And have I done the slapstick thing yet? No, good. And then you just style up your CSS any way you want. Show navigator, that's what I wanted to do. The reason we register the sidebars is so they'll show up on this widget area with the names that you gave them. You know, home featured, home featured, home featured. Word to the wise, if you give them complicated specific names as classes like home grid top left, home grid middle left, home grid bottom left, or whatever, then every time you add a new one, you have to add it with that name. Or home grid one, home grid two, home grid three. But since they're classes, if you just add home grid one time, you can repeat it in a grid fashion in your CSS without having a whole page of a whole template full of a bunch of different class names that are all essentially the same thing. And it won't clog up either of your template or your CSS. You know, there is no way to put jokes in an explanation of code. Y'all are looking at me real seriously, and I'm talking like I know what I'm talking about, and it's like, are we having fun yet? But that basically is how you do it. And I don't think I'm anywhere close to the 10-minute warning. It's 10, 12 AM. So, and we're done. I'm Mary Baum. My new practice is Racket Press. On Twitter, I am at Mary Baum. And somewhere, I had a slide that said all that. So ask me anything. No, you have to code that. When you're registering the one of your own, it doesn't come that way. Yeah, mm-hmm, yeah? They'll move to inactive due to the switching of the theme. Also, if you change hosts, there are some plugins that will sort of save that information. ServerPress supposedly does that. Duplicator helps with that. There are some clone things that help that. There's also take a screenshot of the widgets area before you change the theme. And take a screenshot of the customizer. I didn't do that once. That was a bad mistake, because I did not remember what I had in all those. The video plugin? Hell, I didn't know how it was configured. Learn from my mistakes. I'm not up here because I know stuff. I'm up here because I've made a lot of mistakes. Yep, probably just, yeah, I think the way you write them in the template file will, there is this thing called source order. I know there is. Chris Coyer talks about it on the radio all the time. But yeah, I think if you were to say, you know, widget three and then, you know, call widget two and widget one, you could very well. I don't know why it, I mean, I guess you have very good reasons why it matters that are beyond my can. What else? Yes, it does. Yeah, yeah, this works just as well in underscores as it does in Genesis. That's why we sort of do it two ways. What's cool about Genesis, though, is you can apply this to an archive and style an archive and an archive in Genesis, you know, like category.php, already comes with some introductory text in a box on the admin page that in other themes, in other frameworks, would be the reason that you create a template page. As many as you like. I'm kind of scared of asking you. But now with the page builder type of things, you can do that without going through this trouble. Yeah, of doing it this way? You can change it without, my lovely friend here asked, what are the advantages of coding templates instead of using page builders? When you use page builders, they pretty much, once you change the theme or when you're adding content, they have their own ways of doing that, that unless you spend some time getting to know that particular page builder will cause you in later iterations, or if you're not familiar with that particular one, to break your site because they all have things that are a little bit different. If you take the time to learn to build your template with hooks and filters, this little bit of presentational PHP with CSS, then anybody you ask to help you with the site, anybody you hand it off to, or if you just get to the point where you're so successful that you have people you need to hire, they'll be able to go in instantly and know exactly what's going on with the site without endangering anything. The site won't have any idiosyncrasies that somebody has to look out for. A dear friend of my sister-in-laws a year or so ago, last summer, suddenly last summer, asked for help with a site that had been built with a page builder and had three sliders. I was like three sliders. I disabled the wrong two and knocked out their home page. Lesson learned again. I mean, if you can type, if you can write English, if you can learn a language, like French or English or whatever, this isn't really that much harder. It isn't any harder because it's still English. Ten minutes? What else? Do you want this one? I think I got these backwards when I was explaining them to you. I apologize. Here is where we registered the widget areas. Say that five times fast. Infunctions.php. And I'm like mousing around like you can see my cursor. Genesis register sidebar array. Then below it, we have the id, site, or let's go down one. Home featured one. That's what's going to show up on the widget page. The name, home featured one. Actually, the name is what's going to show up. The id, I don't know what the only id is, but the description there is, this is the home featured one section. That's that little line of text that appears as the description under the title in the widget area. That's the theme name of that demo. Clinics men, you always, the name, all of these arguments, which is what those lists are called in an array, need to have two. They take two, the thing in the parentheses, each one of those is an argument. And it happens that you make something up there that is connected to the name of the theme. And it has to do with what goes on up higher in functions.php to declare that that's your theme name. And then you can also add a third argument to that, which is a number. Mathematicians would say integer. And when you specify a number in that third position, it gives you, it tells it what order you want it to load in. So if there's a one, it's going to load first. If there's a 30, it's going to load after all the things that have loaded with lower numbers. So this is the home featured three section down at the bottom corresponds to home featured two up at the top there. This is the home featured three section. See that? Home featured three in bold. The home featured three section. See how those go together? Make sense? Yep. Yeah. A side is a native HTML5 element equivalent to a sidebar. And so it's like the p tag. A side is a tag for a sidebar. Sure. You want to see me up here trying to find where it says aside in the little tiny thumbnail. Is it this one? Yeah. Yeah, they want to, any of these sites, oh, see where it says div ID secondary. That's HTML, XHTML four minutes for a sidebar. In HTML5, you could get rid of all of that and just say aside. And it would be the same as a sidebar. What else? Well, thank you very much. Oh, wait, back there. Oh, that sounds like it could be a template problem or it could be a CSS problem. It could be that whatever is next to your sidebar is too wide. And actually, you're going to find that sidebar way down below. You've got your sidebar down below. Here's a tip for keeping your layouts fluid. Use percentages for width. And make sure things don't add up to quite 100%, just so that you always, you know, if your main content is like 70%, make sure whatever is next to it is like 25% or 26%. So then they'll always line up. Yes, anything else? I guess, again, thank you very much. I hope this has helped. In our never-ending quest to make WordPress homepages and other pages look like anything when it's appropriate.