Daniel Telbis

Mircea Tihu

Dream Production

<p>This plugin is intended for developers that are using Advanced Custom Fields and Timber to develop their themes.</p>
<p>By enabling this plugin the user-defined advanced custom fields will be available in the Timber context variable as follows:</p>
<ul>
<li>Fields defined for settings pages will be available everywhere under the “options” key</li>
<li>Fields defined for posts, pages and custom post types will be available on the \Timber\Post object under the “fields” key</li>
<li>Fields defined for terms will be available on the \Timber\Term object under the “fields” key</li>
<li>
<p>Fields defined for users will be available on the \Timber\User object under the “fields” key</p>
</li>
<li>
<p>Defined menus will also be available everywhere under the “menus” key</p>
</li>
</ul>
<p>Also adds twig functions for images:</p>
<ul>
<li>srcset – used to generate srcset attribute tag.<br />
Usage: <code><img src="{{ post.thumbnail.src('large') }}" {{ srcset(post.thumbnail,'large') }} /></code></li>
<li>image_attr – used to generate srcset, width, height and alt.<br />
Usage: <code><img src="{{ post.thumbnail.src('large') }}" {{ image_attr(post.thumbnail,'large') }} /></code></li>
</ul>


ACF Timber Integration

Automatically enables in the Timber twig context variable all user-defined advanced custom fields.

NewPast

