On today's episode we are going to talk about which to use when customizing; a template or a hook? Right here on Your Website Engineer podcast episode No. 290. Hello everybody, welcome back to another episode of Your Website Engineer podcast. My name is Dustin. Today is the last recording coming to you live from Valencia, Spain. We are almost done with our trip, it is very close to WordCamp Europe, I'll try to do the next recording in Austria sometime before – after WordCamp, because the day that we get home I don't want to record a podcast, so that's a little bit of story into our lives, our six weeks is almost up in Spain. I'll be glad to get back to a normal routine, probably one of the things I'm looking most forward to is central air, very, very hot here in Valencia, and I've been very, very hot most of this trip.

Let's see today I've got some announcements. I've got a plugin to share and then we'll go ahead and dive into the topic of which to customize, a template or a hook. So very first off you may have noticed this already, but WordPress has updated to version 4.5.3, it's a maintenance and security release and most of the installs already have the auto updates turned on, so you've already got this. But it basically has a security release, things were some fixed, there were 17 bugs that were fixed from versions 4.5, 4.51, and 4.52. There's some security things that got fixed. There's a link in the show notes to all the details about the security issues if you want to read more about that.

Another thing that got updated this week was Jetpack, is now at 4.0.4, this also was a security update, some bug fixes, and some improvements, so there were some security updates for the post by email section, the likes module and the rest API/contact form, those things were updated in a security release. There were also some improvements, so Multisite now works a little better. Photon is, is doing better with responsive image support, and the protect it increased the default time out to 30 seconds and so it gives a little bit longer of a time period for protect to work. There's also bugs that were fixed and there was a handful of people the contributed to that release. If you want to read more about that you can go on over to jetpack.com, or you can find the link in the show notes for episode No. 290.

And then one other plugin, a big one that I talk about a lot was updated and this Gravity Forms, and Gravity Forms was updated to version 2.0 and it will – it, it takes a manual upgrading, you won't be able to upgrade from the dashboard it looks like, or I guess that's available as of June 14th, was manually and then as of this week they will be releasing Gravity Forms to automatic updates to existing users, so it includes a lot of new features, enhancements. There was extensive changes under the hood to the core plugin, the APIs been changed, the add-on framework, and enhanced security [inaudible] [00:07:02]. This is – there's also a part where a conditional logic has been enhanced. It is going to support fields it didn't previously support. You can now utilize conditional logic on multi field inputs, like name field and address field, and – which makes it nice that we can customize different things.

And it also is the admin UI is now responsive, and so that's nice as well. There's a whole list of things that have been changed. The change log is very long, so if you're interested in that, again there's a, there's a link in the chow notes for more details on that. So that is Gravity Forms. So if you haven't updated, go ahead and update to Gravity Forms 2.0.

In the, is there a plugin for that section, there is a plugin that I found today that I want to call out, and it's called Text Replace, and it allows you to replace common texts with other texts. It's handy for creating shortcuts to common or lengthier frequently changing HTML, or for smilies, it says. So how this works is it gives you the ability to auto text replace, like you can go in and say I want to change this text to this text, but one of the cool features is almost like a text expander type snippet where you can go in and you can define a short cut and it will auto expand inside of your post or page once the post has been published, which is nice. So if you wanted to include the link to WordPress.org you could put maybe semicolon wp semicolon, and it would auto expand and it would wrap it in a rough so it wraps the linked text and it does everything you need.

So that's kind of nice. It's kind of a neat, a neat plugin, so if that's something that you're looking, something that you may need, maybe you're using a short code regularly or you're using the same snippet very regularly you can go ahead and define those and that will auto expand inside of, inside a WordPress, which is pretty nice. So that is the simple plugin. All the – all of setting are just found underneath the setting panel and you can go in and define as many short codes if you want, the define and replace text that you like so that is a plugin called Text Replace.

All right, today we are going to talk about how to customize either a theme or a plugin, we're going to kind of dive into both. And this came from a friend of mine's, or a colleague actually, his, his blog post, which I'll link to in the in the show notes. And it's talking all about WooCommerce of when to use hooks and when to use templates. But I think it is a little more broad than that. Like you could actually do this for themes and you could also do it for, for plugins, certain kind of underlying the, the differences between them. So one of the best reasons to use WordPress is because it's got tons of features and it's open source. So since it's open source that means you can modify anything that you like. Do you don't have to – if you don't like that way that something works, you know, maybe you don't like the way the plugin works. You don't like the way that, you know, something is in your theme, like you can go ahead and modify it.

