Following the massive earthquake that hit Japan on March 11th 2011, I wanted to help the people that had been affected in some way by this tragedy. As I have been running an information site for travellers to Niseko, I thought the best way to reach as many people as I could would be to add a notice asking them to make a donation to the tsunami relief fund via

To do this I planned on using the Hello Bar that I had seen on other websites for various things. After signing up and then being informed that there was a waiting period. I waited for a day before I decided to make one myself, below is the code that was used.


CSS For My Donation Bar

Add the following to your css file.

/* Donation Bar Style*/
#donation_bar_container {
.donation_bar_in {
  text-align: center;
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #ec8830;
  border-bottom-color: #FFFFFF;
  border-bottom-style: solid;
  border-bottom-width: 3px;
.donation_bar_in a {
.donation_bar_in a:hover {
/* END - Donation Bar Style */

Create The Function For Your Donation Bar

// My Donation Bar
function donation_bar() {
  <div id="donation_bar_container">
    <div class="donation_bar_in">
      Please help the victims of the Japan earthquake &amp; tsunami by making a donation. Please visit ? <a rel="nofollow" target="_blank" href="" title="Global Giving - Japan Earthquake &amp; Tsunami Relief Fund">Global Giving</a>
    </div><!-- ENDS .donation_bar_in-->
  </div><!-- ENDS #donation_bar_container -->

Please note that at the time I was running Thesis (version 1.X) and it has the perfect hook to leverage for this task, the thesis_before_html hook. If you are not running Thesis, you can still achieve this, but you will need to investigate your theme to see if there is a pre defined hook that you can use, or make your own custom hook for your hello/denotion bar.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.