The WooThemes Blog

Our first business theme in 2012 is a beauty! We wanted to let Chris Rowe have another chance at out-designing his previous top seller at WooThemes; Simplicity. So it goes without saying that we have high hopes that Whitelight will be our most popular business theme to date. In addition to being a very clean and great design, here are some of the reasons we think this theme will be big…

Continue Reading »

The WooFramework comes with integrated Google Fonts in the options panel, and we try to update these fonts regularly so new ones are added for you to use. Let’s look at a method for you to use if your font isn’t available in the options.

Open up your theme’s functions.php and add this simple function:

// add the function to the init hook
add_action( 'init', 'woo_add_googlefonts', 20 );

// add a font to the $google_fonts variable
function woo_add_googlefonts () {
	global $google_fonts;
	$google_fonts[] = array( 'name' => 'Lustria', 'variant' => ':r,b,i,bi');
}

Here we have added a font name called Lustria, and after adding this it will show up in your options panel.

The new font in the typography option

Here is a simple guide on how to replace a menu item with an icon. For this example we’ll replace the “Home” item in our Canvas demo.

First, lets find a nice home icon. If you go to IconFinder you can search for “home” and find many nice ones. We’re going to use this one, so download that and upload to your site. Use Media->Add New and copy the URL to the image after uploading.

Next step is to use Firebug to inspect a menu item, so you can find the ID of the list element.

Right click the menu item and inspect element to find the ID to use later.

Once we have the ID we can start adding some CSS to custom.css in your theme through Apperance->Editor.

#menu-item-290 {
     margin-left: 10px;
     width: 32px;
}
#menu-item-290 a {
     background: url("http://cdn2.iconfinder.com/data/icons/gnomeicontheme/24x24/actions/redhat-home.png") no-repeat scroll 0pt 0pt transparent;
     text-indent: -99em;
}

The first style targets the main list element, and sets the width to 32px so it’s the same width as the image, and just moves the image 10px to the right.

The second style targets the link or anchor inside the list element, and sets the background of that anchor to the icon. To hide the text we simply move it off the screen with negative text indent.

That’s it! The finished product will look like this:

The Home linnk replaced by a home icon!

Some might not like the use of rounded corners, so the solution would be to go through style.css and find all CSS selectors that have border-radius set and then add it to custom.css. This was done on a user request and here are the selectors from style.css:

.nav li ul li a,
.nav a, .nav li.current_page_item, .nav li.current_page_parent, .nav li.current-menu-ancestor, .nav li.current-menu-item, .nav li.sfHover, .nav li.selected,
#top .nav li.sfHover a,
#top .nav li ul, #top .nav li ul li:last-child a,
.woo-pagination a:link, .woo-pagination a:visited, .woo-pagination a:active, .woo-pagination span.current,
.searchform,
.widget_woo_twitter .back,
#tabs,
#tabs ul.wooTabs li a.selected, #tabs ul.wooTabs li a:hover,
#comments .reply a,
.button, .button:visited, .reply a, #respond .form-submit input#submit,
#connect .newsletter-form .submit,
#portfolio #port-tags .port-cat a
{
   border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;
}

This morning we were made aware of a security flaw within the Timthumb image resizing script, which is utilized in our themes for dynamic image resizing. It is also widely used in other WordPress themes and plugins.

As a result of this security flaw, the author of TimThumb and the author of WordThumb have worked together to release TimThumb v2 which fixes these security issues.

We’d highly recommend that you update your WooFramework like described below.

How to update your theme

Update TimThumb with WooFramework v4.4.2

You need to update to the latest version of the WooFramework (v4.4.2), as we have now moved thumb.php into the framework so it is easier to keep updated. There is also a new function in the framework which will remove your old TimThumb from the theme.

To update your Framework, simply go to your theme menu and select “Update Framework” (see our tutorial on the topic).

Need further help?

We have created a dedicated forum for TimThumb issues in our support forum. Please make a new post in this forum and we’ll be along to assist you. View the new forum.

In this tutorial we’ll add some Google Adsense into your single posts, and align them next to the post content.

Adsense code added to the right of the post

To add this, simply add this function in your themes functions.php:

<?php

// This will add the function to the woo_post_inside_before hook
add_action( 'woo_post_inside_before', 'add_single_adsense_code' );

// The function
function add_single_adsense_code() {

    // Only execute this if we are viewing a single post
    if ( is_single() ) {
?>
	<!-- You can also use 'alignleft' or 'aligncenter' -->
	<div class="alignright">

		<!-- Start Adsense code -->

		<script type="text/javascript"><!--
		google_ad_client = "pub-2151667935419035";
		/* 125x125, created 7/17/08 */
		google_ad_slot = "0794601937";
		google_ad_width = 125;
		google_ad_height = 125;
		//-->
		</script>
		<script type="text/javascript"
		src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>

		<!-- End Adsense code -->

	</div>
<?php
    } // ENDIF
} // END Function

?>

In this tutorial we will add some social shortcodes after the content on the single posts page.

Social shortcodes single post

Simply add this to your themes functions.php file

// This will add the function to the woo_post_inside_after hook
add_action( 'woo_post_inside_after', 'add_share_after_post' );

// The function
function add_share_after_post() {

	// Only execute this if we are viewing a single post
	if ( is_single() ) {

		// Add a linebreak shortcode
		echo do_shortcode('[hr]');

		// Add Facebook Share shortcode
		echo do_shortcode('[fbshare type="button_count"]');

		// Add Twitter shortcode
		echo do_shortcode('[twitter style="horizontal" source="desaindigital" related="desaindigital"]');

		// Add a linebreak to clear the floating elements above
		echo do_shortcode('[divider_flat]');; 

		// Add Facebook like shortcode
		echo do_shortcode('[fblike]');
	}

}