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:

• Project Page Templates
• Modifying Project Page look and feel (templates)

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.

The post Child Themes (and Project Pages) first appeared on Project Pages.

If you want to read more generally about Templating in Project Pages, please see our guide on templates in Gutenberg (WordPress editor), and our Legacy PHP templates.

Modifying templates: WordPress Editor (Gutenberg – Default Mode)

When you first install Project Pages it will be in ‘Default Mode’. This means that it’s using your theme and building Project Page pages through Gutenberg (WP Editor) templates.

This gives you the flexibility of the WordPress editor and blocks, while natively sitting inside your theme (keeping your look and feel, font and global style settings, etc.)

If you want to change how your Project Pages look, rearrange blocks, or otherwise modify the templates, here’s how:

1. Copy the Template files

Once you have the Project Pages plugin installed, you’ll be able to copy the template files out of Project Pages into your theme. (I advise that you use a child theme so that these templates you modify don’t get deleted when you next update your theme. Read about child themes here.)

You can do this via FTP, by downloading the files, renaming them, then re-uploading into your theme directory.

Here are the file names you need to copy from, and to:

Copy from:
/project-pages/templates/single-projectpage_DEFAULT.html
/project-pages/templates/archive-projectpage_DEFAULT.html
/project-pages/templates/taxonomy-projectpagetag_DEFAULT.html

Copy to:
/wp-content/your-child-theme/templates/single-projectpage.html
/wp-content/your-child-theme/templates/archive-projectpage.html
/wp-content/your-child-theme/templates/taxonomy-projectpagetag.html

Note: Please don’t edit these templates in the plugin, as any changes there would also be wiped out when you next update the plugin. Also note these go inside your theme, in a directory named /templates/.

2. Modify in WP Editor

Once you have your templates in your theme templates directory you can then edit them from within WordPress admin.

2.1. Go to your Site Editor (‘Appearance’ from the wp-admin menu, or *yoururl*/wp-admin/site-editor.php)

2.2. Click ‘Templates:

2.3. Select a template to edit, (you should see ‘archive-projectpage’, ‘single-projectpage’, and ‘taxonomy-projectpagetag’):

2.4. Click the edit pencil icon, or click into the page view on the right:

2.5. Tweak the template!

As you can see in this screenshot, you can select any of the blocks in the template and be presented with lots of style options on the right hand Block menu. In the above screenshot example we’ve selected the ‘Hero’ block which presents at the top of each Project page.

You can edit these templates however you want. Add extra blocks. Remove sections. Tweak the settings for each block.

Each of our blocks also uses straightforward HTML elements, so if you know a bit of CSS you can easily modify the styles further by adding some overriding CSS.

There is a world of options for modifying these templates, and each situation might likely call for a different approach. I’ll do my best to support you in the support forum, but I won’t go any more in-depth in this guide.

3. Save

Lastly, it’s worth noting you can see what the active templates in use are by visiting your Project Page settings page (with Project Pages installed click ‘Project Pages’ – > ‘Settings’ from your wp-admin screen).

Read more about this in our note on the general templating guide.

Reach out for support if none of this is making sense.

Modifying templates: PHP Templates (Legacy Template Mode)

In v2.0 of Project Pages we’ve included support for the legacy (V1.*) PHP templates. If you want quick, root-level access to all of the code behind displaying Project Pages, this’ll allow you complete flexibility.

However, there are downsides:

1. You’ll need to know PHP, HTML, JS, CSS etc.

2. These templates are standalone (they do not use your theme appearance at all – may be a pro for some).

3. They will not be updated as features/tweaks are released for v2.0+ blocks etc.

… with all that being said, sometimes it’s nice to just have simple PHP templates for things. Here’s how you’d edit those, if you’re interested:

1. Copy the files

Using the below as guidance, copy the template files from the Project Pages plugin directory into your child theme directory:

Copy from:
/project-pages/templates/single-projectpage_DEFAULT.php
/project-pages/templates/archive-projectpage_DEFAULT.php
/project-pages/templates/taxonomy-projectpage_DEFAULT.php

Copy to:
/wp-content/your-child-theme/templates/single-projectpage.php
/wp-content/your-child-theme/templates/archive-projectpage.php
/wp-content/your-child-theme/templates/taxonomy-projectpagetag.php

2. Modify the files

