viewSource

## [00:00:00] Introduction

[00:00:00] **Aurooba Ahmed:** You are listening to viewSource a conversation around tech, web development, and WordPress with hosts Aurooba Ahmed That's me and Brian Coords

[00:00:10] Hello. Hello, uh, we're recording today on a Friday and um, I'm a little under the weather today, but how are you?

[00:00:19] **Brian Coords:** Um, I'm, I'm feeling great. No complaints. No, I'm not,

[00:00:25] **Aurooba Ahmed:** Sounds good.

[00:00:26] **Brian Coords:** I'm not, I'm not racked with like the weird disabilities of like a senior citizen or anything weird like that. So, no, I'm doing great.

## [00:00:35] The old way of modify rendered HTML in WordPress

[00:00:35] **Aurooba Ahmed:** Uh huh. All right, so today's question, today's opening question to you is what kind of HTML do you often find yourself modifying with PHP?

[00:00:50] **Brian Coords:** Modifying HTML with php. So I have a bunch of HTML sitting somewhere and I have access to php cuz I'm probably in WordPress and I need to like do it. The, the big example I can think of is I've had sites like very large WordPress content sites where they say something, and this is like, especially in the days of the classic editor, but would probably still apply or they say something like, We want a rel tag changed on every link in our database that points to an internal link.

[00:01:25] So you have to scan every content, find every link, make sure it's an internal link, then change the rel tag. Don't lose the tags that are there. Add this new one, something like that. A regular expression nightmare. Uh, that's like the, the kind of example I could think of something I've done a lot.

[00:01:42] **Aurooba Ahmed:** Totally, totally. Um, one, there's two that I've been having to do recently. One is, uh, modifying the gallery code for the WordPress Gallery block to make it work with a light box. And two is modifying existing shortcodes to add more features to them, to their output so that we can target them in certain ways.

[00:02:09] **Brian Coords:** And those are kinda similar cuz the gallery is kind of like a short, like a, it's like a shortcode, right? Kind of,

[00:02:13] **Aurooba Ahmed:** No, it's, I mean, no, it's like, it's like a gallery wrapper, and then they have like the image blocks inside. It's sort of like an inner blocks setup.

[00:02:23] **Brian Coords:** uh, well, I'm thinking like classic, classic old gallery, but yeah. Yeah,

[00:02:28] **Aurooba Ahmed:** mm-hmm.

[00:02:29] **Brian Coords:** yeah. Those, those are like a good example. It's, it's, it's kind of like I. Anytime you get a bunch of H tm L and you're just so used to, like in WordPress being able to just change anything. Like you're so used to, like a filter, a hook, an action.

[00:02:42] Every variable like has a place for you to like modify it. And when you're just dealing with like already rendered HTML, it's kind of like, ugh. Like I, I really don't wanna like layer JavaScript on and like do weird things that I, we all know is bad. So it comes up.

## [00:02:59] Inline SVGs in WordPress

[00:02:59] **Aurooba Ahmed:** Totally, totally. But today I wanna talk about a very specific situation that you definitely found yourself dealing with a lot in your project. And then I found myself having to deal with it a little bit in my project too. And that is the scenario of needing a lot of SVG elements in your PHP code.

[00:03:20] So do you wanna tell us a little bit about, like, give us a little context for that?

[00:03:24] **Brian Coords:** Well, I'm, I'm like a huge fan of inline SVGs. Like, I like browser support be damned. I will just throw an SVG code, like straight into the markup and, uh, because I really hate loading like icon fonts and I really hate dealing with all that stuff, and I love. I love when you stick an svg, like straight into the el, straight into your code, and then you can treat it like HTML in the sense that you can apply colors and sizes to it.

[00:03:53] Um, you can, it can inherit the color using like current color. Like I love, I just love that whole idea. And so when I'm building a site, I often throw all my SVGs into like a folder. And then I try to do things like use, like get_template_part() or something, you know, or like write a little function so that I can just pass the name and I can get the SVG and I can just like inject it into my templates and stuff.

