Guides
Tutorials
Pop Tags

Pulling Content

The “from” Attribute

The from attribute specifies content to be pulled by it's id. This example pulls in the title and body fields of the “about-me” section:

<!doctype html>
<head>
  <title><pop:content.title/></title>
  <pop:admin/>
</head>
<body>
  <pop:content from="about-me">
    <h1><pop:title/></h1>
    <div class="about"><pop:body/></div>
  </pop:content>
</body>

Notice the from="about-me" attribute in the second <pop:content>. All tags for pulling in content take an optional from attribute that lets you decide where to pull from. We’ll see more examples of this later.

Sections

The <pop:content> tag is fine whenever you want to pull in one specific content and display various fields from it, but most websites also need various kinds of lists. Typically these are lists of sections like a main navigation. The tag <pop:sections> can be used to fetch the top level sections:

<!doctype html>
<head>
  <title><pop:content.title/></title>
  <pop:admin/>
</head>
<body>
  <nav>
    <ul>
      <pop:sections>
        <li class="<pop:active>active</pop:active>">
          <a href="<pop:permalink/>"><pop:title/></a>
        </li>
      </pop:sections>
    </ul>
  </nav>
</body>

This nav block is a typical example of the top level navigation in a Webpop site. The <pop:sections> tag iterates through each top level section and renders it to the page.

There's also a <pop:active> tag. Any markup inside the <pop:active> tag will only be shown for an active section. A section is considered active when the current content displayed by the template is either the section itself or one of it’s children (a subsection, entry, category or even an entry within a subsection).

Just like <pop:content>, you can use the from attribute to get the (sub)sections from a specific content. Imagine your About page has 3 subsections called “Location”, “History” and “Jobs”. The following would display the title and description for each of those:

<pop:sections from="about">
  <div>
    <h3><a href="<pop:permalink/>"><pop:title/></a></h3>
    <p><pop:description/></p>
  </div>
</pop:sections>

The from attribute can also be a comma separated list of ids, which pulls in subsections from several different sections. This goes for all listing tags.

Nesting Tags

PopTags can be nested. The same result as above can be achieved by first pulling in the “about” content and then using the <pop:sections> tag in the scope of the “about” content. This example would first show the title and body of the “about” section and then the title and description of each subsection.

<pop:content from="about">
  <h1><pop:title/></h1>
  <pop:body/>
  <pop:sections>
    <h3><pop:title/></h3>
    <p><pop:description/></p>
  </pop:sections>
</pop:content>

Tree Navigation

A good place to use this would be for a category based navigation with two levels of categories.

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

This produces a tree of categories two levels deep.

The same example can easily be adapted to the main navigation by using the <pop:sections> tag instead of <pop:categories>. Trees can be composed of a combination of sections, subsections and categories.

Excluding Content From Lists

Sometimes you might have some section you don’t want to show in your main navigation. A typical example would be a “search” section for displaying search results. You only want people to reach that section by filling in a search box, not by following a link.

Content can be excluded from listings by using the except attribute. If the Search section has an id of search, this will keep it out of the main navigation:

<ul>
  <pop:sections except="search">
    <li><a href="<pop:permalink/>"><pop:title/></a></li>
  </pop:sections>
</ul>

Enter a comma separated list of ids in the except attribute to exclude multiple pieces of contentexcept works for all listing tags.

Storing Tags Like Variables

There are a few cases where you might want to “trap” the output of a tag to reuse it later in your templates. Imagine the following scenario: you’re pulling in a list of entries with <pop:entries> and for each entry you want to show both the entry title and the title of the current content.

Inside the <pop:entries> tag, <pop:title> will refer to the title of each of the entries, so how do we get to the title of the current content?

The <pop:tag> tag makes it possible to create ad-hoc tags from within a template. Here’s how it could solve the problem above:

<pop:tag name="content-title"><pop:content><pop:title/></pop:content></pop:tag>

<pop:entries>
  <h2>Entry <pop:title/> from <pop:content-title/></h2>
</pop:entries>

<pop:tag> will capture the output of anything inside it and give you a new tag based on the name attribute that will output the captured value.

Continue to Attributes »