Pilo'Press

plugin banner

The most advanced WordPress Page Builder using Advanced Custom Fields & TailwindCSS.

Author:Pilot'in (profile at wordpress.org)
WordPress version required:4.9
WordPress version tested:6.2
Plugin version:0.4.3.2
Added to WordPress repository:25-05-2020
Last updated:05-04-2023
Rating, %:100
Rated by:4
Plugin URI:https://www.pilot-in.com
Total downloads:3 341
Active installs:100+
plugin download
Click to start download

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


ChangeLog