[00:04:15] So that's usually a place where I'm like playing around with SVGs a lot in like the PHP world.

[00:04:22] **Aurooba Ahmed:** Totally. And same thing goes for me. In my case, I had an SVG in a project and it was the same SVG, but it has different colors related to different situations because it was like connected to the background of another block. So it needs to like inherit the color of that block, right? So I wanted the same thing.

[00:04:40] I want to inline the SVG so that it's really easy to change the fill color, um, without having to have a different image or whatever for each different version. And in this case, there would've been like nine different versions of the same image. I didn't wanna do that, so I know that you and I found and saw a bunch of different SVG gists lying around on, on, you know, the worldwide web and we'll link to a bunch of those in the show notes.

## [00:05:04] WP_HTML_Tag_Processor for the win

[00:05:04] **Aurooba Ahmed:** But we came up with the idea for a different technique, which is related to a new, uh, Feature class, what is it called? Yeah, that come, that came in WordPress 6.2. Right. And yeah, a really neat cool thing called the HTML, the WP_HTML_Tag_Processor. And honestly, I think it's one of the coolest non Gutenberg things to come out of a WordPress release in a while.

[00:05:35] Right.

[00:05:36] **Brian Coords:** Yes. Although there was like, just this morning an announcement of like the, you, you know what I'm talking about, where they're like making copies of your plugins before you, uh, that

[00:05:46] **Aurooba Ahmed:** But that's not in a release yet. Yeah. But like, yeah. Yeah. But in existing releases, this is really exciting. So, um, when you hear that term, and I mean obviously you already know what it does, what do you think about, what do you guess that it might do?

[00:06:02] **Brian Coords:** So the HTML tag processor takes HTML tags and then it processes them.

[00:06:11] **Aurooba Ahmed:** Yes.

[00:06:12] **Brian Coords:** That's what you wanted me to say, right? That's the, that's what you were queuing me up for.

## [00:06:15] How the HTML Tag Processor works

[00:06:15] **Aurooba Ahmed:** Sure, sure, sure. Um, I mean, It's really cool because what it really does right, is it breaks down the tags in any given HTML and lets you update its internal attributes or properties without having to use regular expressions. So it's like a really fantastic replacement for regular expressions in a lot of situations where you might use like something like preg_match() or preg_replace() in PHP, you know, to try to like do some janky thing that's only gonna work in very specific situations and could easily break sometimes. And now we have a lot more safer version to traverse sort of the DOM, right? An HTML tree?

[00:07:01] **Brian Coords:** Yeah, and I was thinking back to some of the other approaches we've done, like I think there's like the DOM document class, right? Like there's, there's all these other ways that we've done this, and then this one just feels like somebody finally, like I just imagined somebody was like, this just needs to exist.

[00:07:17] It feels like a thing needs to exist. Somebody just got so frustrated, I guess, and just was like, I'm gonna build a tag processor for HTML, because you know, at the end of the day, HTML, it's pretty, it's, it's pretty like standard, you know, like it's not gonna change. We all write it the same. Once you start breaking tags into like little attributes and properties and stuff.

[00:07:38] So it's, it's kind of one of those things like, I can't believe this didn't exist before and I'm glad that somebody finally did it. And that it's just sitting there in WordPress, like, ready for you to use. It's not some extra PHP thing that's like, has to be installed on your server, blah, blah, blah. Like, it's just, they're ready to use.

## [00:07:55] Inlining SVGs with the HTML Tag Processor

[00:07:55] **Aurooba Ahmed:** exactly. So taking this really cool sort of HTML tag processor, uh, we. have now. I created this function that I think I've, I've already started using it personally, um, to help us process inline SVGs and make some modifications that you might need to make, uh, before you sort of input it into your PHP code.

[00:08:19] Do you wanna go through the code and stuff with me?

