“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.

Create your form

Copy/paste this code in ‘Form’ area (Administration -> Contact):

<label>Your Name (required)</label>[text* your-name]
<label>Your Email (required)</label>[email* your-email]
<label>Subject</label>[text your-subject]
<label>Your Message</label>[textarea your-message]
[submit class:submit "Send message"]

save it, and copy and paste generated code into your post content on desired place.

Style your form

Now, for styling. Add these css properties to your “style.css” file, at the end.

/* Page content - comment form 7 plugin
------------------------------------------------------*/

#page-content .wpcf7
{
margin: 30px 0 30px 0;
}

#page-content .wpcf7:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

#page-content .wpcf7 input, #page-content .wpcf7 textarea
{
background: url("images/bg_shadow.gif") repeat-x 0% 0%;
}

#page-content .wpcf7 input.submit
{
width: 130px;
background-color: #444;
color: #fff;
font-size: 0.9em;
font-weight: bold;
}

#page-content .wpcf7 textarea
{
width: 500px;
}

New theme update

I’ll will include this styles in my next update of Inspiredblog theme.

Related posts:

1. Contact us Interested in working with us? Fill the form below and...
2. Retro theme tutorials (part II): How to replace the text main site name with a simple PNG file? After v2.0 update, this theme got a little “boost”. I...
3. Inspiredblog: How to implement filmstrip navigation from FancyTheme “I would really appreciate your suggestion of a tutorial, how...

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

Option to disable color switchers?

I’m planning to implement this option in “Theme options” panel so that administrators can select their own color/style and disable one or both style switchers. But, for now yu have to do it manually.

Step 1: Select your header style

Open “header.php” file and locate styles for body styles:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body2.css" title="body2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body1.css" title="body1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body3.css" title="body3" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body4.css" title="body4" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body5.css" title="body5" media="screen" />

You see that there are five stylesheets and four of theme have “alternate” in “rel” attribute. This means that the first one is default and active. Now, delete the styles you don’t want to use, leave the one that will remain as default and delete “alternate” option from “rel” attribute. Result is only one body style.

Step 2: Select your footer style

Open “header.php” file and locate styles for footer styles:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot3.css" title="foot3" id="foot3" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot1.css" title="foot1" id="foot1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot2.css" title="foot2" id="foot2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot4.css" title="foot4" id="foot4" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot5.css" title="foot5" id="foot5" media="screen" />

and follow all the steps as for body styles.

Step 3: Remove body style switcher

Open “sidebar_switcher.php” file and comment or delete complete code.

Step 4: Remove footer style switcher

Open “page_footer_switcher.php” file and comment or delete complete code.

Finally

Unfortunately, if you want to disable style switchers, you have to follow these steps. I’m working on new update for this theme which will have this option implemented in “Theme options” panel, among other new features. This update will be released by the end of this month.

Related posts:

1. Inspiredblog: How to implement filmstrip navigation from FancyTheme “I would really appreciate your suggestion of a tutorial, how...
2. ChangeLog – FancyTheme v4.2 This update will fix most problems people have with Internet...
3. ChangeLog – FancyTheme v3.1 This update fixes the problem with other plugins that uses...

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

Throughout this article, I’ll try to focus on most common questions you asked me during this year.

How to only show posts with a specific custom field?

Let’s say we want to only show posts that have custom field “thumb” and value “jpg”.
We’ll use a query_posts function and place it above the standard loop code.

<?php query_posts('meta_key=insert_key&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;thumb=jpg'); ?>

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

How to retrieve custom fields outside the loop?

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'insert_your_custom_field_key', true);
?>

How to replace the “Read more” link?

The most common problem with the “read more” link, is that you can’t change its text. Well, this was true till version 2.8. come out. Here is the solution for previous versions of wordpress. Just add this to your functions.php file.

<?php
add_filter( 'the_content_more_link', 'my_custom_link', 10, 2 );
$default_more = "Continue reading";
function my_custom_link( $link_text, $link_class ) {
return str_replace( $link_text, $default_more, $link_class );
}
?>

From version 2.8. you can use parameters within the template tag the_content().
So, we just enhance are content tag:

<?php the_content("Continue reading this post"); ?>

How to get short urls for social bookmarking?

Sometimes you need short urls for social bookmarking and using permalinks is not a good solution. That’s why we’ll use post ID instead.

<?php echo get_bloginfo('url')."/?p=".$post->ID; ?>

