A lot goes into creating a robust WordPress theme. So much, that it can be daunting when you decide to tackle your theme project. But, while theme development can be an expansive topic to learn, you can accomplish a great deal by just jumping into the shallow end. This week we’re joined by theme developer Michelle Schulp to get some advice on what you should focus on when you’re ready to take the plunge into building or modifying your first theme.
- ACF Blocks Documentation
- Block Editor Handbook – Create a Block Theme
- Block Editor Handbook – Global Settings & Styles (theme.json)
- Block Editor Handbook – Theme Support
- Fitness & Freelance
- GenerateWP – Theme Support Generator
- Theme Handbook – Template Hierarchy
- Theme Unit Test
- Twenty Twenty-One Theme Repo
- Underscores – A Starter Theme for WordPress
- WordPress Coding Standards
- wp scaffold theme-tests
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
Hey everybody, thanks for joining us. You’re listening to the Drunken UX Podcas. Joining us this evening we have Michelle Schulp. She’ll be talking with us about helping build your first WordPress theme. I am your host, Michael Fienen.
I’m other other host, Aaron. How are you, Michael?
I’m doing all right. It’s, I’m working on my proton pack just about every night because I am adult male with no sense of my age. That,
that is probably the best Ghostbusters cosplay I’ve seen. I have to ask though, is the, is the hat like this? The Stetson hat part of the outfit.
No, I just walked into a store recently and went, I’m a cowboy now a
rough with something to say
man, I don’t know what to tell you. I put it on, I looked in the mirror and I went, hey, that doesn’t look half bad. Uh folks, if you’re enjoying the drunken UX podcast, I wanna invite you to come check us out over on twitter or facebook, you can find us at slash drunken uX or on instagram at slash drunken UX podcast.
If you ever want to chat with us about anything and everything. We do have a discord server. Just come by drunken UX dot com slash discord and that will drop your ride in outside of that. Aaron drinks.
I’ve got, I don’t I guess it’s like a spicy mango margarita sort
I got some spicy mango lemonade from trader joe’s and it’s got a nice kick to it and I got some tequila and some mind juice and ice. It’s very good but every time I drink it it’s like the jalapenos are just like
back of my throat.
Jalapenos aren’t even that bad. It’s just
it’s like a kick with a tequila I think
uh I’m drinking a Macallan 12. Um This is the double cask not the sherry cask. I actually really don’t like the Mcallen sherry cask, I think it’s cloying and uh overly like I don’t, there’s something about the sherry flavor that McCallen draws into its 12. That is just very off putting for me. Double cask though is nicer, it’s lighter, it’s got more of an okie kind of honeyed flavor, A little bit of like light citrus on the back.
I like it a whole lot more still expensive for what it is but much more drinkable. Is it
more on putting
uh It’s a little more on putting. Um That’s good. I mean it is what it is,
it’s good for your pudding to be properly addressed.
It’s more like I’m just trying to finish bottles and make room on my shelf for something new. So I got to get rid of it at some point. Michelle is joining us from up in Minnesota and I happened to have seen her cup already and it’s super fancy.
Yes, I am drinking a mai tai out of a Tiki cup. I, I actually got into cocktail ng as a hobby over Covid, not unlike the, I’m going to pour some alcohol into a glass because it’s covid way, but in the way where I’m actually like reading about the history and the methodology and the technique and I’m taking classes now that we can do things in real life.
Again, it’s also fun because I was going to comment that your margarita is actually more just like a tequila sour because you don’t have the triple secondment, you just have the sweet, the citrus and the booze. So I think
I’m a lot of triple stuck
there. I mean it’s, I’m sure it’s great. But I was, you know, well actually in you to start the episode of No, no, no,
I appreciate it. Thank you.
But Tiki drinks with some of my favorites because they’re just ridiculous. They’re usually like five or 6 different ingredients and the garnishing is half the fun. So
that’s awesome. That sounds great. Every one of them has either blue curacao or McGary and it’s something for bright color.
Yeah, that’s super true.
Michelle is joining us. I have mentioned from Minnesota, she’s a designer developer and user experience strategy over at Mark time Media, she’s also a WordPress theme developer and a fantastic Ux strategist and design advocate. We’re really lucky to have her here today because I want to dig into this topic of, hey, We’re building a wordpress theme, tell me how I’m doing it wrong, right.
We joked earlier, I’ve been building wordpress sites for a really long time. I want to say, I started right around like 1.3 or 1.4, which would have put me, I think square in 2000 and UB seven. My brain is, I should have looked that up before the show a long time now. I’m very interested in where WordPress is going and how we build things for Gutenberg and reacting all of this.
But the joke I made was that I have a very old school approach, An old way of thinking about how I structure my WordPress themes. So this will be a fun little chat that will get into, you know, a lot of the things that have changed and what’s, you know, what’s coming and what, what are the right ways to do things now that maybe we didn’t do. Please feel
free to. Well actually, yes, about WordPress
long for it.
I promise I’ll even use those words. It’ll be fun like reverse Mansplaining.
I’m looking forward to just twitter doing that to us. Quite frankly, it’s uh I, I can, I’ve always said, you know, I can get things done. I’m not gonna guarantee I’m going to get them done right. But as long as you don’t look at the code, I’m building our new drunken, you excite in the open, anybody can go look at that repo over and get hub.
Um, and so far nobody has picked me yet and I don’t know if that’s just because I’m too small to care about or I’m doing it perfect.
How, how long have you been working on that
couple months ish. It’s mostly an evening thing at the moment. So
it was cold when you started.
But it’s, it’s definitely one of those things like, you know, my day job is building websites all day and my evening rolls around and it’s like, I’m, I’m making good progress and when I get on a good run, I really knock out a bunch of stuff, but then I’m like, I’m going to go work on my proton pack for a few hours.
Right? Yeah. No, like don’t look at any of my personal sites because you know, they are not as cool as the ones I’m building for the people that are paying me that is for sure. A couple of
color shoes and all that.
Exactly, literally what I was going to say
the same to be honest,
let’s first talk about, uh, where all of this comes from, let’s, let’s start at the start. Um, in terms of, you know, when, when we started writing WordPress themes, you really only needed to know a couple things really well and that was html CSS and PHP and if you knew those three things, you could get by pretty well and I say PHP And I think one of the metaphors we use a lot. Is it a metaphor simile? Uh It’s metaphors used like her as
my backwards similes use
uh metaphors are complicated and beautiful. It
Yeah, well like J. Query. So
Oh goodness. Well it’s it’s the same and it’s also different. So I it’s really interesting that you compared it to jake weary because I’ve actually made the same comparison when I talk about it. I said, you know, WordPress is not only a content management system, it’s a PHP framework, like that’s what it is, it has its own set of, you know, abstractions and functions and syntax that is kind of stuck on top of PHP, You could write vanilla PHP and it would work.
It just, you know, why would you, when you could take advantage of WordPress. So very, very similar thing. Um Yeah, so nowadays you probably do still need to know html and CSS and and WordPress flavored PHP uh uh C S S Y is likely though you’re you’re probably not just writing straight CSS, like you’re probably uh using some kind of pre processor, some kind of framework or some kind of library something to kind of handle some of the more complex stuff.
So whether you’re using like uh something like code kit to be able to compile it or you’re using a terminal command line tool like Gulp. Uh So now you’ve got not, not only that plus your local environment that you have to have, you know, you might be spinning up something you might be using. I personally use um local, which I really love. I’ve also used survey press in the past though.
I mean just saying all that stuff is kind of exhausting, Right? I feel like there’s so much more, I just that took me like three minutes just to describe the things. Right. And that, that can feel really intimidating. If you’re just getting started all the
local, the one you had me set up when I was
Yes, I’m a big local fan. I originally uh started with the stuff that WP engine was riding the command line tool that then they bought flywheel and so then they just kind of absorb local and that’s kind of the thing now. Big fan of Local um super easy way. So that’s kind of a good segway into before.
Before you set out. Do you remember back in the WordPress one and two and earlier versions to get WordPress working locally, you had to use wamp?
Toronto P C. Yeah. And so like you actually have to set up your own web server and you have to learn about basic like, Apache configuration and stuff,
which wasn’t terrible. Mind you like, there’s a lot to be said from going through that process. Uh
Yeah, having done vocal now though, it’s it’s like, wow, this is so much easier.
The new tools definitely make a big difference. Um um and when you spin up a site in local, it’s based spitting up a docker instance that will host um It spins a web server for you. It sets up a local domain for you to use, it will install, you know, a basic WordPress site and give you access to it. This is fantastic.
If you are building a site that, you know, either by if you’re editing an existing site, you can pull down a copy of it and install that locally to run on, or if you’re starting from scratch, it gives you a completely vanilla sort of starting point without needing a web host, without needing a server and all of this extra stuff.
I really like using updraft myself um from a backup standpoint, so if I’m working on an existing site and I want a copy of it, I’ll just run updraft, that’ll give me all my assets, plug ins, database, everything, pull that in, just download it, pulled in locally and install updraft in my local site and restore that database uh and backup file that that gives you something very safe to work on.
Something very compartmentalized at that point, is there anything Michelle on your end that you like in particular for setting that kind of stuff up?
Yeah, so if I’m developing on a flywheel or WP engine site, I mostly just use their deployment tools, especially um local just went entirely free. Um they get rid of their pro version and now everything’s free, which is cool. But I’ve been a pro customer for a while and so I could do kind of selective pulls and pushes of data themes biles all that stuff, which was really nice by um when I wasn’t working on a flywheel or WP engine site, I used my great DB pro by delicious brains.
Um I’m a big fan of the work they’re doing there. They also had some stuff that let you not only um pull databases, but also themes and media files and plug ins and all kinds of stuff, so that was nice, especially if I didn’t have uh FTP access or, or you know, whatever and any other kind of uh version controlling access for files.
Um so and and actually, delicious brains migrate. DB Pro is one of the tools I’ve been using for a while and the other tool I’ve been using for a while, advanced custom fields just got bought by delicious brains. So yeah, so there’s all sorts of uh they’re doing all sorts of fun developer stuff there. Um I just though, and this one’s magic, I just started using WP merge dot io for dad. Oh my gosh, it’s magic.
It is um live to deV database sinking, like, like, like version controlling and merging. And they’re editing content on the live site and you’re editing content on the DEV site and we can keep track of both of them and merge them. That’s pretty cool.
So thinking about like, as we get started, so okay, we get a local environment set up whether that’s using Docker local, anything else, setting up your own server, you know?
Uh We should mention probably, you know, when you have these build processes that’s for your assets, it’s not for the theme itself so much, like you don’t have to build PHP, that’s not a thing, so if you’re looking for something like that, don’t get confused by some of that terminology.
Um Though there are certainly some build tools that will zip it up for you so that you can deploy your theme, they’ll just zip up all the files and create that for you, but WP Gulp has served me really well, along with just constantly referencing the latest, you know, whatever 2020 theme, 2021 theme, because that theme that ships with wordpress kind of gives you a good baseline of everything, and so it’s a good reference tool.
It’s a good file structure tool to kind of understand how like, you know, what what are the best practices and so I look to them to tell me what they would do um in those things. What about do you do a lot in terms of like parent child theme work at all?
Yeah, so that’s kind of how I started and that’s kind of why it’s really interesting to look at um How how all this is evolving because when I started, so I started in 2011, which I’m like, oh that’s not that long ago, but it’s it’s 10 years ago, so yeah, that time passes weird. Um and when I started in 2011 I was just doing like child themes for parent themes, like that was always and even even the most basic of child themes, right?
Like I was starting out with like just the style dot CSS and then I was like okay let’s add some functions, and then I was like okay let’s add some templates. Right? So that was that was how I got my start in in theme development. Um Nowadays I uh do custom development, you know? Right? Right. My own thing, I’ve kind of written my own starter framework theme and that’s constantly evolving and it’s also up on get hub for people to, you know, look at pick apart if they want to.
Um But my actually the I based mine off of like a really old version uh this because I did this like in 2013 II based stuff, a really old version of like the roots sage framework.
I know nowadays they’ve built this whole like tooling process and it’s like this big thing, but the only reason I adopted it is because I thought it was silly to have to write like your header and footer call and every single template file and I really liked there little abstraction of templates, so that’s why I did that, but that’s a long answer.
When does it make sense to use a child theme? Like how well what is sort of the strategy behind? Well, should I make a new theme from scratch or should I make a child theme? What’s, what’s that decision making process?
Yeah, Well, so in the past it was like, if you just want to make a few stylistic changes, do a child theme that being said when they introduced in the customizer, the additional CSS panel, the child theme just for CSS became a little obsolete, right? Because you could just, you know, go up into your customizer and put it in there and even if you have jet pack installed, you can even write like pre processor stuff and it’ll compile it for you.
So that’s kind of sweet. Um So I would say it became a child theme was useful if you basically liked the structure in the opinions of your parent theme, but maybe wanted to expand or tweak it. So you wanted to change how a specific template laid out, You wanted to um maybe add some new templates for some new custom post types or something.
So it’s really like, do I do I agree with most of the opinions of the parent theme and I just want to expand on that. That that’s a pretty good candidate for a child theme at least historically speaking.
Um if you started to be like, well uh this parent thing would be great, but I actually want to rip out all the walls and change all the paint and change everything from carpet to hardwood and add on a second story and finish the basement and throw on a pool. Maybe you should just like build your own house. Right? Um and yeah, so that’s kind of how I think about about that
a long time ago in earlier versions of WordPress child themes didn’t exist yet, and so you had to take a theme that you liked and then you just hack the crap crap out of it. And then when they release new versions, you just have to like do a manual merge.
I was just going to say cry silently. Yeah,
well if you’re at home, you can do it openly.
There is one more tool that can be a good starting place now, I haven’t used this, but I’ve looked at it a few times. Um and it’s kind of an interesting approach to, you know, how you sort of scaffold out a theme and that’s the underscores generator, which is something that automatic uh has built, I don’t know if they own it or what the relationship is there,
I’ve never heard of this and was looking at it. What is it,
you can go in, you give it like whatever name you want, you know, for your theme and there’s a couple other settings you can go in there and set and it will pull down the, the underscores theme from GIT hub and it will slot in your information that you put in and basically give you a skeleton with all your theme files and everything.
And they give you some instructions in terms of like how you can search for like the underwear s uh name space and swap that out for your own stuff. And it’s just a good way if you aren’t familiar with all the files, you need to create a wordpress theme and you don’t want to make them from scratch. This kind of gives you that sort of boilerplate.
Hey, here’s all the stuff that makes this go very similar, like it’s somewhat more vanilla um to using, like I was saying earlier like I go to the 2021 theme a lot and I grab all that stuff when I need to and I’ll just start changing what I need or replace what I need in those cases. Um It’s a kind of a similar thing to that except what you get is Much more Vanilla.
It is a theme, like it’s opinionated, it has designed to it and all of that, so um it’s just like it is a starting point um If you are new to this and want to get comfortable with all those things because you can, there are a lot of files, there are a lot of files that could go into making a The site and you don’t need all of them. That’s really the trick.
You go look at 20, and you see all these files and it’s like, why don’t you can make all of them? But a basic WordPress theme needs what? Three files, I think an index file, a styles dot CSS file and functions like PHP file, and if you have those three things, you can have a WordPress site,
yep, that’s true, but it was like, like, classically speaking, when you were talking about theme development, like underscores was a big deal. And yeah, underscores is more like A functioning blueprint for a theme, whereas I would say 20, and all the other ones, it’s more like, you know, you’re walking into an apartment, right?
It’s yeah, so if you, if you installed underscores and didn’t do anything to it and kind of tried to run a site on it, like it would not look like much of anything and, you know, content would probably display, but like, you wouldn’t be very thrilled with what it looks like.
Um I did want to bring up, there is a newer theme framework generator called WP rig, um which kind of includes a lot of these things we’ve been talking about, so um not just the framework, but also like a lot of these build processes. Um so if you want, if you’re starting to do like very modern WordPress theme development where we need five million tools that take me three minutes to list. Um WP rig is a really good starting point for that. Very cool.
You have to check that out. I’m always interested even if I don’t use it, it’s always fun because the thing is you talk to people right? And they’re like, well, how would you start this? And it’s always good to have those kind of things to throw, throw it, folks. So yeah, very cool. Let’s talk, let’s get into like what you do need, right? Because that is sort of a challenge. I mentioned three files.
You need an index file, the styles file of the functions file, but I’ve honestly, I’ve never counted what by 40 different files are supported and technically it’s an unlimited number because you can make custom files for every post type. You have every category, you have, like every one of those can have its own custom deal.
Uh there is a page if you just go to the developer dot WordPress dot org site, that gives you that, what they call the template hierarchy, uh everything. Remember that everything will work with index dot PHP. Presuming you write it so that it works with everything. But there is a specificity order that it will follow.
And so before it gets to index PHP it’ll look for post dot PHP or single dot PHP And before it looked for archive dot PHP. Like you’ve got all these different deals and the hierarchy will show you how that flows.
So fun fact, you know that image that’s on that page that shows you at the diagram looks like I’m the one that made that. Oh, no kidding.
Huh? Yeah, let me follow this uh this line of questioning for a second because it does raise one, I think actually very important question about not just theme development, WordPress development in general. Um I’m one of those folks, I I tend to not like using plug ins where I could write native code because I tend to find most plug ins are too big to robust, they do too much. I need to do a couple of things.
They they handle 10 things and all the edge cases because they’re trying to accommodate people. Um and in cases like ACF, I have slowly been coming around to this notion of I can write my own fields, I can write all of that encode and and have it be baked into my stuff, but ACF does save me a lot of time.
What what is your sort of philosophy in terms of, should people take the time to write those things in native code to understand it, or is it worth taking that shortcut and just saying, you know what ACF is robust, it’s mature, it’s not going anywhere, trust it and use that to shortcut that and focus your efforts on the big stuff, the really important stuff at that point.
Um so if you’re just writing like a text input or a basic field. Right? I mean we can we can do that and if that’s the only thing you need it for one or two things you know why why install you know the whole framework for that?
friend Andy would like you
um but uh the thing we keep in mind and this kind of goes back to the whole uX part of this thing um as a U. X. Person which I think demon developers have a big responsibility in U. X. And you. X is my background. You. X. Dy visual design. Um I’m actually not just designing the experience for the person who is using the website. I mean I am designing that experience, you know who else I’m designing for. I am designing for the content manager.
I’m designing for the advent, I’m designing for the person that has to update and maintain this site. Now one lovely thing about WordPress, The thing that was appealing to me as a as a user experience person is that their dashboard is fairly thoughtful. It’s not perfect. But compared to a lot of other content management systems out there, it’s pretty easy to understand. Like as a content manager, I can find where things are.
Um, granted lots of plug in authors have lots of opinions of where things can go that can make that more complicated. But that’s kind of our, all of our responsibility as as user experience people, like we are designing not only the websites user experience, we are designing the content managers user experience and what I like about some of these frameworks, like advanced custom fields, is it made a pretty good content manager user experience to, especially when we were starting to do very complicated things.
You know, I I made extensive use of their uh, repeater fields and their modular fields, like those being able to do some very, very complicated things uh, without having to be very confusing for for the content manager. And um, so that, that’s kind of what I think about it. Like I don’t really think about, I mean I’m the developer, like sure there’s things that would be easier or harder for me to do.
There’s things that would be more fun or less fun or more challenging or less challenging for me to do. But like, my responsibility is to the content manager.
And so what is a good experience for them as well as the end user who’s going to see the site, Like obviously that’s going to be pretty and great, but like how about how about the admin that’s got or or the editor that’s got to write these posts and it has to figure out how the heck to use the thing, which is also why I don’t necessarily like using um whole bunch, like I need to use plug ins that I trust.
I need to use plug ins from people that I know are also being thoughtful about the admin experience because it can get real full, real fast, right? There’s just a lot going on. Um and so I only want to use tools that are thinking this way to um
I’m glad that you kind of hit on that because I do think that that’s a really important concept.
Yeah, I mean I I like to joke with my clients, like I I don’t want you to call me to your content, like please don’t I want you to be able to do that. That’s the whole fun of like having a content management system.
I want to go to the next thing, right? I want I want to do the next project. I want
to build. I want to build something. Yeah, I want you to be able to update your content. That is also why I think the block editor and all of the stuff they’re doing in Gutenberg is going to take off and it’s going to continue to take off because if you can make your content management experience look as close as possible to what it’s going to look like in the end and feel intuitive and involve moving stuff around and like you change the color and there’s the color, it’s right there, you know, you change the type of thing.
It is and that’s exactly what it’s gonna look like. Um you know, that’s a very powerful experience for the content manager when it’s when it’s working properly, when it’s not buggy or frustrating, it’s it is still not perfect but that’s really powerful and like developers and people that have been using wordpress for awhile, myself included might complain a little bit about, you know, the change in tooling and the change in methodology and like yeah, we we spent all this time learning, you know, the template hierarchy and all this PHP and all this stuff.
Like this isn’t this isn’t what I know, but like look at the end user when they’re like, oh my gosh, like I totally understand how to do this and and I know how to edit my content, I know how this works like that’s why we’re doing it right.
Like we get so stuck in our own heads like to complain about, you know, that’s what twitter’s for, but like, you know, it’s real magical for for our for admins for our content managers to be able to like be empowered to do all this stuff, you know, democratized publishing. That was the point, right? I’m on a soapbox right now. No, no, I love it,
I love it. This is the one thing I love about getting guests on who know their stuff because it’s important that people here that
That was wordpress one and movable type and all those like self
publishing, God movable type. Remember that, let’s uh let’s take a second. Uh and and think about real fast and this can be just sort of a lightning round, let’s talk, we use these phrases, template tags and hooks.
These are things that WordPress has baked into the system to help you do what you need to do to style your site and there are a handful of them that some of them are super obvious, but some of them are obvious but a little more difficult to understand and so I want to just run through a bunch of them and just see what we all like in that space.
One of my favorites and I’m trying to use it more, but also more intelligently is the get template park function that has proven to be very useful when you combine if you’re building a site, so let’s use what I’m doing with drunken you X right now. We have a custom post type called podcast. Every episode goes into the podcast. Custom post type.
So knowing that when I do queries, when I do, when I pull content, I can do things like find out the post type of a given piece of content and I can use that in something like get template part to build paths dynamically and to say when you get to this area, think of it like an include to get template part is just saying, hey go get this piece of code and put it here.
But if I’ve got like a rotating block of content that might have an episode or a blog post or an advertiser, I can say go get a bunch of content irrespective of what it is and then look at what type it is and then get, you know, block dash post type dot PHP dollar sign post type and dynamically grab different template parts and then I have different PHP files that define what each of those should look like.
So I have one query one loop, one line of code but using a variable and get template part because you could use get temple part to do very simple stuff but using it kind of intelligently with variables, makes that really powerful for defining different little pieces of code that’s something I’ll throw out there um erin, I don’t know, have you, have you built a lot of WordPress sites over the years? I know, I mean being ruby, that’s probably not a fair question.
Not recently, like I would say I started doing WordPress in 2000 four, and I did a lot of it for a long time, like a lot of freelance stuff, I think That slowed down a lot in 2012, And then I want to say like when whenever we were in like late version for WordPress was the last time I did any real editing. I used WordPress very briefly a couple years ago before switching to a static site generator.
Um And I haven’t really, other than the drunk direct website, I haven’t used it since
Michelle, you brought up the loop earlier. Um We’ve got get posts, but then people, if they’re looking at stuff for the loop, they also ran into like WP query, what how do they distinguish between when they should use those? Because it feels like, right, they feel very similar when you look at them and what they do
um you pretty much should only be using I mean there are there is almost no reason why you need to not use WP query. Um I mean it’s it’s it’s kind of like the best case, I mean get post is kind of like a bit like using that as a theme developer is a bit like legacy. Uh like pretty classic legacy. Uh huh You look 10 years also counts his legacy. Okay, Like I’m right there with you. Uh Okay, so um but no, like, so the loop um yeah, so where?
Uh oh there’s just so many things, so just take a step back. We mentioned the term template tags and at at the beginning we were talking about how, you know, WordPress is a PHP framework, basically in template tags are basically just uh uh WordPress is little PHP stuff. They are like little abstract functions that WordPress has, that represents a whole bunch of queries and sequel stuff that they did for you that you don’t have to do, right?
So that’s what a template tag is. Just so that we’re using the language people understand. Um and the loop is the thing that says um hey, what should I display here? Tell me WordPress WP query is the thing that says, hey, loop here is the parameters for the thing and there’s a whole bunch of stuff.
Um maybe one thing. It may be a list of things.
Exactly. And now the cool thing about the template hierarchy is each uh template by default has its own queary associated with it. Like you can just like have an archive dot PHP template and you just write your loop, you know, if have posts while have post the post and then say the content and it’ll just like do it right, Because it’s baked into the archive dot PHP template. It just knows what to do, it knows what that means. It means.
Call, you know, call these things and whatever, right? Like it knows what it means. Um and then what you can do as a theme developer is either override the native query of a page or something using the hook. Um pre get posts or you can write custom queries on your own templates or in addition to a template using your own, you know, WP query function. Um and that was convenient. You mentioned hooks before. I wanted to kind of say what’s a hook?
That’s another really confusing thing that it took me a while to understand. But basically a hook is like some stuff that they baked again. This is more of the WordPress as a framework thing. A hook is basically a spot that they put into the code that says, wait, wait, wait, when we get here, let’s run anything else that’s referencing this thing. Right? So like, I’ll be like, like wordpress is like, do I’m wordpress?
And then it’s like hola hook, Hey, themes plug ins and any of you want to do anything here? Yeah, No. Okay. Um pre get posts is a hook that runs basically modifying modifying the query on, on any given page that you’re on. And so you can, you can modify your loop on an archive or, and you just use this, you know, put some stuff and functions that PHP right? Your stuff that modifies, Hey, just kidding.
I wanna not show this or on this type of, you know, then you start using your, oh gosh, we just, we go down the rabbit hole. But the point is, um, WP query is very powerful. It’s basically the thing that tells you what’s supposed to be displaying when and in combination with the template hierarchy and template parts. Uh, you know, that was, that was the magic man. That was just the magic. And then, um,
good hooks, like if you’re thinking hooks, so WordPress has gotten really good about if you need to get into a part of the code to do something that like it’s, I was trying to think of another good metaphor for this. Um, uh, to keep this, that, that, that, that horse, dead horse going. Um, and I was thinking, you know, when you walk into a restaurant and you say, hey, I’ll do, you know Pepsi or coke? And they say, well it’s coke, okay.
But that’s a bad metaphor. Um, it was funny in my head, but I don’t know what to do. Um, but this idea that you can get in to these chunks of code, you’re looking for little things like add filter, add a filter is a function that WordPress gives us as developers that says, hey, all of these places where you can insert stuff, add filter named the place and give us the thing you want to go there and that gives you the ability to tie in to that stuff then.
So that that’s as basic as saying, hey, after the content renders, I want to spit out an advertiser block and so I’ll add a function that will plug an advertiser block in there. I know that because we do that for drunken New X when the content comes out and you see our show notes and our links and our transcript and underneath that is a little advertiser block that’s attached via actually yeah, hooks, filters.
These words are a little entertainment filter, filters are
a special kind of hook that just modifies content. Good way. Just like modifies content output.
Yeah. Um what else? What else? Uh let’s talk about like so good ones, You’ll see. WP head WP footer. Those just are chunks of code that are designed to spit stuff out literally in the head. And the footer, my favorite of the three though, is W peabody Open because it lets you put things in right after the opening body tag for a long time. That hook didn’t exist until pretty recently. The reason it’s useful is for things like tag manager.
Yeah, it’s an optimization that reminds me when we were talking, let’s get template part, we’re going to keep coming back to this apparently. Um and Michelle you kick me in the eye ball if I’m being unfair and what I’m about to say, which is don’t get too hung up in hierarchy to the extent that if you’re sitting here wondering, well, should I use a specific theme file for this or should I use a get template part for this?
This will happen a lot when like if you have a lot of custom post types and you want one post type look differently from another one. You can create individual post type template files or you could make one template file and a lot of get template parks that are variable based on the post type. It’s six of one half a dozen of another. Don’t get too spun up on which one is right or wrong.
Yeah, no, that’s true. The cool thing about WordPress is it’s like a million ways to solve the same problems and it’s really like what makes sense for this specific iteration? Yeah, I think the way my theme is set up, I have my um like single and archive theme files as very basic and they’re just saying like get template part, you know, content hyphen get post type right?
And then I do a bunch of template parts that because unless I need to change the structure of the whole page, like everything, I don’t really need to, you know, I can keep my route theme files kind of to a minimum. Uh Yeah, which, you know, I totally I totally uh agree with that. And it’s also it’s also as a matter of like, yeah, what makes sense to solve this specific problem? I want to repeat myself as little as possible. So yeah,
there’s a lot of others, like, we could literally do a whole episode just on tags and hooks and all of that at image size is great for setting up like uh resized images for different uh uploads, making sure you’re registering your knaves and putting your knaves in your template, doing the same with sidebars, register your sidebar and then insert it with dynamic sidebar. Those are all things, they’re all straightforward.
There are a million tutorials out there. Um Let’s let’s get into a slightly more like future looking topic here, because we’ve talked a lot now about like how blocks are going to start impacting the way we approach this and the way we think about it. Um 1st I want to ask a question, do blocks belong, like if I’m building a site and I know I’m gonna be using custom blocks, do those belong in themes.
Um I do not think that the like code to register blocks belongs in themes because if you change themes, you break your content right?
Kind of the governing thing about, about anything that went into a theme was like, themes are about structure there, about style there, about what it looks like, but like they should, it shouldn’t break your content to change themes now, maybe it won’t output pretty, maybe like not everything is there, but it should all still exist right? Like it shouldn’t be broken. So like, custom post types. Custom fields, all that stuff should be in a a plug in. Yeah,
but plug in development is not hugely different from theme development, it’s just plug in separation of concerns. Right? So then now let’s let’s say then I want to do block development, but I want to talk about like native blocks, the image block, the paragraph block, these things, is there something I can do in my theme in terms of styling those that in a way that like, is pleasing to me?
Yes. Um well, there’s a couple things you can do with native blocks and they, are there things that I’m doing a whole lot of right now because I don’t want to go too far down the custom block path. Um you can write um block templates for your custom post types, which is really cool. Um this is it, this is a PHP thing. Um So if you’ve ever used, let’s say, have either of you ever used the events calendar, that’s like one that I can think about my head.
That’s doing it a long time ago. Okay. Well nowadays if you open the events calendar and you open an event and you have enabled the block editor for your events post type, um you will open your event and it won’t just be a blank black editor with the title and some text, it will have a whole bunch of blacks already on the page for you. That’s a black
And those definitely belong in themes because what that is is like, here’s my opinion of how you should lay stuff out. Um
So I rabbit hole too, for what it’s worth if if something belongs in a custom post type field versus a block template. That that’s that’s a very funky. That is not to get template part thing, they are not equal.
Right? Right. So I I, when I build custom post types for my clients, I build block templates for those things that give them an idea like there’s a lot of complicated layouts, right? Like what if I intend the page to have a bunch of columns or a gallery or like a cover image with stuff and buttons and it’s like, no, I’m not gonna ask you to build that every single time, right?
Like I’m going to build you a block template when you open it up, that stuff is going to be there and all you gotta do is start putting your content in. You can even lock it so that they can’t change them. Like no, you have to have three columns here, like that’s what you’re doing. Um or not lock it and let them play with it. Um But that’s one thing you can do as a theme developer with core blocks.
Um Otherwise, you know, themes should definitely be styling things. That’s the whole point of themes and that’s going to continue to be the point of themes even when we move into front at full site editing. Um The whole point of themes is going to be like, look, we’ve curated like the visual experience for you. Like this is how we believe colors should be. This is how we believe spacing and padding and typography should be.
This is how we believe things should relate to each other. This is how we believe different blacks should interact when they’re next to each other, or Children of each other or you know, all that stuff, Right? Like themes 100% should have this opinion. I think if you want to be like real ridiculous, you can even like de register all the block styles and like just do it all in your theme. That is that is a choice.
It’s definitely changing all the time. So you probably want to make sure you’re you’re like keeping your theme up to date because they’re probably going to add like 40 new things to it that you haven’t accounted for yet. Um But I mean you can do that, right? And I think that’s it’s gonna be even more important, um as things go forward, like how can we style for the things that WordPress is already giving us, how can we style for some of the stuff?
Um you know, maybe maybe as a theme developer, I wanna, you know, explicitly support uh woo commerce, um and their blocks, right? Like that’s that’s how I’m I’m, you know, if I’m from a commercial theme developer, right? Which I’m not. Um but if I was, you know, that’s a differentiator, right? Like I’m styling for this block library, you know, I didn’t build the black library, but boy, am I going to make it look good? You know, that kind of stuff?
So let’s dig into sort of like, okay, we’ve set up a local environment, we’ve read up on some basic template tags and hooks and things. We’ve got our hierarchy in place, We know which files we need. I’ve even gotten brave and styled a few blocks and I set up a block template.
Ai will encourage folks if you ever want to know about setting the block to let me know because I love the hell out of those and I’ve had a lot of fun just writing them, which is stupid, but I love my work. So I I don’t make apologies for that, but the end of all this now is testing, I’ve written a theme. How do I make sure the theme does what it’s supposed to do and looks right in all of my various use cases. How do
you do that in WordPress?
Yeah, so I’ve certainly used the theme unit test content, which is basically just a way of popular, like before you have, your real content may be populating your your theme with just like, here’s all the stuff like here’s something with five columns, here’s something with a weird gallery, here’s something that, you know, here’s something with a really lung title and hopefully, you know how to text wrapping like content that’s designed to stress out your theme.
You uh you built the template hierarchy a few years back before all the theme unit tests stuff came out. I was maintaining a deal on GIT hub called the WordPress Content Framework, which was this, it was that thing, It was just a giant XML file that brought in all of every kind of imaginable combination. And then they came up with a theme unit test and I’m like, oh, that was a lot of wasted effort.
Yeah, so that’s content. Um I am also running the like, WordPress coding standards, Code sniffer on my stuff through. Yeah, so that’s super fun. I do some work, I do some contract work with automatic, so I have to like follow strict coding standards, so I might as well have all my stuff follow that.
And so that is kind of more of the automated like testing on my code that I’m running in the background and then I have the content testing on my content to make sure that like when my content manager writes a weird thing, it’s not going to break or render funny. Um so that’s that’s basically what I do for my my workflow,
I would also recommend certainly bolt on whatever you want. Um PHP unit can be a great way to test the actual underlying code of your theme, make sure that it’s out putting what you expected to output and doing what you expected to do. Um WordPress and we’ll have some links to stuff in in the scaffolding and everything that WordPress provides on how to set up PHP unit and what it does and how it functions a unit test.
You can extend the things like that though because it’s all NPM node, everything you can install Cyprus um just had Jessica Saxon talking about Cyprus testing for front and stuff you want to use jest? Just install them. NPM install at Cyprus slash Cyprus, I think it’s names faced.
Um and now you’ve got Cyprus installed and write your tests and you can write them against your local environment if you’re using local or one of those other doctor or one of those and write them to test your local site or writing to test the production site. But testing can take on a lot of forms for this and it’s really, I think only limited by your imagination, so to speak. In terms of how deep do you want to go? Well let’s let’s end on this.
We covered a lot of ground and obviously building a theme is gonna take effort. It’s going to take some research And we didn’t cover anywhere near like this was like a 1% sliver of things. Um Michelle, what advice would you end on? What is your golden nugget? Somebody is trying to build their first wordpress theme. Maybe they’ve been an editor for a while.
They’ve gone in, they’ve got Blue host, they installed WordPress and they installed a canned theme and they’re thinking I want to do with something a little bit more and I think I need to like modify this or something like that. What would be the golden nugget of, hey, how do I go make my first thing?
Yeah, I would say just start doing it and don’t be scared. Uh you know like but for real like it seems really scary and overwhelming and when I started, you know, I I I didn’t understand what I was doing and I just kept poking at it. Um Having a local environment is great. You can go make a copy of it on on local um and then just start breaking it and it’s ok if you break it because it’s not real right? It’s just your local copy.
Um Start by just modifying some CSS right? If you already know how to do that, you know uh start by seeing what happens when you do some stuff in functions dot PHP if you already know how to do that. You know? Look at one of the core wordpress themes like one of the year based themes and just like open it and look at it and see what it’s doing. Like compare it to the template hierarchy, like what are these things? Right?
Like what’s this, how does this work? What happens if I change this? Like also don’t feel like you have to know everything about theme development in order to be useful. I have been doing the development, Terrible theme development back in 2011, barely, you could even call it that theme development more like theme poking with stick, but like I knew enough about it to be able to do something that was valuable for my client at the time, right?
Like I could do a little thing and that was perfect, right? I didn’t know, I didn’t even know how the loop worked yet. And I was able to do something that was valuable for a client because I could style the thing that already existed, right?
Um so especially because WordPress is going to keep changing front end, development is gonna keep changing, best practices are going to keep changing, like you don’t have to know everything in order to know something, right? I don’t know everything and I was just on a podcast talking to everybody right, like you know what I mean, but like you you can know enough that will add value to somebody and that’s okay. There, there
is nobody at Microsoft that knows every nook and cranny of Windows at this point. And I feel like WordPress is very much the same way, I think that’s great advice that it, you can get overwhelmed if you think you need to know everything about theme development to do it, right?
And you don’t um you need to know what you need to do what you need to do and that means not knowing the entire thing because you can’t the amount of time I spend relying on the developer dot WordPress dot org site and going back and doing exactly what you just said, looking at the 2021 theme and just saying, hey, how did they do this?
And learning from those processes and picking that up, It’s there’s no finish line to reach its a cycle and you just got to kind of keep keep in it and just figure out what you don’t know. And when you reach one of those boundaries, go learn the things you don’t know,
also take care of yourself in the meantime, like you could get down a rabbit hole of like feeling like you always have to learn things and like, you know,
like hold on the web development, I don’t know what you’re talking about.
Oh goodness. Well, like, so the other thing that I do, obviously I, I do, um although, you know, I have my own business website and personal website, but I also run a website project called fitness and freelance dot com, which is where I write about basically like how to take care of your physical and mental health as like a independent, like tucker creative professional, right?
don’t don’t fall prey to imposter syndrome because there there are none of the developers, some of them yes, are fantastic unicorns, that no, tons of stuff. They still don’t know all of this. So don’t ever feel like you have to chase that rabbit down the hole folks with that. Take one deep breath a second. Deep breath, relax for a second and we’ll be right back.
Michelle thanks so much for sitting down with us this evening, luckily your Central Time. So it’s not like super late where you are. I really enjoy my life in the Central time zone because it’s literally the perfect time zone. But I want to give you the microphone. No, you don’t get to say anything erin because you easterners,
you get our ahead
of you. Oh, it makes all the difference in the world. Uh Michelle take the microphone for a second. Tell folks where they can find you, what you got going on or anything else you wanted to know.
Sure, no problem. So, I am Markt Time media basically everywhere on the internet. Uh love to talk to people on twitter or whatever. Hit me up. It’s fun. Um I blog occasionally at my name is Michelle dot com. You can find my business portfolio. Mark time media dot com. And I also run a blog about physical and mental health for independent tech and creative professionals at fitness and freelance dot com would love to see you there.
Um That’s kind of like my pet project where I I try to write about things that are more mental and physical health focus rather than tech focus, it’s kind of nice. Um otherwise I am looking forward to slowly starting to speak at things again. I missed speaking at Word camps uh you know, hopefully you know, who know, who knows if and when we’ll be doing stuff in person again.
But it was it was super lovely to be on here. I love sharing with people and it’s it’s fun to joke around and be geeks and laugh and learn, oh thank you.
It’s fun to be around people. Right, remember that before time. Mhm Well after you then checking out Michelle stuff should come and check us out on facebook and twitter dot com. So striking U. X. And it’s the google dot com. So striking the ex podcast and also come chat with us drinking ux dot com slash discord.
And if there’s anything we can do to help you out, please let us know uh we will answer questions and and well I’ll answer questions erin we’ll look at the WordPress stuff and and and be confused.
I won’t be much help. I’m
sorry, that’s not fair. You have been looking at the code for the drug New X theme and and been trying to give that a fair shake. So
things changed so much with 5.0 and the move to Gutenberg and blocks that I like, it’s there was a watershed moment in terms of like my comprehension of WordPress. So if you help with your old Legacy WordPress site, you need help with it. Like I’m your man. But if it’s after 5.0, I don’t know if I can help you
if you need any help at all, just keep in mind what we had said, develop the site. You need don’t get overwhelmed by all of the depth and breadth to the functionality and things you can do, but also keep in mind that you’re developing for yourself. But you’re developing for a front and user and potentially other editors because it’s incredibly important to keep your personas close and your users closer. Bye bye.