[00:08:23] **Brian Coords:** Yeah, show me this code where, because I think this is such a good example. I, well, On a side note, did you see the, um, the blog post? Was it, um, was it Adam's blog post?

[00:08:38] **Aurooba Ahmed:** Yes. I think that's how, that's how I discovered it. Adam, and I am not gonna say the last name cause I'll probably butcher it, but we'll put the link to the post in the show notes. Uh, tweeted about it before 6.2 release, and that's how I found out that this thing existed.

## [00:08:52] Interactive playgrounds in blog posts

[00:08:52] **Brian Coords:** But did you see the blog post actually has like little inline like examples of the tag processor that run and you can change them and you can change the code you give it to see how it works. Um, just a super cool post that, um, if you wanna wrap your head around all the different ways you could use it, um, definitely a must read and a must

[00:09:14] **Aurooba Ahmed:** I actually feel like I wanna share my screen and show that first. So let's do that first. Okay, so this is Adam's blog, the one that you were just talking about, and it has this little playground, this live example that you can actually run and then it will change, you know, show you what that HTML output is. But you can actually like play with it like you just said. So I can add an exclamation mark here, run it again, and it'll show me what that new output will look like.

[00:09:43] I've never seen this done before, like, but I'm starting to see this in a lot of different places where people have like little mini playgrounds in their blog posts and they're really cool.

[00:09:51] **Brian Coords:** Yeah. And what's neat about it is like that first example of give, like I have an image and it needs an alt tag. And that's like kind of a common one cuz there are some spots in WordPress, like I remember like avatars and things like that where like sometimes you're, you're dealing with the HTML after it's already created and you don't wanna mess with it, you don't wanna break it, you don't wanna like add stuff to it.

[00:10:12] So the fact that you can just grab that HTML, it breaks it all into little pieces. You can look for the element you want, change the attribute that you want and then it gives you back that perfectly formatted HTML. Um, super cool.

[00:10:26] **Aurooba Ahmed:** Yeah, and it like, you know, Adam breaks it down really well and this was like the first post that I read about it that really like set, cemented my understanding of the processor. So I definitely encourage everyone to go read the post. It's super awesome. And then we'll also link to the actual official dev note that goes a little bit more into detail of how this thing works as well. The post that I have here is in our, you know, viewSource blocks theme. And here this is actually a PHP template, which renders an SVG version of our logo in the footer, and it adds like a little class to it and a bunch of different things. Um, using this little SVG helper function that we'll walk through that uses the HTML tag processor to create this. So it's super simple, but this is what, this is what the output is like.

## [00:11:16] How the get_svg() function works

[00:11:16] **Brian Coords:** So the output is an SVG on the front end of your website, but magic is what can I do to that SVG before it spits out without having to, cuz I, I'm not gonna lie, I have like a recent project in mind where it was like variations of, of like buttons and it was like a different one for each color and.

[00:11:35] **Aurooba Ahmed:** Yeah.

[00:11:36] **Brian Coords:** You know, part of that was because I was using background images and not inline svg, so it was a little harder to pass those like variables and stuff.

[00:11:43] But, uh, this, um, I'm excited to see what, what your function looks like.

[00:11:49] **Aurooba Ahmed:** Yeah. So let's look at the function. So here we are. This is sitting new functions PHP file of the branch of viewSource blocks and we'll link to that in the show notes as well. And I called it just very simply get_svg() in, you know, the pattern of all WordPress functions. Although there was a time when I was like, maybe you should have been get_the_svg(), but I was like, it's okay, you can just be get SVG.

[00:12:15] And it takes a few different parameters. It takes a file name, um, what attributes you might wanna change, and optionally where a directory for where the image lives. So it has a

[00:12:28] **Brian Coords:** based on the, on your theme,

[00:12:31] **Aurooba Ahmed:** Yes.

[00:12:31] **Brian Coords:** a theme.

[00:12:32] **Aurooba Ahmed:** Exactly, so this is, this is assuming a use in theme, but obviously if you were gonna stick this function into a plugin, you could change this default and the first line where it's actually getting the file contents from the directory.

