Footer Menu - best practise?

[Stefanowitsch]

Hello!

I am wondering - what is the best way to create a footer menu?
Right now I have build a footer menu myself but I am wondering if this is correct. It works but there's something I'm not very happy about. Let me explain:

I created a page called "footer-menu".

Under this page there are my footer menu pages (direct children)

Now in the frontend I typically want a list of my pages of the footer menu. So i render the children of the footer-menu page. That works fine:

 $footerNav = $pages->get('/footer-menu/')->children;

foreach ($footerNav as $item) { 

	<li><a href="<?= $item->url; ?>"><?= $item->title; ?></a></li>

}

The footer-menu page is set HIDDEN in the backend. So it does not appear anywhere.

The downside is: The footer-menu page itself is still accessible!  You can enter www.mypage.com/footer-menu/ and all you see is a blank page. This makes me think that google might index this page from time to time and maybe show it in the search results which is something that i don't want.  

Also the URLs of the pages inside the footer navigation go like this:

www.mypage.com/footer-menu/page1
www.mypage.com/footer-menu/page2
etc.

This is perfectly correct but not what you want from a footer menu if you know what I mean.

How do you solve this?

[wbmnfktr]

There are many other ways... just a few examples here.

1. Module Menu Builder by @kongondo

• Create a footer-menu in module
• add pages or custom links
• render on the frontend

https://modules.processwire.com/modules/process-menu-builder/

2. Custom page reference field

• Create a settings template
• create a footer-menu field (type: page reference)
• edit settings matching your needs (for example: only certain templates)
• add field to template
• add pages to field
• render on the frontend

3. Static links

Just add plain / good old static links to the sites you want to appear there

 

 

[Stefanowitsch]

26 minutes ago, wbmnfktr said:

2. Custom page reference field

• Create a settings template
• create a footer-menu field (type: page reference)
• edit settings matching your needs (for example: only certain templates)
• add field to template
• add pages to field
• render on the frontend

 

I dont fully understand this point. What is a settings template? I know how page reference fields work but I am using them only on single pages right now. 

[wbmnfktr]

A settings template is just as any other template. The name doesn't matter as long as you remember it for later use.

What I missed to tell was that you have to create a page with that field as well.
I often use that page with the template as a container/place for all kinds of custom settings then.

You could place your footer-menu field in your home template that doesn't matter.

Placing that field and other custom settings on a dedicated page can make your life much easier as you could build something like this.

<?php
// get your settings page
$settings = $pages->get('template=settings');
// get your footer links
$footerMenu = $settings->footerMenuField;
// render the output somewhere
foreach($footerMenu as $footerlink) {
	// ... your code here
}

 

[Stefanowitsch]

So settings is basically just another page with custom fields. Which means that it also would be accessable from like www.mypage.com/settings ?

[wbmnfktr]

Exactly. It's similar to your solution but with a page reference field for your links and therefore more structured and future-proof.

But it won't be automatically accessible. Therefore your page needs a real template.php which isn't needed at all. Second part could be that you hide that page in the settings.

[Stefanowitsch]

Okay I am wondering if you can actually hide a page so that it cannot be reached from the frontend at all. 

[BitPoet]

3 minutes ago, Stefanowitsch said:

Okay I am wondering if you can actually hide a page so that it cannot be reached from the frontend at all. 

Just create an individual template for that kind of page without a PHP template file.

[Stefanowitsch]

27 minutes ago, BitPoet said:

Just create an individual template for that kind of page without a PHP template file.

That's it! Thank you very much. Now I can make my settings page without the trouble of frontend accessibility.

[adrian]

On some sites I actually have a "menus" tab on the homepage and in that tab there are two page reference fields: one for top menu and one for the footer menu. This way the site editors can easily adjust which pages appear where and none are shown anywhere by default. 

[bernhard]

Same here: I usually put those things in a tab on the root page:

Rendering the menu is easy:

<div>
  <?= $pages->get(1)->footermenu->implode(" | ", function($p) {
    return "<a href='{$p->url}'>{$p->title}</a>";
  }); ?>
</div>

Config Settings is a repeater field that populates a custom API variable with site settings: $uk->config->company and branding:

[Stefanowitsch]

Putting 

20 hours ago, bernhard said:

Same here: I usually put those things in a tab on the root page:

Rendering the menu is easy:

<div>
  <?= $pages->get(1)->footermenu->implode(" | ", function($p) {
    return "<a href='{$p->url}'>{$p->title}</a>";
  }); ?>
</div>

20 hours ago, bernhard said:

Config Settings is a repeater field that populates a custom API variable with site settings: $uk->config->company and branding:

 

 

Now that's a good way to do it, too! You can reach to the root page from everywhere with the get Method and render the Menu that way.

But can you explain how the custom API variable works? I mean how can I define it and use it across the website?
I know about the default API variables only : https://processwire.com/api/variables/

[bernhard]

Put this in your ready.php file:

$sitesettings = new WireData();
$sitesettings->foo = 'bar';
$this->wire('sitesettings', $sitesettings);

Then you have your new api variable available and can access it or its properties:

The great thing about defining it as WireData is that it does not throw exceptions when you access non-existing properties.

So I'm just populating this variable via a repeater and echo that values in my templates.

[sebibu]

On 1/3/2019 at 5:36 PM, bernhard said:

Same here: I usually put those things in a tab on the root page:

After understanding, that putting all footermenu-pages in a parent is not the best and processwire-way, I really like this way of handling global settings like @bernhardand would like to copy this for my first project.
I now realized how to accomplish tabs and placed the footermenu-field with type „Page Reference“ in there.

But how to get a „+ Add“ button below the multi-pagereference field?
Input field type „Page Auto Complete“ only has an inputfield below and „AsmSelect“ a dropdown above!?🤔😇

 

[bernhard]

It's this setting on the "input" tab of your page reference field:

[Stefanowitsch]

It's great to see new recommendations popping up after 4 years 🙂 

I was able to solve this via the multi select field from the page tree ever since.

[sebibu]

Oh.. how could I overlook this last option.😇 Thanks for the fast answer, @bernhard!🙏👋