<ul>
<li>I use <a href="https://twig.symfony.com/" rel="nofollow ugc">Twig</a> template to display your post or custom post or <a href="https://wordpress.org/plugins/advanced-custom-fields/" rel="ugc">Advanced Custom Fields</a></li>
<li><a href="https://twig.symfony.com/" rel="nofollow ugc">Twig</a> and <a href="https://wordpress.org/plugins/advanced-custom-fields/" rel="ugc">ACF</a> are a third-party plugin, we used them to render templates</li>
</ul>
<h4>Arabic Version of this Article</h4>
<ul>
<li><a href="https://www.miniindustry.com/d/ar-np-twig" rel="nofollow ugc">https://www.miniindustry.com/d/ar-np-twig</a></li>
</ul>
<h4>Template requirements</h4>
<ul>
<li>Ensure installs of Timber plugin: <a href="https://wordpress.org/plugins/timber-library/" rel="ugc">https://wordpress.org/plugins/timber-library/</a></li>
<li>Then create a private post or page or of any post type</li>
<li>For custom post type template ensures that your template name looks like: <code>tpl-{{post_type}}</code></li>
<li>or add a custom field to your post name it <strong>twig</strong> and store the template name inside it</li>
</ul>
<h4>Custom Fields and ACF</h4>
<ul>
<li>WordPress supports custom fields, and you could add them directly to your post,</li>
<li>and ACF plugin gives more power to the custom fields</li>
<li>Use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data.</li>
<li>Read more about ACF on <a href="https://wordpress.org/plugins/advanced-custom-fields/" rel="ugc">https://wordpress.org/plugins/advanced-custom-fields/</a></li>
</ul>
<h4>Template Syntax: a quick guide for WordPress Front End for Custom Field</h4>
<p>Note: <a href="https://wordpress.org/plugins/classic-editor/" rel="ugc">WordPress Classic Editor</a> is preferred to edit templates</p>
<h4>Comments</h4>
<ul>
<li>Use <code>{# comments #}</code> for comments, and comments will not render to the user,</li>
</ul>
<h4>Variables output</h4>
<p>Variables in templets are post title, post object, and custom fields. To output post title you can use <code>{{ title }}</code>. If your post has a custom field called price. We use <code>{{ price }}</code> to output the price. Use a dot (.) to access attributes of a variable (methods or properties of an object, or items of an array: <code>{{ foo.bar }}</code></p>
<h4>Conditional output</h4>
<p>The <code>if</code> statement in Twig check if a variable has a value or an expression evaluates to <code>true</code> 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</p>
<pre>{% if agent %}
    We have an agent in your area
    Our agent: {{ agent }}
{% endif %}</pre>
<p>another example; let’s say that we have a field named price. We want to display a text if the price is zero</p>
<pre>{% if price == 0 %}
   <p>This product is free</p>
{% endif %}
</pre>
<p>Please note that we use the operator <code>==</code> to check the equality You can also test if an array is not empty:</p>
<pre>{% if meanings %}
   <p>The array or repeater field **meaning** contains some values</p>
{% endif %}</pre>
<h4>Closing condition block</h4>
<p>Always use <code>{% endif %}</code> to close the previous if condition, Read more about <a href="https://twig.symfony.com/doc/3.x/tags/if.html" rel="nofollow ugc">if keyword in twig</a></p>
<h4>Repeater field and arrays</h4>
<p>If our field or variable is an array or a repeater field we can loop over each item in a sequence using for keyword</p>
<p>The for statement code example</p>
<pre>{% for m in meanings %}
   Meaning: {{ m.meaning }}
{% endfor %}</pre>
<p>The for statement format</p>
<ul>
<li>We use  <code>{% for m in meanings %}</code> to loop over an array or repeater field called <code>meanings</code> using <strong><code>m</code></strong> to mention for each row</li>
<li>Inside the loop starts the subfields or array items with the variable name <code>**m.**</code></li>
<li>Always close the loop use <code>{% endfor %}</code></li>
<li>Read more about <a href="https://twig.symfony.com/doc/3.x/tags/for.html" rel="nofollow ugc">the <code>for</code> keyword in twig</a></li>
</ul>
<h4>Important notes for templates code</h4>
<ul>
<li>In WordPress classic editor show source and ensure there are no tags inside the template code; ex <code>{% <del><span></del> endfor <del></span></del> %}</code></li>
<li>For more details, see: <a href="https://twig.symfony.com/doc/2.x/" rel="nofollow ugc">https://twig.symfony.com/doc/2.x/</a></li>
</ul>
<h4>Power templating with only 4 keyword</h4>
<p>Using <code>if, endif, for and endfor</code> allows to generate a powerful template; however, twig contains many other useful keywords to see other keyword and how to use them visit <a href="https://twig.symfony.com/doc/2.x/" rel="nofollow ugc">twig documentation</a></p>
<h4>Short template example</h4>
<pre><h2>Meaning of {{ title }}</h2>
{# 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 %}
</pre>
<h4>Output post data</h4>
<p>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 <code>post.content</code> to access post content</p>
<pre>{{ post.title }}
   
{{ post.content }}
</pre>
<p>read more about accessing post content on <a href="https://timber.github.io/docs/v2" rel="nofollow ugc">timber documents</a></p>
<h4>Why templating engine and not a raw PHP programming language</h4>
<ul>
<li>More Simple; so templating is more readable, and very easy that allows users to learn quickly,</li>
<li>and Limit the allowed function to prevent bad mistakes,</li>
<li>and easy to edit using WordPress classic editor</li>
</ul>
<h4>About Twig templating engine</h4>
<ul>
<li>The twig template engine process templates data, and output a webpage.</li>
<li>and it is a flexible, fast, and secure template engine for PHP.</li>
<li>We use Twig a template language, and we allow users to modify the template design.</li>
<li>It is fast because Twig compiles templates into optimized PHP code.</li>
<li>Get flexible, so it allows the developer to define its own custom tags and filters.</li>
<li>Read more about <a href="https://twig.symfony.com" rel="nofollow ugc">Twig</a></li>
</ul>
<h4>Timber and Twig</h4>
<ul>
<li>Timber helps to include Twig in WordPress,</li>
<li>with Timber, you write your HTML using the Twig Template Engine separate from your PHP files,</li>
<li>and this cleans up your template code so, for example, and your Twig template can focus on the HTML and display.</li>
</ul>
<h4>License and use</h4>
<p>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/.</p>
<h3>For Developers</h3>
<h4>Add custom data to fields</h4>
<ul>
<li>Edit the file user-functions.php</li>
<li>Create a function and name it <code>get_fields_{{post_type}}</code></li>
<li>If your custom post type contains ‘-‘ replace it with ‘_’</li>
<li>I include a sample function in user-functions.php</li>
<li>Backup your functions, and keep in mind that the file user-function may be replaced on upgrade</li>
</ul>
<h4>Add custom data for each singular page</h4>
<ul>
<li>Edit the file user-functions.php</li>
<li>then create a function and name it np_content_singular</li>
<li>I include a sample function in user-functions.php</li>
<li>Backup your functions, and keep in mind that the file user-function may be replaced on upgrade</li>
</ul>


NP Twig: Front End for Custom Field & ACF

NP Twig Front End for WordPress Custom Field and Advance Custom Fields. Renders data using a twig template. It supports both free ACF and ACF pro.

ACF Timber Integration vs NP Twig: Front End for Custom Field & ACF