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


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

We don't want that, we want just

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 ) .'"' : '';
    $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) {
    var parts = ($(this).attr("href")).split("#");
    var target = '#' + parts[1];

      var moveto = $(target).length ? $(target).offset().top : 0;
      $('html, body').stop().animate({ scrollTop: moveto }, 1500, function() {
        location.hash = target;
      return false;
        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



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

  • yes you have to use full url. Commented Aug 14, 2011 at 19:46
  • I found a way to have the relative links and have them converted to the full url. Not really spectacular, but I like it better than hardcode the link. But it does not really matter in this case. Commented Aug 14, 2011 at 20:52
  • @SaifBechan - Please share your found way which you have mentioned
    – vsync
    Commented Apr 21, 2018 at 9:48

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');
            scrollTop: $("h1:contains('"+ thisTitle +"')").offset().top
        return false;                                  

your menu...

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

and then your title somewhere on the page...


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.

  • Pretty good solution, but I really want to have the normal link in the href section. Commented Aug 14, 2011 at 19:47
  • it's not using the href, that will be whatever the url to the page is, it's using the title attribute.
    – Milo
    Commented Aug 14, 2011 at 20:05
  • Ok yeah I meant I wanted to have the full hashed link in the href, like mysite.com/#contact. Commented Aug 14, 2011 at 20:50

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?

  • I was aware of those extra options, I do not really know if they could be used for what I wanted to do. Commented Aug 14, 2011 at 20:49
  • Nothing of those extra options has anything to do with OP's question. just checked it this second.
    – vsync
    Commented Apr 21, 2018 at 9:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.