Website design and development services

The d13slideshow plugin used in this tutorial doesn’t seem to be working with WordPress 3.0. I’ll publish an update to this article as soon as I get the problem solved. If you really want to use slider as described below, stay on WordPress 2.9.

A few months back, I wrote an article on how to highlight your featured posts using the Thesis feature box.  To my shock and amazement the article was a huge success and to this day is the number one read article here on my Empty Cabin Media blog.  Well, now I’m going to teach  you how to take it to the next level by adding a slider to your Thesis feature box.

One of the big trends in websites these days is the ultra-slick graphical sliders you often see prominently displayed at the top of many blogs and websites.  These graphical sliders allow you to not only feature your articles, but feature them using a combination of animation, images, and text from your articles.

I was recently asked to implement a slider for my friend Jeff Rose who writes on personal finance at Good Financial Cents.  After doing a little research, the slider I decided to use was d13slideshow.  Let’s jump in and get d13slideshow working on your Thesis enabled site!

Install the d13slidehow plugin

The first step is to install the d13slideshow plugin.  The easiest way to do this is to use the built in WordPress Add New Plugin option.  Here’s how:

1. Login to your WordPress Admin console
2. Select the Plugin option from the left side admin menu
3. Select Add New under the Plugin section
4. In the search box, type: d13slideshow and click Search Plugins.  You should get one result, and that’s the d13slideshow plugin.
5. Click on the install link over to the far right.  A pop-up summarizing the plugin will be shown.
6. Click the Install Now button and your plugin will be installed.  One note here, depending on your sites security settings and your host, you may have to enter your ftp credentials after click Install Now.
7. Wait for WordPress to tell you it has successfully installed the d13slideshow plugin, then click on the activate plugin link.

That’s it, d13slideshow is now installed on your site.  No, you won’t see it just yet, we’ll take care of that soon enough though.  Let’s get it configured first.

Configuring the d13slideshow plugin

The settings for d13slideshow are very comprehensive and can be found under the Settings admin console menu.  I won’t go into details on all of them as they’re pretty easy to figure out, but I will touch on a few things.

Height and Width – By default, the slide show width and height under Slideshow styles is 640×480.  The size is ultimately up to you, but I personally think the slider looks best if it’s the same width as your content section.  As far as height, your call, but I wouldn’t make it too tall as it will push your content too far down the page.  On Jeff’s site, he elected to go 525×350.  Personally, I might go even less on the width, say 250 or 300, but again, it’s really up to you.  Whatever size you decide, just type the dimensions into the slide show width and slide show height fields.  Dimensions are in pixels.

Colors – The next few fields let you select the colors you want to use.  Of course you’ll want to make some adjustments here to make the colors blend, specifically: Excerpt title color and Excerpt link color.

Animation Style – The default animation style is play once.  On Jeff’s site, and I would recommend this for yours as well, we set this to loop continuously.  This will make d13slideshow loop constantly through your image/post combinations.

Feature Selection - Here is the most important selection you’ll make.  d13slideshow allows you to select which posts will be included in your slide show in a couple of different ways: Use Sticky Posts, Feature by category, Manually select posts, 5 most recent, and 10 most recent.  The choice is yours, but my preference is Feature by category.  This option lets you chose a category that the d13slideshow will pull posts from.  It will then pull either the 5 most recent or 10 most recent depending on what you specify.  I prefer to create a “Featured” category here, just like we did in my original feature box article.   This will allow you to very easily change the posts displayed in the feature box, but just adding posts you want to show to the “featured” category.  Once you’ve made the selection you want and filled in the appropriate options, click Update Options to save your selections.

If you went with the featured category option I recommend, now is the time to create that category if you don’t already have one, and add a few posts to it.

Adding Images to your Thesis feature box slider

The next thing we need to do is add an image for each of your posts.  Don’t worry, this is easy:

