Title: NP Twig: Front End for Custom Field & ACF Author: NewPast Published: 4 сар 8, 2021 Last modified: 6 сар 4, 2021 --- Search plugins This plugin **hasn’t been tested with the latest 3 major releases of WordPress**. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. ![](https://s.w.org/plugins/geopattern-icon/np-tiwg.svg) # NP Twig: Front End for Custom Field & ACF By [NewPast](https://profiles.wordpress.org/miniindustry/) [Download](https://downloads.wordpress.org/plugin/np-tiwg.1.0.5.zip) * [Details](https://mn.wordpress.org/plugins/np-tiwg/#description) * [Reviews](https://mn.wordpress.org/plugins/np-tiwg/#reviews) * [Installation](https://mn.wordpress.org/plugins/np-tiwg/#installation) * [Development](https://mn.wordpress.org/plugins/np-tiwg/#developers) [Support](https://wordpress.org/support/plugin/np-tiwg/) ## Description * I use [Twig](https://twig.symfony.com/) template to display your post or custom post or [Advanced Custom Fields](https://wordpress.org/plugins/advanced-custom-fields/) * [Twig](https://twig.symfony.com/) and [ACF](https://wordpress.org/plugins/advanced-custom-fields/) are a third-party plugin, we used them to render templates #### Arabic Version of this Article * [https://www.miniindustry.com/d/ar-np-twig](https://www.miniindustry.com/d/ar-np-twig) #### Template requirements * Ensure installs of Timber plugin: [https://wordpress.org/plugins/timber-library/](https://wordpress.org/plugins/timber-library/) * Then create a private post or page or of any post type * For custom post type template ensures that 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/](https://wordpress.org/plugins/advanced-custom-fields/) #### Template Syntax: a quick guide for WordPress Front End for Custom Field Note: [WordPress Classic Editor](https://wordpress.org/plugins/classic-editor/) is preferred to edit templates #### Comments * Use `{# comments #}` for comments, and comments will not render to the user, #### Variables output Variables in templets 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 (methods or properties 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 %}

This product is free

{% endif %} ``` Please note that we use the operator `==` to check the equality You can also test if an array is not empty: ``` {% if meanings %}

The array or repeater field **meaning** contains some values

{% 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 * In WordPress classic editor show source and ensure there are no tags inside the template code; ex `{% endfor %}` * For more details, see: [https://twig.symfony.com/doc/2.x/](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 keyword and how to use them visit [twig documentation](https://twig.symfony.com/doc/2.x/) #### Short template example ```

Meaning of {{ title }}

{# 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 ``` {{ post.title }} {{ 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 bad 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 a template language, and we allow users to modify 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](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 This plugin is distributed in the hope that it will be useful, but without any warranty. See the GNU General Public License for more details. http://www.gnu.org/licenses/. ### For Developers #### 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 the file user-function may be replaced on upgrade #### 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 the file user-function may be replaced on upgrade ## Screenshots * [[ * A screenshot of the template edit using WordPress classic editor. * [[ * A screenshot of the post NP Twig setting ## Installation 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/) ## FAQ This section may be added in the next version ## Reviews There are no reviews for this plugin. ## Contributors & Developers “NP Twig: Front End for Custom Field & ACF” is open source software. The following people have contributed to this plugin. Contributors * [ NewPast ](https://profiles.wordpress.org/miniindustry/) [Translate “NP Twig: Front End for Custom Field & ACF” into your language.](https://translate.wordpress.org/projects/wp-plugins/np-tiwg) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/np-tiwg/), check out the [SVN repository](https://plugins.svn.wordpress.org/np-tiwg/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/np-tiwg/) by [RSS](https://plugins.trac.wordpress.org/log/np-tiwg/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0 * Plugin initial release ## Meta * Version **1.0.5** * Last updated **5 жил ago** * Active installations **Fewer than 10** * WordPress version ** 5.0 or higher ** * Tested up to **5.7.15** * PHP version ** 7.0 or higher ** * Language * [English (US)](https://wordpress.org/plugins/np-tiwg/) * Tags * [acf](https://mn.wordpress.org/plugins/tags/acf/)[custom fields](https://mn.wordpress.org/plugins/tags/custom-fields/) [display](https://mn.wordpress.org/plugins/tags/display/)[Timber](https://mn.wordpress.org/plugins/tags/timber/) * [Advanced View](https://mn.wordpress.org/plugins/np-tiwg/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/np-tiwg/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/np-tiwg/reviews/) ## Contributors * [ NewPast ](https://profiles.wordpress.org/miniindustry/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/np-tiwg/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://www.buymeacoffee.com/NewPast)