{"id":35770,"date":"2023-09-26T12:28:31","date_gmt":"2023-09-26T17:28:31","guid":{"rendered":"https:\/\/theadminbar.com\/?p=35770"},"modified":"2023-09-26T12:28:32","modified_gmt":"2023-09-26T17:28:32","slug":"how-to-create-a-generatepress-child-theme","status":"publish","type":"post","link":"https:\/\/theadminbar.com\/how-to-create-a-generatepress-child-theme\/","title":{"rendered":"How to Create a GeneratePress Child Theme"},"content":{"rendered":"\n

I recently did a livestream where I shared the latest version of my Starter Site \u2014 here\u2019s a link<\/a> in case you missed it \u2014 and several people commented about me using a GeneratePress child theme.<\/p>\n\n\n\n

So, today I decided to talk a bit about how you can set up your very own GeneratePress child theme.<\/p>\n\n\n\n

But before we get into how<\/strong> to do it, let\u2019s talk about why you might want to do it.<\/p>\n\n\n\n

Why Use a Child Theme?<\/h2>\n\n\n\n

When you install a theme, like GenreatePress<\/a>, you import a bunch of settings they\u2019ve configured for you. Over time you might realize that you\u2019d like to do things slightly differently and make tweaks to the way the theme works.<\/p>\n\n\n\n

For example, I do things like add a custom user role for my clients, tweak the design of the login page, implement a design system, and more (you can see a lot of my tweaks explained in the starter site video I mentioned earlier).<\/p>\n\n\n\n

However, if you just went in and updated the theme files directly, the next time they push out an update, it would override all of the customizations you made.<\/p>\n\n\n\n

That\u2019s where a child theme comes in. A child theme is like a \u201csub\u201d theme of the parent theme. It looks to the parent theme for all its instructions, but it has the autonomy to add rules on top of the parent theme that won\u2019t get overridden by updates.<\/p>\n\n\n\n

When you\u2019re just getting started this might not be important, but as you get more and more comfortable customizing WordPress, chances are you\u2019re going to find some things you want to tweak.<\/p>\n\n\n\n

Now, you can do this with a plugin like Code Snippets or WP Code Box \u2014 and I used Code Snippets for this very purpose for a long time.<\/p>\n\n\n\n

However, there are 3 main reasons why I\u2019ve ditched the code plugin in favor of the child theme.<\/p>\n\n\n\n

Why A Child Theme Over Snippets Plugin?<\/h3>\n\n\n\n

I\u2019m not going to say if you\u2019re using a snippets plugin that you\u2019re doing it wrong \u2014 like I said, I\u2019ve used them a ton \u2014 but here\u2019s why I\u2019ve chosen not to use them.<\/p>\n\n\n\n

    \n
  1. Performance & security.<\/strong> Code snippet type plugins introduce more code than I actually take advantage of, and some people argue that it introduces unnecessary security risks. I\u2019m not one of those who is counting the number of plugins and deciding if a site is good or bad based on that\u2026 but every plugin you install, by nature, increases your chances for issues \u2014 so less is typically better, IMO.<\/li>\n\n\n\n
  2. Portability.<\/strong> Child themes give you the ability to easily package up all your tweaks and take them from site-to-site. I keep a copy of my child theme on my computer and can upload it to any site using GenerateBlocks and instantly have all my customizations done in seconds.<\/li>\n\n\n\n
  3. Branding.<\/strong> Child themes give you the unique ability to personalize and brand the theme, which is a nice personal touch. Some people brand this with their client\u2019s information, while others (including myself) brand this with my agency\u2019s information. Either way, it looks more custom than a 3rd party name.<\/li>\n<\/ol>\n\n\n\n

    In the end, there is no downside to using a child theme \u2014 even if you never make any tweaks. But if you build a site without one, it\u2019s time consuming to go add one later.<\/p>\n\n\n\n

    For this reason, I think it just makes sense to start every project with a child theme and have those benefits there from the start should I ever need them.<\/p>\n\n\n\n

    Thankfully, setting up a bare-bones child theme is actually pretty simple.<\/p>\n\n\n\n

    Next, I\u2019m going to show you how to set up a blank child theme, how to customize it with your own branding, and where you can add your snippets of code to start customizing things even further.<\/p>\n\n\n\n

    How to Create a Child Theme<\/h2>\n\n\n\n

    If you want to get started quickly with the least amount of work, GeneratePress provides us with a blank child theme you can download<\/a>. These files are simple to create on your own, but downloading the blank child theme saves time and is as bare-bones as you can get.<\/p>\n\n\n\n

    We\u2019ll go ahead and download a copy for ourselves.<\/p>\n\n\n\n

    With the child theme downloaded, all we have to do is upload and activate the blank child theme and we\u2019re good to go.<\/p>\n\n\n\n

    Remember, we have to have the parent theme installed, and if you try to install a child theme without the parent you will be reminded of that.<\/p>\n\n\n\n

    How to Customize Your Child Theme<\/h2>\n\n\n\n

    Of course, this blank child theme doesn\u2019t really do anything except set us up for the ability to further customize things down the line.<\/p>\n\n\n\n

    We\u2019ll go ahead and install our child theme straight from the blank child theme GeneratePress provides and take a look.<\/p>\n\n\n\n

    Installing Blank Child Theme<\/h3>\n\n\n\n

    Go to appearance > themes > and click the \u2018Add New\u2019 button. Here you\u2019ll upload the blank child theme you just downloaded and install & activate it.<\/p>\n\n\n\n

    The blank child theme does come with some defaults, so you\u2019ll see those here in the theme details and screenshot.<\/p>\n\n\n\n

    \"A <\/picture><\/figure>\n\n\n\n

    Before we start tweaking them, however, I think it\u2019s important to first understand how a child theme works.<\/p>\n\n\n\n

    We can do that by digging into the files and code that come with the blank child theme you downloaded.<\/p>\n\n\n\n

    The Anatomy of a Child Theme<\/strong><\/h3>\n\n\n\n

    If you unzip the child theme you downloaded, you\u2019ll see 3 files inside:<\/p>\n\n\n\n

      \n
    1. functions.php<\/li>\n\n\n\n
    2. style.css<\/li>\n\n\n\n
    3. screenshot.png<\/li>\n<\/ol>\n\n\n\n

      Each of these files have their own purpose, so let\u2019s talk about each one individually\u2026<\/p>\n\n\n\n

      Functions.php<\/strong><\/h4>\n\n\n\n

      Go ahead and open up the functions.php file. On my machine, it\u2019s going to open up in VS Code<\/a>, which is free and my code editor of choice \u2014 but you can open this file in a simple notepad app.<\/p>\n\n\n\n

      Inside this file you\u2019re going to see the opening PHP tag, and then a comment from GeneratePress giving you instructions about the functions.php file.<\/p>\n\n\n\n

      \"A <\/picture><\/figure>\n\n\n\n

      The important thing to note here is the comment that says \u201cOnly edit this file if you have direct access to it on your server\u201d. The reason this is critical is that if you add some erroneous PHP to this file, you could easily break your website.<\/p>\n\n\n\n

      A common error you\u2019ll see is what we call the \u2018White Screen of Death\u2019. When that happens, you\u2019ll have to have access to your website from the sever level to fix issues as your ability to login from the front end will be completely lost.<\/p>\n\n\n\n

      The functions.php is the most advanced of the three, but this where you can add PHP code to your theme to change the behavior of your site.<\/p>\n\n\n\n

      Just as an example, in my starter site I have PHP snippets that add a user role, modify the UI, and add functionality that isn\u2019t native to WordPress.<\/p>\n\n\n\n

      Style.css<\/strong><\/h4>\n\n\n\n

      The style.css file is a little less intimidating in the fact that you\u2019re going to be much less likely to brick your site by making changes to it, however it does come with some defaults that you\u2019ll likely want to modify.<\/p>\n\n\n\n

      In the style.css file, you\u2019ll see the Theme Header, like the theme name, a description, and information about its source.<\/p>\n\n\n\n

      \"A <\/picture><\/figure>\n\n\n\n

      Some of these things will be visible to people who login to your site \u2014 even if they don\u2019t dig into the code. Let\u2019s take a look at what we can tweak here to make this child theme more of our own:<\/p>\n\n\n\n

      With the child theme installed on this site, we can see the Theme Name, which links to a URL, the theme description, the theme\u2019s author (which links to the author\u2019s URL) and the version number.<\/p>\n\n\n\n

      We can edit all of these things \u2014 and I would encourage you to do so. The only thing we don\u2019t want to edit is the line that says \u2018Template: generatepress\u2019. This is your child theme\u2019s link back to the parent theme, GerneatePress.<\/p>\n\n\n\n

      If you change this line, you\u2019ll no longer have a GeneratePress child theme and you\u2019ll lose everything that comes with GeneratePress.<\/p>\n\n\n\n

      What might you want to add to your style.css file? Well \u2014 any of your custom CSS can go in there instead of putting it in the customizer.<\/p>\n\n\n\n

      I personally like to use the customizer for testing CSS tweaks, and use my child theme\u2019s style.css file for all of my finalized code.<\/p>\n\n\n\n

      Lastly, let\u2019s take care of our theme\u2019s image \u2014 which will probably be the main thing people see when it comes to your child theme.<\/p>\n\n\n\n

      Screenshot.png<\/strong><\/h4>\n\n\n\n

      The screenshot for your image needs to have both the proper dimensions and<\/strong> the proper file name (880x688px, screenshot.png). Because of that, I find it easiest to just open up the screenshot.png file, make my modifications, and then just save over the original file. This way I know I have all of that in place.<\/p>\n\n\n\n

      Next, we\u2019ll start customizing all these things so we can have our own unique child theme.<\/p>\n\n\n\n

      Modifying Your Child Theme<\/h2>\n\n\n\n

      Let’s dive into how you can customize this child theme to make it your own.<\/p>\n\n\n\n

      Customizing Your Screenshot.png<\/h3>\n\n\n\n

      Let\u2019s start with an easy win. Open up the default screenshot GeneratePress supplied us in the blank child theme in your favorite image editing software (I use Photoshop).<\/p>\n\n\n\n

      Change the background to be your brand\u2019s primary color, and place your logo on top of that.<\/p>\n\n\n\n

      This isn\u2019t the most creative idea \u2014 but at least you\u2019ll be able to see that you\u2019ve personalized your thumbnail once you upload your new version of our child theme. You can, of course, customize this thumbnail to be whatever you want.<\/p>\n\n\n\n

      Customizing Your Styles.css File<\/h3>\n\n\n\n

      Next, open our styles.css file inside VS Code. Here you\u2019re going to want to change some of the details inside of the Theme Header to brand this theme to your agency. You can see in the sample below how I\u2019ve customized it to fit my agency\u2019s brand.<\/p>\n\n\n\n