[Newbie Guide] Templating Crash Course For Oxygen

hey this is elijah with the oxygen team and in this video we're going to be talking about templating in oxygen now templating is one of those things that can be a little bit of a new concept for folks first coming into oxygen so it can contribute to the initial learning curve and we do have some good documentation on templating in general but in this video i wanted to really dive in deep and talk about and illustrate the use of specific types of templates and show you the template structure that ninety percent of the sites i build with oxygen end up using now really quick what are templates templates are designs created in oxygen that are applied to multiple places on your website you can create templates that apply to pages blog posts woocommerce products member portals bb press search results anything basically that needs to have a common consistent look across multiple sources of data templates are your answer now that's not to say you can't design things in a bespoke manner for example if you want to have a single page that uses no templates and looks completely different from the rest of your site you totally can do that but the typical wordpress site that you're building with oxygen should have a consistent look across all the pages so that's where templating comes in handy and keeps you from doing too much work repetitively to keep things consistent so here i am on a blank oxygen site and we're just going to pretend that this is a site i'm building with oxygen and i need to start setting up the template structure which is one of the first things i tend to do when i'm building a site so let's jump right in and start talking about the first and probably most important type of template we just go to oxygen templates here in the wordpress admin menu and click add new template now this first template that i put on most oxygen sites is going to be called main and this template is going to be assigned under where does this template apply we're going to go to other and we're going to choose catch all so this template will apply to everything that doesn't have a more specific template applied to it so if it's a page that maybe didn't have a template applied to it or something that fell through the cracks you're still going to get it rendered with this template and that's why this is where we put our header and footer because we want those to be global across our entire site you can also put things like modals or code blocks anything you want to be global on your site should go in your main template and let's just talk really quickly about these other options here inherit design from another template we're going to use that in a minute but the main template should never inherit from another template as a general rule and then template priority so this basically helps resolve conflicts between two templates that could apply to the same thing so if i have two main templates whichever main template has the highest priority here so let's say we put this to one this template would then win out over another identical main template applied to other catch-all but in this case the main template rarely needs a template priority that would be more for things like archive templates or other things so let's just jump into this template and we're going to whip up a design really quickly so again our main template is typically going to be comprised of three parts the header the inner content area and the footer now the inner content area is really interesting so we'll dive into that a little bit more but let's go ahead and build a header so i'm going to use header builder and we're not going to get too deep on styling or make things look too fantastic because that would just eat up a lot of time i'd rather just focus on the templating aspects so we're going to drop in a div this is going to be our little logo let's do an icon and some text and let's just come up with something for this site let's just pick a cool icon here how about we'll make it about gaming so we'll call it gamer central that might already be a real thing but that doesn't matter because this is not going to be a published site so we can arrange this however we want and make it look really nice let's go in and just adjust the font weight on the text here and let's go advanced typography and give it some letter spacing and then let's just center this that's good for a logo we're not going to get too wild here so let's go in and drop in a menu element and let's see where that goes it's probably not where we want it we want it in row right so let's drop it over there now we have our menu and our little logo that we built that's perfect let's just set up a primary global color here let's go with something that is easy to work with and looks decent we'll go with like a bluish purple kind of almost an oxygen color there and we'll drop that and call it primary and we'll make this um almost completely black and call it black now we can just make our menu match with the same global styles and things like that so let's just give it the purple color and then let's go to hover and active let's remove the border on the top and then hover background colors give it a black color and see how that looks that's not too bad okay so there is a header right so your header is going to have your logo or site name sometimes you'll have like some contact info up there social media links things like that depending on what you're building and then you always have a navigation menu of some kind so that's section number one that needs to be in a main template now let's jump into the inner content area so when you're in a template and you click add you can search for inner content now this element doesn't exist if you're not in a template in other words you can't add it to directly to a page or a post you can only add it to templates and that's because this is basically a window through the template to the content of whichever post is being rendered so if i drop in an enter content element here it's going to be populated with the content of the blog page which right now is just a list of blog posts with no styling but if we choose something different like one of these individual posts the inner content renders that posts content so i like to think of it as a window that kind of we took a cookie cutter and we punched a hole through our template and now whenever we slide our template over something else we see that thing through the template but we still see the frame of the template around it so this is how i like to set up my main template i don't like to put my inner content element inside of anything because then your contents going to be restricted to the width of whatever it's inside of and sometimes you want full width parts and pieces on pages and posts and things like that so it's best to just have a plain inner content element and rarely do you ever want to apply any styling directly to the inner content element so the final piece that we need is a footer so you can build this however you want a lot of people used to ask where's the footer builder well we don't have one because a footer is just a section or a div or something like that so i usually just drop in a section and if it's something really basic i'll just drop in some text that says copyright and then the copyright symbol and then insert data this is the trick that a lot of people don't use because i see outdated copyright notices all the time if we go to insert data and go to php function return value and use the function name date and the argument y that's going to return the current year forever and it'll never be out of date and will look like really really good web developers and designers so we probably should add the site name here as well so let's drop that in here at the end gamer central perfect so now we have our footer now footers obviously typically have more things than this but for this example we'll uh focus on the templating here and let's save this and now let's take a look just to illustrate this three-part structure again in the main template we have our header our inner content element which again is a window that allows us to see the content of whatever the main templates applying to and then we have our footer which is this section here so this basic structure there are actually several sites i've worked on that almost didn't even need any templating besides this like if you don't have a blog for instance the templating gets infinitely more simple because our pages can all be designed individually and typically you'll want to design them individually because they're going to be quite a bit different between each other as far as layout and structure goes so if you're building a brochure site or something like that with a couple of pages maybe a home page an about page and a contact page which is pretty typical for a small business site you may not need a bunch of templates you may just need this main template to make sure that your header and footer are consistent across all of those pages but for all the other sites that have blogs and other things like that we will address the templates that you typically need in that case so let's jump back to the admin and go back to all templates now we've got our main template which handles our header and footer now what's the next template we might need well like i said if you have a blog you're gonna have post archives now an archive is a wordpress term that just means a page used to render a list of posts and it's not an actual page it's an archive so you can't go to pages and see it it's actually handled by wordpress but it needs to be rendered by oxygen so if you're building a site that has a blog the next template i would add is an archive template so this is going to be all archives because you can build archive templates for specific types of archives but generally i find that it's sufficient to have one kind of catch-all archive template because it's going to apply across all of this stuff and even if you do have more specific archive templates it's still good to have a generic archive template to catch the stuff you might not have applied a specific archive template to so this archive template and this is really important is going to inherit from main now note if you do not see the template you want to inherit here that's because that template doesn't have an inner content element it must have an inner content element to be inheritable so because main has an inner content element we see it in the drop down here and we can choose it and the reason that is is because the inner content element again is that window when you inherit the main template then instead of the post or page content coming straight through that window you're getting the all archives template through that window and the all archives template can have an inner content element to render the final posts content too but it doesn't have to and in this case it won't it'll just have a post list so this is going to apply under archive all archives so let's publish that and then let's edit that with oxygen so here we are in the all archives template now a couple things to notice we see our header and our footer at the top and bottom of the page but where we had the inner content element is the area that we're allowed to add items in the all archives template because we're inheriting that main template so we're just going to set up a very basic post list here because the archive is just going to render a list of posts that wordpress spits out when you visit specific urls so let's drop in an easy post element here and one really important bit to remember let's do something a bit more basic for the layout we'll do list image on left is that the query for an easy post element when it's on an archive template should always be default if you set it to anything else the archive template will not work properly because it will use this query instead of the query that wordpress gives it so that's a really common mistake that's easy to avoid so use the default query basically all the time unless you have some very specific need to use another query so this is going to be our all archives template and let's just go ahead and style the color of the title there just to make it fit in a bit more and as you can see it's rendering a list of posts and that's because we're previewing the posts archive up here there are other archives in wordpress and we'll take a look at those but this is basically what you need for an archive template now you can get a little more fancy with it and add a sidebar with other information whatever you want to do but typically an archive template primarily needs to contain an element that lists the post and that can be easy posts or repeater but because i didn't want to design everything by hand i went with easy posts so now that that's set up let's go back to admin and let's look on the front end of our site we've got two templates right now and we don't have a home page designed yet which is why this is blank but if we go to blog our blog list is now handled by the all archives template because we don't have a more specific template applied to this so that's pretty great it's going to cover most of our bases and no matter where we go on the site we're going to have our header and footer and then just to show you how cool this all archives template is if we go to posts and categories we have a few different categories here and we view one of these categories well guess what it's rendered by that same template so we've kind of thrown a few design blankets over our site in the form of two templates and now pretty much everything should look pretty good and on brand so let's go back to the back end of wordpress let's talk about our home page versus our blog post index before we get into this next template type so if we are in wordpress and we go to settings reading we have this option here so by default this is going to be set to your latest posts and what that means is when you visit vidtemplatingcrashcourse.local or whatever your site is with nothing else in the url it's going to show what's called a blog posts index and it's kind of special in wordpress you cannot apply an oxygen template to it by choosing the home page necessarily you have to choose blog post index so that's important but most wordpress sites are going to have especially ones built for businesses and things like that are going to have kind of a home page that is not a blog list so they're typically going to be set up this way to show a static page and you'll have a home page selected and you'll have a posts page and this post page whatever you choose here then becomes your blog posts index so if we go to the front end of the site we're on the home page now note that we're on the root domain and then if we go to blog it goes to slash blog because that's the page that we chose to have show the blog post list so this is a pretty typical setup but it is important when it comes to templating to understand how this works um so let's go to oxygen templates and we have an all archives template which is a generic template that just shows a post list now we need to add a template that renders our blog posts index which is that slash blog so we'll call this blog post index and this one has a special rule that we need to choose for where does this template apply under other and that is blog posts index again if you try to style the default wordpress blog listing with any other template assignation you're going to run into trouble so because we have an all archives template that could apply to the blog posts index as we saw previously and now this one that applies to the blog post index and they could be competing let's go ahead and give this template a template priority of one because in that competition we want this template to win and then let's set it to inherit main and note again even though we have two templates we can only inherit main because it's the only template with an inner content element so now what we can do is we can publish that and edit it with oxygen and here we're going to use a similar setup to what we use for our all archives template we're going to do a section but now we're going to do a columns element and we're just going to give ourselves a sidebar here so we'll do like a 60 40. in the left hand side we'll add an easy posts element and we're going to use that same list style with the image on the left as we used on the other template and then over here we can add some other stuff like we would maybe call this an email sign up like join our newsletter with a form or something like that but we'll just mock it up real quick we'll call the we'll go to custom css i'm just going to add some custom styles here so that we can make this look like a text input with 100 height 32 pixels border we're gonna add a four pixel border radius not quite white for the border color one pixel width solid and then we need to select that parent there and just make sure it's 100 width okay so there we have like a little text input or whatever you could put anything you want over here but the point is we want this to look different than our generic archive template let's just add some margin below that and then we can add another section 100 width with like helpful links or something like that so let's just do helpful links and then we'll add a bunch of text links and again let's add some bottom margin to this just because i can't stand to not have things spaced out somewhat properly and then we'll duplicate these and then we need some space between these two divs too so we'll do 16 pixels here so now you can see we have a very basic kind of scaffold here of what you might have on your main blog posts index so if we go to the front end we can now see how these work and let's jump back to the admin as well so we're on blog and we have this template rendering our blog listing and again home is rendered by the main template so we have the header and footer but no page content we'll look at that here in a minute and then we go to blog and we have the same header and footer because we're inheriting that template and then we have the blog posts index template doing its work here on the inner content area but the key is here if we go to posts categories and go to something else that's an archive and view it we're going to get that generic archive template that we have so now we've covered a lot of bases and we also have a unique design for our blog listing so that covers pretty much every kind of archive that's going to be on your site now you might want to apply or create templates for other types of archives and you can totally do that by drilling down into these archive rules and you can apply the template by taxonomy terms post types authors dates etc so sometimes you'll need to do that if you have a special post type for instance that needs to have its listing rendered in a specific way you can choose post types and render that post type but a lot of times you're not going to need to to get that intricate with the templating so the next type of template we need is going to become very obvious as soon as we click one of our blog posts and look at this mess this looks terrible so the next template we need to look at is the one that's responsible for rendering single posts so let's go back to our templates oxygen templates and we're going to add a new template and again this is going to be called pretty self-explanatory single post template i like to name these in this way so that i know what they apply to just by looking at the names and then this of course is going to inherit main which most of your templates are going to inherit main unless you don't want the header and footer on a specific area or post type or archive but as a general rule every template we make after the main one exists is going to inherit main and now we want to apply this to single posts now we have a choice to make here we can apply to all post types which is a pretty safe bet but in my case i think i just want to go with posts this is what i generally do because posts are going to have a very specific layout and i might not want this template applied to pages for instance but if you have another custom post type that still needs to be shown in the same way you can just check multiple post types here so that they're all rendered by the same template and you're not duplicating any work so let's publish that and let's jump into oxygen and here we're going to do something kind of interesting we're going to add a section we're going to add a div and again we're going very basic with this design this div is going to be set to 100 width but with a max width of 768 pixels and then on the section we're going to center everything now what does this template need to do well it needs to render the content of a single post so if we go to add we can use an inner content element here to render the content of the single post and we can actually drop that in to the div and that'll work fine but what i find i like to do on posts that don't need to be edited directly for instance you're typically not going to go into any post in your wordpress site and edit it with oxygen no the content will live in the wordpress editor so to avoid being able to edit it directly instead of using an inner content element because if we have an inner content element we'll be able to edit these posts directly we remove that and we add a text element instead double click it insert data and choose content this accomplishes essentially the same thing but now when we go to an individual post in the back end let's just go take a look posts we will see this post is being rendered by an oxygen template to edit this post directly add an inner content element to the template and normally we'll see a purple button here which we don't because oxygen editing is locked currently because i'm already in the editor but either way this keeps us from editing something directly when we shouldn't because on posts that are rendered by this template all of our content should be in the wordpress editor gutenberg or classic if you have that enabled and that's an important point to drive home long form content really just doesn't belong in oxygen we don't have the tools to write it efficiently and if you ever move away from oxygen you don't want all of your long blog posts that you work really hard on tied up into oxygen you just don't want that if all of your long-form content is in gutenberg or the classic editor then if you ever move away from oxygen this content lives on and will be rendered by whatever you move on to whether it's a theme or another page builder so to avoid lock-in just keep your long-form content in the wordpress editor rather than writing it in oxygen which again i think is inefficient anyways so now that we have this rendered in here i like to not center everything it's a bad idea to center long form text content so we can choose our div here and just make everything align to the left so now we have our post content so that is the most basic form of a single post template and we're going to go with that now let's jump up to the front end and see what the real tangible effect of this was here we are on our blog post index and we have multiple posts here and no matter which post we click we're going to see the content from that post and actually one thing i forgot to do which is kind of important is add a title here so let's add a heading and bring it up to the top of this section and then let's double click that insert data and drop in the post title you're generally going to want a post title on your single post template so let's make that kind of big now we can see things a little bit better so we have this post here with all its content go back let's do this post starts with vel and you can see the content there and the title and we're using dynamic data which is something that oxygen provides that allows you to render data from an individual post so even though this is all designed one time in one place it adapts to whichever data source it's being applied to at a given time so when you switch posts the dynamic data elements adapt to the data from that post and let's go ahead and add some size and spacing some margin below that uh 32 pixel all right so that is our single post template so let's go to the front end of our site again we just looked at the single post template home header and footer blog showing a list of blog posts if we go into here and say well for instance let's add a text element here and this is another dynamic data thing we're going to click insert data and choose categories tags taxonomies choose a category add a space dash space separator in case there's multiple and then under size and spacing let's add 32 pixels so now we have a category listing here which most blogs will have somewhere whether it's on the blog list or on the individual template and if we click one of those categories our all archives template is kicking in so everything's pretty much covered here and if we go back and look at our oxygen templates this is just dead simple it's very very basic we have our main template which covers our header and footer and is inherited by all the other templates we have our all archives template which covers taxonomy archives and basically any archive that wordpress generates then we have our blog post index which you notice has an order value of one or priority of one which means it's going to override the archives on the blog posts index because that is an archive and we want this to apply there so that takes care of our main blog page or our home page if we haven't set a static home page and then because people want to click and read posts we have our single post template so this really is the most basic setup required to really have a functioning wordpress site with oxygen and as you can see it only takes a few minutes to set up but there are a couple of other templates that you really need to have in general for example if you're going to have a search form anywhere on your site you need a search results template so let's go ahead and add that this is going to be called search results template again with a very plain naming structure and we're going to use the main template here in the inherit design from other template drop-down like we did with all the other templates and then where does this template apply again we have a special rule for search results that's because search results are kind of a special situation so we'll publish that edit it with oxygen and here in oxygen we need to do one really important thing for our search results template so we need to add an easy post element or repeater and let's just continue using that same list image on left style and title we're going to set to our same global primary and you'll notice that we don't actually have anything displayed here that's because we're on query default and the search results template handles searches right now there's no search terms so we've set this up and one thing you can do on a search results template is make sure you indicate where they're at since it might look like other blog post listings you want to make sure that you have some kind of title or something that indicates they're on a search results page so search results now there's a lot of other stuff you can do with the search results page but that gets a little more technical this is really the baseline setup for this template so to simulate a search we need to go up here since we don't have an actual search box we're going to do question mark s equals and then we'll search for vel because we know there are some posts with that in the title and here's a really important lesson look our search results text at the top is not there and do you know why that is because we have two templates that could apply in this situation and they're competing and the all archives template appears to be winning so what we can do to fix that is go back to admin and bump up this template priority on the search results template now let's refresh this and you'll see now that it's using the search results template so key points for this template make sure your easy poster repeater is using the default query just like we did on the archive templates and bump up the priority because it's probably going to be competing with your all archive template now the final critical template to have is a 404 template so let's add a new one call it 404 template and inherit from main as usual and then under other we have another special rule 404 and let's publish edit that with oxygen and toss some stuff in there so that we can see the template in action so let's just drop in a section let's add a big bit of text make it really big and say oops and then add some more text and say what you're looking for is not here and we can center this and obviously we can make this way prettier if we were spending more time on design but we're not uh so this is our 404 template no you're not going to have anything in the previewing because this is kind of a special case but if we go back to admin and then visit our site and we go to something that doesn't exist like slash this does not exist what we're going to see is our 404 template 404 templates are a great opportunity to guide people to other content on your site or take advantage of that traffic in some way even though they're trying to go somewhere that's not an actual place this template gives you the ability to do that by giving you a bespoke design for this situation that's pretty much all the templates you need on an oxygen site there's one two three four five six so this could be called the six template plan right you need six templates and that covers pretty much all of your bases now we talked about the inner content element but we haven't really looked at how it works so let's go to for example posts which are rendered by a template that does not have an inner content element and that's because these posts should have their content in the wordpress content area and if we go down to the oxygen meta box we see a purple edit template button which will take us to the template that renders it but we're not going to be able to edit this post directly which is good in this case we don't want to we want our content in the wordpress content area on the other hand if we go to something like our home page which is also rendered by a template but it's rendered by a template with an inner content element we can then edit this post directly that's because we have that window in which we can put our bespoke design for this page if that window the inner content element isn't there there's nowhere for us to put our design so we would get the edit template button instead but in this case we get edit with oxygen because the main template has an inner content element and once we're in here we see the designated area created by the inner content element in which we can add whatever we want so if we go in here and just add something let's add something from the design library design sets atomic let's add a page how about this and then go to manage settings global styles colors and just change our atomic colors to match our purple actually we need to grab that hex code from over here and then go back over here and just all these blues and teals and things will just swap them out until everything looks on brand so now we have all of our content here in this area that we can edit we cannot go up here and edit the stuff from the main template in fact if we click anything from the main template we get an open and edit template button on the left hand side which is great but our bespoke design for this page just lives in this designated area now one kind of gotcha that people run into because of the whole inner content element being a window to the content of whatever's being rendered is they'll they'll contact us sometimes and say you know hey i'm editing my main template but when i go into it there's content there that i i didn't add i don't want this content how do i delete this i need to get rid of it and that's really because they don't fully understand how the templating works now hopefully this video will help with that but i really want to drive home the fact that this inner content element is kind of magical especially once you understand how it works this content when you're in the template the main template this content in the inner content element which is what we have selected here is coming from whatever you have selected in the previewing drop-down up here so if we change to one of these posts it's going to show the post content if we change to blog shows the blog post listing content etc so if you had multiple pages and say you had a page that had some content that you wanted to delete but you were in the main template trying to do it well that wouldn't work so it's important to remember the scope of where you're editing when you're working with oxygen's templating so again we do have documentation that covers most of this on our site but i wanted to create this video that kind of goes a little more in depth and explains the real world use case of oxygen's templates the inner content element a little bit of dynamic data and most of all the essential templates that are required for the vast majority of wordpress sites you're going to build with oxygen again this is elijah with the oxygen team and thank you very much for watching

Channel: Oxygen

Views: 10,142

Keywords: Oxygen, Oxygen Builder, Page Builder, Site Builder, templating, templates, wordpress, structure, header, footer, header and footer

Id: Ipjvrlk_xRc

Length: 35min 47sec (2147 seconds)

Published: Sun Jun 27 2021