[00:12:46] So here I have it set to like, you know, be get_stylesheet_directory(), and then whatever the default image directory is, if you've or the one that you've passed. So in a lot of my themes, I usually have like an assets folder, and then there's like an images folder. So I set that up as my default, and that way when I'm using the function, all I have to pass it is the name.

[00:13:05] It doesn't even need to have the dot SVG extension because it's literally meant for svg. So just the name of the file and what things I might wanna modify about it if I do want to.

[00:13:15] **Brian Coords:** What if I, what if I do pass SVG at the name of the file?

[00:13:20] **Aurooba Ahmed:** Yeah, right now this doesn't account for that, so it'll definitely throw in error.

[00:13:25] **Brian Coords:** you, I'm already like, I'm looking at this being like, I'm gonna throw so many extra slashes in that directory that you're gonna be like, of this is working. Yeah.

[00:13:36] **Aurooba Ahmed:** Yeah. Yeah, I mean it's definitely like there's a very specific way that you need to use the function in order for it to work. And it doesn't have too many fail safes in it. But there is one failsafe that I did add to it, and hey, it was, Hey, if that file name doesn't actually exist, it will throw an error and then it will let you know, like what it, what it was trying to assume.

[00:13:55] So it'll say, Hey, this is the directory that I was looking in, and here is, sorry, this is gonna bother me. There we go. Um,

[00:14:02] **Brian Coords:** please.

[00:14:04] **Aurooba Ahmed:** Yeah, gotta gotta align those arrows in an array. My goodness.

[00:14:08] **Brian Coords:** those ligature arrows

[00:14:08] **Aurooba Ahmed:** Uh, and so it'll, yeah, so, well, they're pretty, they're the, the ligature arrows are pretty, they're nice. Uh, but yeah, I'll tell you the file name and the directory that I was trying to, uh, find it from.

[00:14:20] So hopefully that helps you debug the error if you end up with one. So, you know, I did put a little failsafe in there, just something tiny little bit. Okay, so once we've gone here and we're assuming, you know, the file is all good, it was an SVG file, we're able to get it to it successfully. Then we go ahead and we initialize the HTML tag processor with the code, with the, in, like with the string, uh, that has the SVG code in it.

[00:14:48] **Brian Coords:** Yeah, cause cause we want, like, we're dealing with a string essentially, like when you're dealing with the HTML Tag Processor. So you're using file_get_contents() because you don't want the SVG file, you want the contents of the file as a string that you can pass into the processor.

[00:15:04] **Aurooba Ahmed:** Exactly, and this is really nice because one of the actual, other like variations of this that I used to do before is I would stick the php, uh, the SVG file into a PHP file. And this way you don't even have to do that. You can just grab a regular SVG file from wherever you might need it. Just you run file_get_contents(), and then grab the string that the has the HTMLcode in it.

[00:15:28] So you use that to initialize the HTML Tag Processor, and then the very first sort of command you call from this class, this object that you've created is next_tag() and next tag. Is basically in this case, the first tag. But that's how you say, okay, I want to apply whatever I'm about to do to this, this tag right now.

[00:15:52] Because you're gonna, you could have multiple tags in your uh, string, that is your HTML. Right? And this will let you process every single one. Even the opening tags. Even the closing tags technically.

[00:16:04] **Brian Coords:** What if I'm curious. What if I got my SVG and it came from like Adobe Illustrator, where they put a bunch of like junk at the top, like a XML tag and all that stuff. Does it deal with all of that? Are you aware? Do I have to have a nicely formatted clean SVG without all that extra junk?

[00:16:25] **Aurooba Ahmed:** Yeah, this, this, right now this assumes that there's only the one like general SVG tag in your file. But you know, that's a good point. This should probably like, have a check in it to make sure that it is the actual, we're targeting the actual SVG element tag. Um, I'm gonna add that here as a, to-do todo.

