Follow these steps to add thickbox support to your WordPress site and display the contents of a widget in the thickbox overlay.

High Level Process:

1. Add thickbox support to WordPress theme
2. Register Custom widget
3. Reference widget in theme code
4. Add widget content

Step 1: Add thickbox

There are a number of WordPress plugins for thickbox that should do this for you, however I was unable to get them to work on WordPress 3.1 and not automatically change image behavior.  In this case I want to control when thickbox is used.

1. Get thickbox code at thickbox website http://jquery.com/demo/thickbox/

2. Add reference to js file in header of theme

Path: <root>/wp-content/themes/<your theme>/header.php

Standard

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

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/thickbox.js"></script>

Compressed

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

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/thickbox-compressed.js"></script>

2.  Create “js” folder and save thickbox.js or thickbox-compressed.js to the folder and upload to your server (also jquery if this does not already exist)

Path: <root>/wp-content/themes/<your theme>/js/

3. Add reference to thickbox.css OR add thickbox styles to your existing style sheet

Step 2: Register Custom Widget

Path: <root>/wp-content/themes/<your theme>/functions.php

Standard

if ( function_exists('register_sidebar') ) {

register_sidebar(array(
'name' => 'Contact Links',

));
}

Step 3. Add link to custom widget with thickbox tags and add custom widget reference:

Path: <root>/wp-content/themes/<your theme>/header.php

NOTE: Could be any page in your theme, in this case the link is in the header of the theme.

<a href="#TB_inline?height=400&width=600&inlineId=contact-links"
title="link title">Link</a>

Path: <root>/wp-content/themes/<your theme>/footer.php

NOTE: Could be any page in your theme, in this case I wanted on all pages but at the bottom of the code for SEO.

<div id="contact-links" style="display:none;">
<div>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Contact Links') ) : ?>
<?php endif; ?>
</div>
</div>

Step 4. Add widget content in Appearance > Widgets in administration UI

If you added the reference correctly you should see the following:

Add any widget content you wish, in this case a custom text widget was used.

Step 5: Test

Your setup is now complete, upload all new files and test your new thickbox link.  If needed add CSS to style the widget and change the height, width parameters on the link.

Let me know if this works for you or if I can be of assistance.  Also, is there an easier way to do this?  A plugin maybe?

Adding support for custom menus is simple with WordPress.  Follow the steps described below to add custom support to your SimpleFolio themed site.

1. Add menu support to the theme:

Path: <root>/wp-content/themes/simplefolio/functions.php

Add at the end of the file before closing php  “?>”

add_theme_support( 'menus' );

2. Change header.php and add reference to custom menu

Path: <root>/wp-content/themes/simplefolio/header.php

Line 63

<div id="pagenav">
<ul id="nav">
<?php wp_list_pages('title_li='); ?>
</ul>
</div>

Replace the wp_lis+pages tag with your custom menu reference.

<?php wp_nav_menu( array('menu' => 'Main Navigation' )); ?>

Final:

<div id="pagenav">
<ul id="nav">
<?php wp_nav_menu( array('menu' => 'Main Navigation' )); ?>
</ul>
</div>

In this case the custom menu has the menu name “Main Navigation”.  Look at the WordPress function reference for additional ideas: WordPress Codex Function Reference – wp_nav_menu

3. Create the custom menu in WordPress – http://en.support.wordpress.com/menus/ – name the menu “Main Navigation”

One thing you will most likely notice with SimpleFolio is the choices made for social media.  By default the following are included if you enable social connect in the theme configuration:

• DesignFloat
• Delicious
• Digg
• StumbleUpon
• Reddit
• Technorati

For the purposes of this site I wanted things like twitter, linkedin, email and facebook.   I started by thinking I would modify the code in the single.php and styles.css file to include these options.

SimpleFolio Social Media Options – Single.php line 27:

