Author: appcropolis

If you are looking for a quick way to assign JSON data to your WordPress page or post, the {{JSON..}} binder is the way to go. This binder allows you to define an arbitrary data source that can be bounded to you page and utilizes when rendering your page.

Motivation

While building your page template, you may want to link your design to dynamic data that you might not have at the time that you are writing the code. The {{JSON.. }} binder acts as temporary data source that later on be replaced with the dynamic data that you truly want to use.

 

Parameters

source

(string) (required*) The name of the internal JSON source file.
Default: none

assign_to

(string) (required*) The name of the object to which you wish to bind the data output.
Default: none

 

Return

This binder returns the JSON string as an object.

 

Basic Usage

{{json assign_to="my_info"}}
    {"name": "Raul", "role": "CEO", "favorite_number": 60}
{{/json}}

<div>
    <h1>{{$my_info.name}}, <i>{{$my_info.role}}</i></h1>
    <small>{{$my_info.favorite_number}}</small>	
</div>

Examples

Consider a scenario where you wish to show a list of  “Projects“. You may choose to  create a custom post type in WordPress to manage your projects, or you might prefer to create a post category to achieve the same results. Thank to the {{JSON.. }} binder you can build your template with temporary data, and later on assign the data source that fits your needs.

{{json assign_to="projects"}}
{
    "data": [
        {"name": "Logo Design", "client": "ACME, LLC"},
        {"name": "Landing Page", "client": "Non Profit Organization"},
        {"name": "Analytics Integration", "client": "Internal"}
    ]
}
{{/json}}

<ul>
{{foreach $projects.data as $single_project}}
    <li>
        <h2>{{$single_project.name}}</h2>
        <p>{{$single_project.client}}</p>
    </li>
{{/foreach}}
</ul>

 

Later on, once you determine what is the best way to manage your projects in WordPress, you can replace the {{JSON… }} binder with a different one that uses dynamic data:

{{posts show="category" name="my-projects-category-slug" assign_to="projects"}}

<ul>
{{foreach $projects.data as $single_project}}
    <li>
        <h2>{{$single_project.name}}</h2>
        <p>{{$single_project.client}}</p>
    </li>
{{/foreach}}
</ul>

 

Using An Internal JSON File

You can also use internal JSON files to model your project. An internal JSON file is a predefined JSON file that can be include into your project, so you do not have to create content in WordPress while building your pages.

{{json source="me" assign_to="profile"}}{{/json}}
<!-- see: http://builder.simplifysites.com/resources/data/me.js -->

<div>
	<h1>{{$profile.first_name}} {{$profile.last_name}}</h1>
	<p>{{$profile.website}}<br/>
	   {{$profile.twitter}}</p>	
</div>

 

 

 

 

The {{require.. }} binder allows you to includes a required Javascript or CSS file in your page template. This binder is similar to the WordPress wp_enqueue. Anywhere in your template code you can add the {{required… }} binder to indicate that your code requires a CSS or Javascript code that is hosted in a separate file. The binder will add your code URL to a queue and once you specify so, the {{require… }} binder will output all URLs in the queue with appropriate SCRIPT or LINK tags.

Motivation

Image that you are building page block that renders an image slider. You image slider may require to use a third party library the might be hosted in the cloud (e.g. Nivo Slider, FlexSlider, etc). Although you could simple add the required remote libraries to the main HTML code of your page, if you need to copy your “slider block” to a different page, you will also have to modify the HTML code of the page where you wish to add the copy of the slider. The {{require… }} binder basically remove the need of tracking CSS or Javascript dependencies that need to be included in the main page.

You can declare your require dependancies anywhere in your blocks and have the CSS or Javascript output before or after the declaration. See the Examples section below.

 

Parameters

type

(string) (required*) The type of code that you require to include. Valid values for the type parameter are: css, javascript.
Default: none

src

(string) (required*) The URL of the library you wish to include. You must use an full absolute URL (e.g. http://my-project-useranme.appcropolis.com/resources/js/my-script.js). If you would like to point to a file that you uploaded to the resources folder in your project, you can omit the server portion of the URL as long as you start with a forward slash (e.g. /resources/js/my-script.js).
Default: none

cache

TODO

output

(string) Instruct the binder to output the css or javascript code that is in the queue.
Default: none

 

Return

Outputs the Javascript or CSS that have been added to a queue.

 

Examples

Consider a page with two blocks. Both blocks require two different stylesheets, but you want both stylesheet to be included in the header section of the HTML page that holds the two blocks. To accomplish this, you can instruct the {{require.. }} binder to output the code in the <head/> section of the page, and further down declare the libraries that you wish to include.

 

<html>
 <head>
  <title>My Page Template</title>
  {{require type="css" output="true"}} <!-- this will output the two CSS files required below -->
 </head>
 <body>
  <div class="appc-page">
      <div id="block1">
          {{require type="css" src="http://server.com/css/style1.css"}}
          <h2>Block #1</h2>
      </div>
      <div id="block2">
          {{require type="css" src="http://server.com/css/style2.css"}}
          <h2>Block #2</h2>
      </div>
 </body>
</html>