Skip To Search

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
richveg's picture

Hi I'm using the standard Bartik theme and have a skip to main content link on every page. Can someone please tell me how to add the skip to search link on every page like Drupal.org has?

Thanks

Comments

The best way is to create new

dcmouyard's picture

The best way is to create new theme and modify it. That way your changes won't get overridden when you update Drupal core.

Create a new folder in sites/all/themes/YOUR_THEME. Add a new file titled YOUR_THEME.info with the following code:

name = Your new theme name
description = A description for your new theme.
core = 7.x
engine = phptemplate
base theme = bartik

Then copy html.tpl.php from the modules/system directory and paste it into your new theme directory. Open that file and look at lines 54-56:

  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>

Simply add a new link to the search form on your page. If the id of the search form on your page is #search-block-form, then use the following:

  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
    <a href="#search-block-form" class="element-invisible element-focusable"><?php print t('Skip to search'); ?></a>
  </div>

Thanks, I'm using version

richveg's picture

Thanks, I'm using version 7.14. I recently experimented with building a Zen sub-theme, but it was confusing me more than anything, and am now using the standard Bartik theme. I understand the reason for sub-themes with their own .info files, and have found the code to add a skip to search link in modules/system/html.tpl.php;

For the sake of learning, I'm just backing up the files so I can replace them if it goes wrong. I now have the skip to content and search links that have the same feel as Drupal.org's links. The problem is they don’t do anything. I've read about anchor names and I.D's but don’t have the experience yet to have a clue where to go next.

I'd really appreciate any info on what to study to make these links work.

I'd suggest brushing up on

daniel.nitsche's picture

I'd suggest brushing up on your HTML a little, as it's hard to theme in Drupal without knowing the basics.

In the example above, the link to "#search-block-form" will only work if there is an HTML element with an id of "search-block-form" (use an HTML inspector, or view the source of the page to check). This is normally the default search block name, so if it's not working, I'd guess that either:

  1. You haven't enabled the search block
  2. There isn't enough content on the page to scroll the browser window down