WordPress.org

Ready to get started?Download WordPress

Forums

adding skip nav -- how to? (4 posts)

  1. CannedGoods
    Member
    Posted 5 years ago #

    Hi,

    I want to add a skip nav link to a blog I'm setting up. While I've been able to find wordpress blogs with skip navs, I haven't been able to find any tutorials on how to create one. Does anyone know of a wordpress specific step-by-step tutorial or other detailed resources?

    Thanks.

  2. ClaytonJames
    Member
    Posted 5 years ago #

    I'm not sure it needs to be WordPress specific. I think it's probably just a same page anchor. Styling it will probably take the most effort.

    Some references:

    //www.webaim.org/techniques/skipnav/#creating

    //www.paulbohman.com/web/xhtml/anchors

    //www.communitymx.com/content/article.cfm?cid=B96B1

    //www.arizona.edu/uaweb/accessible/skip-navigation.php

  3. CannedGoods
    Member
    Posted 5 years ago #

    ONE MORE TRY, SO OTHERS CAN USE THIS!

    Thanks! That was really helpful.

    So here's what I did (working from your directions):

    1) In the header file: //Skip to Main Content

    2) In the index.php file:
    //<div id="content">
    //<!--index.php-->
    //
    //<!--the loop-->
    //<?php if (have_posts()) : ?>

    3) Style.css file:
    a.invisiblelink {
    padding: 0 0.5em; display: inline; z-index: 2;
    text-decoration: none; position: absolute; width: 14 em; left: -200em;
    }

    It works!

  4. CannedGoods
    Member
    Posted 5 years ago #

    Okay, sorry I didn't know how to do a backtick at first. Wish I could delete my own replies.

    Here's the 1st & second steps:

    1) In the header file: <a class="invisiblelink" title="" href="#main-content">Skip to Main Content</a>

    2) index.php file:
    <div id="content">
    `<!--index.php-->
    <a name="main-content">
    <!--the loop-->
    <?php if (have_posts()) : ?>

Topic Closed

This topic has been closed to new replies.

About this Topic