Jump to content

Footer Menu - best practise?


Stefanowitsch
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

 

 

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 5
Link to comment
Share on other sites

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

LX2Tmmz.png

Rendering the menu is easy:

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

MN7cFJW.png

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

nlXLg0W.png

  • Like 6
Link to comment
Share on other sites

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:

nlXLg0W.png

 

 

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/

Link to comment
Share on other sites

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:

esNWnv9.png

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.

  • Like 4
Link to comment
Share on other sites

  • 4 years later...
On 1/3/2019 at 5:36 PM, bernhard said:

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

LX2Tmmz.png

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!???

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...