Edit on GitHub
Jump to docs navigation

Extending Bolt / Adding Pages in the backend

Create a page in the Bolt's backend

You can add pages to Bolt's backend by creating a custom Controller in the src folder of your project.

To configure it as a backend Controller, two steps are necessary:

  • The Controller class needs to implement the BackendZoneInterface that Bolt provides
  • The routes.yaml file needs to add Bolt backend prefix for the controller's routes.

Creating a backend page Controller

<?php

namespace App;

use Symfony\Component\Routing\Annotation\Route;
use Bolt\Controller\Backend\BackendZoneInterface;
use Symfony\Component\HttpFoundation\Response;

class UserContentController extends TwigAwareController implements BackendZoneInterface
{
    /**
     * @Route("/content-user/", name="app_content_user")
     */
    public function viewEdits(): Response
    {
        // content_user.html.twig is a custom file 
        // that needs to be located in the `templates`
        // folder in the root of your project.
        return $this->render('content_user.html.twig', [
            'title' => 'User content'
        ]);
    }
}

Defining the controller route with the backend url prefix

Locate the config/routes.yaml file and add the following after project:

app_panel:
    resource: '../src/UserContentController.php'
    prefix: '%bolt.backend_url%'
    type: annotation

Make sure to replace UserContentController.php with the name of your Controller class.

Using a Twig template to render the page

You can use any Twig template of your choosing to render the page. In this example, the Controller defined content_user.html.twig as the template that will be used to generate the response. Make sure to create a file with that name in the templates folder in the root of your project.

For example, the content_user.html.twig file may contain the following:

{% extends '@bolt/_base/layout.html.twig' %}

{% block title %}
   This is the title of the page
{% endblock %}

{% block main %}
    <p>This is the content for a user. It is currently empty.</p>
{% endblock %}

Provided templates

Bolt provides two templates that you can extend when creating custom backend pages:

Template Function Link
@bolt/_base/layout.html.twig This is the standard template that any Bolt page uses. It contains the top bar, the sidebar and aside components. Layout link
@bolt/_base/layout_blank.html.twig This is the barebones version of the layout. Use it only if you do not want to show the default Bolt backend look and feel. Blank layout link

All available templates that Bolt uses under the hood are available in Bolt's repository.

Add a page to Bolt's sidebar menu

Bolt allows the sidebar menu to be extended to add extra items and links. To do so, create a class inside the src folder of your project that implements the ExtensionBackendMenuInterface.

The example below defines a new menu section for the User Content page shown above.

<?php

namespace App;

use Bolt\Menu\ExtensionBackendMenuInterface;
use Knp\Menu\MenuItem;
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;

class UserContentMenu implements ExtensionBackendMenuInterface
{
    /** @var UrlGeneratorInterface */
    private $urlGenerator;

    public function __construct(UrlGeneratorInterface $urlGenerator)
    {
        $this->urlGenerator = $urlGenerator;
    }

    public function addItems(MenuItem $menu): void
    {
        // This adds a new heading
        $menu->addChild('User Content Extension', [
            'extras' => [
                'name' => 'User Content Extension',
                'type' => 'separator',
            ]
        ]);

        // This adds the link
        $menu->addChild('Content list', [
           'uri' => $this->urlGenerator->generate('app_content_user'),
            'extras' => [
                'icon' => 'fa-user-circle'
            ]
        ]);
    }
}


Edit this page on GitHub
Couldn't find what you were looking for? We are happy to help you in the forum, on Slack or on Github.