Pilo'Press

Pilo’Press is a framework plugin for WordPress. Based on ACF and ACF Extended, it allows you to create layouts among other things and use the Flexible Content field as a page builder.

Pilo’Press uses Tailwind CSS for style templating which can be setup and build directly from the back-office.
Please note that Tailwind CSS is not mandatory, you can choose to use it or not.

Requirements

This plugin requires Advanced Custom Fields PRO and Advanced Custom Fields: Extended plugins in order to work correctly.

Getting started

1. Activate Advanced Custom Fields Pro plugin
2. Activate ACF Extended plugin
3. Activate Pilo’Press plugin
4. In your theme, create a pilopress folder
5. Within the pilopress folder, create layouts subfolder
6. Within the pilopress folder, create assets subfolder

7. In the index.php file, add the following code:

   <?php
   
   get_header();
   
       the_pip_content();
   
   get_footer();
   

Tailwind CSS

In the administration, under Pilo'Press > Styles, when you click on “Update & Compile”, TailwindCSS will be compiled remotely using TailwindAPI. Minified CSS files are then created under /pilopress/assets/styles.min.css and /pilopress/assets/styles-admin.min.css.

You can manually enqueue those files in your theme for the front-end & the back-end, but we recommend to use automatic enqueue code above.

It is possible to manually retrieve the Tailwind PostCSS & JS fields of the administration if you want to build TailwindCSS locally. To do so, you can use the following code:

$tailwind_css = get_field( 'pip_tailwind_style', 'pip_styles_tailwind' );
$tailwind_config = get_field( 'pip_tailwind_config', 'pip_styles_tailwind' );

For more details, see Tailwind CSS Documentation.

Customizing style

To customize default Tailwind CSS styles, go to Pilo'Press > Styles from left navigation menu or top bar menu.

For more details about customization, see Github Page.

Add new layout

• In the admin menu Pilo'Press > Layouts, add a new layout
• Configure the layouts fields
• Create PHP, CSS and JS files in your theme layout folder /your-theme/pilopress/layouts/your-layout
• You have to name those files the same way you did in back-office settings

Note: only PHP template file is require.

Templating

To display the content of your post, you have to use the following function:

// Pilo'Press content (doesn't need 'echo')
the_pip_content();

// Pilo'Press content (needs 'echo')
echo get_pip_content();

Components

See GitHub Page for complete example.

Hooks

Available hooks are list and describe in GitHub Page