Page 1 of 1

Jumping to Content link in header.php

PostPosted: Fri Aug 19, 2011 5:50 pm
by ltu
I realized after a few weeks with this particular theme that I had to do a lot of scrolling down to view my blog posts. If my visitors are as lazy as me, they won't like doing that for every page. I've added a few lines of code to include a "skip to content" link that will do that. My page has a static first page and I've written it to account for that.

This bit of code should be placed right above the line <div id="imageMenu">:
Code: Select all
      <?php if ( is_front_page() ) { echo '<div id="jumptocontent" >Home</div>' ; }
         else { echo '<div id="jumptocontent" ><a href="#main">skip to content &darr;</a></div>' ; };
         /* Skip to content that won't show on front page */  ?>

You can remove the if statement if you don't have a static first page. It will look like this:
Code: Select all
<?php '<div id="jumptocontent" ><a href="#main">skip to content &darr;</a></div>' ; ?>

"jumptocontent" refers to some styling I added just before the Menu section in the stylesheet (style.css) page. I've set it up to show all the way on the right.
Code: Select all
#jumptocontent div.right {
   text-align: right;
}

#jumptocontent a:link {
   color: #eee;
}

#jumptocontent a:visited {
   color: #999;
}

#jumptocontent a:active,
#jumptocontent a:hover {
   color: #f33;
}

And all this effort, I call myself lazy. :D