1. Find some images - If you already have images, great, if not my favorite place to find images is using Flickr’s Creative Commons images.  These are images you can use for free.  All you have to do is credit the author.  So browse around, find the images you want, and save them to your hard drive.  I’d suggest creating a special folder.
2. Resize your images – While the d13slideshow plugin will automatically size your images to the height and width you specified, having the browser resize images for you slows your site down.  Additionally, downloading a 3000×1000 image, to only show it at 640×480 isn’t efficient either and again will just slow down your site.  Re-size the images to the height and width you specified for d13slideshow to use.  I have Photoshop and use it to resize my images, but if you don’t, a great option is Pixlr.com.  Again, save the resized images to your hard drive (use a different name).
3. Upload them to the WordPress Media Gallary - Next, we’ll upload your images to the WordPress Media Gallery:
   1. Login to your WordPress Admin console and click on the Media menu in the left side menu.
   2. Click the Add New menu in the Media menu and then press Select Files.
   3. Highlight one of the resized files from above and WordPress will upload the file.
   4. Next you’ll see the image you selected, along with some fields associated with the image.  We won’t set any of these for this exercise.
   5. Copy the File URL for the image and save it in a text editor, Microsoft Word, or something similar.
   6. Press the Save All Changes button and repeat steps 2-6 until all of your images have been uploaded.
4. Associate your images with your posts – Now we’re going to associate the images we just uploaded with each of your posts:
   1. Edit your first featured post.  Scroll down to the Custom Fields section of the post edit page.  We’re going to add a new custom field here.
   2. Find the link that says Enter New and click it.  Under the name field, put: promoimage.  To the right of that, under value paste in the File URL of the image for the post you are editing.
   3. Save your post.  Repeat steps 1-3 for each of your featured posts.  Note, now that we’ve added the new custom field the first time, you won’t need to click Enter New.  The promoimage field will be available in the drop-down in the custom fields section going forward (neat huh?).

Add the slider to the Thesis feature box

Now that our d13slideshow is installed, configured, and our images are ready to rock, it’s time to show the slider. First, make sure you’re feature box is turned on.  This is located under the Thesis Options menu under Design Options.  Find the Feature box section and choose: In Your Content Column.  Click the Big A** Save Button.  Now for a little php coding magic: Add the following code to your custom_functions.php file:

/**
* Show slider in the Thesis feature box
* By: Larry, Empty Cabin Media (http://www.emptycabinmedia.com)
*/
function show_slider() {
d13slideshow();
}
add_action('thesis_hook_feature_box', 'show_slider');

If you’re using Openhook, add the following code to the thesis_hook_feature_box hook:

d13slideshow();

Now view your blog and if you did everything correctly, you should have a slick looking image slider featuring the posts you selected and it should look very close to the slideshow over at Good Financial Cents.

Now go show all of your friends!

I’ve disabled comments on this blog, but if you have any issues or see something that isn’t working for you in this article, just contact me and I’ll respond as quickly as I can.

{ Comments on this entry are closed }

One of the new features released with Thesis 1.4 was the thesis feature box.  Uses for the feature box are endless, however most poeple are using it on their blogs to highlight their best articles and featured posts.  Although the feature box is available in Thesis 1.4, the only way to utilize it currently is through the use of  Thesis hooks.  For those that may be a little less “coding able”, I thought I’d share an article on how to quickly and easily utilize the Thesis feature box to highlight posts on your Thesis WordPress blog.

Enabling the Thesis feature box

The first thing you’ll need to do in order to utilize the Thesis feature box is turn it on, or enable it.  This is done by going into your WordPress administration console, selecting Appearance on the left hand menu, followed by Design Options.

In the top corner will be a box titled appropriately: “Feature Box”.  Using the drop-down menu below it, select “In your content column”.  Please note that there are two other options available: Full-width above content and sidebars and Full-width above header only.  These are just two more ways you can utilize the Thesis feature box.

Next, you’ll need to specify when you would like the feature box shown.  This will depend on how your blog is set-up an what your preference.  Most will want to select the default: on-blog page only.  The third setting lets you select at what point on your blog page you’ll want to show the feature box.  Most will want it at the top, and thus the default setting “Above All Posts” will meet your needs.

Once you’ve adjusted your feature box settings appropriately, navigate down and click on the Save button.

Create a “Featured’” category

The way we’ll determine which article to display in our featured section will be by placing that article in a category we’ll name Featured. Using your WordPress admin console, create a new category named: Featured and save it.  Find the post you want to feature, edit it and add it to the new Featured category.  You’ll see how we’ll use this new category in next.

