Jump to content
Stefanowitsch

Footer Menu - best practise?

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?

Share this post


Link to post
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

Share this post


Link to post
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. 

Share this post


Link to post
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
}

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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 4

Share this post


Link to post
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 5

Share this post


Link to post
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/

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...