But the best way to modify it isn't to change the plugin core files, or to change the theme files, and I've talked about this before, like – and this was something that I did early, early, on that I'm not proud of, but I would go in and I would just customize the template. I would change this, I'd change that, and then a new theme would come out or a version of the theme and it would just overwrite all the changes and I would lose it, which obviously isn't the best way to go. Like there's ways around that you can take your time and you can update and you can manually, like compare each of the files and you can see where you've made customizations, or you can make a list like, oh I've changed these four files in this theme, like let's make sure when I update I have a duplicate backup of these.

But just time consuming if you do a lot of sites you, it's hard to remember. Did I customize anything on this site? Did I customize anything on that site? So the best way to do this is you can either override the template and you can make changes via template, or you can add or remove things with hooks. And so today we're going to talk about both of those. And both methods work well. And both methods are good at different things. So let's talk about when we should those. So let's first dive into themes. When you could use each of these in themes, and then we'll dive into plugins.

So themes, all of your theme customizations should be done in a child theme. So I'm kind of just laying that out there that this is one of the WordPress best practices that you go and you make a duplicate of your theme essentially. And how that works is – and I'm not going to spend a lot of time here, but basically if you want make changes via a child theme, what you do is you, you copy the file from the parent theme. So maybe you want to make changes to your – the index.php so you would copy the index.php file, you would put that in your child theme. You would make any changes that you want and you can save that and then when WordPress loads your theme loads it's going load those files. It will load all our parent files first and then it's going to load on top of the, the child pages, or the child, any page template that's in the child theme.

And so whatever's in the child theme is going to be the one that's displayed on your home page. And so those are – that's when you would make – that's how to make a theme modification, or a template modification. And when you'd want to do this if you want to add like an extra class maybe you need some markups or you need to put some sort of class in there. Maybe you want to add a specific entity, maybe you're, you know, you're putting prices and you want to add like a special bullet point, or you know there's a lot of different reasons that you'd want to, you'd want to use a template. Maybe you want to remove something, you don't like one like code. I mean there's hundreds of different reasons that you would use a template to change things. Using templates sometimes are easier because you, you can see where the code is and you can just go ahead and remove it, or you can customize and you can tweak it and do what you want.

Using templates, if you need to add additional php information. Maybe you want, maybe you want to put in a date to the posts, you know, or, you know like maybe you're, you're doing a blog post and you don't have – the date isn't visible so you want to add that. Then you want to – you'll want to update your template to pull in the, the published date of the article. So that's the best reason, or the best way to use a template to, or modify a template.

The other way is to use hooks. And hooks are called, there's actions and filters, and basically actions are a place in the code where a developer says, I am at this particular milestone maybe I've loaded half the page, if you want to do something here's your chance. And you can, you can add an action right in there. So maybe you want to – it's really hard to come up with examples off the top of my head. But maybe there's an action, or place in the code where you want to, you know, it's a part of a check out process for WooCommerce and you maybe want to – maybe you want to display a tax, and tax isn't displayed by default, or maybe you want to display some notice before the buy button. Like you would say, okay, this has happened the checkout form it loaded, but before the, the buy button display this, which you can do with actions.

Hooks are where a developer says I've just calculated the value, if you need to modify it somehow do it now. Like you can use hooks and filters – like change all the text to upper case, if you want to, you know, if you wanted to, to do that you could. You can modify the number, you know, on WooCommerce in your, your check out, you know, you want to add ten percent on top that, you can do that with a filter if you really like. So that's how you would do that. You would put all of the actions, the hooks, the filters; all that good stuff would go into your child themes, functions.php file. And from there you can, you know, then that way it's, it's modifying things within that plugin, or within the theme or whatever.

Like I guess when it comes to themes, like there's probably not a lot of time when you would use hooks, just based on the way that themes are programmed. Themes are mostly just visual. And not a lot themes have a lot of hooks in them

