Archives for 

pakar how to

Little Artisteer Hack: How To Show The Flash Header Only On The Home Page

Last week I got an email of one of my readers who’s using the Artisteer theme builder. For his blog, he created an Artisteer theme with a Flash header. This works fine, but he wanted to know if it was possible to show the Flash header only at the home page. You might think this is a lot of work to do, but in fact, it isn’t. Let me show you how to do this!

What To Do?

First of all, it’s important to know that in Artisteer the Flash part is only a “layer” (with div-tags) above the header image. So, if you can disable that layer, the Flash won’t be visible in your theme header. Also remember that in this particular case, the homepage must have the Flash header.

How To Show The Flash Header On The Home Page Only?

This is the easy part of this hack ;-) . Thanks to WordPress functions and PHP this is very simple to do. To check if the current page or post is the homepage, you can use the WordPress is_home function in combination with the if construct. If you have some PHP knowledge, you’ll know this isn’t difficult. If you don’t have PHP knowledge, you’ll see this is very easy.

Ok, let’s do it. You’ll need to change header.php a bit. You can find this file in the following folder: wp-content/themes/your-theme/. To edit this file you can use a php editor (I always use Panic Coda), but because this is such a little change, the built-in editor in WordPress will be just fine.

You can find the built-in editor via “Appearance” > “Editor” in the left menu:

WordPress Built In Editor

Now, in the center of your screen, the selected file opens and it’s possible to edit it. At the right, you have an overview of all the files. Select Header (header.php).

Search in the header.php-file for the following 2 lines:

<div id="art-flash-area">
<div id="art-flash-container">

These are the opening div-tags that contain your Flash header animation. About 20 lines lower, you’ll see the 2 closing div-tags:

</div>
</div>

Place the following code just BEFORE the opening div-tags:

<?php
if(is_home()){
?>

and the following code just BELOW the closing div-tags:

<?php
}
?>

What does this  new code mean? IF the current page is the home page, execute everything between “{” and “}”.

Save your file and check out the result. Your homepage should still contain the Flash animation while the other pages should not!

The Next Step: Choose Your Own Header Image

You can also take your theme 1 step further, and modify it to choose your own header image on each page / post. I described how you can do this in my previous post, How To Integrate The Featured Image In The Header Of Your Theme, and it’s perfect to combine these 2 Artisteer hacks!

Conclusion

As you can see, Artisteer themes are easy to change. That’s why I like Artisteer so much (also check the review I wrote about Artisteer 3). It’s very easy to create a basic theme, and simple to edit the result the way you want. Even like in this case, with the Flash header, it didn’t cost you a lot of time to change the way you like!