Creating a Website with Oxygen

hi this is david mccamm for webtng in this video i'm going to take a look at oxygen i decided a little while ago that i wanted to do a deep dive into oxygen and actually build a site from start to finish i've looked at oxygen before but in those cases i was only interested in how oxygen works with custom post types now i wanted to see what was really involved in building a site i want this video to be useful for new oxygen users so i'm going to go through the steps pretty much from start to finish in building a site in addition to this walkthrough i'm building a site with oxygen i have a couple of other oxygen resources that i've just created one shows the code snippets that i've used when building the oxygen site another one walks through the pros and cons and gives my conclusions about oxygen builder overall so if you're just interested in what i think you might want to check out the other video or if you're interested in the code snippets i've used then check out that post okay let's get started this is the oxygen website and i pointed out because they have pretty extensive video library and knowledge base so if you are building a site with oxygen this will be a place that you'll want to go to check it out something that comes with oxygen are these design sets there are quite a few of them in different niches and one way of creating a site with oxygen is to just install one of these kind of pre-made websites you've seen these before like with astra or cadence elementor has some so that's one way to get started however i don't recommend that if you're trying to learn oxygen i decided instead this time that i was just going to build it from scratch the header of the footer everything and in that way hopefully learn more about oxygen but i'm pointing out this resource these design sets because that's another option if that's what you want to do right now oxygen is really cheap when i first bought it everything was 99 now it's 169 for the oxygen and the woocommerce add-on i think they have another add-on coming out so if you're haven't already bought it and you're interested the longer you wait the more it's going to cost all right so now let's start building here's a website i've called it oxygen test it's a brand new install on localhost okay and these are the steps i take the first thing i do is i go in and i delete out these plugins that are installed by default i go to themes and i choose a theme so i'll update this one and then delete the others oxygen doesn't use the wordpress theme but you're going to need to have one installed i'm going to go ahead and update wordpress okay so here we are so as i said this is localhost when i do this on a live site online the next thing i do is i install backup and security plugins after adding the backup and security plugins the next thing i do is i go through the settings site title the tagline and set the time zone the date time format the day of the week starts on default post category so i think uncategorized is horrible and so one of the things i do is i just change this to general okay so let's go back now to settings and that's the default category then reading i'm going to change this later to be a static home page but right for right now that's okay summary and then i usually require that all comments have to be manually approved under media you notice by default wordpress is going to create a small square thumbnail most people's featured images are not square so that's totally useless if you are going to have featured images that are not squared you can turn this off the way you do that is i think you just set it to zero for both and it won't make them okay and you can adjust these if you want but the medium and large will make proportionally sized images in my case i think i might have where featured images so i'll leave it i'm just mentioning that permalinks i always set it to the post name for the pretty link and now the next thing is to install oxygen i picked it from the download and now i install it and activate it first thing you get when you activate a new oxygen install is it asks you do you want to start with a pre-made library and those are the design sets we looked at you can choose one of those but i'm going for a blank install so when you download wordpress the latest version installs the 2021 theme i'm just going to update that to get rid of the notice now that i've installed oxygen it gives you this admin menu so the next thing i do is go through the admin menus and look at all the settings here we can change our mind and install a website from the design library you can this is just a link to the templates here and here's some help and support links in the link to the facebook group which is very useful a lot of good people in the facebook group who are helpful templates this is where you are going to add a new template and we're going to look at this pretty extensively then export and import these are your settings and your global colors your global styles and so what you do is you just go in copy everything here then you go to another site and you paste it if you want the global colors you would click here to get those click submit and you would copy it from one site to another and that's how you move your settings then here's the settings menu you notice there are a lot of tabs here you can go through the options here exclude non-public post types from preview yep that makes sense enable selector detector this is kind of an internal to the oxygen editor tool so i'll turn that on and then show advanced custom fields cache google fonts you know if you're using ie10 client control this is to lock down access to the oxygen editor so right now it's only the admin has access and the oxygen editor you can enter php there so you really need to make sure that only trusted users have access to the editor you can do it by role here by individual user and then oxygen adds a meta box on the post types and so you can hide that for example we don't need the oxygen editor for these things or some kind of internal wordpress feature so i don't need it for those then security like i said with oxygen you can actually input php and so this option here checks to make sure that oxygen short codes that are run or actually were created by the site author by having a signature on them and if you migrate a site from one place to another you're going to need to come here and resign all the short codes so that's for security thing these are the icon sets it comes with awesome and linear icons and these are svg icon set and you can upload a new svg icon set if you have one this is for adobe type kit if you have a subscription to that this is where you enter your oxygen license then this is a place you're going to come back to over and over again while you're building your site and the css caching and regenerate css cache this is in the oxygen templates so if you make a change to your global styles then you'll need to regenerate this cache to reflect that so your templates have the latest global styles then this bloat eliminator is a kind of a convenience to disable things like emojis if you don't want them or jquery migrate which people don't need anymore it might already be gone or embeds some people don't like embeds or google fonts and then library these are the design sets i showed you on the oxygen website i'll show you where you can import those or sections from those into your templates if you want to use them and if you buy a design set from somebody or subscribe to a website that offers those then you'll need to enable this in order to be able to connect to those in your editor and then if you wanted to create your own design set and share it with other people or just be able to access it when you're building another website you would check this box okay so those are the settings and that's what i do next is i go through the settings okay and now we're ready to create a template so i click on templates add new template and i'm going to call this one base template now oxygen templates are hierarchical that means that they can inherit you can start and kind of build them up and they can inherit the features of other ones so what we're going to do in the base template is we're going to create the header and footer and that'll be the base and then our page layout will be a little different than our post layout because we'll have a sidebar for posts and then the archive layout will be a little different also there's no template yet to inherit from because we're just starting but once we have some templates this drop will be a drop down here and then note that there's template priority if on a page more than one template could apply you have priorities so you give them a number and the higher number takes priority so you can assign a template to all post types to post pages and if you have custom post types are going to show up in the list here reusable blocks or you can apply it to different types of archives all archives are taxonomy or post types or authors or dates okay and then if there are custom post types you'd be able to choose that or other so front page your blog page your search results your 404 inner content or catch-all okay so since this is my base i'm going to have it be a catch-all before we leave this screen there's something else here which is short codes there's nothing here because we haven't created the template yet but once we do oxygen controls the layout of the template using shortcodes and all of them would be listed here and you could copy these go and create another template and paste them in that's one way to copy a template so once you publish it you get this nice edit with oxygen button you don't just have to apply them to posts or pages or archives you can create a partial template for example if you had an email signup form you wanted to use on multiple pages or multiple templates you could create a partial template that you could reuse in multiple other templates okay so when we edit with oxygen and you get this blank editor here and this can be a little intimidating if you don't know what to do if you haven't used oxygen before so let's quickly kind of walk through what these different buttons are and then as we go along we'll use them and you'll see more thoroughly when you click here this is to add different elements and an oxygen element is like an element or widget or a beaver builder module okay you can see like here's a section here's a button here's an image and so on okay they're basic ones they're quote unquote helpers like the header builder which we'll use social icons and icon box pricing box easy posts that we'll look at slider a modal toggle and so on then there are some wordpress elements you can use there's these pro menu or menu to add a menu to your like we're going to do add a menu to our header add a short code or shortcode wrapper your comments and comments form your login form your search form and there's dynamic data like title content date categories featured image author so these are things we'll use in creating our theme templates they're widgets we're familiar with the wordpress widgets and all the widgets would show up here and then sidebars and we have no sidebars why because normally the sidebars are declared created by the theme and oxygen disables the theme so if we want a sidebar we're going to have to create one and i'll show you how i did it on my site and some other ways you could create a sidebar then there's the library and here are the links to the design sets these are ones just like we looked at on the oxygen website and when you scroll down you can see there are 16 pages there are different templates three templates and then there are all these sections or elements like headers and footers and heroes and titles and pricing and so on okay but we're not using those but there's a library and then this is if we created some reusable parts then they would be shown here that's the element list here in those panels you can hide that or show it then this here is where you choose what content you're going to be previewing so here's hello world sample page and whatnot over here is the structure we'll be using this a lot but basically what it is is like a tree view of the layout of your page and when you do that it opens up a panel here and so you'd have your tree layout then this is the history and the undo and redo so that would show you your undo points and if you made a mistake and you want to go back and it was listed here then you could click to go back to that then here is where you manage settings style sheets and selectors this is what i'd say the next thing you would do in working with oxygen is you go in and do these settings and this is very much like the settings you would set normally with a theme in the customizer so i recommend the next step on a new oxygen site is you go and step through these panels and choose your settings so i'll choose 1290 as the page width and i don't need an overlay header if you want animate on scroll options they're there and then you can add smooth scroll to hash links you can enable that here and then these are the editor settings and we'll kind of see how these work here but right now we don't have any items here but there's a class suggestion list when you start to cl type a class name how many it will show and then this is interesting this is what i was talking about with being kind of like the customizer you can go in here and you can create color sets and there's a global set and you add colors so you have to have a color palette in mind they don't give you one to start with although if you import one of those design sets you'll get one and so what i usually do is i get a starting color and i'm going to choose an orange so i'm going to start with an orange paste in the hex code and then you click add color and it's added if you want to delete it you click the trash can so there are two steps you enter it and then you have to add it so you have to click this add button twice to get it to be saved so now i have a starting color how do i generate a palette this is how i do it i go to a website called palatin and i enter that hex code here's my color and then i go here and i've gotten several oranges and several blues and so i just start copying these colors let's say i want this one as a light orange give it the name paste in the hex code add go back here say take this one as the dark orange i mean you could take that one and you know that one instead i guess if you wanted go here add it kind of the page backgrounder header background so i'll call this one blue white paste it in and then here when you click on the color dot you get a palette here and so i just kind of move the dot all right so here's my color palette and i can do the same for orange if i want a really i guess i should do that for orange also so let's do an orange white so there's my color palette and i'm going to save that save as i go along now these settings even though we're in just the base template these settings apply globally to all templates and that's why you might need to regenerate the css because say we save them here we go into another template we make a change we want to regenerate these so it applies back to this original template also there are our colors then we go fonts okay and display font that's the header text font that's the text the body so i'm going to go with roboto and then headings these are the sizes and the font weights if you just set the h1 the other ones will kind of inherit and just kind of go down in size or whatever i want the colors to use this dark blue that's going to be the color of my headings okay and then for body text i like it to be 18 pixels make it easy to read and i kind of make it a little grayer okay so there's my body text if you want to style your link you do that here okay it's taking this as our accent color so if you want your links to be that actually before we go on let's go back to our body text notice we kind of created a new color here let's click the globe here to save it as a global color and we're going to call this the blue text okay so that's how easy it is to add to your color palette i'm doing that because when we're looking at links i want my text links to be that blue text color but then when you hover over it i want it to be a different color or i can just make it underlined which i think is what i'll do i'll just make it so it's underlined link wrapper is an oxygen element so you can style that differently and you can style the border radius of your buttons and the font weight of the button text okay so i'm going to save that and then you go width and break points so page width i like to be 1290 and then these are the oxygen breakpoints and then sections and columns and the default section padding and the default column padding i think this is a little much for me so i'll make that 55 each this is just like going through the settings in the customizer and then if you want animate on scroll you can add that and then you have this smooth scrolling to hash links option okay so i saved that kind of global styles have been added and one thing kind of pet peeve here with default oxygen is it doesn't show me the name of the template i'm editing here that would be a nice enhancement and there are a lot of enhancements to the oxygen interface added by third-party oxygen add-ons but i wanted to start out just learning the vanilla oxygen then also under manage the next thing is style sheets so you can add a style sheet i know we're going to need one this is global applies to all templates going to be site-wide so i'll just call it the site style sheet and you can put it in a folder if you want okay that's style sheets and then selectors so we don't have any yet but if we did they would show up here and you could enable or disable them here and then you can leave and go the wordpress admin or to the front end this is the oxygen editor interface so let's start out and add our header we're going to go to the header builder and there's a header section just got added or header row you can stack your header rows for mobile you can hide them you have a background color so i think i'm going to make the background color this very light blue and then you have the height which i'll maybe come back and just you have sticky overlay i'm not using those now i want to add a link wrapper because this is where i'm going to put the site icon in title and i want when you click on the site icon it comes back to the home page so i'm going to go grab the url to the home page and paste it in here and be careful see right there how i pasted that in it kept the http when i pasted it it didn't delete out the old text and that bit me because i got mixed content error so that's kind of a little gotcha that you want to keep an eye on so you want to delete that out and make sure that you don't have that then next i want to add an image okay and i'm going to upload a logo image go to media library browse and i'll pause the video and upload the image i made this one 500 by 500 pixels on purpose probably could have made a small one and a bigger one the site here i'm calling it dynamic toolbox i want to be a 50 50 by 50. then the next thing i want to add is i want to add text and again you know like i double click in here it'd be nice if that deleted out that text anyway so call this wp dynamic toolbox and we want the text color to be this color to match the logo and we want to be bold and we're going to go back to our link wrapper and we want things to lay out horizontally see how easy that was and now i'm going to click on the logo go to advanced and i'm going to give it a little margin on the right maybe that's too much there we go and then i'm going to click on the text and i'm going to make it bigger okay and then i'm going to click on the header builder again header row tells you where you are these are like your breadcrumbs here this is where you add conditional display or a link or duplicate it or delete it here are your responsive controls to look at different page sizes here's your element id and you can add a class name to it here what i want to do on this header row is go and add some padding say 10 pixels to the top and bottom okay so there's my logo and site title i'll save that and i'm going to go out to the admin and you notice it tells us the global colors have changed the global settings so it's suggesting we regenerate that and it did it so we go look and that's it notice there's no other content there's no hello world or anything we have to build the templates we don't have a theme here so we have to build these templates in order for any content to show but what i'm going to do is go to menus and i'm going to create a menu called main menu and i'll add on here put in the site url give it a link a name of home and add okay and then another one called toolbox okay i'll add that to my menu save the menu there are no menu locations normally you know with the theme declares the menu locations so there aren't any here but that doesn't matter but while we're here i'm going to create another one i'm going to have a top bar so i'm going to call this one the top menu and i'm going to add one called about and i'll add one called contact and save that okay so now we have our menus let's go back to oxygen template and continue work on the base template okay so now i'm going to add a menu i'm going to tell it which menu we want we want the main menu and we don't want it right here so let's go to structure this is the structure button and we'll see that our header has three rows left center right we want to go into the right so i'm going to just move it down so see that was easy i want there to be space between them between the items so i'm going to give some margin between the items let's say a little more than that and then we're gonna go back and go typography we'll make the default color orange again and maybe make the font a little bolder there's that and then for hover and active so when you hover over the text we'll have the text change to this darker orange and the background color change to this light orange and we can add a bar at the bottom i'm not going to set an active color that's if you're on the page but here's a transition duration so we'll set it to like point four or something let's see if that yeah so that's what's gonna happen i think we're gonna need a little padding on that so we'll go seven seven four four kind of ugly there kind of a little too ugly for me so let's go back and change this to be that it changes to blue and the background color when you hover also changes to a light blue how does that look nope let's have the hover color change to this white all right so that's fine so that's the main menu and i'm going to save that so now let's take a look at what happens when we go to different device sizes that looks okay so you're going to need to do this you're going to need to check this stuff yourself so here when we go to i think that was less than 992 so we want it to stack vertically all right so that looks okay and then we can have the logo have a smaller size and the text the site name have a smaller size also okay so that looks okay that's fine and here that's gonna need a little smaller yet for mobile so again we'll make the font size smaller and the logo a little smaller here also okay so there's our mobile check and we have the first row of our menu done now let's let's like i said i wanted to have a top bar so let's go back to header builder here add another row okay and here's our new row i want to be above the other one okay so when you're in this structure you have these here you can click here to delete something or you can click here you can duplicate it you can wrap it in a div or you can rename it so i'm going to call this top header row just for my own sanity to keep track of stuff and i'll call this one main header row okay so now this one i want the background color red to be this orange and the height i don't know let's try 30 maybe a little bigger 35 okay and now we're going to go back and we're going to add another menu okay it put it in this place but i want it under this one and let's pick our top menu we're gonna do the same thing we did before we're gonna go ahead and do the colors this time we want it to be this whitish color the text and we'll make the font size like let's try 14 maybe and we'll make the links uppercase let's go to advanced size and spacing again let's give some margin here between the items we will again give some space here and a little bit of padding to these things and then on our hover when you hover over it i want the color to be orange and the background color to be this really light orange and let's see what that looks like okay so that's okay give it a duration here 0.4 a second [Music] okay now let's go back and let's look at the site let's go our header builder again now we've added this new top menu let's check on the different device sizes okay and that kind of looks okay at all the device sizes so we're good with that so there's our header done save that now let's add a footer so we will go add and we had a header builder but you notice there was no footer builder so we just use a section put that in over here i'm going to name that the footer section and i keep these names in so like here i did top header row kept the word row in just to make it so i'm clear what i'm doing here i don't need it to be this tall okay whatever um i want the background of this section again to be the same light blue i'm going to want the text color to be orange again [Music] now we need to add in our footer copyright so see where it is is under basics well here it is code block and center aligned okay so you notice there's this css in javascript and php and html this applies just to this element so it'll be used whenever this is whereas the style sheet would apply site-wide so if we want css just to go separately we could do that so i'm in my code element here and i'm going to need the code for a copyright so i googled that and grabbed it online copyright here's a simple and then here's php code echo the date year format and then a link to webtng website i give it a class a footer link okay and then click apply and we'll note that this footer link want to be orange and underline when you click on it so i'm going to have to apply a style there so i'm going to go to my style sheet i'm gonna add in my style footer link i set the font size and let's add the css for the footer link and i don't know what color that is let's get the hex code for that save that okay and so let's give that a hover option and we're gonna be what is it text decoration underline okay it's a little tall notice oxygen gives you this ability just to drag do your padding that way okay so there's that and you see why you do it it adjusted it here so i'll just make this all right so there's my header and footer now i want to have some content in there by default and oxygen has this helper called inner content so i add that go to the structure and then place it i want it to be in between the header and footer all right you see it's the hello world there's the hello world text looks good right well it's going all the way out to the edge so what i'm going to do is i'm going to add a section and i'm going to set the the section to be the page width and then i'm going to move this into the section all right so that looks a little better notice i don't have any title or anything like that it's okay we'll add this later but let's just save this now and let's go out to front end of the website and there's our header and footer with our menus okay so that's the base template created okay now i want to build the templates for the post and pages but before that i'm going to take a little side track here a little break and add some code snippets a little bit of customization and for a long time i've used this plugin for that called code snippets it's a really nice plugin that's well maintained and kept up to date but i'm switching over to using this new one called advanced scripts it's pretty reasonably priced and it adds a few more features so i've been switching over to this one but the code snippets i'm going to use are on an article in the web tng website and the link to that site for advanced scripts is in the text version of the post that matches this video on the web tng website all right so i'm going to go and add some code snippets and one of them i'm going to add is you notice how on wordpress here you go the dashboard you can go to themes you can go to menus well i rarely go to themes but i go to the plugins page all the time so i want to add a menu item here to go to plugins all right so but first let's add that clean scripts plugin so i'm going to download and upload that i'll pause the video while i do that okay so now i install this and i enter the license key and let's activate it this is freemius which i'm not a huge fan of but anyway okay so here we are into that interface and like i said the first thing i want to do is add this plugins link so i'll give it a title and plugins link to the toolbar menu and it's going to be php and everywhere so that's all good and now paste in the code for that okay and save and activate it let's go here and notice we now have a plugins link okay if you go to the front end you have that too and let's go look at it so that's working okay the next one i want to add is i want to add a login logout menu item here to this menu and you can do that with a plug-in but i'm going to do it with a code snippet that's just the way i like to roll on this and if you have a plug-in favorite that you use for that then no problems go with the plug-in give this one okay a description paste in my php code for this i found this code snippet online and the link for that is in the text version and basically what we're doing is we're adding a filter to the menu and this is a wordpress filter okay and then so here's my function and i'm saying if the user is logged in then item add an item saying log out this is an automatic link from wordpress to the logout url or if they're not logged in add a link to login so i'm going to save and activate that and let's go to the front end and check that out and there's my login logout menu alright awesome that was easy like i said the code for these is on my website and the accompanying article all right now the next thing i want to do is we need to register a sidebar remember i was saying that there's no sidebar notice that widgets is usually on here but there isn't one there's no sidebar defined so there are no widgets showing so the next thing is we have to declare a sidebar create one and there's a couple of good plugins that do this really easily once by brainstorm force and you'll find the link to that again on the accompanying article here is the code for that so i'm registering a sidebar and normally this is in the theme themes usually have this function in it oxygen disables the theme so there isn't one so we're just adding it back give it the name main sidebar shown on the right side of post in pages and then you can add a before the widget a class of widget before the title class of title that's h2 okay opening and closing tags for that okay so i'm going to save and activate that all right now let's go to appearances and all of a sudden look there are widgets option because we have a sidebar to put them in and this main sidebar is going to show up in oxygen now and we can use it prior to creating that sidebar that there wasn't an option to add a sidebar inside our template but in order for it to show up we have to add a widget and to make it real and so we'll just add say this meta widget so now i think we're ready to go to oxygen templates and we're going to add a new template and this template will be for our post single so i'm going to call this post single template and now we're going to inherit from the base template so that we get our header and footer i'm going to give it a priority of 10 so it's a higher level priority i'm going to click on this single option and do posts okay and publish that and now we get the edit with icon option okay and we want to have it show our post here so let's start and we will add i think we have a section here don't we this is a section so i think we will add let's start with a div in this div we will have our content all right so a little problem here is by default the hello world post doesn't have a featured image and i want to design for that so i'm going to save this let's go back out to wordpress i'm going to go to our hello world edit that and add a featured image and i'll pause the video and upload that okay and so i'll add this as the featured image there and while i'm at it i'm just going to add a little more text in so we have a little more content all right and save that and edit our single post template okay and for this one i want to have two columns so what i'm going to do is add now columns and have two columns this one is i'll make at 30 percent okay and this one automatically adjusts to seventy percent then i'm gonna move this inner content into this one all right and i'm gonna rename this to left content div and i'm going to rename that one to write content div all right so this will hold a sidebar here rename these it's anyway so i want to give them names so it's easier to know what i mean main container div now here i want to start getting the rest of my content in so let's go to wordpress helpers and dynamic data and i want to add title and we're going to move that up over inner content okay hello world and then i want to add also dynamic content featured image and we'll move that up above the heading we're going to rename that to featured image and rename this one to page title all right and then when we're here you notice they have these ids and they don't really help us if we're on the front end and need to style this i think it might be worth giving some of these elements like this that are pretty essential a clearer name all right and this one the heading we're going to call this it's called your headline we're going to call it page title and this one no option to give that one a name all right and then we need to do the post meta here and we need to add our comments section so let's add a div for our post meta we're going to make the width of it 90 and then inside that div we'll add some columns here's that div here let's rename that to post meta div and then we're going to put these columns inside of that div okay let's try dragging them this way there we go all right and how many do we need let's see i think we need we need date we need author and we need comments so let's do three into this one we will add a text and we will delete that text and we're going to go back to our wordpress dynamic data here's date so there's it's got the date and you see it add that shortcode so we'll add publish on and then we have next we're going to add another text box and this one will say [Music] notice it's a little hard to type into there by space and then we want to go add the author so we'll go back to dynamic data and say author okay and then here we will add number of comments and notice that that isn't an option in our dynamic data there is another way to get dynamic data oxygen has a nice helper let's add a text box here and we'll clear that out and notice up here when you're working in a text box there's this formatting toolbar here there's also this option to insert data and here we have post items information about the featured image the author current user the site information archive information and then this advanced php function return value so that's very powerful there but right here they have this comments number option and if you click on that then you fill in what you want it to say for the different values so if there's no comments we want to say no comments if there's one comment we want it to say one comment if there are multiple comments then we use this and then we would like it to be a link and you can insert so that's a good way to do it and that's something to keep in mind about this dynamic data option that they have for the text box now i have another way i want to get the post meta so i'm just going to delete this for now and then we'll come back to it later and add the post meta another way right now let's go to this div that's holding our post meta and we want our vertical alignment centered and let's go to topography and let's make the font size a little smaller okay so that makes the font size smaller and then this one we want the elements horizontal this one we want the elements horizontal this one we want the elements horizontal even there's nothing in there okay so there's that and now let's add the comment input boxes so let's find those here's the comment form and the comment list so i'm going to add the comment form and i'm going to give it some margin there maybe even a little more than that okay so it's under the content and then i want to add the comment list list of comments and there's that one okay and here's this button let's make the text white and the border color orange and the background color orange text color so there's our comment form and i'm going to save that now let's work on getting the sidebar in so i've got the space for it let's go back wordpress sidebars and here's our main sidebar that we created with the code snippet so i add that and it's not i want to take up more space there so i think we're going to need to add some styles to that but we got our sidebar in so let's go to advanced and size and spacing and we'll give this a width of a hundred percent all right so that looks better and now we've got this list bullet there i want to get rid of that but do some other things maybe a lot of padding there so let's get rid of the extra padding if we can and what else let's go to the style sheet and let's add some styles so i put this together i'm just pasting it in here i say i want a list style of none and adjusted the margin and padding and the size of the widget title so let's look at that now i gave it here i gave it a name of right sidebar what did i call this in our structure here go to this div i'm gonna give it a class called right sidebar and my styles applied that's a start let's save this go check it out on the front end okay so this is looking okay we could have maybe a little more padding inside of there and this is a little close-up top to the featured image but otherwise this looks pretty good so this is our first stab at a post single we're going to put a little bit of margin between the featured image and the post title try to add some more padding around here but one thing i want to show you is that anytime we want to add the styles we have to go back into the template there's no editing the style sheet directly so that's a little bit clunky so here we'll give this a [Music] margin okay and then in here our sidebar i'll give that some padding actually let's try what happens if i give it five nope that is not what we want let's go try this style sheet just go right sidebar is that going to do anything for me not really what i want is in this element here inside of there where we have our background color so let's see let's try padding 20 let's make it top and then left and right let's make that 20 pixels and then bottom let's make that 10 again see how that looks okay that's a little bit better we did that already let's go back front end all right that's a little better so there's our post single we still need the comment number added in here we're going to try to grab that code in a minute when we make the archive or get that from i've seen already where has it into the easy posts we can grab that code so let's make the archive for posts go back to the dashboard oxygen templates new call this post archive we're going to inherit from well all right so here's the thing now is i'd like this one to have a sidebar so i don't want to go through the hassle of creating that sidebar again so i'm going to do is i'm going to go install plug-in to duplicate the single and i'll show you how that's worked for me bought this recently but you see it's got three million active installs and that's gonna allow us to let's see i guess we're gonna have to go into the settings and we want to apply this to templates now let's go and there we go so i'm going to copy this the let's trash that one okay so i'm going to copy this to a new draft this i'm going to call post archive template and i've seen sometimes this tool doesn't work in which case you have to use the shortcodes thing where you copy out all the shortcodes okay i'm not going to apply it to single posts instead i'm applying it to we're going to say all archives here and this will have the same template hierarchy of 10. so let's publish that edit with oxygen here's our sidebar but now instead of the featured image the title the post meta and the content and the comments stuff we're gonna get rid of that from the left div so we're deleting up the featured image we're deleting out the title postmediv the inner content comments form the comment and we're going to add this really cool nice element they have oxygen has called easy posts okay and i'll show you why i like that in a minute but first let's see so i've got some presets here of different types and i like the list kind of preset instead of a grid a list with the image on the left so i like the standard kind of list but i want the title and meta to go below the featured image just real quick to show you the well what this easy post has if you've got the query here so it's using the default wp query but you can customize it if you want to set the post type filtering order account and whatnot or you can create a manual query here all right it's got styles so you can style the title the meta the content the read more in the do some responsive options here and then it's got templates and there's the php part and the css part and this is a cool thing that i really like so here we have our template and this is the post meta here the title and the post meta and then it has underneath that the post thumbnail so i'm going to copy that and remove it then i'm going to just go in here and paste it under the featured image and there's an apply code thing voila so that was easy and here's our comment option here remember i said we were gonna get that and so we go into the post meta and here's that code for that i'll expand the editor here here's the code for that okay so i'm gonna grab that and copy it and put it in my code editor so i can use it later when we go back and edit the post single all right so now let's save that and let's go to the front end and we i think we need to go to so here now it's showing that's i think the sample page so that isn't what we want let's go back to oxygen templates this post archive and let's show it also use it for these as well as for all archives hopefully that's going to do what we need bingo okay great and if we had more posts they would show down here it would just keep stacking them there so we have a little extra space at the top here and yeah so there's some extra space here we need to get rid of so that lines up but otherwise this looks good let's see if we click on here we are now in the hello world post so that's good and if we click on this it's got a link to the comment click on that that did not work we want it to go down to here let's go back and see what is this it's linking to hello world and then pound comments so we'll need to add like a bookmark in the page for that so let's figure out how to do that and we'll edit the post single and add our comment meta in there also well let's see before we go in into there let's finish this up and remove that extra space so first let's go back to templates and post archive at it with oxygen okay so there's that extra space here and what happens here if we set this to zero oh how about this one how about our left content div set that to zero okay so i think that took care of that issue save and go back to the front end all right so that took care of that issue so actually what i'm going to do is i'm going to grab this post meta and use it in the post single so let's go back and edit this and grab that post meta bit and it with oxygen [Music] all right and then we go to our template our php template and we're going to grab this post meta block here and just copy that and now let's go back to the admin we're not making any changes go to templates go to single post template add it with oxygen okay inside of here now instead of these divs i'm going to go this outer div and i'm just going to actually delete the columns from inside there delete that all out and inside this div i'm going to add a code block and i'm going to add that post meta that i grabbed from the archive and let's go look at that all right so here on this code block size and spacing let's give it a width of 100 and let's see if we can get that to those items in there all right i'm going to try grabbing the css for this from the post style sheet so hang on to your hat go out to the front end to home and do view page to inspect network sources let's try plug-ins oxygen uploads universal i think this is it and we're looking for post meta i'm gonna guess that's near the end because we just added that there's our css oh wait here's the archive template pretty print that uh here we go okay so i'm gonna grab this and i'm going to go back into style sheet and we're going to the post single style sheet and let's paste in the stuff i got and there's a div here so i'm just going to say div and that seemed to have done it there let's get rid of this get rid of this collapse the editor okay it's not showing author but maybe author doesn't exist in this context yet let's save this and go to the front end all right so there's my post meta the font got pretty small there so i'm going to need to go fix that i should have looked at it a little more carefully after i pasted it in to see what i was doing okay i'm going to just give it a font size of 14 px 14 or should i do 16. let's try 14 and this link to fix the bookmark is pretty easy what you do is you just give it the id instead of the random one you give it comments and then that matches the bookmark in the link to the comments section so i'm just gonna save this and then we can go to the front all right i'm gonna say that's okay so there's our post single and we have our blog archive oh button here is should be orange so let's go and edit that and now we go into this easy posts read more and we want button color orange text color this light blue yes that's good if we want to have a hover we could have text color orange and button color light orange how does that look huh not so great so i think we'd go when you hover we have the text color be swipe how does that look okay all right we'll go with that so we'll save and go back to the front end and here's our post archive and our post single okay so i just want to make a couple more templates i think this will be pretty quick maybe one for pages that you know don't have a featured image say or post meta or comment area so let's do that oxygen templates and i'm going to take the post single and i'm going to create a new draft and this one we'll call it page single and this will be for pages and we will publish that edit it with oxygen all right and then we can now get rid of some things like you don't usually have the post meta on pages so we'll delete that and we don't usually have a featured image on pages so we'll delete that and we don't usually have a comment form [Music] pages so we'll delete that or comment list so we'll delete that okay so that was pretty easy we'll save that now if we wanted to we could do the same thing here again this time you know like if we didn't want to have a sidebar we could make a full page layout template and we could make one you know without a header and footer or something like that for landing pages but i don't think we need to do that here let's exit out now we'll go to the front end there's the sample page and i think we got spacing at the top unfortunately so let's go back and get that taken care of i mean this is a process you go through i guess i think i could probably have uh the page open in another frame maybe so let's see here what we've got that may do it okay so that looks pretty good all right now i've gotten about a contact page here you notice that it doesn't exist we should probably create a 404 page would be something that we would create but i think that if we go here we just create a create a contact us and we add a contact form in there and we had an about and let's see i think we had one called toolbox all right so we have our placeholder pages see so there seems problematic so i need to work on our page template there let's go back interesting that looks good here but not on the front end let's see so let's go to our structure our main content i believe we had the main content was 100 so then on our columns this is 70 and that's 30 and let's go to the sample and just check this on different device sizes so that's good all right so i'm gonna save that let's go to the front again i'm going to keep that open there there that's better okay one thing i wanted to point out really quickly is let's look at the page in the editor and down here even though we've assigned a single page template you can choose different templates here and so you could create one say for a landing page or they had some special content so there is flexibility just because you assign a template doesn't mean you can't override it and manually assign a different one on a per page basis so there's our basic framework this is kind of about where you'd be if you installed a theme and went through the customizer so one last thing i want to do is what i did do on this new site i created i got kind of excited and i created a new post and i added some content let's add a featured image i'm just going to use this one again and let's embed a video i'll grab one of my videos here and copy the embed code and let's embed that in okay and update that now let's go view the post so that looks pretty good okay and now let's try putting some other something else here in the sidebar some other content so we'll add a text widget i'll upload something and i'll just pause the video while i upload it okay and let's go check that out look at that again in the inspector here's a problem here see how that overflowed from the container let's take a look here see that's giving us a white space there so apparently that's a known issue and you need to add some code so let's see i guess i can go back into or i'm still in here go to stylesheets and let's see if we can add some code to fix that so i've gotten some code there are a couple of articles on this and i'll have links to them in the text version but basically these are some things that your theme would probably have in it and so you're going to have to add that yourself because you don't have a theme you might have to do a little googling or no little css to get that done so let me get that and we'll add it and we'll paste it in there and save it let's go out to the admin and let's go to oxygen settings and regenerate the css here okay now let's take a look at this okay so we added some code to make the image more responsive some of these testing things like finding the comment link issue and things like this image so i just want to give a shout out to a couple of members in the dynamic wordpress group sridhar katakam and mohammed akram who were very kind and poked around the site and found a few things like the comments link not going to the comments area which i fixed and the issue with the white space and images not being set to auto resize there so as i said in the beginning i do have another post and video where i go in to more depth on the pros and cons of using oxygen having followed along in this process i think you'll be able to appreciate what i'm saying in that video but i want to say my overall impression of oxygen is that it's a very powerful tool there's a great deal of flexibility you have a lot of control but just like with any power tool there's also a lot of responsibility but you have to go through and do the checks and testing that a theme developer would normally do to make sure you don't end up with issues like we had with the sidebar with this image so anyway that's my walkthrough of creating the basic site with oxygen there's a text version available on the web tng website that includes the links to the resources that were mentioned in the video along with other walkthroughs and tutorials hope you found this video useful thank you for watching

Channel: David McCan

Views: 7,853

Keywords: oxygen builder tutorial, oxygen builder templates, oxygen builder review, oxygen for wordpress, oxygen for wordpress review, building a site with oxygen, learning oxygen for wordpress, how to build a website with oxygen, wordpress theme builder, oxygen builder, page builder, site builder, theme builder, how to build a website, oxygen tutorials, oxygen builder tutorials, how to create a sidebar in oxygen, webtng

Id: ZYfeHIMFOVs

Length: 76min 52sec (4612 seconds)

Published: Tue Jan 12 2021