So let's look at plugins. And so some plugins like WooCommerce, new Gravity Forms is another, some of the really big names that have huge themes, I know that like all of Pippens Plugins, like Easy Digital Downloads, and [inaudible] [00:15:02] wp, restrict Content Profile. Those all have the ability to add hooks and they have the ability to add templates. And so like with WooCommerce you can basically put a – in your child theme you can add a folder called WooCommerce and then you can copy in using the same file structure you can copy in a template. So maybe you're in the, the price, you want to display something differently in the price, you can, you can move in the WooCommerce/template/single product/price.php.

You can add that to your child theme and then you can go and you can modify and you can remove HTML or you can add custom classes. You can add additional HTML if you need it. But you can really customize and do what you need there. If you need to do something – I guess one of the big things that you can do is you can rearrange data easily with WooCommerce. There's, there's the ability to rearrange like, oh, do you want the title to come first, and then the rating, then the price, the excerpt, the add to cart, and then maybe the sharing buttons, or would you rather have the title and then the price and then the rating and then the add to cart button and the excerpt underneath? Like you can rearrange all of those using hooks, which is nice. Like it just – you don't have to rearrange and find like all of the pieces. I know a lot of plugins are very complex and they pull in information from all different files.

So it may be hard to find the perfect file to, you know, that you're, that you need to customize whatever you're looking for and so sometimes hooks and actions maybe a little bit nicer and a little bit easier because you can just go ahead and rearrange the hooks inside your functions.php file and you're good to go. So there's, there's plenty of examples and the one that Patrick uses on his website is maybe you don't want the, the SKU to display towards the top of – like right underneath the, the – maybe you don't want the SKU to, to display right underneath the price because there – what's the reason for doing that? You can go ahead and you can just tell WooCommernce, like, oh, let's put this – instead of calling the – instead of calling the SKU right after the, the price, let's call it right after, or in the additional information area, like so you can customize that by just, just doing a little bit of code. It's only a couple of lines of code, and there's a – I have an example in the show notes for how you can do something like that.

So that's kind of what I wanted to share with you today. It's a little bit on the technical end because the fact is customizing – to truly customize something it is a bit of – it is a little tedious, like you have to find, and you have to figure out – first you have to figure out what you want to do. And then you have find out, okay, what's the easiest way to do this? And I know I do this a lot when it comes it WooCommerce support, people are like oh, well how do I do this? Or how do I do that? And depending on their skill level like a lot times you can just hide things with a custom CSS. You know, just say display none, and it's "hidden", but all of that data is still in the web browser for Google to crawl through your site and find. So if you truly want to remove it the best way is to either create a, a template and you can just remove all of the, the code that's pulling that.

But then you might want to just action – I guess it really – coming down to it the more that I think about it, like if you remove like a line of code, say you don't want to display price anymore. Like if you remove that line of code from your WooCommerce plugin with, you know, using a template then like that may not load in other places where you need it, so you might need to use a remove action to remove that from a single product page if you don't want the prices to display until they get to the cart for some reason. So there's a lot of nuances. It takes a while to kind of get the hang of it. I, I would say if you really need to customize something quickly probably templates are the way to go. But they're a little bit harder when it comes to finding out where the hooks and the actions and the, you know, all the filters and stuff are within WooCommerce.

I'll put a link in the show notes to like the page with all of those as well. But I would say if you, if you definitely want to get started let's try, try customizing things via template, go the template route. And then as you get more and more experience you need to do some other things then. Going the route of the, the functions.php, going and adding or removing actions is probably the best way to do that, so with that I am going to wrap things up here in Spain. I've got just about three minutes until the, the church bells in the plaza start going off and so I'm recording this just in the nick of time and I will be talking to you next week, again if you were coming to Word Camp Europe, if you will be there give me a shout out on Twitter at Dustin Hartzler, send me a note saying that you're coming and I'll be happy to say hi, and talk.

I'm a volunteer. I've got some responsibilities on both Friday and Saturday doing some – not sure exactly all that I'll be doing, but this is my first huge Word Camp that I'm going to. I'm really, really excited and I'm really excited to be part of the community and hang out with a bunch of awesome WordPress folks this weekend, so with that, that's all I've got. We'll talk again next week from Austria and until then take care and we'll talk again soon. Bye-bye.