[00:16:45] **Brian Coords:** What does co-pilot think you need to do?

[00:16:48] **Aurooba Ahmed:** Well now it's telling me the correctly, um, but before it was like, just check that there's attributes or it was trying to document the IF statement first.

[00:16:57] **Brian Coords:** Yeah.

[00:16:58] **Aurooba Ahmed:** Okay, so I can add that information here later, but let's assume that, you know, we are in an H SVG element and actually maybe it's helpful. This is the SVG element that we're currently working with.

[00:17:11] So it's just a file and it only has one top level SVG element, and that's the svg. And then inside there's like a bunch of pats and gradients and that kind of thing. And that's all that this file has. And, uh, the way I got this, I just, I created this thing in Figma and then I was just able to right click on Figma and the image in Figma and just have it export an SVG version of it.

[00:17:34] So Figma is actually really nice. It, it will do a pretty clean code file for an svg.

[00:17:41] **Brian Coords:** Yeah, so you, you weren't an Adobe Illustrator in,

[00:17:44] **Aurooba Ahmed:** No.

[00:17:45] **Brian Coords:** You know, 2015, pulling up that crazy like export as a screen.

## [00:17:51] Modifying individual HTML attributes with the HTML Tag Processor

[00:17:51] **Aurooba Ahmed:** Yeah. Yeah, that stuff is it. It does do some pretty wild things with the file there, for sure. All right, so once we're in there, in this case, if there are any attributes that we've passed it to change, So like, let's say you wanted to change the width of the attri of the SVG, it'll go through that and then update the SVG with it.

[00:18:14] And for that, the HTML tag processor actually, uh, provides us with a, uh, function called set_attribute() and just pass it, the name of the attribute, and then the value you want to set it to. And even if that attribute already exists, it will override it. So it's not like if there was already a with one, it'll add an additional with attribute.

[00:18:34] So that's really nice.

[00:18:36] **Brian Coords:** Yeah, that's super handy. Especially like you ever get in that place where you add like a style tag, but there was already a style A, like there's a style here and then it's adding it here and then it's ignoring the first one. And yeah,

[00:18:47] **Aurooba Ahmed:** Mm-hmm.

[00:18:48] **Brian Coords:** the fact that it can like be a little more contextual and like actually update the information.

## [00:18:53] Handling classes with the HTML Tag Processor

[00:18:53] **Brian Coords:** That's better. But what about classes does it It'll override the classes.

[00:18:57] **Aurooba Ahmed:** Yeah, so if you were to use set_attribute() to set the class, then it overrides it, but they actually have like a special function for it called add_class() that you can use instead. And what that'll do is it will find the existing class attribute if there is one, and it will include your class and instead of overriding the entire property, uh, which is really, really nice because sometimes you have SVGs or really anything that you might be processing, you might have other classes that are really important for the styling.

[00:19:25] But then you wanna add something of your own as well, right? I mean, that's a very common use case.

[00:19:30] **Brian Coords:** It's like so little code. No regular expressions. No, like I'm not like going into that. What's that like? I go to like regex101.com and you're like, right, do I need a bracket? Do I need a, I do. I need a asterisks here. You know, you're not like dealing with any of that stuff. You're just using some nice, nice functions.

[00:19:51] **Aurooba Ahmed:** Yeah. I mean, I think there's, I. It's like double the lines of codes that needs to be just because there's comments in here. Um, but yeah, so in, in this case, this function, it checks, you know, if you're trying to do a class, it will use the ad class function, otherwise it'll use a set attribute function and it will set the attribute and then it will, uh, we use a function from the processor called get_updated_html(), which will return the updated version, and then you can just return it.

[00:20:17] And in this case, like you could also echo it, but I choose to return it because that's a little bit more flexible on the front end. And that's it. You've modified your SVG. And honestly, this function could be very quickly and very easily, uh, set up to work with almost any kind of HTML you want it to instead of just an SVG, you know?

