Block enabled themes with Project Pages

If you see a message like the above in your WordPress admin, it’s good news. Your theme is block-enabled. This means Project Pages can use it’s shiny new templates and make your Project Pages look great out of the box.

You can change your template mode to ‘Default’ which uses the latest and greatest Block-enabled templates. This means you can use Project Pages blocks throughout your site, (and if you have Pro you can use the extra blocks included in that).

Read more about template mode and see where to change it here.

Non-block-enabled themes with Project Pages

“The theme you are currently using is not compatible with the Site Editor”

If you see a message like the above in your WordPress admin, it means your theme is not block-enabled. This means Project Pages cannot use it’s shiny new templates. That’s okay, you can still use the old ‘legacy’ templates from Project Pages v1.0, they’re just less shiny.

Given WordPress has evolved a lot around block architecture, we’d advise you think about moving your theme to be a more modern one which is block based, (there’s just many benefits to using block based themes now).

Without a block based theme you cannot change your template mode from ‘Legacy’.

Read more about template mode here.

As ever, if you need any support with this or another issue, please contact me.

The post Block Enabled Themes first appeared on Project Pages.

Project Pages Prompts in PRO are designed to help.

Using Prompts in Project Pages PRO

First up you’ll need to have the core Project Pages plugin installed, as well as the PRO upgrade plugin. Once you’ve got them installed and activated you can go ahead and start using prompts.

1. Make a new project, or edit an existing project. When you get to editing the body of the project, click the ‘Project Prompts’ button:

2. This will open a new modal, from which you can select a prompt to use to start writing:

2.a. Individual prompts:

If you want to select your sections one by one you can select individual prompts from the drop down list and click ‘Use Prompt’. These can be good reminders to include certain details:

2.b. Prompt Sets

If you want a standardised format for your Project Pages, or you just want to get more inspiration for writing the story of your creation, select a prompt set from the drop down list and click ‘Use Prompt’. This’ll populate your Project body with some helpful headers to inform your Project story.

3. Get writing

Here’s an example of a single prompt injected into your Project body field. It’s a simple nudge to get your writing started. Where your project has already got a title Project Pages PRO will automatically switch the text ‘this project’ for your project title when you use any particular prompt.

Want more prompts? Got feedback?

Please do drop me an email if you’ve got ideas for other prompts or feedback on this feature

The post Using Prompts for better Project updates in Project Pages PRO first appeared on Project Pages.

Social Sharing Image Generation Requirements

Project Pages PRO requires one of two PHP libraries to generate Social Share images.

• ImageMagick (works best, images come out cleanest)
• GD Image (Experimental support, works well in most cases)

… Most shared hosts will have one of these available, but ideally you’d have the PHP extension for ImageMagick installed.

You can usually find out if your host/server has one of these installed by googling “does {your hosting company} have ImageMagick PHP Extension”.

For now best results are achieved with ImageMagick, but I’ve included experimental support for GD Image. Important: If you’ve turned on Social Share image generation and you’re noticing any unusual behaviour when loading project pages, (e.g. page slowdowns), please disable the setting and email me to let me know.

Enabling/Disabling Social Share Image Generation

You can enable/disable this feature by visiting the Project Pages Settings page (“Project Pages” -> “Settings” from your WP Admin menu) and then changing the ‘Share Image Mode’ setting.

As you can see below you have three options:

• Do not add OG Meta (Share) Tags
• Use Featured Images
• Generate Cool OG Meta Images

… the latter of these options enables Social Share Image generation, if you’re having any issues with this feature, or don’t want it enabled, I recommend using “Use Featured Images”.

The “Do not add OG Meta (Share) tags” option is only really productive if you have an SEO plugin which is already doing this better than Project Pages does.

Any issues, please get in touch.

The post Project Pages Pro requires ImageMagick first appeared on Project Pages.

Note: Currently if your hosting doesn’t have the Imagemagick extension installed this feature will fallback to the EXPERIMETNAL Gd Image library, which might cause timeouts and produces slightly less perfect images. I’m working on a workaround, but you’ve been warned.

Choosing a background

You can choose which background you want your Project Pages to use to generate the sharing images by going to “Project Pages -> Settings” and scrolling down to “PRO settings”:

… here you can select whether to use these automatically generated meta images, or your Project Page featured images. After that you can choose a background via the “Share Image Background” setting.

After you change this and save the settings, refresh the page and go back to the section to see an example.

You can view examples of the different background options below.

Background options (Examples)

Abstract

Abstract 2

Abstract 3

Abstract 4

Abstract 5

Abstract Sun

Art

Art 2

Cogs

Cogs 2

Cogs 3

Matrix

Matrix 2

Nature

Nature 2

Sky

Space

Space 2

Space 3

Theatre

Technology

Technology 2

Waves

Blue

Green

Pink

Terracotta

Tools

The post Generating Custom Social Sharing Images (OG Meta) with Project Pages Pro first appeared on Project Pages.

Purchasing Project Pages Pro

You can purchase a copy of Project Pages PRO here. Once you’ve purchased, a copy of the plugin will be emailed to you.

Installing Project Pages Pro plugin

When you purchase Project Pages PRO you’ll get a link to the .zip file in an email, go ahead and download that .zip file, (project-pages-pro.zip).

