NP Twig as a front end for WordPress ACF: new & free plugin

Twig as a front end for WordPress ACF & Custom Field. It uses a Twig template to render post data, Advance Custom Fields, or custom fields

NP Twig as a front end for WordPress ACF & Custom Fields

We will try to answer some questions:

How to display WordPress ACF custom fields in Frontend?
How to display custom field value in WordPress?
What about ACF frontend form pro?
How do you display custom fields in the front end?
How do you add advanced custom fields ACF to the frontend?

Arabic Version of the Article: NP Twig as a front end for WordPress ACF & Custom Fields

https://www.miniindustry.com/d/ar-np-Twig

Installation of NP Twig as a front end for WordPress ACF & Custom Fields

Install Timber plugin: https://wordpress.org/plugins/timber-library/
Upload this plugin folder to the `/wp-content/plugins/` directory, or install it through the WordPress plugins screen directly.
Activate the plugin through the ‘Plugins’ screen in WordPress
and you will more benefit from our plugin if you could install Advanced Custom Fields: https://wordpress.org/plugins/advanced-custom-fields/
This plugin runs well on both AMP and none AMP sites

Description of NP Twig as a front end for WordPress ACF & Custom Fields

I use Twig template to display your post or custom post or Advanced Custom Fields
Twig and ACF are third-party plugins, we used them to render templates

Template requirements of NP Twig as a front end for WordPress ACF & Custom Fields

Ensure installs of Timber plugin: https://wordpress.org/plugins/timber-library/
Then create a private post or page or of any post type
For custom post type template ensures your template name looks like: tpl-{{ post_type }}
or add a custom field to your post name it Twig and store the template name inside it

Custom Fields and ACF

WordPress supports custom fields, and you could add them directly to your post,
and ACF plugin gives more power to the custom fields
Use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data.
Read more about ACF on https://wordpress.org/plugins/advanced-custom-fields/

Template Syntax: a quick guide

Note: I prefer to use WordPress Classic Editor to edit templates

Comments

Use for comments, and comments will not render to the user,

Variables output

Variables in temples are post title, post object, and custom fields.
To output post title you can use {{ title }}.
If your post has a custom field called price. We use {{ price }} to output the price.
Use a dot (.) to access attributes of a variable, method or property of an object, or items of an array:
{{ foo.bar }}

Conditional output

The if statement in Twig check if a variable has a value, or an expression evaluates to trueWe can add conditions to display any text. Let’s say that we have a custom field named “agent” and want to display a text when the field agent contains a text. We can write.

{% if agent %}
    We have an agent in your area
    Our agent: {{ agent }}
{% endif %}

Another example; let’s say that we have a field named price. We want to display a text if the price is zero.

{% if price == 0 %}
   <p>This product is free</p>
{% endif %}

Please note that we use the operator == to check the equality

You can also test if an array is not empty:

{% if meanings %}
   <p>The array or repeater field meaning contains some values</p>
{% endif %}

Closing condition block

Always use {% endif %} to close the previous if condition,

Read more about if keyword in Twig: https://Twig.symfony.com/doc/3.x/tags/if.html

Repeater field and arrays

If our field or variable is an array or a repeater field, we can loop over each item in a sequence using for keyword

The for statement code example

{% for m in meanings %}
   Meaning: {{ m.meaning }}
{% endfor %}

The for statement format

We use {% for m in meanings %} to loop over an array or repeater field called meanings using m to mention for each row
Inside the loop starts the subfields or array items with the variable name m.
Always close the loop use {% endfor %}
Read more about the for keyword in Twig: https://Twig.symfony.com/doc/3.x/tags/for.html

Important notes for templates code

From the classic editor, select to show the source and ensure there are no tags inside the template code; ex {% <span> endfor </span> %}
For more details, see: https://Twig.symfony.com/doc/2.x/

Power templating with only 4 keyword

Using if, endif, for and endfor allows to generate a powerful template; however, Twig contains many other useful keywords to see other keywords and how to use them visit Twig documentation: https://Twig.symfony.com/doc/3.x/

