Genesis | Webpop

Primer

Genesis Basic Structure

Genesis is the name of the designer friendly templating engine used throughout the Webpop platform. Here we are going to discuss the basic syntax and structure of the templating engine.
Example

The Genesis templating engine uses xml like <pop:tagname attribute="value" /> syntax. Statements can either be self closing such as <pop:tagname attribute="something" /> a structure similar to an image tag in HTML or alternatively, elements can wrap a block of code such as <pop:tagname>Some code</pop:tagname> similar to a paragraph tag in HTML. If the value of a Genesis tag is empty, anything inside the tag will be ignored and Genesis will look for a default attribute or tag right after the empty tag with "no_" prepended to the tagname:
```
<pop:something>Something</pop:something><pop:no_something>Nothing</pop:no_something>
```
The example above would show "Nothing" if the tag is empty and "Something" if the tag has a value. (the number 0 counts as a value as well).

You could also also achieve the same results with the following code:
```
<pop:something default="Nothing">Something</pop:something>
```
Show Example ↓
Array

If the value of a Genesis tag is an array, anything inside the tag will be displayed for each element of the array. If each element in the array is an object, the fields of the object will be available as Genesis tags.
Example

For example, let's say you had a tag called "names" with the values: ["Bob", "Joe", "Alf"]
<pop:names /> = BobJoeAlf
<pop:names>Name: <pop:value /> </pop:names> = Name: Bob Name: Joe Name: Alf

Whenever a tag is showing an array Genesis will use some special attributes to control the behavior.

Break

Break will insert breakers in between or around each element:
```
<pop:names break="," /> = Bob, Joe, Alf
<pop:names break="li" /> = <li>Bob</li><li>Joe</li><li>Alf</li>
```
Wrap

Although we review the wrap tag independently, it's important to emphasize that you can use wrap with break to place items from an array in an unordered list for example.
```
<pop:names wrap="ul" break="li" />
```
The above code would display:
```
<ul>
  <li>Bob</li>
  <li>Joe</li>
  <li>Alf</li>
</ul>
```
Repeat

Repeat can be used to avoid the repetition. This can be useful when you have some header you only want to display when the array is not empty. When repeat is set to false you'll have access to the original array by using <pop:values>:
```
<pop:names wrap="div" repeat="false">
  <h2>Here are the names:</h2>
  <pop:values break="," wrap="div" class="names" />
</pop:names>
```
If 'names' is empty nothing will be shown, if names is ["Bob", "Joe", "Alf"] the output is:
```
<div>
  <h2>Here are the names:</h2>
  <div class="names">Bob, Joe, Alf</div>
</div>
```
Skip & Limit

Whenever you are dealing with an array Genesis can also take a skip and limit attribute to only show part of the array:
```
<pop:names break="," skip="1" limit="2" /> = Joe, Alf
```
First & Last

Sometimes you will want to do something special for the first or last element. You can use <pop:first> and <pop:last> to handle this:
```
<pop:names>
  <pop:first><h2>This will only show for the first element</h2></pop:first>
  <pop:last><h2>This will only show for the last element</h2></pop:first>
  <p>This will show for any element: <pop:value/></p>
</pop:names> 
```
Show Example ↓
Wrap

Genesis takes a "wrap" attribute in case you want to wrap HTML around the value of a tag as long as the value is not empty.
Example
```
<pop:something wrap="div">
```
Would show:
```
<div>Something</div>
```
if pop:something has the value "Something" and show nothing if pop:something is empty.

The wrap attribute can be combined with a class attribute:
```
<pop:something wrap="div" class="my-class"> = <div class="my-class">Something</div>
```
Show Example ↓
HTML Escape

When rendering the value of a tag Genesis will automatically html escape it unless the value is known to be html. So for any field that hasn't been setup as a Rich Text field, Genesis will HTML escape it.
Example

If a field "title" has the value "I <b>Would like to be bolder</b>". The output would be <pop:title> = I <b>Would like to be bolder</b>

The escape attribute can be used to control this:
```
<pop:title escape="false"> = I <b>Would like to be bolder</b>
```
HTML Escape
Show Example ↓
Truncating

You can easily truncate any text by using the "truncate" attribute. If you specify an "ellipsis" attribute as well, this will be appended to the string if it gets truncated.
Example
```
<pop:content>
  <h1><pop:title truncate="30"/></h1>
  <pop:body truncate="200" ellipsis="..."/>
</pop:content> 
```
Show Example ↓
On-the fly tags with <pop:tag>

The <pop:tag> tag makes it possible to create ad-hoc tags from within a template.
Tag Attributes

