Create Your Sponsorship Receipt Template for Inventory Effortlessly

Sponsorship receipt template for Inventory

hey there this is Matt Cromwell at word impress and a head of support at give I just want to do a quick walk through of uh this tutorial that you're reading right now um I just want to start and highlight the uh GitHub repo uh there is a link in the article there but um I just want to say again that this is the best place to get all the the demo code that we talked about uh and the best example of of how you can actually start playing with the code and see it actually working live uh all the functions that I talked about in here are all here and um there's also some good um just read me stuff that's a good background for um understanding exactly what's going on and what you need to know um the next one is uh I want to show you the stamp Leo Builder just a little bit this is the website I use to generate the responsive email template um it's um I reviewed quite a few of them that are free and this one's Pretty good overall um I really liked um how easy it was and that it has a HTML export um you can see I have a couple here uh this is the one right here that that I used for the demo um I can go into it edit it whenever I like and has all these drag and drop whatnot um it's good to go but when you want to export it um you can just go head back into um my templates area and um you'll see that uh there's a export tool right here um sorry that's not the right one I want the download tool right here um and it gives you the opportunity to download it straight into MailChimp if you connect your account uh but this right here is downloading the code um works really great gives you all the markup that you need and all the styles that you need um and I'll be referencing that a bit later as well so let's just jump straight into the demo this is just a simple vanilla demo site that I just created a little bit ago over in um the themes area you can see I already have my child theme activated um it's a 12 a 2012 child theme and you can see here that um it's just a a a basic child theme and um none of the custom stuff is in there quite yet um that's what we're going to be adding right now um let's also go real quick and look at let's look at settings and then head over to emails and right here we can open up the preview and see right away that our our email is really minimalist really basic and um this is what we're going to be updating because we're working with uh PHP it's really easy that when we update the template we can just refresh this page and we'll see those changes happen immediately right here in the preview email um URL so let's jump right into it we'll head first into um our child our child theme files and the first thing we're going to do is add a new folder and just call it give lowercase give this is um how templating works with give and a lot of other plugins as well like woo Commerce and like Easy Digital downloads you create a subfolder inside your active theme with uh the name of the plugin um in this case we're doing lowercase give we'll open that up and we're going to create another subfolder called emails and that is where we're going to put all of the files um that we're going to be customizing um what we can do immediately is we can um open up the give plugin here's our give plugin and here's where all the templates are at including the email templates I'll open that up here's the emails folder and these are all the files that we need to customize everything you'll notice we have um um one without a a a template tag and one with we're going to go with the default because that is the actual HTML markup um that we need so I'm just going to copy those head back over into my my child theme again and I'm going to paste them right in there there we go really simple the other thing I did in my child theme though I want to highlight is I created a little helper function um this is it right here this is my functions PHP file and here at the bottom I just created a function called get give get email images and all it does is basically return the um the URL of what we're going to do as the email as the image folder so I go inside my child theme here I'm going to add a new folder again and call it IMG this is where we're going to store the images that are inside this donation receipt and um this function is just basically calling that directory making it really easy for us to um to get those images uh later so the next thing we're going to do is we need to grab the actual markup that we got from the samplia uh Builder um this is it right here um it's actually for the the way that they handle responsive and basically all the big um responsive email templates including MailChimp and zerb has a great uh responsive template for emails all of them really use tables actually um and there's a lot of nested tables in this markup it's not pretty it's not pretty at all but at the end of the day this markup is tested across lots of different devices and and lots of different email clients um and it works really well U so it is a bit of a mess to actually uh fiddle with the markup itself and get in there and dig into it um but overall um once you start getting in there and get it working right it it it works really really well so in this case all we really need to do as you saw um in the in the files before is um we need to just copy in here's my my files here we have a body a footer and a header and all we need to do is take those sections of this markup and put them in each of those basically so I'm going going to take the top of of this um email template all the way down to the body tag I'm going to copy that head over to my header default I want to make sure that all of this uh PHP header stays in there and the if defined stays in there H but everything after that we can get rid of so I'm going to highlight all the way down to the bottom and then just paste my markup in there you'll notice that this markup um it has all these here we can change the title actually it's a good time to change the title um oh I need to close out the PHP um you'll see that there's several things in here that's very specific to different uh email clients um here's some iPhone Styles and um they have that all set up that's comes straight from the stamp Thea Builder um so in general since we're just wanting to see how this works we're just not going to touch any of that at all we want it to be just as it is um going to go ahead and hit save head back over there we're going to do the body now um we don't need all of these inline Parts um just put my cursor there I'm going to scroll all the way down to where the table footer starts like I said the markup is hard to navigate through we're going to go to right here yeah social I see yeah I want to do keep with the social and what not in the footer so I'm going to copy all the way to there head over to my body and you'll see in the body that this is the actual um short code that we need in order to Output the the the the give settings so that you see all the donation receipt information for now I'm just going to cop paste over that we're going to come back to that in just a little bit we're going to save that and now we'll let's go back into the markup again and get the rest for the footer again I want to keep that if defined going to close out the PHP there oops go all the way down to the bottom paste save and that's all done now if we preview right now um it should look like something but most likely all the images are broken we're not going to see our Dynamic uh donation receipt information all that kind of thing let's see what happens okay pretty much just like I said images are broken you can see that the basic layout is there we have this default content that I actually created in inside stampa Builder this isn't the dynamic uh donation information it's just the stuff that I added and all of my my images are broken but the styles are generally there so looks like we're on the right track so far good first thing Let's do let's go and swap out those images so so that um it knows where to go um first thing I need to do is make sure those images are in the right place um all those images were actually downloaded I I exported from the stamp Leia Builder and right now there's none in there so I'm going to go over to my download folder um which is off screen but basically I'm going to copy all of it and paste it all straight in there they actually end up adding um all kinds of crazy file names to some of these images and and some of them are duplicates actually I'm not sure exactly why that happens for them but all the ones that I actually need are in there correctly um and that's all that matters for now so I'm going to go into the body I'm just going to do a search for image there it is there's my first image get down to my source you'll see that this is the the source that they're pointing to and of course they can't find it there so what I'm going to do is swap that out for a PHP P function that I created earlier Echo get give email images okay and I believe that's our logo so I just want to make sure that I did this right so we'll go over to the donation receipt hit refresh there it is there's our logo now that's a static logo that's going straight from the theme files um in a little little bit I'll show you how we can swap that out so that that um logo is actually generated from these settings right here which is much more optimal but that's uh the process we're going to go through here I'm going to just fast forward through this basically I'm what I'm doing is just searching for uh images and um swapping out that source for every single one of them I'm just going to fast forward through this for you okay so I swapped out all the images in the body and you'll see that now my header image is there really well this guy that I'm going to get rid of is there and these guys are there that's all there oh and now we see that in the footer I'm actually missing a couple there so I'll head back into the footer and do the same thing yep there we go there's our logo down here and our two social media images now like I said I want to show you how you can make sure that the um the logo can be updated from the give settings as well so let's find that logo in here this is the logo and basically what we're going to do is we need to first get that setting out of the give settings I'm going to put that up at the very top Eder image equals give get option email logo okay that's just going to write to return the basic URL of that uh image it doesn't return the markup at all so and we only want to be using that if it's actually there so let's get back down to that logo here it is I already have the function prepared here but basically what we're doing is we're going to say if it's not empty if there is something in this option then we want to Output this markup and the markup we actually want is this down here that's what we actually want but we need to swap out the image part so that it so that the source is the image the header image so I'm just gonna take this actually what I'm going to do I'm going to take the whole thing take out the link and the markup and now delete these things there we go so what I'm actually doing here is here's the image source and it's echoing out the header image with an escape URL before of course and we're setting the alt text also to be the name of your website and we're wrapping that in a link which is the link to your homepage but remember all of this only is going to be output if there is actually a header image have two divs there right now two closing divs let's get rid of that there we go that looks right save that we head over here and now our logo should actually disappear there it is it's gone the layout Still Remains the Same which is exactly what we want so let's head into give settings and we're going to upload that image there it is our church use this file now it has that URL that we need go down and save the settings now when we refresh there it is and you can see down at the bottom left that it's pointing to the homepage of the site exactly as it should okay we're in good shape okay now we need to get this uh content to be dynamic let's find where that's at we're going to keep those words this right here thank you so much for your kind donation I want to keep that here's all that content that I had put in to stamp Lea I'm going to highlight all of it and I'm going to delete it and we don't even need the the um P tag or anything because remember that the the dynamic content is actually created in our in our give settings in um a wizzywig and Tiny MCE so all of this already has its own unique markup so we don't need to need to add any markup here we're just going to add that short code with the squiggly brackets which is called email save that and just to make triple sure I'll say this is dynamic content just so we can see that change live save settings come over here and refresh there it is and there it shows my name now actually good stuff that looks pretty good what does it look like if we there it is see the responsiveness looks great on a smaller device looks great on a larger one we're in good shape generally you're all set you can also like I did you can swap this one out so it's dynamic as well swap out um um if you want to add your own um Facebook and Twitter um URLs of course you want to customize that as well um if you wanted to do some additional things things to not have to refresh all the time if you actually are theming with Gulp or grunt and you have a PHP listener added there then every time you save you'll be able to see your changes uh live refreshed right there in the browser that's super useful super handy um there's also ways that uh with give you can actually register a different template you saw in our uh template files that um we were calling them body default and footer default we could actually call it body green and footer green and header green and that would be an additional um type of email template and that way if you for example maybe wanted to do body Christmas you have a special Christmas template you want to do every every Christmas and you don't want to have to overwrite this every single time you register a new template and then you can just have them sitting in there and then um you just change your your settings right here email template you would change it would show up right here as Christmas instead of default um you just update that and then now all of a sudden you have that template globally instead and um so you could could and but that tutorial is going to be later um and then if you really want to give fancy you could also add your own custom meta boxes to each of your give forms um to add which images you want to show up here in these additional areas down here what text you want to half year per form um that's a lot more uh in-depth um custom functions but it's definitely possible with the with this template and with give um that's definitely a strong way that you could leverage your email templates as well and um and make it a really powerful tool of communication with your donors so that's all I got thanks a bunch sh