[00:20:36] **Brian Coords:** So where are you using this function? Do you have like a template we can look at? Cause I wanna see you. I wanna see you call it.

## [00:20:44] The process of adding a PHP template to a Block Theme

[00:20:44] **Aurooba Ahmed:** Yeah, so I created a little template and actually tangent I, this is a block theme. So first I had to like Google how do you add up PHP template and have it render like the header and the footer and all of the proper things in a PHP template that's inside a block theme. So there's a lot of code in this template, but the part that care about

[00:21:05] **Brian Coords:** maybe we need a demo like. Code, uh, like a theme. That's not a block theme for some of these episodes where we're

[00:21:14] **Aurooba Ahmed:** I it figured. So now it's good. Now we can do a PHP template whenever we want. Um, so I can

[00:21:21] **Brian Coords:** You know, you're the only person like hacking the block to go back to, please, let me just spit out some php.

[00:21:27] **Aurooba Ahmed:** It, it, it works. And I think there's gonna be a lot of use cases. Like I think that there is a situation where you might wanna do mostly a block theme, but have like maybe one or two custom things that you need. So honestly, this like the ability to create a PHP template and a block theme could be, and probably should be easier than having to like do all this extra code that I did.

[00:21:48] But apparently this is how it's working for now, so it's okay. So here on, go ahead.

## [00:21:54] Filtering output from block editor with the HTML Tag Processor

[00:21:54] **Brian Coords:** I was gonna say, it was just thinking about, we were just talking about SVG icons separately, and I was talking, there's like a, an icon block from like Nick Diego that, you know, you could put any SVG into it and you, it'll render a block on the front end. And I was just thinking how you could use that, combined with something like this where like if you're using the block editor and you're putting in SVG icons using a plugin or something like that, and you're like, man, I wish I could use the tag processor, or like those, all these opportunities for you to just like parse out the HTML of your page and find the things that you want and like mess with them and stuff.

[00:22:29] Like, it opens up like so much more freedom to know that you can tweak the, uh, the individual elements.

[00:22:37] **Aurooba Ahmed:** Yes. The output. Yeah, total. No, I totally agree. And it's pretty cool, honestly. I mean, block themes are still kind of work in progress, but the amount of stuff that you can already do in them, I. And the fact that they still support PHP, even if not as well as I would like, is really really nice. So in this case, I have basically a regular page, um, and it does like you can put your regular blocks, your content in it.

## [00:23:03] get_svg() function demo

[00:23:03] **Aurooba Ahmed:** But then in the footer, I decided to use the get_svg() uh, function to render the actual logo. So here I first you op, you know, initialize, get SVG. Then I pass it the name of my file. So in this case it's called viewSource dash mark. And then I pass it an array of my attributes. So the very first thing I have is a class, and the class is site dash footer underscore underscore viewSource dash mark. And then I say, Hey, if there's a height on this svg, I want you to null it out, make it empty, because I don't want it to have its own height. But then, and, but if there is a width, let's make the width 200 pixels. And so if I go to the front end and we inspect this little thing right here, let me make that bigger.

[00:23:53] You can see that it has a class now and the height is empty, so it does show the height, but it's empty and the width is set to 200 pixels. But I could easily go ahead right now and make it do something else if you tell me what to do.

[00:24:07] **Brian Coords:** Hmm. Well you could, so like you could change the fill color. You could go deeper and you could go into like the path and you could change colors like there if you really knew like what you were looking for or like you could go through, you could like, I don't know. There's a lot of things you could do

[00:24:27] **Aurooba Ahmed:** I mean the function, this particular function doesn't handle inner paths. Yeah. But it will only handle the SVG one. But with the processor in general, yeah, you could totally go through and do like all kinds of things. You could even go and edit that linear gradient that is part of the definitions and make it do, make it have a different color.

[00:24:47] I mean, it's, it's pretty nice. Like a lot of the stuff that becomes possible in PHP with this for manipulating literally anything, but especially things like SVGs and image files and galleries and anything sort of dynamic that you might get like rendered output for from somewhere else. And, but you wanna have to manipulate it on the server before it even hits the front end.