<pop:tag> will capture anything inside its opening and closing tag and add a new tag to the scope based on its name attribute.
Example
```
<pop:tag name="mytag"><pop:content><pop:title/></pop:content></pop:tag>

<pop:entries>
  <h2>Entry <pop:title/> from <pop:mytag/></h2>
</pop:entries> 
```
Given a section with the title "Blog" and 3 entries with the titles "First", "Second" and "Third" this would output:
```
<h2>Entry First from Blog</h2>
<h2>Entry Second from Blog</h2>
<h2>Entry Third from Blog</h2> 
```
Show Example ↓

Pulling in Content

<pop:search></pop:search>

Provides a search results section on a template you choose. You can customize the results by defining the section or entry fields that are displayed.
Content Variables
```
<pop:count/>
```
Displays the number of results fetched by the search term.
```
<pop:query/>
```
Displays the search query that was used.
```
<pop:results></pop:results>
```
Will display whatever fields you define from a section or entry for the results listing.
```
<pop:pagination></pop:pagination>
```
Behaves the same as using <pop:pagination> within the <pop:paginate> tag.
Tag Attributes

per_page=""

Limits the number of results displayed on a page. This tag should be used in conjunction with the <pop:paginate/> tag in order for the user to navigate to the next page of results.
Example

First make sure you have a search box added to a template you want provide the search feature to.
```
<form action="/search" method="get">
  <p class="field">
    <label for="search-box">Search: </label>
    <input type="search" name="q" value="<pop:search:query/>"/>
  </p>
</form>
```
Now add the following code to the search template:
```
<pop:search>
  <h3>Got <pop:count/> results for <pop:query/></h3>
  <pop:results>
    <h4><a href="<pop:permalink/>"><pop:title/></a></h4>
    <pop:description wrap="p"/>
  </pop:results>
  <pop:pagination>
    Page <pop:page_number /> of <pop:total_pages />
    <pop:next><a href="<pop:permalink/>">More</a></pop:next>
    <pop:previous><a href="<pop:permalink/>">Previous</a></pop:previous>
  </pop:pagination>
</pop:search>
```
This code will display the number of search results for the given search term with a limit of 10 per page. For each result, the title and description will be displayed with the title including a link to the content. Within the pop:pagination tag the total number of pages will be displayed with links to next and previous pages.
Show Example ↓
<pop:content></pop:content>

Gives access to all the fields for a content section currently displayed by the template.
Content Variables

Since this tag provides access to all fields within a content section, there are a number of variables that can be used within the opening and closing tags. In addition to the default tags, any content field you create is also available.

Default fields include:
```
<pop:title />
<pop:description />
<pop:body />
```
Tag Attributes

from="about-us"
You can display fields from other content sections not associated with the template by using the from attribute

editable="false"
By default the fields within the content tags are editable. The editable="false" attribute will not allow the defined section to be editable from within the Client Editor.

An example where you might not want to allow your client access to a field:
```
<body class="<pop:content editable='false'><pop:slug /></pop:content>">
```
Example
```
<div id="sidebar">
  <pop:content from="about-us">
    <h2><pop:title /></h2>
    <pop:body />
  </pop:content>
</div>
```
Assuming you where on another page such as the index, using this code you could display the about page tile and text on a sidebar.
Show Example ↓
<pop:entries></entries>

Will display a list of entries. When used outside the scope of specific content it will show any entries the content currently displayed by the template might have.
Content Variables

Since this tag provides access to all entry fields within a section, there are a number of variables that can be used within the opening and closing tags. In addition to the default tags, any entry field you create is also available.

Default fields include:
```
<pop:title />
<pop:description />
<pop:body />
```
Tag Attributes

order="some_field ASC|DESC"
orders by a field

limit="<a number>"
limits number of results

skip="<a number or current>"
Skips n records. If skip is set to "current" the entry currently displayed will not be included in the list.

from="/about-us"
You can display fields from other content sections not associated with the template by using the from attribute
Example
```
<pop:entries from="/blog">
  <pop:title />
  <pop:body />
</pop:entries>
```
This example will display the title and body fields from the blog section entries.

Structuring the tags in this way will yield the same result:
```
<pop:content from="/blog">
  <pop:entries>
    <pop:title />
    <pop:body />
  </pop:entries>
</pop:content>
```
Show Example ↓

<pop:paginate></pop:paginate>

Put entries inside this tag to create a paginated list.

Example

