---
title: Series pages
tags: []
keywords: series
audience: writers, designers
last_updated: May 17, 2015 
summary: "You can automatically link together topics belonging to the same series. This helps users know the context within a particular process."
---
{% include linkrefs.html %} 

You create a series by looking for all pages within a tag namespace that contain certain frontmatter. Here's a demo: {{doc_seriesdemo1_1}}. 

## 1. Create the series button 

First create an include that contains your series button:

```html
{% raw %}
<div class="seriesContext">
    <div class="btn-group">
        <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Series Demo <span class="caret"></span></button>
        <ol class="dropdown-menu">
            {% assign pages = site.pages | sort:"weight"  %}
            {% for p in pages %}
            {% if p.series == "ACME series" %}
            {% if p.url == page.url %}
            <li class="active"> → {{p.weight}}. {{p.title}}</li>
            {% else %}
            <li>
                <a href="{{p.url}}">{{p.weight}}. {{p.title}}</a>
            </li>
            {% endif %}
            {% endif %}
            {% endfor %}
        </ol>
    </div>
</div>
{% endraw %}
```

Change "ACME series" to the name of your series. 

Save this in your \_includes folder as something like series\_acme.html.

Note that with pages, there isn't a universal namespace created from tags or categories like there is with Jekyll posts. As a result, you have to loop through all pages. If you have a lot of pages in your site (e.g., 1,000+), then this looping will create a slow build time. If this is the case, you will need to rethink the approach to looping here.

## 2. Create the "next" include

This will be the next button at the bottom of the page:

```html
{% raw %}
<p>{% assign series_pages = site.tags.series_acme %}
    {% for p in pages %}
    {% if p.series == "ACME series" %}
    {% assign nextTopic = page.weight | plus: "0.1"  %}
    {% if p.weight == nextTopic  %}
    <a href="{{p.url}}"><button type="button" class="btn btn-primary">Next: {{p.weight}}  {{p.title}}</button></a>
    {% endif %}
    {% endif %}
    {% endfor %}
</p>

{% endraw %}
```
Change "acme" to the name of your series. 

Save this in your \_includes folder as series\_acme\_next.html. 

## 3. Add the right frontmatter to each of your series pages

Now add the following frontmatter to each page in the series:

```json
series: "ACME series"
weight: 1.0
```

With weight, you could use 1, 2, 3, etc.., but Jekyll will treat 10 as coming after 1. This is why I use 1.0 and 1.1, 1.2, etc. 

If you do use whole numbers, change the `plus: "0.1"` to `plus: "1". 

## 4. Add links to the series button and next button on each page.

On each series page, add a link to the series button at the top and a link to the next button at the bottom.
 
```html
{% raw %}
{% include custom/doc/series_acme.html %}

<!-- your page content goes here ... -->

{% include custom/doc/series_acme_next.html %}
{% endraw %}
```

## Changing the series drop-down color

The Bootstrap menu uses the `primary` class for styling. If you change this class in your theme, the Bootstrap menu should automatically change color as well.