Add a #hash to the links in my custom menu

Question

I have created a static frontpage where I load in the content of all my pages. Now I have a normal custom menu, but the links refer to the pages, for example: http://example.com/about

Now I want to have the link directed to the page itself with http://example.com/#about.

I have a custom walker that I use, and I have tried the following code:

$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( get_bloginfo('url').'#'.$item->title ) .'"' : '';

Now this works ok, except for the home link itself. The home links to http://example.com/#home, but that one just needs to link to http://example.com/#

Is there something different I could use then $item->title to append.

--

If you want to know the method that I use to create the single page:
Creating the modern 'single page' html5 css3 layout in wordpress

Update

Just wanted to tell you guys what i did, maybe it helps someone.

Pages are structured like this:

Home      (public)  -> cutom menu item -> [link:#][label:home]
portfolio (private) -> cutom menu item -> [link:#portfolio][label:portfolio]
contact   (private) -> cutom menu item -> [link:#contact][label:contact]
blog      (public)  -> page menu item  -> [link:blog][label:blog]

Home and blog will be indexed and visible. portfolio and contact are loaded in home which is a front_page.php.

Note that I use relative links, and not absolute, html output will be href="#contact".

---

Now having it like this will conflict on the blog page, the links will become
http://example.com/blog/#contact

We don't want that, we want just
http://example.com/#contact

---

In my default walker I am going to edit edit in the absolute path. I do it here just to make the template a little more dynamic.

if($item->object == 'custom'){
    $attributes .= ! empty( $item->url ) ? ' href="' .
    esc_attr(get_bloginfo('url').'/'.$item->url ) .'"' : '';
}else{
    $attributes .= ! empty( $item->url ) ? ' href="' . 
    esc_attr( $item->url ) .'"' : '';
}

Source to the complete walker can be found here: Menu items description? Custom Walker for wp_nav_menu()

Now the next thing is:

1. To have a nice scroll effect (jquery scrollto) when the links are clicked on the frontpage
2. Redirect to the blog when the blog link is clicked
3. Redirect back to the right section when a hashlink is clicked on the blogpage.

jQuery Script (scroll to Anchor):

$(document).ready(function() {
  $('.menu-item-object-custom a').bind('click', function(e) {
    e.preventDefault();
    var parts = ($(this).attr("href")).split("#");
    var target = '#' + parts[1];

    if($('body.home').length){
      var moveto = $(target).length ? $(target).offset().top : 0;
      $('html, body').stop().animate({ scrollTop: moveto }, 1500, function() {
        location.hash = target;
      });
      return false;
    }else{
        window.location = $(this).attr("href");
    }
  });
});

Note that the URL in the browser is also changed, so the back button works also, and there is easy bookmarking.

Thanks for all the suggestions and inspiration bellow!! And I hope someone can use this.

Answer 1

Goto

Appearance -> Menus -> Create a new menu -> Add your link as custom link

Answer 2

You could do it with JavaScript by trapping any clicks on your menu and scrolling the page. Here's an example using jQuery that matches the link's title to the contents of an h1 and scrolls the page to it.

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('ul#main-menu a').click(function(){
        thisTitle = $(this).attr('title');
        $('html,body').animate({
            scrollTop: $("h1:contains('"+ thisTitle +"')").offset().top
        },'slow');
        return false;                                  
    });
});
</script>

your menu...

<ul id="main-menu">
    <li><a href="/about/" title="About">About</a></li>
</ul>

and then your title somewhere on the page...

<h1>About</h1>

of course, that requires JavaScript be enabled, but you could set up your theme with a fallback template to render your individual pages in the rare case your visitors don't have js enabled and go directly to the page. Just make sure those pages don't get indexed by search engines.

Answer 3

The custom navigation menu admin page allows you to set four extra properties (accessible by enabling them under "Screen Options" at the top of the page):

• Link Target
• CSS Classes
• Link Relationship (XFN)
• Description

But if you only need to use the front page as an exception, isn't it easier to just check the link and, if it is the front page, don't use the title?