Skip to content

Data fetching and returning

Q edited this page Aug 17, 2020 · 23 revisions

Context and Task

Context and task are two key aspects of Willow, they are equivalent to Class and Method in PHP and all Willows retrieve data from a single public php method within a class

Willow comes with the following "contexts", which can be extended via plugins, themes or external libraries

  • action
  • extension
  • group
  • media
  • meta
  • module
  • navigation
  • partial
  • post
  • taxonomy
  • ui
  • user
  • widget
  • wordpress

There use in most cases is totally liberal, as such you can extend the ui context to return data related to taxonomies or wordpress - the available contexts are provided as a broad group of labels by which to group similar functions, rather than as rigid constraints.

The exceptions to the above rule are the action and partial contexts which are designed for specific use-cases:

Action

WordPress actions are perhaps what make it such a popular and flexible tool ( it's certainly not because of its beautiful code! ), but they allow developers to change many aspects of how data stored in the database is retrieved and displayed.

Actions are also required to load in assets or to hook callbacks, as such they are a required part of templating - here is a simple example of how WIllow can be used to call the wp_head action

{~ action~wp_head ~}

WordPress actions might return data, such as loading assets, Willow allow this behaviour by wrapping the action callback in output buffering, capturing the returned data and adding it to the template in the defined spot where the action is called.

Partial

Partials are simply re-usable collections of html, such as a button or a call to action, they cannot contain other tags and are not parsed by Willow before being rendered.

Partials are stored as text files with a .willow extension - here is an example from one of our Q Themes:

library/view/context/parent/partial/partial~search_trigger.willow

<div class="row ml-0">
	<div class="col-12 list-group list-group-flush border-top">
		<div class="list-group-item">
			You can also
			<a 
				class="ml-1 btn btn-primary text-white p-2 q-scroll-top" 
				data-toggle="collapse" 
				data-target="#search_content"
				aria-controls="search_content" 
				aria-expanded="false" 
				aria-label="Search navigation"
				href="#">
				Search our Work
			</a>
		</div>
	</div>
</div>

The location of the file is important due to how the configuration lookups work - read more

Clone this wiki locally