WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am building a wordpress theme for personal use. I am facing a challenge for the first time and I really don't know how to achieve what I want. The website's header structure is: FIRST LINE: logo / SECOND LINE: custom jquery slider / THIRD LINE: navigation menu. What I want to do: When someone clicks the link to go to a page EXCEPT the homepage then I want the FIRST & SECOND LINE appear to the very top of the page out of the screen and the THIRD LINE will be displayed on the highest area of the screen. Anyone knows anything about how to achieve that?

Sorry for my bad english. Thanks in advance.

share|improve this question
What have you tried? Besides, your explaination is quite confusing, why don't you attach some images to explain what you are trying to achieve? – Sunyatasattva Apr 5 '13 at 17:32
The FIRST & SECOND LINE will be off screen at the top, and will be able to see them only if you scroll up. What I want is when the page loads, the browser jumps at #navigation. – ArgGeo Apr 5 '13 at 17:37
Adding #navigation at the end of your links absolutely does what you are looking for, given that your navigation menu has an id of navigation. – Sunyatasattva Apr 5 '13 at 17:40
I've tried that and worked but the problem is that the menu will be set from "Custom Menus" by the admin where you simply select what pages you want the menu to include. It wont be with custom links. Is there any function that can do that automatically to all navigation's elements? – ArgGeo Apr 5 '13 at 17:45
up vote 1 down vote accepted

To add a custom hash to the end of each URL added through the menu backend is easier said than done.

You could build a custom walker.

Or you could try to hook in the walker_nav_menu_start_el filter and edit just that, perhaps like so[nav-menu-template.php]:

add_filter( 'walker_nav_menu_start_el', 'my_skip_to_nav', 10, 4 );

function my_skip_to_nav( $item_output, $item, $depth, $args ){
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    // Here happens the magic!
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'#navigation"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;
    return $item_output;

Then again, you perhaps don't want something this complicated, and you can have much simpler solutions using Javascript/jQuery.

Javascript solution

Use jQuery to add your anchor to the navigation links


    $('#navigation a').each(function(){
       $(this).attr('href', $(this).attr('href') + '#navigation');

share|improve this answer
Thanks a lot Sanya! :) – ArgGeo Apr 5 '13 at 18:15

Your Answer


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.