<pop:paginate per_page="2">

  <!-- Use the entries tag as usual inside paginate -->
  <pop:entries from="/blog" order="created_at desc" wrap="ul" break="li">
     <h2><pop:title /></h2>
  </pop:entries>

  <!-- Write whatever markup you like for your pagination -->
  <pop:pagination>
     <!-- Pagination gives access to the following tags: -->
     Page <pop:page_number /> of <pop:total_pages />
     First page: <pop:first><a href="<pop:permalink />"><pop:number /></a></pop:first>
     Last page: <pop:last><a href="<pop:permalink />"><pop:number /></a></pop:last>

     Previous page: <pop:previous><a href="<pop:permalink />"><pop:number /></a></pop:previous>
     Next page: <pop:next><a href="<pop:permalink />"><pop:number /></a></pop:next>

     <pop:pages wrap="ul" break="li">
        <a href="<pop:permalink/>" <pop:current>class="current"</pop:current>><pop:number /></a>
     </pop:pages>

  </pop:pagination>
</pop:paginate>

Show Example ↓

<pop:sections></pop:sections>

Provides a list sections. When used outside the scope of a specific content section it will return a list of root sections for a site.
Tag Attributes

order="some_field ASC|DESC"
orders by a field

limit="<a number>"
limits number of results

skip="<a number>"
Skips n records

from="/about-us"
You can display fields from other content sections not associated with the template by using the from attribute
Example
```
<pop:content.sections>
... would give you a list of sub sections if the current content is a section and has sub sections...
</pop:content>
```
When used inside the scope of a content it will give any subsections that content might have.
Show Example ↓
<pop:categories></pop:categories>

Returns a list of categories. You can define if you want categories from specific content sections of the admin or by default the template will return a list based on it's context.
Example

Let's say you wanted to pull in categories from the blog on the index page. The following code will show the root level categories from a blog:
```
<pop:content from="/blog">
<pop:categories />
</pop:content>
```
Alternatively, you could achieve the same results with:
```
<pop:categories from="/blog" />
```
The following code will list the entries from a blog and show the categories of each entry:
```
<pop:entries from="blog"><pop:categories />
```
To show a tree with 2 levels of categories for a blog:
```
<pop:categories from="/blog" wrap="ul" break="li">
  <pop:title />
  <pop:categories wrap="ul" break="li">
    <pop:title />
  </pop:categories>
</pop:categories>
```
Show Example ↓
<pop:author></pop:author>

Allows you to access client, collaborator, team member or account owner profile information for entries created by those users.
Content Variables
```
<pop:first_name/>
<pop:last_name/>
<pop:full_name/>
<pop:email/>
```
Example
```
<p class="meta">Posted by 
  <pop:author><a href="mailto:<pop:email/>"><pop:first_name /></a></pop:author></a> 
  <pop:published_at format="time_ago_in_words" /> ago.
</p>
```
Will display the first name of the author wrapped in a mailto anchor link with the authors email address.
Show Example ↓
<pop:current></pop:current>

Will display an output you define if the tag is being used by an active template. The output will not be displayed otherwise.
Example
```
<nav>
 <pop:sections wrap="ul" break="li">
   <li class="<pop:current>current</pop:current>"><a href="<pop:permalink />" ><pop:title /></a></li>
 </pop:sections>
</nav>
```
A common use of the tag is to add a class to an active navigation item in order to target and style the item with CSS.

In this example we are using the <pop:sections> tag to generate an unordered list of items. We then add a class to the li with the <pop:current> tag which we can use as a style hook for our CSS.
Show Example ↓

<pop:active></pop:active>

Similar to the <pop:current> tag, it will display an output you define if the tag is being used by an active template. The difference between the two is that <pop:active> can include child elements.

Example

<nav>
  <pop:sections wrap="ul" break="li">
    <li class="<pop:active>active</pop:active>">
      <a href="<pop:permalink />" ><pop:title /></a>
      <pop:active>
        <pop:categories wrap="ul" break="li">
          <li class="<pop:active>active</pop:active>">
            <a href="<pop:permalink />"><pop:title /></a>
          </li>
        </pop:categories>
      </pop:active>
    </li>
  </pop:sections>
</nav>

In this case the list item as well as the associated category will both include class="active" in order to target and style the list items with CSS. If the section does not include categories, no sub list item will be displayed.

Show Example ↓

<pop:rss />

Provides access to the current rss feed if the Content includes entries.
Content Variables
```
<pop:url />
```
Returns the URL of the feed for the current section if it has one.
You can also bypass the content variable by using
```
<pop:rss.url />
```
Same as the previous tag but this tag does not need to be wrapped in the <pop:rss> tags.
Example
```
<pop:rss><a href="<pop:url />">My Feed</a></pop:rss>
```
Wraps the feed URL in an actor tag for use on a page.
```
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
<pop:rss />
</head>
```
Will output the following when there is a feed for the current section in place of <pop:rss />
```
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://mysite.com/blog.rss">
```
If no feed is available, the tag will not be displayed in the source.