<ul>
<li><a href="http://www.designfloat.com/submit.php?url=<?php the_permalink(); ?>&amp;title=<?php the_title_attribute() ?>">DesignFloat</a></li>
<li><a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;title<?php the_title_attribute() ?>">Delicious</a></li>
<li><a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>&amp;title=<?php the_title_attribute() ?>">Digg</a></li>
<li><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title_attribute() ?>">StumbleUpon</a></li>
<li><a href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">Reddit</a></li>
<li><a href="http://technorati.com/faves?add=<?php the_permalink(); ?>">Technorati</a></li>
</ul>

Also, corresponding CSS –

#main .container .content .social ul li.designfloat {
background-image:url(images/fav/designfloat.png);
}
#main .container .content .social ul li.delicious {
background-image:url(images/fav/delicious.png);
}
#main .container .content .social ul li.digg {
background-image:url(images/fav/digg.png);
}
#main .container .content .social ul li.stumbleupon {
background-image:url(images/fav/stumbleupon.png);
}
#main .container .content .social ul li.reddit {
background-image:url(images/fav/reddit.png);
}
#main .container .content .social ul li.technorati {
background-image:url(images/fav/technorati.png);
}

I soon realized that while these updates would not be hard to make someone must have done this before.  With a few seconds of research I found the ShareThis plugin and installed it.

This worked like a charm and with a little configuration I had what I wanted minus a “Share This Post” heading.   All I did was add my title in the HTML settings in ShareThis with a H3 tag to match the SimpleFolio style.

Finalized ShareThis

That’s it, Hopefully this will help someone.

Follow the steps below to change the behavior of SimpleFolio on the home page to link wherever you want instead of the single post page.

Start by adding a custom field to your post called “link”

Next, modify the “template_home.php” file located at /<root>/wp-content/theme/simpifolio

Find the following on Line 21:

$thumb = get_post_meta($post->ID, 'thumb-large', true);

Add this:

$link = get_post_meta($post->ID, 'Link', true);

Find this on line 24:

<li>
<a href="<?php the_permalink(); ?>"><img src="<?php echo $thumb; ?>" alt="<?php the_title() ?>" /></a>
<span><h3><?php the_title() ?></h3> <?php the_content_limit($text_count, ''); ?></span>
</li>

Replace with this:

<li>
<a href="<?php echo $link; ?>"><img src="<?php echo $thumb; ?>" alt="<?php the_title() ?>" /></a>
<span><h3><?php the_title() ?></h3> <?php the_content_limit($text_count, ''); ?></span>
</li>

Now you can create a post for the homepage slider and can direct users to any page you wish, just change the value in the “Link” custom field.

By default Simplefolio assumes you want to use the same post category for the elements displayed on the homepage slider and the portfolio page.  These modifications allow you to select a different category for each section.

Step 1 is to add the option in the template configuration file located at /<root>/wp-content/themes/simplefolio/admin/index.php

Around line 248 find this block:

$sfoptions[] = array(    "name" => "Slider Options",
"type" => "heading");
$sfoptions[] = array(    "name" => "Number of Slides",
"desc" => "This must be a number. The slides will be taken from the portfolio category you selected in earlier options. Default is 5",
"id" => $shortname."_slider_slides",
"std" => "",
"type" => "text");
$sfoptions[] = array(    "name" => "Text Lenth",
"desc" => "The ammount of characters you wish to display under the title. Default is 100",
"id" => $shortname."_slider_chars",
"std" => "",
"type" => "text");

Add the following:

$sfoptions[] = array(    "name" => "Slider Category",
"desc" => "Select the category you will use for slider elements.",
"id" => $shortname."_slider_page",
"std" => "Select a page:",
"type" => "select",
"options" => $sf_categories);

The settings page should now look like this:

Step 2 is to modify the “template-home.php” file located at /<root>/wp-content/themes/simplefolio/admin to reference this new option

Line 14 change the following:

From:

$category = get_option('sf_portfolio_category');

To:

$category = get_option('sf_slider_page');