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

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

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

  1. Install Timber plugin: https://wordpress.org/plugins/timber-library/
  2. Upload this plugin folder to the `/wp-content/plugins/` directory, or install it through the WordPress plugins screen directly.
  3. Activate the plugin through the ‘Plugins’ screen in WordPress
  4. and you will more benefit from our plugin if you could install Advanced Custom Fields: https://wordpress.org/plugins/advanced-custom-fields/
  5. 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 {# comments #} 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 true
We 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>
{# This is a comment and will not render #}
{% 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
totop