Website design and development services

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 &rarr;</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!

{ 66 comments }

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!

{ 5 comments }

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.

{ 37 comments }

Chris Pearson announced that Thesis 1.4 is now available for download.   I actually found out by following Chris on Twitter.  Thesis 1.4 adds some really nice new features:

• A new multiple-instance sidebar widget – The widget ads the ability to display posts from any category.  The widget ads the ability to choose whether to only show posts from a certain category, select how many posts to list, and select whether or not to display how many comments the post has.  Multiple-instance means you can ad as many of these as you want (read: one for each category if you would like).
• Say good-bye to painful custom fields – Thesis 1.4 ads new post editing options that replace the need for custom fields.
• Post images and thumbnail features – These new features add a number of options and features to increase the visual flexibility of your site.  Chris is going to announce more on this in the official announcement post coming later today.
• Improved Options pages – Not only are there more options, the pages have been reorganized to make them more usable.  There are also lots of new options to customize the new features.
• Feature box – I’m looking forward into digging into this one.  Right now, it’s just a hookable element that you can position in various places around your site. Chris teases us though and says “Expect this box to gain a healthy set of customization options in future release of Thesis“.  Great, 1.4 just came out and I already can’t wait for 1.5!
• Features and Teasers – This is the most exciting feature for me.  Features are displayed just like normal blog posts (but customizable via the custom CSS file).  Teasers are a new and customizable way to display your posts. Teasers have lots of various options that allow you to customize how they are displayed.  No more having to use plugins and I can’t wait to dig in and start playing around with teasers.  You can even change the fonts!

Upgrading to Thesis 1.4

Upgrading is painless.  The only big restriction is that Thesis 1.4 now works only on Wordpress 2.7.  To upgrade, just download the Thesis 1.4 files and upload them to the thesis directory on your site.  Login to your Wordpress admin console, head over to the Thesis Options page, click on the Big A## Save Button, then visit the Design options page, do the same and you’re ready to rock!  Saving adds in the new features for Thesis 1.4.

It literally took me less than 3 minutes to upgrade this site.  That to me is hands down the best feature of Thesis, the theme is completely seperate from your customizations.   I’ve been playing around with the new feature set for the past hour, and no bugs at all.  The release seems very stable and all of the new abilities work as expected.  Looking forward to digging into some of the new customization features.  Look forward to some articles coming soon!

Whether you are buying Thesis for the first time or just upgrading, you can download Thesis 1.4 on the DIYThemes site.

{ 5 comments }