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')."https://wordpress.stackexchange.com/".$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.

3 Answers
3

Goto

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

Leave a Reply

Your email address will not be published. Required fields are marked *