Once you have copies in your (child) theme template folder, feel free to edit these as you see fit. I can give limited support for hard-editing these, but if you hit any major challenges, please reach out via the support forum.

Summary on template modifying

Thanks for reading this guide on modifying your templates. If you have any feature requests, support queries please do submit them here.

Lastly, here are the related guides on templating:

• General templates guide for Project Pages
• Child themes

The post Modifying Project Page Templates first appeared on Project Pages.

In this guide I share how you can add your own templates for Project Pages, either via the Gutenberg editor in WordPress, or via PHP template files.

Let’s get started by looking at the two modes for templates (you can change the mode via the settings page at:

/wp-admin/edit.php?post_type=projectpage&page=projectpages-plugin-settings

Related guides:

• How to modify your Project Page Templates
• Child Themes and Project Pages

Template Modes:

First head over to your Project Pages Settings page, (with Project Pages installed click ‘Project Pages’ – > ‘Settings’ from your wp-admin screen).

You’ll see various settings here, this tutorial is concerned with templating though, so under Templates you’ll see Template Mode:

This mode shows the two available templating modes:

1. Default (Blocks Template)
2. Legacy (v1.0 Project Pages PHP Templates)

The default will suit most users. The legacy templating system is left in tact for those upgrading from v1.0 who want to keep the original Semantic UI styling.

Here’s another way of looking at these two modes:

Default (Blocks Templates) – This template mode uses a Gutenberg page template made up out of blocks to construct the single Project Page page, the Archive page, and the Taxonomy Archive page. In this mode you can modify the templates in the WordPress editor.

Benefits: Uses your theme styling & header & footer, can modify templates right in WordPress editor

Legacy (PHP Templates) – This template mode sidesteps Gutenberg and your theme. It uses PHP templates (customisable by you) to produce a specific ‘look and feel’ for your Project Pages.

Benefits: Standalone ‘Projects’ area. For those familiar with code it may be more comfortable to edit.

Useful tip:

Whichever mode you use please note the info below the mode selection option:

Here you can see key information on the current templates your site is using.

Note the notice ‘You are not using a child theme…’ – this is because in this instance the demo site templates have just been put straight into a theme /templates/* directory. If we didn’t resolve this, when the theme updated it’d delete all our templates . (Below we’ll show you how to fix that!)

Under that you can see your Current Templates.

…this shows you which exact files Project Pages will use to output your Project Pages. Below you can learn about making your own templates, but it’s useful to remember this screen so you can easily see at a glance which templates are being used.

Project Pages and Gutenberg (Default mode):

This mode is selected by default for all new systems, because, well; it’s the best. In this mode your Project Pages are built using WordPress blocks, which means you can modify them easily in your WordPress editor, and they fit ‘in’ your site design.

For example, the following screenshot shows the above-the-fold view of default template mode in the WordPress theme ‘twentytwentyfour’:

You can read more on modifying your templates here. But fundamentally the files you’ll need to be copying over into your theme are:

Copy from:
/project-pages/templates/single-projectpage_DEFAULT.html
/project-pages/templates/archive-projectpage_DEFAULT.html
/project-pages/templates/taxonomy-projectpagetag_DEFAULT.html

Copy to:
/wp-content/your-child-theme/templates/single-projectpage.html
/wp-content/your-child-theme/templates/archive-projectpage.html
/wp-content/your-child-theme/templates/taxonomy-projectpagetag.html

Legacy Templates:

Legacy templates were used in v1.0 of Project Pages and as such use simple PHP templates instead of more modern WordPress Block templates. (They can still be beautiful, but might not match the rest of your theme – which is sometimes a pro!)

You can read more on modifying your templates here. But fundamentally the files you’ll need to be copying over into your theme are:

Copy from:
/project-pages/templates/single-projectpage_DEFAULT.php
/project-pages/templates/archive-projectpage_DEFAULT.php
/project-pages/templates/taxonomy-projectpage_DEFAULT.php

Copy to:
/wp-content/your-child-theme/templates/single-projectpage.php
/wp-content/your-child-theme/templates/archive-projectpage.php
/wp-content/your-child-theme/templates/taxonomy-projectpagetag.php

Not found what you’re looking for?

Related guides:

• How to modify your Project Page Templates
• Child Themes and Project Pages

The post Templates first appeared on Project Pages.