If you’d like to modify the default styles of your Project Pages, you’ll need to start by modifying the Page template we use to build your pages.
If you’re using the new default template mode, it’s actually really easy.
BUT WAIT! Before you get started tweaking the template, it’s really important that you make sure you’re using a child theme. Adding templates from Project Pages into your theme directory will mean they will likely be deleted when you next update your theme!
… the solution, of course, is a child theme. A child theme is ultimately a set of customisations on top of your existing theme. This means you can make mods, and separately update the main theme, without losing any of your work.
Read on below for why that’s ideal, and how to do it. (You can always pay a developer to do this for you if it’s over your head, it’s not a massive job.)
Related Guides:
Why we always suggest using a Child Theme #
- Customization
- Organisation
- Maintainability
- Security
Using a child theme in WordPress is highly advantageous for several reasons, primarily revolving around customization, updates, and security. First and foremost, a child theme allows you to make changes to your website’s design and functionality without altering the core files of the parent theme. This ensures that your customizations remain intact even after the parent theme is updated. Direct modifications to the parent theme would be overwritten during updates, but a child theme preserves your specific changes, allowing for seamless updates without losing your work.
Furthermore, employing a child theme promotes better organization and maintainability of your website. By isolating customizations in the child theme, you create a clear separation between the original theme’s code and your modifications. This not only simplifies troubleshooting but also makes it easier to manage and document changes. If something goes wrong, you can quickly pinpoint whether the issue lies within the parent theme or your customizations, facilitating more efficient debugging and maintenance.
Lastly, using a child theme enhances security. When updates are released for the parent theme, they often include important security patches. By using a child theme, you can ensure that you apply these updates promptly without fear of losing your custom changes. This keeps your website secure while maintaining the unique aspects that set it apart. Overall, child themes provide a robust framework for creating a customized, maintainable, and secure WordPress site
How to make a Child Theme #
Creating a child theme in WordPress involves a few straightforward steps. Here’s a detailed guide on how to make a child theme:
1. Create a Child Theme Directory #
First, you need to create a directory for your child theme within the wp-content/themes directory of your WordPress installation. Name this directory something meaningful, typically by appending “-child” to the name of the parent theme. For example, if your parent theme is called “twentytwentyfour”, you might name the directory “twentytwentyfour-child”.
2. Create a style.css File #
Inside your child theme directory, create a style.css file. This file is essential for your child theme and should include the following header information at the top:
/*
Theme Name: Twenty Twenty-Four Child
Theme URI: http://example.com/twenty-twenty-four-child/
Description: A child theme of Twenty Twenty-Four.
Author: Your Name
Author URI: http://example.com
Template: twentytwentyfour
Version: 1.0.0
*/
/* Custom CSS goes here */
Make sure the Template line exactly matches the directory name of your parent theme.
3. Create a functions.php File #
Next, create a functions.php file in your child theme directory. This file will enqueue the styles from the parent theme and add any additional functionality you need. Add the following code to your functions.php file:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentytwentyfour-style' for the Twenty Twenty-Four theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
This code ensures that the parent theme’s styles are loaded first, followed by any custom styles in your child theme.
4. Activate the Child Theme #
Once you’ve created the style.css and functions.php files, log in to your WordPress dashboard. Navigate to Appearance > Themes, and you should see your child theme listed. Click “Activate” to activate your child theme.
5. Customize Your Child Theme #
With the child theme activated, you can now start customizing your site, and modifying your Project Page templates. You can add additional CSS rules in the style.css file and add new template files or override existing ones from the parent theme. For instance, if you want to customize the header, copy the header.php file from the parent theme into the child theme directory and make your changes there.
By following these steps, you create a child theme that inherits the functionality and styling of the parent theme while allowing you to safely make customizations. This approach ensures that your customizations are preserved when the parent theme is updated.
