So you installed Astra Theme, one of the best WordPress free theme out there, and you came across “Astra Child Theme” and wondering, what is this? do I need it? Answer: Yes, it’s a must have. Don’t make the same mistake I do.
Child themes is important because if you make changes to the files, such as header.php or function.php, you won’t lose it if you update the theme. Keep in mind that theme sometimes can be auto-updated, and when it does, the old files get replaced by the new ones, and that’s why you lose anything changes you’ve made. A child theme inherits the functionality of its parent theme, allowing you to make modifications and enhancements.
Understanding WordPress Child Themes
Child themes are a safe way to modify a WordPress theme without altering the original, or parent theme. They allow you to customize the look and functionality by adding or changing PHP files, CSS styles through style.css, and extend or alter functions through functions.php, making them fully customizable.
When a child theme is active, it inherits all the features and appearance of the parent theme. To prevent loss of customizations, edits are made within the child theme’s files. If the parent theme gets an update, these customizations remain untouched.
Let’s break down the main components:
- header.php: Used to install Google Analytics Tag without to use any plugin.
- style.css: Vital for child theme creation, this file handles most of the visual aspects.
- functions.php: Extends the functionalities and is often used to enqueue styles or scripts through hooks like wp_enqueue_scripts and wp_enqueue_style.
- Template files: If specific template changes are needed, they can be duplicated from the parent and edited in the child theme’s folder.
There are tools like the Child Theme Configurator that can create a child theme automatically, ensuring the correct setup. They typically take care of enqueuing the parent theme styles correctly.
Note that not all themes have child themes available. However, themes with large user bases, such as Astra, often have extensive child theme support. When using a child theme, always ensure that the parent theme is also installed, as it is necessary for the child theme to function correctly.
Creating Your Child Theme
Follow these steps to create your Astra Child Theme (or the theme that you’re using):
1. On Astra’s website, login, find the download section and click on “Generate”. You can put any name you like.
2. On your WordPress Dashboard, navigate to Appearance -> Theme -> Upload Theme, then drag the theme file and upload it.
3. Go back to Appearance -> Theme, then activate your Astra Child Theme (we’ve named it EJ Child in this case).
And that’s it! You’ve successfully installed a Child Theme!
Adding custom code snippets or customizing with JavaScript and HTML requires a careful touch. Plugins extend the functionality, where custom code needs a safe home. It is paramount to maintain a balance between Astra’s sleek design and the personal touches that make the site truly unique. Whether tweaking header.php for a custom header or injecting analytics code, one should always test their changes with a child theme before pushing live.
You can also install a second Child Theme if you want to test out different things, so that it doesn’t mess up your website!
Edit Your Child Theme files
Deploying an Astra child theme in WordPress is a straightforward process as mentioned above, just upload a zip file and activating the theme from the dashboard. Proper management of the theme ensures that all updates integrate seamlessly. Now let’s see example of how you go about editing your files.
You need to be able to access your server’s folder. In our example, we are using Siteground web hosting. Go to your Website, then to its dashboard, locate the “File Manager” tab and navigate to: \public_html\wp-content\themes, then you will see the Astra theme folder and the Child Theme that you’ve just installed.
Our Child Theme folder is named “ej-child”, and since we’ve already installed it, it’s also in the \wp-content\themes folder. Your folder should only have ‘style.css’ and ‘screenshot.jpg’.
Next, whichever file you want to modify, then navigate to the astra folder (or the main theme folder of your choice), then copy that file and paste it into your Child Theme folder. In the example above, we’ve already copied 2 files from the astra folder, function.php and header.php.
Lastly, go back to your WordPress dashboard, then to the Appearance -> Theme File Editor -> Select theme to edit (on the right side) and select the Child Theme. You can see all the files that you’ve copied here in the previous step.
*Note: If you cannot see the Theme File Editor in the Appearance, it’s probably because it is disabled by some plugins like security plugin, or you need to enable it by going to \public_html\wp-config.php. Edit that file, then locate the following line:
define(‘DISALLOW_FILE_EDIT’, true) -> define(‘DISALLOW_FILE_EDIT’, false)
and change the true to false, then click Save & Close. Still not working? For more information about how to solve this, check out this article for solution: WordPress Theme Editor Missing.
Example: Inserting Google Tag gtag.js (Google Analytics)
Yes, you can use plugin that automatically does this, install the Google Tag with one-click of a button. But if you care about your website’s speed, which by the way, has a huge impact on how google index and rank your website, then it is much better to minimize as many plugins as much as possible. Plugin like Monster Insights is great, but it is very heavy in terms of adding stuffs to your website, which in turn slows things down.
Once you’ve enable the Theme File Editor, setup your Google Analytics, then navigate to Theme File Editor to edit the heading.php. In the example below, we’ve copied and pasted the Google tag (gtas.js) below the <head> as Google instructed:
If you’re looking to setup a Google Analytics GA4 (new version), then we found that this guide on Youtube to be very informational: Google Analytics 4 Tutorial 2024 | Step by Step, check them out and don’t forget to like.
Best Practices and Tips
When creating an Astra child theme, there are several best practices and tips that designers and developers should follow. The key is to ensure that your child theme functions effectively and can be maintained easily over time. Beyond the basic features, Astra offers other features and special features that highlight its versatility, including being WooCommerce ready, responsive, and compatibility with various page builders. These additional functionalities can be further enhanced with premium addons, providing more customization options and features for an optimized user experience.
- Start with a Clear Folder Structure: Give your child theme a meaningful folder name, this aids in recognizing the theme in your WordPress directory. Inside, organize your assets, such as stylesheets and screenshot images, to maintain a clean structure.
themes
└── your-child-theme
├── style.css
├── header.php
├── functions.php
├── screenshot.png
└── assets- Detail Your Stylesheet Header: The top of your style.css file should contain a header comment that includes your child theme’s name, description, Template line (which should be ‘astra’), Author name, Author URL, and the Text Domain.
/*
Theme Name: Your Astra Child Theme Name
Description: Child theme for the Astra WordPress theme
Author: Your Name
Author URI: http://yourwebsite.com
Template: astra
Text Domain: your-child-theme
*/- Inherit Parent Styles Thoughtfully: Use wp_enqueue_style to import Astra’s styles correctly. This ensures your child theme uses Astra’s color scheme and base design elements.
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}- Tailor with the Advanced Options: When utilizing tools like the Astra Child Theme Generator, users should take advantage of advanced options to customize their child theme further, adding personalized styles or scripts as needed.
- Learn Through Resources: They should seek out video tutorials and WordPress.org documentation for guidance. The create block theme plugin can be helpful for those who work with block themes.
- Consider Licensing: Remember that WordPress and Astra are under the GNU General Public License; maintaining the same license in your child theme ensures compatibility with WordPress ecosystem standards.
Key Takeaways
- A child theme enables safe customization of a WordPress site without altering the parent theme.
- Activation of a child theme allows for updates to the parent theme without losing custom work.
- Managing a child theme is essential for maintaining a unique and robust WordPress website.
By following these best practices, they can craft Astra child themes that enhance the experience of website design, allowing them to build robust websites with a professional touch. Whether through a page builder or custom code, these tips guide them in extending the Astra WordPress theme to fit their unique design needs.
