GeneratePress Developer Child Theme for WordPress Overview

hello everybody um my name is addison hall and i have been a website designer and developer for a little over 20 years now and wordpress is my latest current platform of choice and generatepress is the theme that i've been using and i also have my own child theme um that i've kind of developed over the years that i've been using it and when i when i uh first decided to start using generatepress when i was looking for a theme that i wanted to use um i knew i wanted a framework i wanted something that had all the basic parts and pieces menus footers headings things like that and then i could take it and make it my own and you see i follow uh tom osborne um and get all his updates regenerate press generate blocks wp show posts all that but this is my theme child theme sorry which owes very very much to um what tom has done with generatepress and just the amazing theme that it is with all the hooks with all the features uh with the uh he invites you to customize it and to make it your own and plus he gives lots of great functions that you can piggyback on and and add your own stuff so i um i i made this and i've shared it on github and i hope other people find it useful but i wanted to make this uh quick video i say quick it's probably going to be a little bit long um to to go through all the parts and pieces that i've included nothing in great detail but just to get people familiar with you know hey here's what i've added what i found useful you know get in there and make it your own steal stuff from it whatever you want to do but i hope other people will find it useful and uh and yeah so here we go so here is my development theme i'm running on larragon laragon i guess is how you say it um i'm on windows um and it's certainly nothing special i've just got some stuff dropped in that i use to check things um here is the dashboard in the admin which you know pretty standard um so what i thought i'd do is go through um as an editor first because this is one of the big things that i do for my clients i i'm logged in as an administrator right now but if i log out i'm gonna get back in here as an editor and you'll see it's greatly reduced as far as what you see and i wanted to strip away all the unnecessary stuff so they can only have access uh to the necessary items then they they might be editing so we have posts we have the media section we have pages of course my projects is just a custom post type i threw in to play with things there's really nothing there menu so now there's no appearances menu um you have menus and you have widgets and then you have your profile so there's no comments there's no settings no appearance section anything like that so again the bare minimum so i guess what i'll do is just go through the parts of the theme so here i am in vs code and here is generate press child theme and it really really comes down to this functions file and you'll find most everything there at least a link to it there's a lot of stuff going on in the ink folder on the includes but you've got all your basic stuff um i've set up a constant to have my own version number that can be changed globally i don't like showing the admin bar that's my personal preference i encourage my editors to my clients to have the admin open in one tab and the live site open in another totally up to you um stuff where i'm on cueing um some different styles so i have um in base css i have and this is pulled from something that already exists i i did not create all this so yeah if you go to basecss.com you'll see it it's one of the early kind of pale windish um css frameworks i guess that just had some utility classes that i thought were nice so i've customized it a little bit and added my own things um it it has the um sorry the responsive classes kind of follow what generatepress i did initially with unsemantic which was the css framework that it used to use uh previously used it doesn't anymore um but so you know this may change in the future but for now you have mobile tablet and desktop okay if uh you're wanting to affect only those screen sizes for different things and mainly like i mainly use it for these margin and padding classes but you have the regular ones here that aren't there aren't any um responsive break points that constrain these but further down and here's some flex utilities uh yeah so here we have where you get responsive margin mobile sizes only tablet margins and desktop and then same for padding yeah gutenberg is where i put all of my styles that i need to effect in the gutenberg editor and as i have it set up it also shows up on the public side of the site the live portion of the site so it's kind of a juggling act but if you want it to only affect the editor i mean just comment it out and don't cue it up for the public side of the site because for the editor it's queued up right here i also add a gpc class generatepress child class to the body throughout the site so if i were to view the source code let's see where's my body classes yeah so oh wait and i'm probably just not saying there it is yeah right there so that just lets me target or override stuff pretty easily if um you know there's a class and a plug-in or something that i need to um override that i need to make you know my styles more specific i'm also adding uh has js through javascript jquery and yes i know i need to dis jquery and all that and i probably will at some point but there's so many plugins that still rely on it gravity forms being one of them as far as i know um so i just haven't made that leap yet and yeah if i do the inspector you'll see yeah here's that has js so you know great for uh applying styles only once javascript's been loaded i do like short codes in my widgets i like excerpts in my pages and here's all the other stuff so i have all these includes that that i'm going to go through these files one by one but you know i wanted to do it this way so that like you know if i'm not doing anything specific with uh generate blocks let's say maybe this site doesn't require it you know what just comment it out and it won't even be included uh so i wanted it to be very modular is that right component based um but yeah so it pulls from yeah i'm going to save that everything in this ink folder so we looked at the admin css no no we didn't um well we'll we'll get to that i'm sorry there's a lot of stuff and i'm just jumping around so yeah i'll just go through one by one so advanced custom fields love advanced custom fields i use it for everything it's just some stuff that i find myself always using setting up a settings page in wordpress if i'm including google maps and i need to include the api key and you'll notice for a lot of these things where there's a hook i'll have the function defined but maybe if i'm not using it i'll just comment out the hook so if i were going to use this i would uncomment the hook put in my api key here and certainly make sure that it's uncommented or available in functions.php and go to town on it here's where um advanced custom fields lets you create your own custom gutenberg blocks which is awesome great great stuff um so here i have one a kind of a generic one for staff and i even have uh the template is available in under uh let's say where is it template parts and i have one for blocks and one for short codes and here's the staff and i like to keep the css separate so here's where it calls the css and right now it's going to call the css globally because what i normally do is is i always have auto-optimize the plug-in installed on my sites and i set it to concatenate all of the css and javascript and roll it up into one file so i'm not going to call this only when this block is available but you can do that there's a way to set that up this is just my preference uh so that is that moving on i did create a breadcrumb and i reference here where i got the code for it and i tweaked it a little bit just for my preferences and um you can see it in action right here it's just a simple really simple breadcrumb yeah and it has some customization options uh what the delimiter between the crumbs is you know mine's a little arrow a little triangle um what the classes are so you know certainly go and make it your own colors this is uh i love this so tom who's born osborne who's born the creator of generatepress has got all these great functions happening on the backend and you can search the forums and documentation and here you see i've got where he references how to add uh to the customizer color palettes but you can also add to the gutenberg color palettes in this way or actually this is just my color array where i define my colors and then i roll it through both this function for my custom color palettes for the customizer and then for the gutenberg color palettes so you define your colors here and it will add them all there and while i'm talking about this let's also look at styles so here i also reference those colors and if we take a peek at the source code again you'll see that this little bit has been added this base inline css i haven't figured out how to roll this into you know tom has a feature in the theme that takes the custom styles you apply to your theme through the customizer and it writes them to an external style sheet i haven't figured that one out yet but i'd like to but anyway so it adds these to the as inline styles in the header so you get your colors so all these colors that you define become css custom properties or variables whatever you want to call them and it also adds the um the colors for you to use in your styling so you get these custom classes both in the color classes and applied to buttons um our link colors and also background colors so define white which is boring but it's you know i have light gray and dark gray as well but uh just looking at white it defines the color it also defines the background color and i get this custom property so all that's created automatically for you when you include your colors in colors.php i also have this cpt output custom which stands for custom post type output and you know this might apply to not just custom post types but in the beginning that's what i named it and i just haven't changed it and in saying that a lot of these naming conventions might not be the best choices but that's what they ended up being so that's what they are uh again here i've commented out the actual hook but the function is uh well you know i'm not going to go through these specifically but basically it lets me override the content uh you use the content filter to say hey whenever we're trying to view this custom post type use my template instead whether we're looking at an archive or the single uh view of that post type post or entry or article whatever you want to call it and those currently live in partials the partials folder and these are old they're just for example you know i wouldn't imagine you using them in any live situation or production or development whatever so certainly change them to be what you need them to be but here we have sample custom post type uh we have sample taxonomy you know a custom taxonomy that you've created uh custom sidebar layout so this is just stuff that um and really that might be a generate press function that would probably be better in generatepressed.php but it's here for now uh in a custom sort order for a custom post type if i want to change the default way that it's sorted so these are just some things here's some even menu stuff that have to do with custom post types oh that's why okay so if this were a custom post type where i wanted a special sidebar and now you can do this um actually in the elements portion of generatepress anyway moving on i don't mean to get bogged down this you no longer need because you can do it in the elements module same as some of this other stuff but it used to be how to override some of the way the stuff is output um but you can do that through like say you can change your sidebar output you can uh change your footer or i think even whether your widgets in the footer display you can control that through elements you know again tom's done a great job adding that stuff directly in wordpress dashboard widgets so i like to give my clients a list of their short codes that i've created for them so they have a reference to that with any notes they need although this is quickly being replaced by the advanced custom fields the custom gutenberg blocks they let you do and here's where i include i have a vimeo account that's i think give me a plus pro something like that i pay for it a little bit and i can create password protected collections of videos for my clients where it's much like this it's me talking through how to update their site and um i include a link and password here and i tell them you know whenever you need to update the site whether it's you know during the work day or it's you know 12 a.m and you're sipping wine in your underwear at your desk in your bedroom and you need to make some changes you can find the link to your tutorials and your password here um [Music] and any other dashboard widgets you might find useful fonts is well it's all of the options for adding fonts to wordpress um tom has given by default generatepress only shows um a select grouping of google fonts that you can choose from but he gives you the option through this hook to show all of the fonts at least that he has included you know it doesn't pull dynamically from google fonts so you still don't get all of them uh if you need some fonts from google fonts that aren't showing up that's what this is for um and you have a place here where you can completely get rid of the google fonts in the markup although now i think if you don't include any uh google fonts if you just leave if you either choose fonts that are imported well with this function this is how i include my type kit or adobe fonts or lines.com any other source you can do that here um this one is to do just in case you need to remove for some for some reason the google font reference is still showing up including like open sans or something you can ditch it here and force it not to show but i'm pretty sure it's not necessary anymore because tom has it so that it won't show up if no google fonts are being called from the customizer the only drawback with this one where yeah where you can include typekit fonts.com things like that is that there's no cascade you can't say sans serif here at least not that i'm aware of because this is an array where you must include the font name it's not an actual uh way to include all of the the css i suppose whereas this at least gives you this cascade where you can include you know is this a sans serif is this a serif or a handwriting or whatever but anyway it's still you know it's there i'm sure probably support will be added for that in the future um generate blocks so love generate box it's really covered that ground that page builders were filling but in a much more native and lightweight method and it's great but you know perhaps generatepress doesn't have the default settings that you like well of course tom's given us a way to override that and so what i've done is by default i at least want my buttons to be consistent so this goes through and looks at the settings from the customizer in generatepress and it applies them to the styling of the buttons in generate blocks awesome okay and you can also do excuse me you can also look at the other settings you can uncomment this i'll do it real quick we can peek and come to your i think you can do it anywhere in the admin and view source new not anywhere in the admin okay so let's look at i think maybe it's pages where it's actually called yeah i don't know why i'm getting those warnings that's another issue altogether here we go okay so you can look at the values of the default settings and i'm not going to go through what all these are but you know if you want to know what the yeah font heading family 2 is and you want to change that you can use this to insert the value in the default settings for generate press i'm generating blocks i'm sorry and if you need to look at that i've included a forum link but it goes to a search and so that is probably going to change but i encourage you to look up this file so it's wp i think i can open it here yeah plugins generate blogs includes and defaults where's my defaults there's defaults here we go so you can use these and fill in whatever values you want so if again i'm not going to show you exactly how to do this you can look at what i've done here it's grabbing object values i think that's the right term and replacing them with uh what i'm digging up from generate press so i'm pulling these settings and applying them to these settings yeah yeah anyway very cool awesome stuff um and again tom has done a fabulous job in opening up these options uh generate press oh let me go back recommend that uh generate press is anything i want to customize the nra press and some of this has been yeah so uh you know do you want to get beta versions of generatepress excuse me um i like to rearrange that the the logo so that the header widgets come before the logo and the logo and then the site title and tagline but you can you know move these around as you wish to get the effect you want get the outcome you want um there was also a way to control what role the generate press options were shown to so if i didn't want them shown to an editor or contributor or anything like that i could do it i could look up what capabilities a role had in wordpress and determine let's say editors can't see anything that generate press offers i found out i don't want that anymore but you know it's still there if you need it i'd rather do it through this so i can control say on posts i don't want to allow my users or my editors to be able to control how what sort of sidebar there is or whether or not the the title is hidden or anything like that so i'm simply saying uh when a post is being shown within the editor or you're editing a post don't show any of the generate press meta boxes yeah yeah very good stuff helper functions is just for any additional functions that you may need just to keep them in a separate place neat and tidy for me again my preference uh this is just something that helps build um if i'm looping through uh items in a custom post type or something and i want to apply animation classes so that they pop in one after another uh this lets me add these different classes and that's something i'll get into later custom image sizes if you want them i have square small and square medium that i like to add some optimizations and you can do a lot of this through all optimize now you can disable the emoji stuff that's added you can remove the diversion parameters from your your asset your style assets and your script assets um but you can do it programmatically here as well if you if you want um short codes so i have some standard short codes that i used to use i don't use short codes much anymore um sometimes i do if you know the need arises but this may not be the best way i used to keep them all in one file and they can get kind of big and i do have places where i've called out you know template parts these are all just samples they don't actually work because they have to be built out in advanced custom fields and i'm trying to include notes about that kind of stuff but they're examples so if you want to look at them and you know build your own and see what i've done uh knock yourself out uh again this was that styles uh script that i tried to write so that i could pull in my own styles created here's some custom button styles like outlines and it will pull the colors from the button colors so if you've made red buttons on your site this will automatically create a class for you that is a outline button that is outlined in red so yeah so you can expand this and add some other stuff if you want to and i don't have a super good understanding of the way tom has written all this stuff i really ought to ask him for some help but um yeah it is what it is right now and it uh yeah it entirely writes to inline styles that's right it does not write to an external style sheet it's all in line in the the heading of your page but again without optimize you can set it to pull all this stuff and then write it to an external style sheet all in one can concatenate everything um i did i do have a i built a small submenu widget that's i think pretty cool um i don't have an example of it on hand basically what it does is if you have sub items under say sample page you can drop in a widget that will only show those sub items as a as a you know section menu when you're under sample page um that used to be a pretty big i guess user interface convention now possibly not so much anymore but i still have it there in case i want to use it it's not perfect um but it's there so if you need it it can be pretty handy here's the reference to where i got the uh the help in creating it uh so here is the actual you know stuff for the widget itself and it uses this file to do its thing to output the widget itself users anytime i want to hide or show something specifically to users is where i i do what i need to do here so for example with the editors only seeing certain parts uh within wordpress here's why i've removed certain pages and added certain pages of my own here's the you know that custom menus page and custom widgets page i've also removed some items from the admin bar uh comments and customize i don't want them to be able to do that if they're an editor or a shop manager and admin scripts and styles here's where i throw in that role editor see yes yeah here it is yeah so it throws that in and all it does is hide the customizer button that shows up on the menu page this page i think there's a little you know edit menus in the customizer and up here next to widgets there's normally and i think edit widgets in the customizer i i you know didn't want editors accessing the customizer in any way um widgets right now all it does is it allows me to hide certain widgets again i want to get rid of as much unnecessary stuff as i can to just clean house keep things tidy for my editors as much as i can and then commerce nothing there i do use woocommerce for some stuff for some ecommerce sites but um not often if you do need to do any customization and there's you know hooks and things i can apply this is really just a place where i can keep it all separate um but woocommerce goes beyond that and you can you know have your own templates folder that overrides theirs it's kind of like having a child theme within a child theme but that's for a different uh video uh and then wp show posts which another plug-in i love tom's updated recently and now we have carousels and cards and other goodies but i think this still applies he has these uh hooks where you can disable links like maybe you just want a list of things and you don't want it to link to anything you know a single view of that thing you know you have an archive view and you have a single view you just want the archive view you know maybe you have a list of team members which is a picture and a name and that's it uh you can use this with this id number to target which of your uh you know wp show posts outputs that you're using do i have wpl anyway and you can affect it here and it'll remove all the link stuff and this was something much more involved and possibly unnecessary that i built that really removed all the links for authors for the dates and again using the id or actually the actual id applied to the the group in the output and it used uh well php xml the domex path i'm not a super duper php developer so this took some doing and i'm surprised i had the patience but yeah that helped remove all that stuff and it might still be handy to some people i haven't used in a while um and then i have my javascript file which right now it just has some animation stuff that i use for a lot of my clients like the fancy stuff where like you know you you scroll down a page and elements fade in they fade in from the right from the left things like that so i had to add some javascript to so these elements were hidden to begin with and then i have a an element checker to see when it scrolled into view and it applies some other classes to make them fade in so that that's all this is right now this might be where i apply my google maps stuff or you know i i don't know anything you need um we talked about the partials talked about the template parts talked about the functions i guess you know the readme has the stuff you see on github there is an affinity designer file that has the screenshot so you can you know change this certainly whatever you want you might want your client logo here or something like that styles is the last one i haven't included there's no sas there's no post css anything like that no compilers no gulp no webpack um you can certainly set this up yourself to do it however you like honestly i just i've gotten to where i just mostly write straight up css i'm trying to use the newer stuff like the custom properties variables again whatever you want to call them and there's some empty spaces in here and again this may not be the most optimal naming for these sections it's just how it turned out when i started doing it and i've become accustomed to it um it just begins with some basic things that i'm already using like my embed containers uh here's the the breadcrumb stuff uh the sub menu widget uh and the animation stuff this preload and uh you know has js prep animation so it shows the stuff when it when it needs to um and then some of the animation stuff and i just got this off of anamista yeah and you can certainly go in here and tweak you know the starting points and how fast they are as you like but that is mostly it that's a big broad bird's eye view hopefully i think i'd like to go into more detail in some of these other sections and how i've used them and why and kind of what they do maybe even show some other things uh like how i build out you know i don't know like the the staff uh block in advanced custom fields but uh yeah i hope some other people find this useful check out generatepress generate blocks they're very cool thomas bourne's a great guy great developer really helpful to the community there's a great generation generate press community um uh check them out on facebook there's a great group that uh answers lots of questions as well as the forum but uh yeah so try it out feel free to let me know about issues or pull requests or anything else and have fun developing

Channel: Addison Hall Design

Views: 1,398

Keywords: colour, colours, generate, press, word, gutenburg

Id: sDia_U0fNyU

Length: 35min 7sec (2107 seconds)

Published: Wed Nov 04 2020