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
- 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
- I use Twig template to display your post or custom post or Advanced Custom Fields
- Twig and ACF are a third-party plugin, we used them to render templates
- 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 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
- 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/
Note: WordPress Classic Editor is preferred to edit templates
- Use
{# comments #}for comments, and comments will not render to the user,
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 }}
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 %}Always use {% endif %} to close the previous if condition, Read more about if keyword in twig
If our field or variable is an array or a repeater field we can loop over each item in a sequence using for keyword
{% for m in meanings %}
Meaning: {{ m.meaning }}
{% endfor %}- We use
{% for m in meanings %}to loop over an array or repeater field calledmeaningsusingmto 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
forkeyword in twig
- In WordPress classic editor show source and ensure there are no tags inside the template code; ex
{% <del><span></del> endfor <del></span></del> %} - For more details, see: https://twig.symfony.com/doc/2.x/
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
<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 %}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
<h2>{{ post.title }}</h2>
<img src="{{ post.thumbnail.src }}"
alt="{{ post.thumbnail.alt }}" >
{{ post.content }}read more about accessing post content on timber documents
- 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
- 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 on https://twig.symfony.com
- 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.
- 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
- 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
- A screenshot of the template edit using WordPress classic editor.
- A screenshot of the post NP Twig setting
This section may be added in the next version