Building my new website with GeneratePress | Part 2: The Setup

all right so i went over my new design in the previous video and now it's time it's still not quite to the fun stuff yet um i'm going to keep these in smaller chunks so now i was going to go through just how i set up uh wordpress and generate press more specifically i guess for my projects and i'm going to do the same with my website so again this is my design are kind of the starting point of my design off going for my inspiration for these uh the grid-based massimo vignelli type designs kind of mashed up with uh my love for old 80s print ads the big headlines um big both headlines things like that and using the colors from my funky old wallpaper in my office uh to kind of uh as an inspiration for the colors that i'm gonna use my website throughout so yeah so this is just going through and doing the uh the wordpress setup so my local development is all done through laragon laragon you do that lara i don't even know the web address laragon.org yeah yeah it's free it's great um i've had nothing but good luck with it uh and i already have it set up so what i do is i have actually i'm right clicking on it this is the little button for laragon so quick app and you can spin up a wordpress site really easily but you can also clone sites so i have my child theme development in here and this is what i use to load up on github so i can just clone that and you know automatically get all the plugins and things that i use um and i have to do some updates because it's kind of old but the child theme can be found on github under addison hall and generatepress and you know you can just download it or if you are savvy and get and can do all the command line stuff have at it you know have fun um yeah so this is uh the back end uh all my stuff's already installed and i'm sorry if i should have gone through that maybe that's a different video but um i actually already had begun a sort of quasi print ad inspired big headline site but it just was never really uh doing it for me so i've well scrapped it as far as what i'm gonna do but it's some of it's here so but i need to go back through the setup so the first thing i need to do is my colors yeah let's do colors first so i like to add my colors see so this is visual studio code and i'm in my child theme folder and that the ink folder has lots of uh stuff in it there you go and all of these files are included in the functions file here they are and i can comment out things that i'm not going to use uh let's see yeah and there's the colors so let's look here colors yeah and it just out of the box i have white light gray dark gray and black we are going to include i might keep those grays but let's see where's my design so get down here infinity designer and yeah so i'm just gonna snag these come over here and i'll drop them in after the light gray and i'll just call this i always have trouble naming light tan i don't know and you can do things like the slug you can do like since this is addison hall design i can prefix it with ahd um but you don't have to it's you know i guess that's a personal preference kind of thing this red color burgundy color whatever it is um naming something i always have trouble with class names do i call this burgundy i don't even know how to spell burgundy is that right i guess it doesn't matter burgundy this is the name that shows up in wordpress and this is the slug name so my child theme and in and i've seen in development where this is going to be something cool is coming for color management and i believe font management in the newest version of generatepress um i'll probably be able to phase this stuff out uh right now it this automatically once i fill this in it generates all the color palettes and css classes and um the the custom properties and css variables basically that i can plug in throughout my styles but i believe all that's coming in built in which is really awesome so now my blue call this navy it's kind of navy and the last one this green does that need to be like a hunter green uh yeah i think we call it i don't know what hunter green is but it feels like a hunter green what if these are default uh colors in css i don't know anyway okay so there are my colors and so now i just open chrome oops so now if i go to the customizer these will also show up in uh generate blocks as you're making your blocks these will show up as the color palette you can choose from excuse me come on customizer things always tend to run slow when i have uh what am i running obs the screen recording stuff so now colors for example i can change the background color yeah they're all my colors i cream or why's it not changing on here oh i must have it covered up with a content area but yeah and and this so this video is not to design necessarily but um there we go yeah yep go ahead and say that uh okay so there are my colors and now i need fonts now files are going to be a little more complicated because i typically use google fonts whenever possible or adobe fonts so i need to basically get this first because i think what i'm going to do ultimately is i'm going to buy a web license for dolly bowl directly from the foundry underwear so i can load it directly instead of i don't know i guess this is good enough um so one's gonna be type kit one's gonna be i'm gonna have to actually put the fonts in myself which i don't do that very often at all so i always have to remind myself how to do it so we're all in this together i'm going to reveal how ignorant i am because i don't do these things all the time so my functions file i want to uncue these fonts so i'm going to duplicate this line we're going to call this gpc adobe fonts and we're not pulling locally so i can get rid of this i'm gonna fill this line in paste that right in there okay so that should include my reference to typekit adobe fonts whatever and this gpc version is yeah i have my own version up here it's a global global variable is that how you say that it's not really global variable it's constant i don't remember uh but anyway so i can change the version number all over the place so now i need to include the fonts so that is done in my ink folder and fonts so there's another video where i kind of go through what all this stuff is um show all the google fonts yep remove google font css reference nope don't care for that and that's for uh actually i may do that because i'm not going to be using any google fonts yeah so if you're using all uh typekit fonts or your custom fonts you can tell generate press don't reference google fonts at all okay here we go here's my type kit line so here this is for adding custom google fonts like these because all the google fonts aren't necessarily in uh generate press they may be in the next version but the current one does not do that so you can you can add your own if they don't appear so sorry i'm jumping around too much so i'm going to uncomment this filter i'll leave that in there for now okay so i need to go back find out i only included dolly bold i let's edit project the dolly bold dolly new okay so also some of this optimization like uh okay there are no open type features so i can leave that out i do tend to do the language subsetting and this is kind of optimizes the fonts you're going to be pulling so it doesn't pull the characters needed for all these different languages if i'm only going to have english for now which i am so we're just going to pull english i'm going to save so here dahlin u okay so jump back over here darling new the only drawback of this method is that i can't include a fallback i can only include so it'll only have this one font name and that's okay for now but that might be another reason why i buy a license and post my fonts locally all of them yeah so let's see so now i think this will work go back to my customizer i'll have to refresh i'm gonna see if we can change this headline to dolly bold instead of uh oh did i include oh yeah and i can't include the weights either so here you include you know which variants and weights you want to include for this i'll just have to tell it golly bold and that's okay oh sorry okay typography headings okay heading one i'm just gonna type in dolly dolly new okay we don't have a normal but it might load bold anyway there we go we're gonna go to tell it bold because it is bold and oh i've got some custom kerning or tracking rather on that okay so that works um i don't believe it's gonna show up i'm gonna go ahead and publish that and let me find in the styles where not screenshot added that custom yeah so that headline tv headline why did i do it like that letter spacing i don't know why i didn't do that and generate blogs i'm just gonna scrap all that because i'm not gonna use it save go back okay let's close out of this and let's see if we can make the font show up in the editor so i'm going to go to pages home okay uh and again typekit doing this is way easier to me than adding in your own custom fonts i'm kind of dreading that because i'll probably have to google how to do it i don't remember yeah see yeah here's uh caslon which is a google font so it's showing up okay so let's see i think it's as easy as now we need to do it down here as well in the editor scripts maybe let's see i'm probably wrong and i wonder if i need to is it okay to leave it so this is like the identifier that wordpress uses so you can [Music] do things to these scripts you can hide them or remove them uh using these i call them references i don't know uh just to be safe tpc admin adobe fonts um maybe i should call it admin editor anyway inside tracked okay let's see what that does and refresh i only change the h1 heading font family cross my fingers hey that did it okay so it knows that it's okay okay that's good cool and let's see what happened here yep all right okay now let's see if we can get uh grey cliff in that okay that was oh come on yeah okay so we've got dolly bold and we have grey cliff so i'm only going to include what now the bold and demi bowl give me gold i use on these others that's medium i don't know i can't i remember thinking there wasn't really enough contrast but i like the boulder weights um i guess i can figure that out i can go ahead and include more this extra ball feels a little bit too bold we can go ahead we'll include more of them okay i've done this before and i should have pulled up a reference but we're gonna do it from scratch okay so i think i wonder if i'll have a style sheet just for fonts to be included so here's i put them all in a fonts folder in the child team but in my css and i have base and i have gutenberg i wonder if ought to have a fonts css so i can include that separately if that would just be better housekeeping let's try that and i can always uh you know i know for performance people you know the kind of the thing is to wrap up all your style sheets into one file so there's only one request for those assets um i had thought that http 2 protocol would fix that where it didn't really matter but regardless if we need to uh concatenate everything into one file i'll use auto optimize great plugin so cool we'll do that okay i am gonna have to google this i what open chrome again good grief sorry uh let's see include custom fonts in css i had a client joke with me one time they had another friend in web development who said that programmers are just people that can google really good that's that's about right okay font face well let's see here and i i do do that a lot unfortunately so font face we have to create fine we give it a font family name oh yeah we have to do it for every single one we you know what i'm just gonna do this and i hope you feel like you can do that as well i will call this great cliff now if i remember right you'll do each of these font families no no yeah okay oh wait yeah we're not going to include them all that would be a pain in the butt can i do that so what do we have we have let's say this is bold and it is normal and we're going to include oh geez what would uh i think it would be wp content yeah themes child fonts i don't remember the order i guess we'll do it like this okay and then i'm gonna i'm just gonna repeat that i know this is so sad in my head i'm thinking professional developers don't do this they know all this or they have some kind of shortcut to do it all wolf do i need to put wolf sure we'll try that and this will be waff too okay first let's see if that works okay so i have my font references now go back to my functions file and let's include i'm gonna do this one custom fonts okay css fonts css and i also need to include it in the admin admin custom fonts i think that's it okay one more thing i need to go over here and oh crap what i call it graycliff just with a capital g okay i think because i think that's what i have to do great cliff all right moment of truth okay i know that's just bold uh appearance customize it's not so bad once you get it down well if this works okay typography body okay not caslin great cliff see what happens man would you look at that all right so it says it's normal so we want to add oh i'll add oh here we go let's add let's go ahead and add when i say demi bowl ah i don't remember what i say demi bold and medium maybe yes okay demi bold and medium jimmy bold me so now font weight maybe i need to do it maybe it's better to do it by the numbers oh and what would timmy ball be it would it would be 600 okay that's why i'm not noticing enough contrast okay and 500 so so if bold is 700 which it typically is i'm going by the the numbers demi bold should be 600 medium should be 500 so let's add medium [Music] just one cursor please 500. okay we'll try like that and then we'll do the obliques for each one of these jimmy bold oblique is that simple as that i think so spell it right yeah call that italic yeah so it's got a you it can be all the same font family name because they are but we're defining what the different weights and styles are uh i i think that's right it's amazing what i take for granted italic okay all right so now let's well let's go and publish and refresh so there are new fonts show up excuse me yeah i often i know there's a name for it impostor syndrome like i often feel like i should know all this stuff and uh i just don't i guess there's some stuff that i do have in my head that i don't have to look up i just know it oh there we go it just kind of worked in it um but there are so many things that i just i i can't i have to look them up all the time i think that's normal as long as you get the job done and you you know know somewhat what you're doing when you implement something you're not just flying by the seat of your pants all the time okay so here's where they don't really have a 400 weight 500. but that okay so that should be so let's see what happens when i change it to 600 it gets a little bit bolder 700 yep 800 nothing happens okay so let's try let's just leave it on the 500 maybe that's maybe that's what i use publish and [Music] back to my headings so i want the h1 to be dolly these okay so i need so i have a sample a lot of times i put in a sample topography page with all the headings that's not yet that is some of this stuff yeah i've used these for different videos and i don't remember what they are i will get rid of that breadcrumb oh look at there okay so there's this color on color that's beautiful isn't it um okay well let's do this uh i do want to let's see fill rama is one of my favorite greek or filler tech sites yeah oh you know what no no i want star wars yeah okay so i'll copy a bit of this text and i'm gonna go ahead and go make a page this is getting a little bit more into the styling like i really just wanted this video to be more about setup and getting those assets in there to be used uh let's see oh i already forgot what i was doing let's change the sample page into just a straight up typography page some dummy text so i can have just a nice big long block can i yep delete boom all right paste all right so got that's an h2 that's an h3 okay give me refresh i want to put it in it's h3 it's been an h4 that's probably about as far as we'll go why isn't h3 so much smaller i haven't spent something i did okay update that's not i didn't h3 h4 okay back to the customizer where's my sample page love it okay um excuse me appearance customize okay there i'm gonna switch the page back to white uh just have a blank canvas yeah colors body whoa and i just do colors body white nope colors content and white okay better excuse me well um yeah okay that's a pretty good overall font size i think typography okay i'm gonna have narrower text columns so maybe um i like the font to be kind of big to be honest because most people well i know we we tend to use phones quite a bit now scroll smaller screens are in play more often than i think about it we as web designers have to try harder to design for mobile first i'm not even doing that right now myself you know what let's uh okay so now let's look at the headings okay so dolly new hitting one so that can inherit let's go to 700. that's a decent contrast it's even a decent size that is not a decent size that needs to and there are you know i guess a lot of people think in terms myself included um when you're creating your heading sizes and again i really shouldn't be getting into this this more design but i'm almost done um we'll get into more of this stuff when i actually dive into the i guess the overall design set up the colors and the grid and all that kind of jazz and then you know we'll take it step by step but you don't have to strictly go by size when setting up your heading structure for your site and and some of that comes into the overall design um the elements of typographic style great book really um i'll call it nerdy but still a great book great resource goes into lots of different great ways of developing headings and in the examples are more bookish at least in the copy i have i don't know what the latest edition shows um but you know you have uh it'd be interesting and challenging to set up your heading structure with all the same font size you just do it by you know maybe it's you know maybe my heading level three is all caps and then you know my heading level 4 is the same size but upper and lower case so you get an impression that this is over this in terms of hierarchy but anyway i'll address that later so right now that's 24 we're gonna make 83 is 24. we're gonna make this 22. see you really can't that and that is clear but this and this is not anyway i'll do this next time i'm gonna publish and kind of finish my cleanup i know that still i didn't do it that way okay let's set this to inherit oh because i had uh caslon as the can't type in here yeah okay that's what i want now i've got a primary navigation again i'm going to inherit i can't type that for some reason okay that should pick up on yep i want that to be bold too we'll play with that some more okay i think that's the basics that so now i have kind of all the pieces in place where i can come in now and really tinker with the design so it was really just colors and fonts i suppose um yeah i'll leave it there i don't want to make this too long yeah so next time we'll go over i'll go through actually applying kind of the design that i have here so really it'll focus on how do we apply these colors and i got some a good example from the facebook community for generatepress um something i i tend to make things more complicated it was nice and easy sorry excuse me i need a glass of water uh yeah so again all we did was we added our custom fonts uh we added or our adobe fonts or typekit font whatever dolly bold uh we had to add references both to typekit here and here in our in our functions php so we're calling our scripts and styles there's our adobe fonts here's our custom fonts and we had to do it again for the admin so that our stuff would show up in the editor we want that makes for a nice editing experience and we also added our colors close these up yeah so this is our color palette and this kind of wraps up all the colors both in the customizer and in generate blocks and in just the standard wordpress editor uh through some various functions that i've dug up in different places and uh yeah so thanks for following along uh i hope i'm not just rambling uh that we're all learning something together uh like subscribe all the typical youtube stuff and i'll try to post the next video uh in the next few days where we actually dig into the design we get into some we get into some fun stuff uh not that this stuff isn't fun but it's not as fun so anyway thanks everyone

Channel: Addison Hall Design

Views: 352

Keywords:

Id: PCt72iA8MgQ

Length: 39min 54sec (2394 seconds)

Published: Fri Sep 03 2021