Note: To use Project Pages PRO you’ll need an active version of the Project Pages plugin installed on your WordPress install. If you haven’t already got that, you can download it via WordPress Admin (Add plugin, search “Project Pages” and click install), or you can download it here.

Next head on over to your WordPress Admin screen and click “Plugins -> Add New Plugin”:

Next click the “Upload Plugin” button next to the page title:

Then upload the .zip file (project-pages-pro.zip) via the dialog:

Click “Install Now”, and then “Activate Plugin” on the next screen:

That’s it! You’ve got Project Pages PRO installed.

Using Project Pages PRO

Now that you’ve got PRO installed, there’s a bunch of cool stuff you can do. Try some of these!:

• Set up project sharing image templates, or see how yours look. (This requires the ImageMagick php extension.)
• Start using Prompts to inspire better Project write-ups.
• Try out the extra blocks! Add “Related Projects” block to your site template or a page, or the “Featured Project” block (which even lets you show a random project each time someone looks at the page, if you’re into that).

Thanks again for supporting me as I build this tool for creators like you and I, your support means everything to me.

The post Installing Project Pages PRO first appeared on Project 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:

• 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.

Default URLS

By default your Project Pages will be served from your site on an URL like this:

https://yourdomain.com/projects
https://yourdomain.com/projects/time-machine

In the above example, projects is what I call your Permalink Root. All Project Pages pages will start with it. For example, Project Tag archives would look like this:

https://yourdomain.com/projects/tagged/woodwork/

If you’d like to change this structure, you can start by changing the Permalink Root:

Permalink Root

As above, this defaults to /projects but you can use any text string you’d like (Note, it will be slug-ified – e.g. My 3PIC Project$ would become my-3pic-project).

To change your Permalink Root from projects:

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

2. From there find the ‘URLS’ section of settings. Here you can change the Permalink root to any text string, then click ‘Save Settings’:

On saving you should be able to click the link below the new Permalink Root that you’ve set to verify your Project Page archive is loading. (E.g. in the above example /le-projects.) If it doesn’t load, see the following section of this guide.

Troubleshooting: Refreshing Permalinks

Permalinks are a beautiful feature in WordPress. They’ve made our websites prettier in the URL bar for years now, but they do still sometimes hit an issue when we change the rules which work them behind the scenes.

If you’re loading your Project Pages pages and they’re 404’ing, or not showing properly, you may need to ‘refresh’ or ‘flush’ your permalinks. Here’s how:

1. Go to ‘Settings’ -> ‘Permalinks’ from your wp-admin menu:

2. Don’t. Change. Anything. Just click ‘Save Changes’ at the bottom of the page:

3. Test your Permalinks:

It’s always good practice to check over your site after you update the permalink structure, (though in reality what we’re doing here is ‘flushing’ the rules to rebuild it – nothing bad should have happened, but hopefully your Project Pages are working now!)

Note: Project Pages does it’s best to do this all behind the scenes when you change the Permalink root, sometimes however, with caching, or many permalink changes, these get lost in the mix. Flushing your permalinks like this is almost always the fix.

The post URLS & Permalink Root first appeared on Project Pages.

1. Download and install:

If you haven’t already, please download Project Pages from our download page, WordPress.org, or via your wp-admin, (go to ‘Plugins’ -> ‘Add new’ -> Search ‘Project Pages’ and click install).

2. Familiarise yourself with the plugin:

Once installed, you’ll see Project Pages in your sidebar:

From this menu you can click ‘Project Pages’ at the top for the welcome screen:

3. Explore the welcome checklist.

The welcome page has a helpful checklist for you to get familiarised with the plugin:

… working through the steps here is a great way to get yourself started with Project Pages, but more important than anything is to get adding projects!

Adding your first project

To get started click ‘Project Pages’ -> ‘Add New’ from your wp-admin left-hand navigation bar.

You’ll be greeted with a screen like this:

This page is quite self explanatory, but basically it’s a way to capture what you’re making, have made, or want to make. I enjoy adding all my ideas as I commit to making them, then following the full project workflow of updating the project as I build it.

If you have any questions or feedback on the editor, or anything in Project Pages, please do let me know in the support forum, but you’ll probably find your way around this screen easily enough.

Bonus: Add logs

What I’ve found useful when working through a project is to add notes as I go. Many of these are useful to others, or add interesting context to the project as a whole.

To this end, as well as a ‘body’ text which a Project can have to tell the long-form story, premise, or outcome; a Project can also have a trail of ‘logs’ which can enhance your project story in a timeline fashion:

… if you’re not into logs you can turn them off in the settings

Publishing Project Pages

Once you’ve added enough info to your Project for it to be a good addition to your Project Portfolio, you can publish via the usual WordPress publish box:

… but after your Project Page is live, you have a few more options! You can share your project via social media (always good to do when you’re ready to spread the word), or (coming soon), you can publish a summary of your project to our directory for extra exposure!

Viewing the settings

Some of us like to explore the settings before we even start using a plugin. I totally get it. You can check through the settings for Project Pages by clicking ‘Project Pages’ -> ‘Settings’ from your wp-admin nav bar.

Further, if you use templating, you can modify the Project Page templates and change settings per-block for each element used in Project Pages:

Join the community list for more

Click here to join the list, get help, regular updates, and join the Project Page community.

The post Getting Started with Project Pages first appeared on Project Pages.