Pilot'in

<p>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.</p>
<p>Pilo’Press uses Tailwind CSS for style templating which can be setup and build directly from the back-office.<br />
Please note that Tailwind CSS is not mandatory, you can choose to use it or not.</p>
<h3>Requirements</h3>
<p>This plugin requires <a href="https://www.advancedcustomfields.com/pro/" rel="nofollow ugc">Advanced Custom Fields PRO</a> and <a href="https://wordpress.org/plugins/acf-extended/" rel="ugc">Advanced Custom Fields: Extended</a> plugins in order to work correctly.</p>
<h3>Getting started</h3>
<ol>
<li>Activate Advanced Custom Fields Pro plugin</li>
<li>Activate ACF Extended plugin</li>
<li>Activate Pilo’Press plugin</li>
<li>In your theme, create a <code>pilopress</code> folder</li>
<li>Within the <code>pilopress</code> folder, create <code>layouts</code> subfolder</li>
<li>Within the <code>pilopress</code> folder, create <code>assets</code> subfolder</li>
<li>
<p>In the <code>index.php</code> file, add the following code:</p>
<pre><code><?php

get_header();

    the_pip_content();

get_footer();
</code></pre>
</li>
</ol>
<h3>Tailwind CSS</h3>
<p>In the administration, under <code>Pilo'Press > Styles</code>, when you click on “Update & Compile”, TailwindCSS will be compiled remotely using <a href="https://www.tailwindapi.com/" rel="nofollow ugc">TailwindAPI</a>. Minified CSS files are then created under <code>/pilopress/assets/styles.min.css</code> and <code>/pilopress/assets/styles-admin.min.css</code>.</p>
<p>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.</p>
<p>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:</p>
<pre><code>$tailwind_css = get_field( 'pip_tailwind_style', 'pip_styles_tailwind' );
$tailwind_config = get_field( 'pip_tailwind_config', 'pip_styles_tailwind' );
</code></pre>
<p>For more details, see <a href="https://tailwindcss.com/docs/installation/" rel="nofollow ugc">Tailwind CSS Documentation</a>.</p>
<h3>Customizing style</h3>
<p>To customize default Tailwind CSS styles, go to <code>Pilo'Press > Styles</code> from left navigation menu or top bar menu.</p>
<p>For more details about customization, see <a href="https://pilot-in.github.io/PiloPress/docs/customizing-styles/" rel="nofollow ugc">Github Page</a>.</p>
<h3>Add new layout</h3>
<ul>
<li>In the admin menu <code>Pilo'Press > Layouts</code>, add a new layout</li>
<li>Configure the layouts fields</li>
<li>Create PHP, CSS and JS files in your theme layout folder <code>/your-theme/pilopress/layouts/your-layout</code></li>
<li>You have to name those files the same way you did in back-office settings</li>
</ul>
<p>Note: only PHP template file is require.</p>
<h3>Templating</h3>
<p>To display the content of your post, you have to use the following function:</p>
<pre><code>// Pilo'Press content (doesn't need 'echo')
the_pip_content();

// Pilo'Press content (needs 'echo')
echo get_pip_content();
</code></pre>
<h3>Components</h3>
<p>See <a href="https://pilot-in.github.io/PiloPress/docs/components/" rel="nofollow ugc">GitHub Page</a> for complete example.</p>
<h3>Hooks</h3>
<p>Available hooks are list and describe in <a href="https://pilot-in.github.io/PiloPress/docs/hooks/" rel="nofollow ugc">GitHub Page</a></p>


Pilo'Press

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

leeshadle

<p>Install the free plugin and start using Tailwind CSS in WordPress, instantly.</p>
<p>⏰ Start using Tailwind CSS in WordPress in seconds, no setup required.<br />
⚙️  Effortlessly configure Tailwind CSS right from WordPress.<br />
⚡️  Build even faster with 50+ responsive, <a href="https://wpdraft.com" rel="nofollow ugc">copy & paste block patterns</a>.</p>
<p>Current <a href="https://tailwindcss.com/" rel="nofollow ugc">Tailwind CSS</a> version: 3.4.5</p>
<h3>How It Works:</h3>
<ul>
<li>Install free Draft plugin</li>
<li>Configure Tailwind CSS right in the page, post, or site editor or from WP Admin > Settings > Draft settings</li>
<li>Add Tailwind CSS utility classes to blocks</li>
<li>Go Pro to improve site performance by purging unused CSS</li>
</ul>
<h3>Free plugin features:</h3>
<ul>
<li>Configure Tailwind</li>
<li>Add Custom CSS ( including ability to @apply Tailwind CSS utility classes )</li>
<li>Add Tailwind CSS utility classes to Gutenberg blocks</li>
<li>Add Tailwind CSS utility classes inline to text ( such as headings and paragraphs )</li>
</ul>
<h3>Pro plugin features:</h3>
<ul>
<li>Purge Unused CSS ( make your WordPress site blazing fast )</li>
</ul>
<h4>Block-Editor Add-ons:</h4>
<ul>
<li>Dark mode toggle block – add dark mode toggle blocks anywhere to toggle using the Tailwind CSS darkMode ‘selector’ strategy</li>
<li>Group block link – add links to the Group block for creating linkable cards and layouts</li>
<li>Archive title filter – add text before/after archive titles for better archive labeling<br />
<a href="https://wpdraft.com/pricing" rel="nofollow ugc">Go Pro</a></li>
</ul>
<h3>Free full-site-editing (FSE) block theme:</h3>
<p><a href="https://wpdraft.com/theme" rel="nofollow ugc">Learn more</a></p>
<h3>Free ready-to-use copy & paste block patterns:</h3>
<p><a href="https://wpdraft.com/wordpress-block-patterns" rel="nofollow ugc">Explore patterns</a></p>
<h3>Free ready-to-use copy & paste block templates:</h3>
<p><a href="https://wpdraft.com/wordpress-block-templates" rel="nofollow ugc">Explore templates</a></p>
<h3>Free Video Tutorials</h3>
<p>Learn how to speed up your development by adding Tailwind CSS utility classes to Gutenberg blocks:<br />
<a href="https://wpdraft.com/tutorials" rel="nofollow ugc">Tutorials</a></p>
<h3>Copyright</h3>
<p>Draft WordPress Plugin, Copyright 2021 leeshadle<br />
Draft WordPress Plugin is distributed under the terms of the GNU GPL</p>


Draft – Tailwind CSS for WordPress.

Add Tailwind CSS to WordPress, in seconds.

Pilo'Press vs Draft – Tailwind CSS for WordPress.