Adding the Thesis feature box hook

Next, we’ll open up the custom_functions.php file and add in our hook.  There are various different ways to edit your custom_functions.php file, but I generally just ftp to my server using FireFTP, navigate to my custom folder, and edit the file using Notepad++ directly.  Another easier option for those of you not as technical is the Openhook plugin, which allows you to edit your custom_functions.php and custom.css files directly within the WordPress admin console.

Regardless of which option you select, you’ll want to add the following code to your custom_functions.php file:

Update:The code has been modified from the original as Thesis 1.5 added a DIV tag for the feature-box. Thanks to R.J. for pointing out the problem via a comment.

function featurecontent() { ?>
<div id="my-feature-box">
<?php $my_query = new WP_Query('category_name=featured&showposts=1'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<div class="featurereadmore">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Read the full article">Read the full article →</a>
</div>
<?php endwhile; ?>
</div>
<?php
}
add_action('thesis_hook_feature_box', 'featurecontent');

I won’t go into the gory details of what this code actually does, but suffice it to say it pulls the post placed in the Featured category and displays it as a partial post, adding the “Read the full article” link to the end.

One VERY important note.  Make sure the same spelling and case is used in the code for “Featured” as you named it in your Category listing in the WordPress panel, if you don’t your featured post won’t show.

Making your Thesis feature box look pretty

While that works, it won’t look very nice, so let’s style it by adding the following to the custom.css file:

/* Featured Post Formatting */
.custom #my-feature-box { font-family: Helvetica,Arial,sans-serif; color: #ffffff; background: #bbbbbb; padding: 22px 15px 22px 15px; }
.custom #my-feature-box h2 { font-size: 2.2em; margin: 0 0 15px 0; }
.custom #my-feature-box h2 a { color: #000000; text-decoration: none; }
.custom #my-feature-box h2 a:hover { color: #ffffff; }
.custom #my-feature-box p { font-size: 1.4em; line-height:1.571em; text-align: justify;}
.custom #my-feature-box .featurereadmore { padding: 22px 0 0 0; }
.custom #my-feature-box .featurereadmore a { font-size: 14px; text-decoration: none; }

Save your file, refresh your site and you should have a featured post featured at the top of your site, which a light gray background! You of course will probably want to adjust the colors some to better match your site, but the hard parts done. I’ll discuss in a future article on how to add multiple articles to the Featured category and have your feature box scroll through them! Interested in using a graphical slider instead?  Check out my new article on how to include a slider in your Thesis feature box.

{ Comments on this entry are closed }

The next version of the WordPress theme Thesis is coming soon.  The beta was recently released, but due to some issues was pulled out of beta  due to some issues people where having.  Fortunately, I didn’t have any of those problems and the site you are looking at right now is running on Thesis 1.5 (Don’t believe me?  Do a view source and look at the wp-theme meta tag in the header).

Curious as to what Thesis 1.5 will include?  Here’s the run down:

User specified widths

Widths for the content and sidebars can now be specified through the Thesis Design Options page.  You are no longer restricted to the default sizes built into theme nor do you have to add CSS code to the custom.css file.  You can now make your column widths any size you want.  Also, if you want to display sidebar 2 first instead, no problem there is a setting for that too.  With Thesis 1.5, you can now specify the widths of all 3 columns quickly and easily.

Style sheet engine rewrite

With current versions of Thesis, a bunch of style sheets are generated “on the fly” when visitors surf your site.  With Thesis 1.5, out file is generated – layout.css – and it’s generated when you save your Thesis design options.  Why should you care?  Performance.  Your site should now render faster and their are less files for the browser to download to render your site.

To be honest, I never saw any performance issues before, so this should make your Thesis based blog really fast.

Comments engine overhaul

One of the big complaints over in the DIYThemes support forums where that Thesis didn’t support all of the new WordPress 2.7 comments functionality.  Well, not more complaints!  The Thesis comments engine has been given a complete overhaul and now supports those new features, including nested comments, pagination, etc.

Internationalization

Thesis now supports multiple languages through the use of the thesis.po file.  The thesis.po file allows you to add foreign language mappings for all of the various Thesis messages that the theme uses.

Single Column Multimedia Box

Prior to Thesis 1.5, when you made Thesis a single column you lost the multimedia box.  Thesis 1.5 fixes this and when you switch to a single column, the Multimedia box is still displayed.  I’m not a fan of single column sites, but if you are, then this will be an exciting enhancement for you.

This is just a few of the many new features.  I’ve come across some new options, changes to the Thesis options pages, and even read that there are some hooks as well (I’ll write up a seperate article on these).

What?  You don’t own or use Thesis yet?  Are you crazy??? Seriously, the Thesis theme for WordPress is hands down the most flexible and customizable WordPress theme availble.  To be honest, I don’t particularly like calling it a theme, I prefer framework.  Thesis significantly changes the way you customize and theme your blog.  Thesis provides out of the box SEO, easy to navigate and use options, and an active and friendly support forum.   The best part?  If you buy it now, all future versions are free.  So if you’re holding out waiting of that one killer feature, there isn’t any need.  Join the rest of us Thesis addicts today!

{ Comments on this entry are closed }

I recently wrapped up the development of a new theme for Cash Money Life based on the Thesis theme.  One of the requirements was to have a primary menu at the top, and a secondary menu below the title.  The primary menu would contain page links, while the secondary menu would contain categories, page links, etc.  Here’s screen shot of what we ended up implementing:

This was the first time I had tried to add another menu with Thesis.  The trend of having two menus is becoming pretty prevalent in the blogging world, so I thought I would share a little “inside info” info on how to add another menu using the Thesis theme.  The menu I’ll add is a simple menu with very basic styling.  Of course depending on your knowledge of CSS, the possibilities are endless on how the menu could look.

Adding the menu

To add the new menu, we’ll add a new custom function and hook;  The code looks as follows:

/* Add the top navigation menu */
/* Links for top menu will need to be manually added here, since this menu isn't supported by Thesis */
function topnav_menu() {
?>
<ul id="topnav">
<li><a href="http://www.cashmoneylife.com">Home</a></li>
<li><a href="http://www.cashmoneylife.com/about">About</a></li>
<li><a href="http://www.cashmoneylife.com/archives">Archives</a></li>
<li><a href="http://www.cashmoneylife.com/about">Contact</a></li>
</ul>
<?php
}
add_action('thesis_hook_before_header', 'topnav_menu');

This code should be copied and pasted into your custom_functions.php file. There are multiple ways to edit your custom_functions.php file. I prefer to just ftp to my server using the FireFTP Firefox Addon and edit the file using a text editor (I use Notepad++). You can just add the code at the bottom of the file and save it.

You’ll now have a “menu” displayed at the top of your blog, but it will be pretty ugly, since we haven’t styled it.

Styling your menu

Now that we have the code and hook functioning correctly, let’s make it look nice. As I mentioned earlier, I’m just going to use a very simple style. Gray background, black text, and left justified (the menu on Cash Money Life is right justified).

Here’s the CSS:
/* Top Nav bar */
.custom ul#topnav {
border-style: none;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background:#E4E4E4 none repeat scroll 0 0;
width: 100%;
float: left;
}
.custom ul#topnav li { float: right; padding: 3px 10px 3px 0px; }
.custom ul#topnav li a { font-size: 1.1em; color: #000000; }
.custom ul#topnav li a:hover { text-decoration: underline; }

I won't go into the gory details on how the CSS styling actually works, but suffice it to say it styles our "topnav" menu with a gray background (#E4E4E4), makes the menu go across the whole width of the screen (width: 100%), and makes the link colors black (#000000).

The above CSS code should be copied and pasted into your custom.css file. Where you paste it doesn't really matter, although I prefer to organize my CSS files in same order as the HTML.  So this would go at the top.  Save the file and reload your website and you show now have a nicely formatted menu at the top of your blog!

How you use this menu is really up to you, but a common use is to use the top menu for page links such as "Home", "About", "Contact", etc.  The secondary menu, or Thesis default menu, is then used to link to category pages.

{ Comments on this entry are closed }