diff --git a/lib/outputcomponents.php b/lib/outputcomponents.php
index 858c52f488d..ffc76fa2408 100644
--- a/lib/outputcomponents.php
+++ b/lib/outputcomponents.php
@@ -2417,7 +2417,7 @@ class html_table_cell {
  * @package core
  * @category output
  */
-class paging_bar implements renderable {
+class paging_bar implements renderable, templatable {
 
     /**
      * @var int The maximum number of pagelinks to display.
@@ -2569,6 +2569,82 @@ class paging_bar implements renderable {
             }
         }
     }
+
+    /**
+     * Export for template.
+     *
+     * @param renderer_base $output The renderer.
+     * @return stdClass
+     */
+    public function export_for_template(renderer_base $output) {
+        $data = new stdClass();
+        $data->previous = null;
+        $data->next = null;
+        $data->first = null;
+        $data->last = null;
+        $data->label = get_string('page');
+        $data->pages = [];
+        $data->haspages = $this->totalcount > $this->perpage;
+
+        if (!$data->haspages) {
+            return $data;
+        }
+
+        if ($this->page > 0) {
+            $data->previous = [
+                'page' => $this->page - 1,
+                'url' => (new moodle_url($this->baseurl, [$this->pagevar => $this->page - 1]))->out(false)
+            ];
+        }
+
+        $currpage = 0;
+        if ($this->page > round(($this->maxdisplay / 3) * 2)) {
+            $currpage = $this->page - round($this->maxdisplay / 3);
+            $data->first = [
+                'page' => 1,
+                'url' => (new moodle_url($this->baseurl, [$this->pagevar => 0]))->out(false)
+            ];
+        }
+
+        $lastpage = 1;
+        if ($this->perpage > 0) {
+            $lastpage = ceil($this->totalcount / $this->perpage);
+        }
+
+        $displaycount = 0;
+        $displaypage = 0;
+        while ($displaycount < $this->maxdisplay and $currpage < $lastpage) {
+            $displaypage = $currpage + 1;
+
+            $iscurrent = $this->page == $currpage;
+            $link = new moodle_url($this->baseurl, [$this->pagevar => $currpage]);
+
+            $data->pages[] = [
+                'page' => $displaypage,
+                'active' => $iscurrent,
+                'url' => $iscurrent ? null : $link->out(false)
+            ];
+
+            $displaycount++;
+            $currpage++;
+        }
+
+        if ($currpage < $lastpage) {
+            $data->last = [
+                'page' => $lastpage,
+                'url' => (new moodle_url($this->baseurl, [$this->pagevar => $lastpage - 1]))->out(false)
+            ];
+        }
+
+        if ($this->page + 1 != $lastpage) {
+            $data->next = [
+                'page' => $this->page + 1,
+                'url' => (new moodle_url($this->baseurl, [$this->pagevar => $this->page + 1]))->out(false)
+            ];
+        }
+
+        return $data;
+    }
 }
 
 /**
diff --git a/theme/noname/classes/output/core_renderer.php b/theme/noname/classes/output/core_renderer.php
index 8313ce6df5a..d771e12b274 100644
--- a/theme/noname/classes/output/core_renderer.php
+++ b/theme/noname/classes/output/core_renderer.php
@@ -29,6 +29,7 @@ use preferences_groups;
 use action_menu;
 use help_icon;
 use single_select;
+use paging_bar;
 
 defined('MOODLE_INTERNAL') || die;
 
@@ -284,4 +285,14 @@ class core_renderer extends \core_renderer {
         return $this->render_from_template('core/single_select', $select->export_for_template($this));
     }
 
+    /**
+     * Renders a paging bar.
+     *
+     * @param paging_bar $pagingbar The object.
+     * @return string HTML
+     */
+    protected function render_paging_bar(paging_bar $pagingbar) {
+        return $this->render_from_template('core/paging_bar', $pagingbar->export_for_template($this));
+    }
+
 }
diff --git a/theme/noname/lang/en/theme_noname.php b/theme/noname/lang/en/theme_noname.php
index e0c0c7e6bc1..d380f3d7e14 100644
--- a/theme/noname/lang/en/theme_noname.php
+++ b/theme/noname/lang/en/theme_noname.php
@@ -25,6 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $string['choosereadme'] = 'Hey, change me!';
+$string['currentinparentheses'] = '(current)';
 $string['pluginname'] = 'NONAME';
 $string['region-side-post'] = 'Right';
 $string['region-side-pre'] = 'Left';
diff --git a/theme/noname/templates/core/paging_bar.mustache b/theme/noname/templates/core/paging_bar.mustache
new file mode 100644
index 00000000000..921526702dd
--- /dev/null
+++ b/theme/noname/templates/core/paging_bar.mustache
@@ -0,0 +1,48 @@
+{{#haspages}}
+    <nav aria-label="{{label}}">
+        <ul class="pagination">
+            {{#previous}}
+                <li class="page-item">
+                    <a href="{{url}}" class="page-link">
+                        <span aria-hidden="true">&laquo;</span>
+                        <span class="sr-only">{{#str}}previous{{/str}}</span>
+                    </a>
+                </li>
+            {{/previous}}
+            {{#first}}
+                <li class="page-item">
+                    <a href="{{url}}" class="page-link">{{page}}</a>
+                </li>
+                <li class="page-item disabled">
+                    <span class="page-link">&hellip;</a>
+                </li>
+            {{/first}}
+            {{#pages}}
+                <li class="page-item {{#active}}active{{/active}}">
+                    <a href="{{url}}" class="page-link">
+                        {{page}}
+                        {{#active}}
+                            <span class="sr-only">{{#str}}currentinparentheses, theme_noname{{/str}}</span>
+                        {{/active}}
+                    </a>
+                </li>
+            {{/pages}}
+            {{#last}}
+                <li class="page-item disabled">
+                    <span class="page-link">&hellip;</a>
+                </li>
+                <li class="page-item">
+                    <a href="{{url}}" class="page-link">{{page}}</a>
+                </li>
+            {{/last}}
+            {{#next}}
+                <li class="page-item">
+                    <a href="{{url}}" class="page-link">
+                        <span aria-hidden="true">&raquo;</span>
+                        <span class="sr-only">{{#str}}next{{/str}}</span>
+                    </a>
+                </li>
+            {{/next}}
+        </ul>
+    </nav>
+{{/haspages}}