Template Example for NP Twig as a front end for WordPress ACF & Custom Fields

<h4>Meaning of {{ title }}</h4>

{% for m in meanings %}
    {% if m.meaning %}
        Meaning: {{ row.meaning }}
    {% endif %}
    {% if m.example %}
        Example: {{ m.example }}
    {% endif %}
{% endfor %}

Output post data

We can access the post using the post keyword. to access any property of the post, we put a dot (.), and then we put the property name.
For example, use post.content to access post content

<h4>{{ post.title }}</h4>
   <img src="{{ post.thumbnail.src }}" 
        alt="{{ post.thumbnail.alt }}" >
{{ post.content }}

read more about accessing post content on timber documents: https://timber.github.io/docs/v2

Why templating engine and not a raw PHP programming language

More Simple; so templating is more readable, and very easy that allows users to learn quickly,
and Limit the allowed function to prevent unpleasant mistakes,
and easy to edit using WordPress classic editor

About Twig templating engine

The Twig template engine process templates data and output a webpage.
and it is a flexible, fast, and secure template engine for PHP.
We use Twig as a template language, and we allow users to change the template design.
It is fast because Twig compiles templates into optimized PHP code.
Get flexible, so it allows the developer to define its own custom tags and filters.
Read more about Twig on https://Twig.symfony.com

Timber and Twig

Timber helps to include Twig in WordPress,
with Timber, you write your HTML using the Twig Template Engine separate from your PHP files,
and this cleans up your template code so, for example, and your Twig template can focus on the HTML and display.

License and use of NP Twig as a front end for WordPress ACF & Custom Fields

I distributed this plugin hoping it will be useful, but with no warranty. See the GNU General Public License for more details. http://www.gnu.org/licenses/.

Developers and NP Twig as a front end for WordPress ACF & Custom Fields

Add custom data to fields

Edit the file user-functions.php
Create a function and name it get_fields_{{post_type}}
If your custom post type contains ‘-‘ replace it with ‘_’
I include a sample function in user-functions.php
Backup your functions and keep in mind that upgrade may replace the file user-function

Add custom data for each singular page

Edit the file user-functions.php,
then create a function and name it np_content_singular
I include a sample function in user-functions.php
Backup your functions and keep in mind that upgrade may replace the file user-function

Screenshots of NP Twig as a front end for WordPress ACF & Custom Fields

1. A screenshot of the template edit using WordPress classic editor.

Upgrade Notice of NP Twig as a front end for WordPress ACF & Custom Fields

No special requirements for the upgrade.

Downloads of NP Twig as a front end for WordPress ACF & Custom Field

https://wordpress.org/plugins/np-tiwg/

More Software & Coding articles

Useful links

https://wordpress.org/plugins/timber-library/
https://www.advancedcustomfields.com/
https://wordpress.org/plugins/advanced-custom-fields/
https://Twig.symfony.com

Related keywords to NP Twig as a front end for WordPress ACF & Custom Field

ACF form shortcode,
ACF front end
ACF front end editor
ACF frontend
ACF post
ACF render field
ACF template
ACF timber
ACF WordPress
Advanced custom fields ACF,
display ACF field on frontend
Fields for products in the frontend,
get ACF field in functions.php
Products in frontend
show advanced custom fields in frontend
timber ACF
timber get ACF field
Twig ACF, ACF Twig
Twig array contains the value
Twig check array not empty
Twig check if the array is empty
Twig check if the array is not empty
Twig check if the object has property
Twig conditional
Twig contains
Twig for loop
Twig for WordPress
Twig front end
Twig frontend
Twig if array not empty
Twig in WordPress
Twig limit for the loop
Twig post
Twig raw PHP
Twig replace
Twig template WordPress
Twig timber
Twig WordPress, WordPress Twig
uses of Twig
WordPress templating engine
WordPress timber plugin
WordPress Twig template