Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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://mysite.com/about

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

Now 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://mysite.com/#home, but that one just needs to link to http://mysite.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://mysite.com/blog/#contact. We don't want that, we want just http://mysite.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?

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

Script for jQuery

$(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.

share|improve this question
add comment

3 Answers

up vote 0 down vote accepted

Goto

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

share|improve this answer
    
yes you have to use full url. –  Giri Aug 14 '11 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. –  Saif Bechan Aug 14 '11 at 20:52
add comment

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.

share|improve this answer
    
Pretty good solution, but I really want to have the normal link in the href section. –  Saif Bechan Aug 14 '11 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 Aug 14 '11 at 20:05
    
Ok yeah I meant I wanted to have the full hashed link in the href, like mysite.com/#contact. –  Saif Bechan Aug 14 '11 at 20:50
add comment

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?

share|improve this answer
    
I was aware of those extra options, I do not really know if they could be used for what I wanted to do. –  Saif Bechan Aug 14 '11 at 20:49
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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