In a recent job I was doing, I needed to change the <h1> tag on the homepage of my client’s site. In Thesis, the homepage <h1> is set as the tagline, and I not only needed to change that, but have a simple solution for all my sites from here on out.

My setup was as follows: I had a static homepage that I had done a bunch of custom work on.

Editing Core Files

Go to the thesis_1x folder. Click on lib then functions, then open document.php.

• Go to line 95, which says the following:

  echo "\t\t<h1 id=\"tagline\">" . get_bloginfo('description') . "</h1>\n";
  else
  echo "\t\t<p id=\"tagline\">" . get_bloginfo('description') . "</p>\n";
  

• Replace lines 95-97 with this:

  echo "\t\t<h1 id=\"tagline\">" . apply_filters('homepage_h1', get_bloginfo('description')) . "</h1>\n";
  else
  echo "\t\t<p id=\"tagline\">" . apply_filters('homepage_h1', get_bloginfo('description')) . "</p>\n";
  

Using the H1 Filter

To make use of this new filter, simply add the following to custom_functions.php:

function h1_replace() {
return "New H1 Text Goes Here";
}
add_filter('homepage_h1','h1_replace');

Be sure to change the text to what you want the new H1 to be.

Thesis is just that easy!

When Chris Pearson, the creator of Thesis, recently redesigned Pearsonified.com on Thesis, he did something amazingly cool: he put rotating images in his header area.

Well, I was so inspired by his design that I wanted to figure out how he did it. It turns out that putting rotating images in your header is extremely easy.

On the backside.

Well, let’s get started. From the WordPress Dashboard, go to Thesis Options -> Design Options -> Feature Box.

In this tutorial, I am setting the Feature Box to “Full Width Above Content And Sidebars.” It is completely up to you whether you chose to show the rotator on every page or just the home page.

The Code

Let’s start with the Custom.CSS. I just want to warn you right now: THIS IS SUPER EASY!

Copy and paste the following into your Custom.CSS:

.custom #feature_box { padding: 0; border: none; }
	.custom #feature_box img { display: block; }

Wow! That’s it, folks. Ok, now let’s knock out the Custom_Functions.PHP part of this. Again, don’t be shocked when you see how unbelievably simple this is.

function header_rotator() {
echo thesis_image_rotator();
}
add_action('thesis_hook_feature_box','header_rotator');

Seriously, that is all. Unreal how simple that is, isn’t it?

Purchase or Upgrade to the Thesis Developer’s Option Today!

Add an Anchor Tag

Let’s say that you want to add an anchor tag, <a>, around the rotating image. Simply put this in your custom_functions.php file instead of what’s above:

function header_rotator() {
?><a href="http://addressgoeshere.com"><?php
echo thesis_image_rotator();
?></a><?php
}
add_action('thesis_hook_feature_box','header_rotator');

Just add the address you want to link to, and call it a day

What about the images?

To get the images to line up perfectly you need to know the width of your site. If you use the Firebug plugin for Firefox or Google Chrome, you’ll have no problem finding out the width. Just remember that if you have page padding (as in the <div class=”page”>), you need to exclude that from the width calculation.

Also, I recommend making the images the same height so that the layout doesn’t shift on refreshes.

Oh, yeah. Don’t forget to Upgrade to the Developer Option! You will never regret it!

Here are the few lines of CSS I used:

.custom #header { background: #000; }
.history_page #header { background: #ffd000; }
.designers_page #header { background: #203ffe; }
.about_page #header { background: #ccc; }

Making custom headers for each page is as easy as typing. Thanks to Thesis, this process takes seconds, whereas with other themes, it may take hours of sweat and tears. As far as naming each page, you should use a unique name that simplistically identifies that page. For that very reason, I use the format pagename_page. So, if your page is called “Mechanisms”, consider using mechanisms_page. You may certainly use something non-related, such as so_fresh, but that isn’t relevant and may cause confusion later.

If you have any more questions, please contact ThesisTutor [at] gmail [dot] com.

Don’t Forget To Upgrade To The Thesis Developer’s Option!

I would like to start off by saying that many people think that the header must be purged of text before an image can be properly displayed. Well, those people are wrong. I therefore cannot stress enough that all Thesis users must fill in their Blog Title and Tagline. Blog Title and Tagline are found from the WordPress Dashboard. Go to Settings⇒General. Then just fill them both in.

Now I can show you how to fix up that header. I generally recommend that you remove the header border, but that is totally your call. I will remove the border in the following lesson. If you want the border to stay, just take that part out of the CSS. Also, I am going to assume that the image you have is the exact same size as your header area. If you are unsure, ask me. I’ll check it out for ya. All you have to do in return is follow me on twitter. Hey, c’mon. It’s free advice.

Anyway, here we go:

1. Open custom.css in an editor AND open the folder labeled images, which is found in the same folder as custom.css and custom_functions.php.
2. ****VERY IMPORTANT**** You must now load the header graphic on your server in the images folder.
3. Enter the following in the custom.css file:

   .custom #header { background: url('images/your_image.gif') no-repeat; text-indent: -9999px; border-bottom: none; }

Now, I bet you have a gorgeous custom header for your site.

Embedding a flash header is fairly easy with Thesis. In this tutorial I will show how to do exactly that. One thing I will not cover is how to write the html necessary to embed flash. I will assume that you already have an embed code. Also, there are numerous ways to get your flash header on your site.

Method #1 will leave the traditional Thesis Theme header and the flash will appear right below it. Here is method #1:

1. First, you must log into WordPress and click the following: Appearance → Design Options.
2. Find the “Feature Box” section and expand the top option. For a “header” feature box choose the feature box placement option “full width above content and sidebars.” Then decide if you want it to show on only the home page or sitewide. Don’t forget to save!
3. Now open custom.css and custom_functions.php.
4. In the custom_functions.php enter the following code:

   function fancy_pants_flash() {
   ?>
   your embed code goes here
   <?php
   }
   add_action('thesis_hook_feature_box','fancy_pants_flash');

Method #2 will actually put the flash in the header and obscure the traditional header text. And here is method #2:

1. Open your custom.css and custom_functions.php.
2. In your custom_functions.php enter the following:

   function fancy_pants_flash() {
   ?>
   your embed code goes here
   <?php
   }
   add_action('thesis_hook_after_title','fancy_pants_flash');

3. Now type the following in custom.css:

   .custom #header #logo { text-indent: -9999px; }
   .custom #header #tagline { text-indent: -9999px; }

DO NOT FORGET TO SAVE YOUR WORK!!!

One last thing: Thesis Tutor can’t help you with the flash aspect of this tutorial. So if you are wondering about parameters and what not, I suggest you read this and this.