But, if you want to send this url to twitter we have to use tinyurls.
First, add this function to your functions.php file.

function getTinyUrl($url) {
$tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
return $tinyurl;
}

And now you can use it in your posts by calling this function.

<?php echo getTinyUrl(get_permalink($post->ID)); ?>

How to disable (don’t show) images on homepage?

I prefer to show images on homepage but sometimes less is more, depends on theme design. If you want to prevent images to show on your homepage just add this hack to your functions.php file.

<?php
add_filter('the_content','wp_home_no_image_filter',11);

function wp_home_no_image_filter($content){
if (is_home() || is_front_page()){
$content = preg_replace("/<img[^>]+\>/i", "", $content);
}
return $content;
}
?>

How to show parent page/post title?

This is quite simple. Just add this code where you want to show your parent page/post title.

<?php echo get_the_title($post->post_parent); ?>

How to add Breadcrumbs to WordPress?

Source: Add Breadcrumbs to WordPress Without a Plugin

There are a lot of wordpress plugins that will do the job. I personally, use Yoast Breadcrumbs on my themes, but I run into a great article by Brandon Cox who wrote this excellent piece of code.

<?php
function breadcrumbs() {
$theFullUrl = $_SERVER["REQUEST_URI"];
$urlArray=explode("/",$theFullUrl);
echo ‘You Are Here: <a href="/">Home</a>’;
while (list($j,$text) = each($urlArray)) {
$dir=”;
if ($j > 1) {
$i=1;
while ($i < $j) {
$dir .= ‘/’ . $urlArray[$i];
$text = $urlArray[$i];
$i++;
}
if($j < count($urlArray)-1) echo ‘ &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;raquo; <a href="’.$dir.‘">’ . str_replace("-", " ", $text) . ‘</a>’;
}
}
echo wp_title();
}
breadcrumbs();
?>

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. New Wordpress Theme: MinimaxWhite New Wordpress theme is now available at ThemeForest for only...

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

This theme (and this feature specially) uses TimThumb to resize pictures and 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 create /cache/ folder in your theme’s root directory and set permissions to 777.

Step two: Open “Theme options” in administration panel

When you open “Theme options” you’ll see new group created here called “Highlighted areas / Settings for 4 featured posts/pages”. This is screenshot of all available oprions:

What does that mean?

Let’s look at this screenshot of slider with all features displayed.

• 1. Highlight background color – color of filmstrip background
• 2. Highlight overlay color – color of overlay panel
• 3. Filmstrip Thumbnail image

Slider navigation

If you want simple slider navigation you have to insert these fields:

• Post/page Highlight ID’s: enter id’s of all posts and pages you want to display in slider (comma separated)
• Highlight overlay color: enter hexadecimal color code for overlay panel
  
• Highlight opacity: enter value from 0.1 – 1 to show opacity of overlay panel (0.1 = 10% opacity)
• Highlight animation: choose Standard slider

Filmstrip navigation

Well, this navigation requires that you populate all fields.

• Post/page Highlight ID’s: enter id’s of all posts and pages you want to display in slider (comma separated)
• Highlight overlay color: enter hexadecimal color code for overlay panel
  
• Highlight opacity: enter value from 0.1 – 1 to show opacity of overlay panel (0.1 = 10% opacity)
• Highlight animation: choose Filmstrip animation
• Filmstrip thumbnail width: enter width of little thumbnail image (in pixels)
• Filmstrip thumbnail height: enter heightof little thumbnail image (in pixels)
• Filmstrip thumbnail count: enter how many thumbnails should be seen in filmstrip navigation

Conclusion

If you follow these steps everything should work perfectly.
Do not forget Step one. If you don’t create “cache” folder this theme will not work properly.

Related posts:

1. Fancy Theme v2.0 This is first update for my latest wordpress theme and...
2. Inspiredblog: How to implement filmstrip navigation from FancyTheme “I would really appreciate your suggestion of a tutorial, how...
3. Fancy Theme A powerful WordPress theme special for online blogging and business/personal...

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.

Step 1: Preparing the layout

First, let’s create a new page and enter data for page title (“My portfolio”) and page content (page description).
Now, we insert a custom field:

• name: template
• value: “wide”

This will remove sidebar from content layout and give more content space. Update your post.

Step 2: Add project to your layout

