diff --git a/_posts/2023-05-20-mediaengagement-technical-docs.md b/_posts/2023-05-20-mediaengagement-technical-docs.md index 6055ae0..5f84f54 100644 --- a/_posts/2023-05-20-mediaengagement-technical-docs.md +++ b/_posts/2023-05-20-mediaengagement-technical-docs.md @@ -81,7 +81,15 @@ This will save you storage on your machine because all images will be fetched fr } ``` -2. Open `siteRoot/conf/nginx/site.conf.hbs` in your editor and add the below snippet below the "{{/unless}}" line in the `# WordPress Rules`: +2. Open `siteRoot/conf/nginx/site.conf.hbs` in your editor and add the below snippet below the + +
+ {% raw %} + {{unless}} + {% endraw %} ++ +line in the `# WordPress Rules`: ``` include uploads-proxy.conf; diff --git a/_posts/2023-05-21-mediaengagement.md b/_posts/2023-05-21-mediaengagement.md index 4f99a0c..3947bba 100644 --- a/_posts/2023-05-21-mediaengagement.md +++ b/_posts/2023-05-21-mediaengagement.md @@ -38,6 +38,8 @@ For more in depth detail see [Technical Docs - First Day on the Job](/mediaengag 5. **Explore WordPress**: If you’re new to WordPress, take some time to explore the admin panel on your local environment. Feel free to experiment—any issues can be reverted with `git reset --hard origin/master`. Commit frequently and work in new branches. + - [WordPress Developer docs - creating custom pages](https://developer.wordpress.org/themes/template-files-section/page-template-files/) + ##### _Pro Tips:_ - Changes to the frontend are typically located in the templates or SCSS files under the `assets` folder. @@ -104,7 +106,7 @@ location ~ ^/wp-content/uploads/(.*) {
Open siteRoot/conf/nginx/site.conf.hbs
in your editor and add the below snippet below the {{
/unless}}
line in the `# WordPress Rules`:
Open siteRoot/conf/nginx/site.conf.hbs
in your editor and add the below snippet below the {{unless}}
line in the `# WordPress Rules`:
include uploads-proxy.conf;
@@ -265,6 +267,137 @@ Engage uses the **Timber** framework and **Twig** templating engine. Familiarize
- [Timber Documentation](https://timber.github.io/docs/v2/)
- [Twig Documentation](https://twig.symfony.com/doc/3.x/intro.html)
+### Understanding a custom page template
+
+Check out the existing page, Solidarity Journalisim, setup:
+
+- Base file: page-solidarity-journalism.php renders the page-solidarity-journalism.twig markup:
+```php
+Timber::render(['page-solidarity-journalism.twig'], $context, ENGAGE_PAGE_CACHE_TIME);
+```
+
+- .twig file: `templates/page-solidarity-journalism.twig` holds the markup/html for the page template.
+
+ - In this file you will also see `include` blocks where other .twig partials are included:
+
+
+ {% raw %}
+ {% include "partial/tile.twig" with { 'tile': post } %}
+ {% endraw %}
+
+
+ 
+
+ The base `page-solidarity-journalisim.php` file renders the `page-solidarity-journalism.twig` file.
+
+ `page-solidarity-journalisim.php` code:
+
+ ```php
+
+ Sample test
+
+ ```
+
+ now when you go to WP Admin and add a new page you should see "Sample" in the Page attributes > Template dropdown.
+
+ 
+
+ #### PHP providing the data to the Twig files
+
+ Referring back to the `page-solidarity-journalism.php` file, this code:
+
+ ```php
+ $resource_posts = get_field('resource_posts');
+ $context['resource_posts'] = $resource_posts;
+ ```
+
+ ... is where the `resource_posts` data from Advanced Custom Fields(ACF) is assigned to a variable and adds it to the page `$context`.
+
+ **It is highly suggested to check out the [Timber Context Docs](https://timber.github.io/docs/v2/guides/context/).**
+
+ Getting into the fine details now....
+
+ ```php
+ get_field()
+ ```
+
+ this is the ACF's function to pull data. In WP Admin sidebar check out the field group ACF > Solidarity Journalism.
+ `resource_posts` Relationship type field corresponds to the `get_field('resource_posts')`.
+
+ > How are the ACF fields assigned to a page/post template?
+
+ In the field group look for "Settings". In this example the "Location Rules" are set to the post template "Soldiarity Journalisim"
+
+ 
+
---
## Plugins
diff --git a/assets/img/acf-settings.png b/assets/img/acf-settings.png
new file mode 100644
index 0000000..b519224
Binary files /dev/null and b/assets/img/acf-settings.png differ
diff --git a/assets/img/sample-page-template.png b/assets/img/sample-page-template.png
new file mode 100644
index 0000000..5725b7c
Binary files /dev/null and b/assets/img/sample-page-template.png differ
diff --git a/assets/img/templates.jpg b/assets/img/templates.jpg
new file mode 100644
index 0000000..9d73665
Binary files /dev/null and b/assets/img/templates.jpg differ