Learn how to use page templates to modify your Project Pages appearance. #
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:
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:
- Default (Blocks Template)
- 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.htmlLegacy 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.phpNot found what you’re looking for? #
Related guides:
