“I would really appreciate your suggestion of a tutorial, how to include the gallery of your Fancy Theme’s starting page to the starting page of Inspired Blog. I guess, this would be interesting to others, too.. “ said Colorit.

Well, it took me a little while, but here is a tutorial how to do it.

1. Add new options to administration

Open “admin-options.php” file located in “functions” folder and insert (paste) the following code at line 46:

array(	"name" => "Filmstrip navigation",
"type" => "heading",
"desc" => "Settings for home post animation"),

array(	"name" => "Post/page Highlight IDs",
"desc" => "Please enter ID of post(s) you want to display on homepage and separate them by commas",
"id" => $shortname."_hl_ID",
"std" => "",
"type" => "text"),

array(	"name" => "Highlight overlay color",
"desc" => "Please enter color of overlay panel",
"id" => $shortname."_hl_overlay",
"std" => "",
"type" => "text"),

array(	"name" => "Highlight opacity",
"desc" => "Please enter opacity overlay panel (Example: 0.6, 0.3 ...)",
"id" => $shortname."_hl_opacity",
"std" => "",
"type" => "text"),

array(	"name" => "Filmstrip Thumbnail width",
"desc" => "Please enter desired thumbnail width",
"id" => $shortname."_h1_thumb_width",
"std" => "",
"type" => "text"),

array(	"name" => "Filmstrip Thumbnail height",
"desc" => "Please enter desired thumbnail height",
"id" => $shortname."_h1_thumb_height",
"std" => "",
"type" => "text"),

2. Copy all javascript files

Just download this zip file and extract it to themes “js” folder.

3. Include javascript files

Open “header.php” file and replace old jQuery easing plugin at line 43:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.min.js" type="text/javascript"></script>

with the following code:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js" type="text/javascript"></script>

and add this two lines as last called javascript functions:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.galleryview-1.1.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.timers-1.1.2.js" type="text/javascript"></script>

4. Set new easing effect for LavaLamp menu

New easing plugin has changed animation names so we need to change line 56:

jQuery("#nav").lavaLamp({ fx: "backout", speed: 700 });

to:

jQuery("#nav").lavaLamp({ fx: "easeOutBack", speed: 700 });

5. Create filmstrip navigation file

Create new blank file “filmstrip_navigation.php” in themes root directory and paste the following code:

<script type="text/javascript">
jQuery(document).ready(function($){
$('#photos').galleryView({
panel_width: 930,
panel_height: 275,
overlay_width: 285,
overlay_opacity: <?php echo get_option('miptheme_hl_opacity');?>,
overlay_position: 'top',
overlay_color: '<?php echo get_option('miptheme_hl_overlay');?>',
overlay_text_color: '#fff',
caption_text_color: '#dedfdf',
background_color: '#444444',
border: 'none',
nav_theme: 'light',
frame_width: <?php echo get_option('miptheme_h1_thumb_width');?>,
frame_height: <?php echo get_option('miptheme_h1_thumb_height');?>,
easing: 'easeInOutQuad',
pause_on_hover: true
});
});
</script>

<div id="head-highlight" class="box">
<div class="head-highlight-inner clearfix">

<div id="photos" class="galleryview">

<?php
global $post;
$nav = '';
$my_query = get_posts('include='.get_option('miptheme_hl_ID').'');
foreach($my_query as $post) :
?>
<div class="panel">
<?php
if ( get_post_meta($post->ID,'thumb', true) ) {
?>
<img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;amp;amp;amp;amp;h=275&amp;amp;amp;amp;amp;w=928&amp;amp;amp;amp;amp;zc=1&amp;amp;amp;amp;amp;q=80" alt="<?php the_title(); ?>" />
<?php
}
?>
<div class="panel-overlay">
<h2><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<p><?php echo ShortenText( $post->post_content, 250 ); ?></p>
<a title="Permanent Link to <?php the_title(); ?>" class="detail" href="<?php the_permalink(); ?>">more detail</a>
</div>
</div>
<?php
$nav .= '<li><img src="'. get_bloginfo('template_url') .'/thumb.php?src='. get_post_meta($post->ID, "thumb", $single = true) .'&amp;amp;amp;amp;amp;h='. get_option('miptheme_h1_thumb_height') .'&amp;amp;amp;amp;amp;w='. get_option('miptheme_h1_thumb_width') .'&amp;amp;amp;amp;amp;zc=1&amp;amp;amp;amp;amp;q=80" alt="'. $post->post_title .'" /></li>';
endforeach;
?>
<ul class="filmstrip">
<?php echo $nav; ?>
</ul>
</div>

</div><!-- end head-highlight-inner -->
</div><!-- end head-highlight -->

6. Include filmstrip navigation on homepage

Open “index.php” file and insert this code at line 12:

<?php include ('filmstrip_navigation.php'); ?>

7. Let’s style the navigation

Open “style.css” file and just insert the following code:

/* Highlight - Main
------------------------------------------------------*/
#head-highlight
{
padding: 15px 15px 2px 15px;
margin-bottom: 15px;
font-size: 1.1em;
color: #dedfdf;
background-color: #444;
}

#head-highlight .panel img { border: 1px solid #999; }

#head-highlight h2
{
font: normal 1.8em/120% Georgia, Times, serif;
color: #fff;
margin-bottom: 10px;
}

#head-highlight h2 a
{
color: #fff;
}

#head-highlight p
{
color: #dedfdf;
}

#head-highlight a.detail
{
display: block;
font: bold 1.0em/140% Arial, Tahoma, sans-serif;
color: #fff;
margin-bottom: 5px;
background: url("images/bullet_1.png") no-repeat 0% 80%;
padding-left: 18px;
}

8. Set up your navigation

Go to wordpress administration and under Appearance select “Theme Options”. You will se new section here called “Filmstrip navigation”. You have to populate all the fields and click “Update” at the end of page. Here is the example how to insert proper values:

Preview

You can preview live demo here.

Related posts:

1. ChangeLog – FancyTheme v3.1 This update fixes the problem with other plugins that uses...
2. Retro theme tutorials (part I): How to position the navigation menu below the header image? TealGray Retro Theme is our most succesfull wordpress template so...
3. Inspiredblog: How to disable style switchers and select your default color? My latest theme Inspiredblog, has a pretty cool feature called...

Related posts brought to you by Yet Another Related Posts Plugin.

Let’s finish the job

Open ‘index.php‘ file and on top you will see:

...
<div id="page-content" class="clearfix">
<?php include ('headimage.php'); ?>
...

Replace the lines so the code looks like this:

...
<?php include ('headimage.php'); ?>
<div id="page-content" class="clearfix">
...

Now, repeat this step for pages: ‘single.php‘, ‘page.php‘ and ‘search.php‘.

Add a little style

Replace styles in “style.css” file with:

#page-navigation
{
background: url("images/bg_page_content.png") repeat-y 0% 0%;
padding: 0px 0px 0px 20px;
}

#content-head
{
background: url("images/bg_page_navigation.png") no-repeat 0% 0%;
padding: 20px 10px 0px 10px;
height: 240px; /* insert height of your pictures */
}

Finally

The origibal ‘bg_page_navigation.png’ file was only 60px in height which is insufficient for our task. So, you have to replace it with a new one.

Download new ‘bg_page_navigation.png’ file

Related posts:

1. Retro theme tutorials (part I): How to position the navigation menu below the header image? TealGray Retro Theme is our most succesfull wordpress template so...
2. Inspiredblog: How to implement filmstrip navigation from FancyTheme “I would really appreciate your suggestion of a tutorial, how...
3. Inspiredblog: How to set up a simple contact form using Contact Form 7 plugin Most of us, are using some kind of wordpress plug-ins...

Related posts brought to you by Yet Another Related Posts Plugin.

A lot of you have problems with thumbnail images on blog pages because of html image tags that have to be inserted in custom fields. This script will put a smile on your face.

What is the difference?

A pictures says more than 1000 words:

How do I set thumnail size of images?

I added a custom settings page under “Appearance -> Theme Options”:

Just be careful with these values. You should always upload images larger than entered values.

How do I install this addon?

I prepared ZIP document that contains 4 files you need to copy to your Book Template or Retro v2.0 theme. Two of those files are new but two of them need to replace older versions.
I suggest you backup all your files before installing this addon.

TealGray Retro Theme v2.0 TimThumb addon
Book Template TimThumb addon

Some important things to note:

• TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed.
• Once installed and in-use, TimThumb will automatically create a /cache/ subfolder with proper write-permissions. If your host server doesn’t allow this by default, be sure to manually change the /cache/ folder permissions to 777.
• In addition, make sure the folder which contains TimThumb is set to 777.

Related posts:

1. A Classy Theme A great and classy WordPress theme special for web portals,...
2. Fancy Theme A powerful WordPress theme special for online blogging and business/personal...
3. Fancy Theme v2.0 This is first update for my latest wordpress theme and...

Related posts brought to you by Yet Another Related Posts Plugin.