Adding StreamField call-to-actions to base.html using Wagtail CMS

Question

Hi I'm new to using Wagtail and I'm working on a client website. What I aim to do is to dynamically link my wagtail pages to our sidebar, which is currently in our base.html in the main app folder's templates directory, the one with settings.py. I was wondering if there's a way to render a call to action for the base.html here. Or if I should make a separate app instead and create a base.html there, which extends to all the other templates I'll use for the rest of the website. Thank you!

edit: Above is the current home page I'm working with. The sidebar right now is just hard-coded since I haven't worked on that, and I want to know what the rest of the page looks like while I work on the main content.

the sidebar above is coded as so:

        <!-- in biodept/templates/base.html -->
        {% wagtailuserbar %}

        <div class="container main-container">
            <div class="row">
            <!-- Nav bar not mobile -->
            <nav class="nav" id="nav-1">
                <a class="nav-link nav-desktop-link nav-desktop-link-active" href="#">HOME</a>
                <a class="nav-link nav-desktop-link" href="#">BIOMEDICINE</a>
                <a class="nav-link nav-desktop-link" href="#">ECOLOGY & SYSTEMATICS</a>
                <a class="nav-link nav-desktop-link" href="#">MOLECULAR BIO & BIOTECH</a>
                <a class="nav-link nav-desktop-link" href="#">PROJECTS</a>
                <button class="dropdown-btn nav-link nav-desktop-link">PROGRAMS<ion-icon style="float: right; padding-top: 0.25vw;" name="caret-down-outline"></ion-icon></button>
                    <div id="btn-t" class="dropdown-container">
                        <a class="nav-link dropdown-nav-desktop-link" href="#">UNDERGRADUATE</a>
                        <a class="nav-link dropdown-nav-desktop-link" href="#">GRADUATE</a>
                    </div>
                <a class="nav-link nav-desktop-link" href="faculty.html">FACULTY PAGES</a>
                <a class="nav-link nav-desktop-link" href="#">BIODIVERSITY LABORATORY</a>
            </nav>
        {% block content %}{% endblock %}
            </div>
        </div>

Again the base.html is in the same directory as where the settings.py is. BioDept is the project's name.

hey, would love to help but for this to get an answer we might need a bit more information. Are you hoping to make a shared sidebar template include or something else? What do you mean by 'call to action', do you mean a link to another page or something that can be modified on a per page basis? Maybe a quick rough diagram of what you are attempting to do would help. — LB Ben Johnston
Hi thanks for the response! I was thinking of using the call to action to link to different pages of my site in the side bar. the side bar acts as a navbar for all the pages in my site. I want it to be dynamic in case the admin adds a new page, so it'll automatically render it in all sidebars available. I'll send some screenshots in a bit to show you what I mean — LienLeinad

LB Ben Johnston LB Ben Johnston · Accepted Answer · 2020-04-17T23:58:01

Note: Based on the updated question, it looks like this is unrelated to StreamField but it is a question about how to implement a menu based on the Wagtail page structure.

Wagtail does not come with a built in way to render menus, this is because it is going to be something specific to every Wagtail site and any generic solution will likely only cover a small set of cases. However, when getting started this can be a bit confusing.

Wagtail, does come with a way to indicate that a page should be shown in menus though, this is part of every Page model.

You can see this in the model's reference here https://docs.wagtail.io/en/latest/reference/pages/model_reference.html#wagtail.core.models.Page.show_in_menus

User's can edit this value on the 'promote' tab, plus the docs above let you define what the default value should be (however, existing pages will need to be updated another way).

Implementing a Menu

Here are three ways to implement a menu and use this as a template tag or template include in your project.

View the Bakerydemo code
- The bakerydemo is a nice basic reference for a Wagtail implementation, this may not explain why but might be enough for you to get started.
- template tag definition - https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/base/templatetags/navigation_tags.py
- header include template - https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/templates/includes/header.html
- base.html (layout) template - https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/templates/base.html
Follow a tutorial
- Googling 'Wagtail navigation' or 'Wagtail menus' can help, but this link below appears to be up to date and walks you through really nicely on how to build a basic Wagtail menu and then enhance it to using an extension (added below)
- https://www.accordbox.com/blog/wagtail-tutorial-12-how-create-and-manage-menus-wagtail-application/
Install an extension package
- This package appears to give a robust solution, but avoid using it if you can get what you need without adding another dependency (my opinion)
- https://wagtailmenus.readthedocs.io/en/stable/overview.html

Adding StreamField call-to-actions to base.html using Wagtail CMS

1 Answers

Implementing a Menu