Jumping to Content link in header.php

Any questions about styling and customising the layout, changing the number of columns, changing the number of sliding images and so on.

Jumping to Content link in header.php

Postby ltu » Fri Aug 19, 2011 5:50 pm

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
I'm a regular
Posts: 8
Joined: Tue Aug 09, 2011 2:56 am

Return to Advanced - Customising the theme