[00:25:11] **Brian Coords:** I'm curious what they're gonna be using this for in core. Like, I, I, I, now I want to know like the backstory, like what was the use case that triggered this? What is the, where are the places that were like starting to see it get used? We need to do some like discovery work.

[00:25:26] **Aurooba Ahmed:** Yeah, I, I remember I was curious about it too, and I did start to look it up and I think that it has something to do with like upcoming phase three work that is related to like the collaboration and the translation and the changing of the dashboard. Something to do that to do with that. But yeah, that would be interesting to like dig into for sure and see exactly what prompted this need to create a much better, more effective version of basically traversing like any kind of HTML.

[00:26:01] **Brian Coords:** Yeah, and so you could use this once in the header and you could pass it like a class or something changes it to be like a white, you know, on a dark background. And you could, you know, start contextually like spitting out the same SVG in multiple places. Um, Yeah. Very cool.

[00:26:18] **Aurooba Ahmed:** Yeah, so I mean, I could just go in here right now and give it another, like make the height also be 200 pixels. I don't know what that's gonna do, but let's see. In this case, it didn't really change it much. Hold on, let me make it 500 pixels. So, because it's just changing the height, it's just changing the height of the whole SVG element here.

[00:26:39] But now it's 500 pixels, like it works really well. It, it's actually really fast, very performant and um, I'm really excited to like, play with it a lot more. And it definitely made adding a light box to the gallery block and WordPress so much easier than it ever has been before that. I was like, thank you.

[00:26:57] Why didn't this exist before? But I'm so happy that it exists now.

[00:27:00] **Brian Coords:** Yeah, I could see like things like adding data attributes when you're dealing with like light boxes, carousels, things like that. I could adding aria labels to things when you know that you need those, uh, like aria labels on things. Um, there's all sorts of cool things you could do with it.

[00:27:19] **Aurooba Ahmed:** Yeah. So anyway, that's what I have for us today. You know, I thought it would be fun to take a, take a look at the HTML Tag Processor. I wrote a blog post about it a couple weeks ago as well.

[00:27:30] **Brian Coords:** And there's a bunch of other, like a bunch of interesting ways to include SVGs, um, in, uh, WordPress. I thought it was really cool to see everybody kind of had like their own little snippet. Like I've done an annoying thing where I'll just make it a PHP file and use like get_template_part() because

[00:27:49] **Aurooba Ahmed:** I've done that too.

[00:27:51] **Brian Coords:** Dynamic, but then you're like, you have to rename all the SVGs to like, cuz it, it only works with PHP files.

[00:27:57] So it's kind of fun to see like everybody's different little like ways to do it. Um, I think that this is probably gonna, with the tag processor, like this is gonna be kind of like the new gold standard get svg uh, gist. That kinda gets shared around I think my prediction.

[00:28:15] **Aurooba Ahmed:** Well, I guess we'll see. Uh, I know that there was a lot of conversation around it on Twitter when, when I first shared it, so it'll be interesting to see if, uh, there are iterations or if other people come up with even more improved versions. Like maybe like, just like you said, like the ability to maybe also deal with the inner components of SVG elements and not just the top level. That would be cool too. Dealing with the error of, hey, what if I passed it, the extension as well, will it be able to fix that? So I think iteratively, something like this will probably become like the way a lot of people handle, not just SVGs, but a lot of different like files and inclusions that you sometimes need to do.

[00:28:56] Yeah. Um, I guess we'll talk next week.

[00:28:59] **Brian Coords:** All right, I'll see you then.

[00:29:01] **Aurooba Ahmed:** See ya.

## [00:29:02] Conclusion

[00:29:02] **Brian Coords:** Visit viewsource.fm for the latest updates and links to the show notes. Review and subscribe to viewSource in iTunes, YouTube, or wherever you get your podcasts.