GeneratePress Child Theme Tutorial: Step-by-Step Guide for Beginners

I recently did a live stream where I shared the new version of my starter site if you didn't catch that I'll make sure to put a link down in the description below but throughout that video I had people asking about the use of a child theme so today I decided I would make a video on how to set up a child theme for Generate press but before we get started with how to make one let's talk about why we might want to make one when you install a theme like generate press you're actually bringing in a ton of functionality that comes with that theme now over time you might realize that you want to make some tweaks to the way that theme behaves and a child theme is a great way to do this for example I want to bring in my own design system or tweak the way the login system works or even the design of the login page however if you just made these changes directly to your theme anytime generate press pushed out an update it would override all of your changes and you'd have to start over again that's where a child theme comes in a child theme is kind of like a sub theme to your parent theme a child theme inherits all the things its parent theme gives them but it has the autonomy to add some things on top of it that won't get overridden by updates now if you're just getting started with WordPress this probably doesn't seem that important but as you use it more and more chances are you're going to find some things that you want to tweak about its default Behavior now you can make these changes with a plugin like code Snippets or WP code box and I use code Snippets for quite a long time but I've actually ditched those plugins in favor of a child theme for three major reasons the first is performance and security now when you upload the these plugins they're going to have functionality built in that you're probably never going to use and some people even argue that using these plugins is a security vulnerability now I can't speak to all that with great Authority but I do know the more plugins you add to your website the more chances you have of things going wrong so as a general rule of thumb I say less is more the second reason I opt for a child theme is because of portability it's really easy to take your child theme and import it into any WordPress website you ever use you could do this with the code snippet plugins but I just think the workflow of using a child theme makes this a little bit more portable and the last reason really comes down to branding by using a child theme you can actually inject some of your own branding into your client's website by this what I mean is we can customize the name of the theme to use something with our agency or even upload a thumbnail that uses our agency's branding some people even like to customize these things directly for their client either way you can really brand the way your theme looks when you use a child theme and that's something that you don't necessarily get with the code snippet type plugins in the there's really no downside to using a child theme even if you never add anything to it however if you go ahead and use a regular theme in the first place and want to add a child theme later that can become a little bit difficult because of that I rather just start websites out using a child theme from the beginning whether I'm ever going to use it or not and thankfully setting up a barebones child theme is actually pretty simple to do I'm going to go ahead and show you where you can download a blank copy of a child theme and get started right away so let's go ahead and dive in and take a look if if you want to get started quickly with the least amount of work generate press actually provides us with the blank child theme you can download these files are simple to create on your own but downloading the blank child theme saves time and it really is as Bare Bones as you could get I'll leave a link down in the video description and we'll go ahead and download a copy of this theme for ourselves so we can get started on our own project with the child theme downloaded all we have to do is upload and activate the blank child theme and we're good to go but remember we have to have the parent theme installed so you'll want to go ahead and in install the generate press theme from the repo of course you have to remember this blank child theme really doesn't do anything except set us up with the ability to be able to make those customizations later just to show you what the default child theme looks like we'll go ahead and install and activate it and take a look we'll go to appearance then themes and we'll click the add new button here we'll go ahead and click upload theme and we'll choose a file we're going to go ahead and upload the generate press child theme we just downloaded and we can hit install now we'll go ahead and hit activate and now our child theme is good to go hey I hate to interrupt this video but I wanted to tell you about a brand new exclusive and completely free resource I put together here for my generate loving Friends on YouTube it's called the six essential tweaks to a perfect generate website and it's the six tweaks that I think are most important to get the best results out of generate press and generate blocks if you use the link down in the video description below or go to the admin bar.com generate I'll give you instant access to all the code in insight to what I'm using it for and a full video walk through all right now let's jump back into the video the blank child theme does come with some default so here you'll see a default thumbnail we'll see that it's been named generate press child and it has the Creator's author name but we're going to go ahead and customize all this to make this match all of our own but before we do that I think it's important to dive in and take a look at the anatomy of a child theme and see what all files go into creating one with this I think you'll have a better understand understanding of how child themes work if we go ahead and unzip this child theme we downloaded and open up the folder you'll see that there's three files inside there's a functions.php file there's a style. CSS file and a screenshot.png file each of these files have their own purpose so let's talk about each one of them individually we'll go ahead and open up this functions.php file here on my machine it's going to open up in vs code which is free and my code editor of choice but you could even open up this file in a simple notepad app inside of this file you're going to see the opening PHP tag and then a comment from generate press giving you instructions about the PHP file the important thing to note here is the comment that says only edit this file if you have direct access to it on your server the reason this is critical is that if you add some PHP with errors in it into this file you could easily break your website a common error that you'll see is what we call the white screen of death when that happens you'll have to access your website from the server level to fix issues as your ability to log in from the front end is completely lost the functions.php file is the most advanced of the three but this is where you can add PHP code to your theme to change the behavior of your site just as an example in my starter site I have PHP Snippets that add a user role modify the UI and add functionality that otherwise isn't native to Wordpress here later in this demo I'll show you how we can add some code Snippets into this file and change some of the default behavior of Wordpress the style. CSS file is a little less intimidating and the fact that you're going to be much less likely to break your website by making changes to it however it does come with some defaults that you're likely going to want to modify inside the style.css file you'll see the theme header like the theme name the description and information about its source some of these things will be visible to people who log into your site even if they don't dig into the code later I'm going to show you how you can customize all of these things but for now I just want you to know that you can customize any of this without issues except for this line that says says template this is your link to the parent theme of generate press any changes to this and you're going to break that connection and your child theme is no longer going to work now besides the theme header there's other things you might want to add to your style.css file namely any of your custom CSS I like to put my finalized CSS in here instead of the customizer this gives me the ability to use the customizer as I'm testing things out and benefit from the live preview but have this style.css file where all my finalized Cod code lives and can be organized really neatly lastly there's the screenshot.png file the screenshot for your theme needs to have both the proper dimensions and the proper file name because of that I find it easiest to just open up the screenshot.png file that comes in the blank child theme and make my modifications directly to that original file this way we can just save over it and we know that the name and the size are all correct next we're going to go ahead and start customizing all of these things inside of our child theme so we can make it unique in fact let's just start here with this image as an easy win we'll go ahead and open up this image inside of our image editing software I use Photoshop so that's what we'll use here but anything that allows you to edit a image will work just fine instead of this default generate press logo I'm going to go ahead and change this out to show my company's branding the first thing I want to do is add a background color that matches my company's colors I'll go ahead and add this primary navy blue color now next we'll go ahead and import a copy of my logo I'll go here to place embedded and inside my downloads file I have the copy of my logo saved we'll go ahead and resize this here to something appropriate and just like that we have a screenshot that's more customized to our brand here I'll go ahead and save a copy of this I'm going to save it right over the top of our screenshot.png file just to make sure that the name and dimensions are all exactly as they were we can go ahead and replace this here and if we open up the file that contains all of our theme stuff we can see this screenshot.png has been updated to the screenshot that we just created inside Photoshop next let's go ahead and open up our style.css file and make some customizations to it here I'm going to want to customize everything inside the theme header again except for that template line which is the connection to our parent theme generate press so here for theme name instead of generate press child I'm going to call this Ogle theme here for the theme URI I'm going to change this from generate press's website to my agency's website for the description I'll just say a custom theme for Generate press and for the author I can go ahead and replace Tom's name with my name since I am the author of this child theme we also have the ability to link here to our website for the author I'm going to link that to my personal website again we'll leave the template line just as it is and I'm going to change this this version to 1.0 instead of 0.1 now that we've changed the theme header what else can we do to our child theme stylesheet personally like I said earlier I like to use all of my finalized CSS inside the stylesheet but for now just so we can see how it works in action let's go ahead and add a simple rule that will make the entire background of our website orange to do that I'm just going to Target the body and I'm going to say background color and I'm going to give it the value of Orange with that in place we'll go ahead and save this style.css file and we'll move next to our functions.php file if you don't have any PHP Snippets to add that's totally fine for a very long time I just left this PHP file blank and it's going to work just fine like that however let's take a look at an example of how we could use our PHP file to tweak our child theme you've probably noticed that the admin bar greets Us by saying the word howdy and then our username now as a southerner I definitely approve of that but I know a lot of people don't feel that way let's go ahead and add a PHP snippet to our child theme that will change the word from howdy to hello here inside the PHP file just underneath the comment I'm going to go ahead and paste in my snippet of code to replace howdy with hello and we'll go ahead and save the file with all of these files now saved we just need to zip up our child theme folder and install it onto our website I'm going to go ahead and go back a level here and I'm going to change the name of this folder so we'll rename this and I'll just call it ogore theme from here I can rightclick this and I can say compress Ogle theme which will give me a zip file this is what we can install into our website so back here on our website again under appearance themes I'm going to go to add new upload theme choose file I'm going to go into the folder where I've saved this Ogle theme and I'm going to go ahead and upload the zip file we'll go ahead and hit install now and we'll activate it now if we did everything correctly we should see all the changes we put in place you can see already that we are seeing the thumbnail we created for our theme thumbnail and if we click on theme details we can see the new name the new version number and we can see me as the author as well as the description on the front end of the website the CSS we added has changed the body of the website to Orange and we can see now that the word howdy has been replaced with the words hello so everything we put into our child theme is now working here as we've installed it now chances are you're not going to set up everything for your child theme in the very beginning and then never touch it again this is something that you're going to want to edit on an ongoing basis so let's talk about how we can make edits to this as our website evolves the easiest way to do this is through the theme file editor that's built right into WordPress from the back end of your website you can hover over appearance and then click theme file editor here you'll see we have our style.css file and our function.php file which we can edit directly from the back end of our website now while this is the easiest way a lot of people feel that having the theme file editor enabled is too risky and they likely disable this using their functions.php file again security isn't my specialty so I'll leave that up to you to research and make a decision on your own but let's talk about some of the other ways you can modify your child theme another option would be to keep a copy of your child theme on your machine this way you can open up the files just like we did before make edits and re-upload them to your installation this works great but you have to be really good about Version Control I found that this can be hard to keep up with and I run the risk of uploading an older copy or overriding changes I've made inside the theme file editor the other option is to FTP into your website and edit your theme files directly to do this you're going to need an FTP client I use filezilla and it gives you the ability to connect to your website server from there you can open the files from your server on your machine make the changes and and upload them back to your server this process is pretty safe but some people finding using an FTP client a bit cumbersome you'll have to decide which option is best for you but I'm confident you'll get comfortable with any of these three options with enough practice if you've never used a child theme before hopefully this video showed you that it's really not that difficult of a process like I said for me it just makes more sense to go ahead and put this in place should I ever need it in the future because trying to add that later is a little bit more difficult chances are you'll only have to follow this process one time as you set up your child theme for the very first time after that you can reuse the same child theme again and again like I said you'll want to make edits to it tweak it to your liking and then save a copy that can be reused on websites going forward if you enjoyed this video please give it a thumbs up if you have questions use the comments down below and if you want to make sure to catch me on the next one go ahead and hit subscribe and we'll see you there by

Channel: The Admin Bar

Views: 2,714

Keywords:

Id: v5OqcrXScF4

Length: 14min 54sec (894 seconds)

Published: Tue Oct 10 2023