Guides
Tutorials
Pop Tags

PopTag Basics

The PopTags template engine

Templates in Webpop are just like HTML files. But they use the file extension .tpl and give you access to a bunch of useful Pop Tags to render dynamic content from the content repository.

There are two fundamental ways to connect content to a template.

  1. You can assign a template to a content with the content architect. 
  2. You can pull any content into a template by using  the "from" attribute in a content tag.

Here's an example of how assigning content works. In this case, we use the content architect to assign individual blog entries to be rendered by a template.

Here's our simple template for displaying an entry in a blog section:

<!doctype html>
<head>
  <title><pop:content><pop:title/></pop:content></title>
  <pop:admin/>
</head>
<body>
  <pop:content>
    <h1 class="title"><a href="<pop:permalink/>"><pop:title/></a></h1>
    <div class="body"><pop:body/></div>
    <div class="meta">By <pop:author.name/> on <pop:published_at format="mm/dd/yyyy"/></div>
  </pop:content>
</body>

<pop:content> gives access to all the fields of the blog entry.

Note: If you simply put <pop:title/> on its own outside a <pop:content/> tag, nothing will show up. The fields of a section, category or post can only be accessed inside a content tag. 

To display just one field from a content, like the <title> tag in this example, you can use this shorthand:

<pop:content.title/>

This produces the same result as:

<pop:content><pop:title/></pop:content>

Making Things Editable

Did you notice the <pop:admin/> right before the end of the </head> element?

Webpop is built with a basic philosophy of not tampering with your HTML. We don’t inject stuff into the final page and you’ll never find any weird classes or elements added to your markup. But we do need to include some javascript to power the on-site editor when the site is in admin mode. The <pop:admin> tag inserts this script and activates the on-site editor. Wherever this tag is included, you and your clients can log in to the site at project-domain/admin and easily edit any content which has been pulled in via a <pop:content> tag.

To disable on-site editing for a specific content tag, set it’s editable attribute to false:

<pop:content editable="false">
Continue to Pulling Content »