Note: The template rss.tpl is located in Templates -> System. You can either edit this template or create a new template in the main Templates directory with the file extension .rss.

For example, let's say you have a template called blog.tpl which includes entries. You may want a specific format for the rss feed. You can create another template file called blog.rss in the main Template Directory. Genesis will use the blog.rss template instead of the rss.tpl template. If Genesis does not find a blog.rss template it will default to the rss.tpl to diplay the feed.
Show Example ↓
<pop:site></pop:site> and <pop:home></pop:home>

Two different tags that return the same result. Both will give access to the fields defined in the Root section.
Example
```
<pop:home.title />
```
Would give you the title from the homepage
Show Example ↓
<pop:redirect />

Allows you to redirect a visitor to another location of the site or another site entirely.
Tag Attributes

to="another-page"
This attribute is necessary since the redirect will not work without the redirect path.

permanent="yes"
If the redirect includes the permanent attribute with the "yes" value, it will be treated as a 301 redirect. Omitting the permanent attribute or including the value "no" will define the redirect as a 302.
Example
```
<pop:redirect to="/about-us" permanent="yes"/>
```
Assuming that you added this redirect tag on the index page, you would be redirected to the about us page automatically and the redirect would be treated as permanent.
Show Example ↓
<pop:previous /> & <pop:next />

These tags can be used independent of the <pop:paginate/> tag when used within <pop:content> while displaying a single entry.
Example

These tags will honor the default sort order set within the webpop admin for the entries such as Drag'n Drop, By Title (A-Z), etc...
```
<pop:content>
 <h2><pop:title /></h2>
 <pop:body />
 <pop:previous />
 <pop:next />
</pop:content> 
```
The rendered HTML will generate the entry title wrapped in a link to the entry.
```
<a href="/entry-permalink">Entry Title</a>
```
The tags can also take a from attribute with the id of (one or more) categories. This can be useful if you want to move back and forth within the category of an entry.
```
<pop:content><p>Next in category: <pop:next from="<pop:category.id/>"/></p></pop:content>
```
You can also specify a specific order for the tags if you don't want to use the default order set from the entry listing screen.
```
<pop:content><p>Next in alphabetical order: <pop:next order="title ASC"/></p></pop:content>
```
Show Example ↓

Administration

<pop:admin />

Controls the insertion for the Client Editor within a webpage. When the Client Editor is active, javascript code will be inserted in place of this tag. Anything inside the tag will only show up in admin mode.
Example
```
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
    <meta name="description" content="description here" />
    <pop:admin />
  </head>
```
Content appearing before this tag will not be marked as editable. It's good practice to place it as the last tag in the document head to make sure that nothing in the head gets marked as editable.
Show Example ↓
<pop:user></pop:user>

This tag gives you access to the currently logged in admin user or will render nothing if an admin user is not logged in.
Content Variables

Within this tag you have access to display the following user info:
```
<pop:user>
 First name: <pop:first_name />
 Last name: <pop:last_name />
 Full name: <pop:full_name />
 Email address: <pop:email />
</pop:user>
```
Example

In order to display either a login link or the Logged in Admin user name you would use this code:
```
<pop:user default="<a href='/admin'>Login</a>">Logged in as <pop:name /></pop:user>
```
Note: the default attribute is part of the Genesis Templating Engine, as such this tag is a global attribute that can be used with any tag. This means that if a tag does not output anything, the output will be whatever is defined in the default attribute value.
Show Example ↓

SEO and Analytics

<pop:track />

Inserts the tracking code for Webpop live analytics. Insert this tag right before the closing </body> tag in any page you intend to track with live analytics.
Example
```
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>My Site</h1>
    <p>My content.</p>
    <pop:track />
  </body>
</html>
```
Show Example ↓
<pop:seo>

Inserts the title and or the description fields from the Content Section using the template. This tag cannot be self closing. In order for this tag to generate an output it needs at least the title.
Example
```
<pop:seo>
  <title><pop:title /></title>
  <meta name="description" content="<pop:description />" />
</pop:seo>
```
This example uses the SEO tag to display the Title and Description fields for a given section.
Show Example ↓

Docs & Training

Learn how to use Webpop – simply the best and most modern CMS on the planet

Primer

Example

Example

Break

Wrap

Repeat

Skip & Limit

First & Last

Example

Example

HTML Escape

Example

Tag Attributes

Example

Pulling in Content

Content Variables

Tag Attributes

Example

Content Variables

Tag Attributes

Example

Content Variables

Tag Attributes

Example

Example

Tag Attributes

Example

Example

Content Variables

Example

Example

Example

Content Variables

Example

Example

Tag Attributes

Example

Example

Administration

Example

Content Variables

Example

SEO and Analytics

Example

Example