Let us add projects to prepared layout. Create new page, enter project title, description and place it under “My Portfolio” page.
Now, we insert first custom field that will say this is a project page and replace standard sidebar with portfolio navigation:

• name: template
• value: “project-view”

Our second custom field will add a thumbnail to portfolio page:

• name: thumb
• value: html image tag (enter your own image source)
  

Third custom field add a short description on portfolio page and in portfolio navigation on project page:

• name: clean-desc
• value: short project description (enter your project description)

And finally, fourth custom field adds image slideshow on top of project page:

• name: gallery
• value: html image tags (enter your own image sources)
  

Do not forget to add a css class “thumb” to gallery images.

Related posts:

1. Retro Theme v3.0 For the last two months I summarized all your wishes...
2. A Classy Theme (first preview) I just finished new wordpress theme called "A Classy Theme"....
3. A Classy Theme A great and classy WordPress theme special for web portals,...

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

How do I replace the text main site name with a simple PNG file?

There are two ways to do this.  You can replace text with the png file or you can set png in background leaving the code intact and SEO friendly. I think this is a much better way then just replacing text with image.  Everything you need to do i to open “style.css” file and replace this section:

#logo h1
{
font: normal 3.6em/125% Georgia, "Times New Roman", Times, serif;
color: #f3efe9;
width: 400px;
float: left;
text-align: center;
padding: 15px 0px 0px 75px;
}

#logo h1 span
{
font: italic 0.4em Georgia, "Times New Roman", Times, serif;
color: #d0d1c0;
display: block;
}

with this:

#logo h1
{
display: block;
width: 400px;
height: 80px;
text-indent: -9999px;
float: left;
background: url("image_path/image_name.png") no-repeat 0% 0%;
padding: 0px;
}

I put some “dummy” values in this code, which should be replaced with your own. Enter your own width (image width), height (image height) and image itself (path and image name).

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 set up a simple contact form using Contact Form 7 plugin Most of us, are using some kind of wordpress plug-ins...
3. ChangeLog – FancyTheme v4.2 This update will fix most problems people have with Internet...

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

How to position the navigation menu below the header image

Start by opening “navigation.php” and “headimage.php” files.
Find “page-navigation” tag in :”navigation.php” file

<div id="page-navigation" class="clearfix">
<a href="<?php bloginfo('rss_url'); ?>" class="rss" title="RSS Feed">RSS Feed</a>
<ul id="nav" class="sf-menu">
<li<? echo (is_home())? ' class="current_page_item"' : ''; ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php wp_list_pages('title_li=&amp;amp;amp;amp;amp;amp;amp;amp;depth=3'); ?>
</ul>
</div><!-- end page-navigation -->

and move it (line 01-07) to “headimage.php” file below “content-head” tag..

Styling

Finally, we have to customize the look of navigation menu. Page background, manu padding, crumbtrail padding, we have to make changes for our menu to fit in.
Replace styles in “style.css” file with:

#page-navigation
{
padding: 0px 0px 0px 20px;
}

#page-navigation .rss
{
background: url("images/icon_rss.png") no-repeat 0% 0%;
display: block;
float: left;
width: 48px;
height: 48px;
text-indent: -9999px;
margin: -15px 15px 0px 0px;
position: relative;
}

#breadcrumbs
{
padding: 8px 20px 8px 30px;
background-color: #c5c59f;
}

#content-head
{
background: url("images/bg_page_navigation.png") no-repeat 0% 0%;
height: 240px;
}

Finally

Well, this will position the navigation menu below header images but one more thing remains.
Header image does not have rounded corners on top. I will leave it up to you to play with it.

How to show authors details in posts

A lot of blog sites have multiple authors who wants to be credited for their work. Let’s see how to add author details at the end of blog posts. First, open “single.php” file and add this code (line 03-06):

<?php the_content(); ?>

<div id="author">
<h4>Author: <?php the_author_firstname(); ?> <?php the_author_lastname(); ?></h4>
<p><?php the_author_description(); ?></p>
</div>

<div id="post-indexing">

Line 4 gives you authors first and last name, line 5 authors description. Check all Wordpress Author Template Tags and decide what information you want to display on your blog.

Related posts:

1. Inspiredblog: How to implement filmstrip navigation from FancyTheme “I would really appreciate your suggestion of a tutorial, how...
2. Retro TUT: Update on rounded corners In my first Retro theme tutorial I covered “How to...
3. ChangeLog – FancyTheme v4.2 This update will fix most problems people have with Internet...

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