An incredible amount has happened since we launched in July 2008, as we mentioned in our 3rd birthday blog post. Today marks another monumental milestone we are hugely proud about – our 100th theme release.

Continue Reading »

We are only days away from the release of our 100th theme. Can you believe it? 100 themes.

To get everyone excited for our big milestone we thought we’d tease the theme in a different way. Ryan ‘The Cannon’ Ray has been experimenting with Final Cut Pro X and Motion and this is the result. Not bad if we say so ourselves!

Continue Reading »

This is going to be a massive post, stocked with so many exciting announcements.

Heck, this is one of the most epic and exciting announcement posts we have written in our 3+ years of existence. We know that you’ve been waiting for such announcements for a very long while now (thank you for your patience in that regard), but we also know that not even if you had psychic abilities would you have been able to see some of this coming.

Hold tight, here we go…

The WooTeam grows

Skwizz on over to our Meet the Team page and you’ll see that the WooTeam has grown to a whopping 15 members. So let’s welcome our new team members:

You should all know Jay & Mike by now. We’ve been collaborating with them on our application themes and they’ve already delivered the beauties which we call FaultPress & SupportPress. Previously, they were only working with us on a part-time basis and our application theme collaboration was more an explorative side-project. They however join us full-time as of 1 September to head up a brand new division within WooThemes that we’re calling WooLabs (more on that later).

As you should also know, we’ve been on a big drive to improve our support & customer service in the last year. So we’re also happy to welcome Scott to the team, as our latest Ninja. Scott has been trolling the support forum over the last week, where he’s been helping to deliver happiness to WooUsers. If you spot him around, say “Hi!”.  

Continue Reading »

Today’s tutorial involves techniques we’ve learned across earlier tutorials, involving the use of custom filters. Today, we’ll be applying this technique again for a different purpose- to customise the footer content for certain, specific pages.

The finished code

Before we start, lets take a look at the finished code.

add_filter( 'woo_footer_left', 'woo_custom_footer_left', 20 );
add_filter( 'woo_footer_left', 'wpautop', 21 );

function woo_custom_footer_left ( $content ) {
	// Add the slugs here of the pages you want to customise the footer of.
	$pages = array( 'about', 'contact', 'blog' );

	foreach ( $pages as $p ) {
		if ( is_page( $p ) ) {

			// Calling the __( '', 'woothemes' ) function here makes this text translatable.
			$content = __( 'This is our customised footer.', 'woothemes' );
			break;
		}
	}

	return $content;
} // End woo_custom_footer_left()

What the code does

The above code does the following:

1. Instruct the “woo_footer_left” filter to look for and execute the “woo_custom_footer_left()” function on the footer left content area.
2. Setup an array of pages for which we want to customise the footer.
3. Loop through the array and, when we reach the page we’re on, change the content and break out of the loop (as we’ve found the page we’re looking to customise the footer for).
4. Make sure we run the `wpautop` function on the text after we’ve customised it, to make sure the paragraph tags are in place correctly.

A different application for this code

What if you want a custom footer for a different condition (all posts, perhaps)? WordPress contains several Conditional Tags which can be used to determine when do display content or perform specific actions. In this case, we only want to change the footer text on single blog posts, so we use the `is_single()` conditional tag. The adjusted code would look like this:

add_filter( 'woo_footer_left', 'woo_custom_footer_left_single', 20 );
add_filter( 'woo_footer_left', 'wpautop', 21 );

function woo_custom_footer_left_single ( $content ) {
	if ( is_single() ) {

		// Calling the __( '', 'woothemes' ) function here makes this text translatable.
		$content = __( 'This is our customised footer for all single posts.', 'woothemes' );
	}

	return $content;
} // End woo_custom_footer_left_single()

The final results look something like this:

The Canvas Footer, Customised for a Specific Page

The Canvas Footer, Customised for all Blog Posts

We rolled out our biggest project ever on Monday: a brand new user dashboard. Suffice to say, the launch has not been without its own set of (unique) issues. But that’s pretty much expected, right?

We’d be lying if we said that we thought it would be possible for us to rewrite the whole core of WooThemes.com and not have one bug after launch. Doing that would’ve required super-human powers and an enormous amount of good luck. It is however always our aim to deliver a superior experience to the WooCommunity.

So as things stand, there are quite a few bugs (80% of them are minor) present at this stage. We’re working incredibly hard to address these in the most efficient and speedy way possible. In the meantime, we’re very sorry about the issues that are awaiting resolution and very sorry about the frustration & below-par experience you’ve had in some parts of the dashboard.

Feel free to get in touch with us via e-mail if you’re experiencing any niggles on your account. We’ll try to temporarily sort something out for you, whilst we wait for the bugs to be fixed.

18 months of blood, sweet & tears, thousands of lines of new code, Basecamp threads & to-do lists that stretch miles, that coupled with a considerable amount of patience and we’re finally ready to introduce you to the next iteration of WooThemes. Phew…We’ve revised WooThemes from the ground up, which means you now have a brand new user dashboard, new profile page, new support forum / help desk, new checkout pages… Basically just loads of new things… The whole core of WooThemes has been re-written and re-designed to create a much better user experience in & around WooThemes.

The New User Dashboard

Continue Reading »

Pretty baby statistics with the Announcement theme.

Matthew Smith approached us a few months ago, before the talented SquaredEye design team shut office to join forces with a booming online start-up. He had a theme idea for us, after previously designing the slick charity theme “Saving Grace”. I received an email one morning reading:

I was driving this morning and thought about an Announcement theme. It would be a one page theme. I’m thinking about a wedding or birth announcement in particular with a commenting piece attached so that people can add their happiness

We like the idea and believed it was worth pursuing as there was/is nothing too similar in the WP theme space catering for this rather large personal niche of happy couples announcing a wedding, the birth of a baby, the graduation of a son or daughter, or any big event in one’s life. Nothing overly complicated, some photos, a blurb of text, a guestbook-type commenting system, some info graphics of statistics maybe, and some registry links.

Enter new theme, Announcement.

Continue Reading »

Good news – especially in the light of the recent vulnerability found in TimThumb – is that we recently worked with WordPress Lead Developer & Security Expert, Mark Jaquith, to do a complete security audit of the WooFramework. This is what Mark said about the audit:

WooThemes approached me to do a security audit on the framework that powers their themes. I ensured that WooFramework is using secure WordPress coding techniques, and gave their developers pointers on keeping it secure going forward. WooThemes understands that security is a process, and a commitment to users, so I will be doing a followup review at a later date to continue the security vigilance.

Matty & Jeff have worked tirelessly to implement all of the feedback that Mark provided and we’re happy to say that the WooFramework is now more secure than ever. Considering that the WooFramework powers all of our 99 (!!!) themes, this was a very important exercise for us in making sure that our code is as secure as possible. 

Continue Reading »

When searching a website, it’s often useful to know where in the search results list you’re currently browsing, and how many results, if any, have been found for your search. In this tutorial, we’ll be using a contextual hook to display these search details on the search results list.

The finished code

Before we start, lets take a look at the finished code.

add_action( 'woo_loop_before_search', 'woo_custom_search_info', 10 );

function woo_custom_search_info () {
	global $wp_query;

	// Retrieve the values we need to work out which items we're displaying.
	$per_page = $wp_query->query_vars['posts_per_page'];
	$paged = $wp_query->query_vars['paged'];
	$past_pages = 0;
	if ( $paged > 0 ) { $past_pages = $paged - 1; }
	$post_count = $wp_query->post_count;
	$total = $wp_query->found_posts;

	if ( $total == 0 ) { return; }

	// Setup the start and end values.
	$processed_entries = $per_page * $past_pages;
	$start = $processed_entries + 1;
	$end = $processed_entries + $post_count;

	// Setup our information for display as HTML.
	$html = '';

	$html .= '<div id="search-details" class="search-details">' . "\n";
		$html .= __( 'Displaying', 'woothemes' ) . ' ';

	if ( $total == 1 ) {

		$html .= '<strong>' . $total . '</strong> ' . __( 'result', 'woothemes' );

	} else {

		$html .= sprintf( __( '%1$s to %2$s of %3$s results', 'woothemes' ), '<strong>' . $start . '</strong>', '<strong>' . $end . '</strong>', '<strong>' . $total . '</strong>' );

	}

	$html .= ' ' . __( 'for', 'woothemes' ) . ' <strong>"' . get_search_query() . '"</strong>' . "\n";

	$html .= '</div><!--/#search-details .search-details-->' . "\n";

	// Display the finished HTML.
	echo $html;
} // End woo_custom_search_info()

What the code does

Right. That’s quite a lot of code to take in with a single read. Lets take a look at what it does.

The above code does the following:

1. Instruct the “woo_loop_before_search” hook to look for and execute the “woo_custom_search_info()” function. “woo_loop_before” is the main hook. Adding “_search” to the end ensures that it only executes on the “search” screen.
2. Retrieve the necessary values from the current screen’s “$wp_query” object and determine the total number of results, current start and current end numbers.
3. If there are no results, stop the code and don’t display any text.
4. Setup a wrapping DIV tag with an ID of “search-details” and CSS class of “search-details”, setup our text starting point (“Displaying”) and load it inside the new DIV tag.
5. If there’s only a single result, display “1 result”, otherwise display the start, end and total number of results inside the new DIV tag.
6. Print out (echo) the new HTML to the screen.

Lastly, the CSS

Lastly, we’ll add some CSS to the `custom.css` file to give the search details some space before the results list starts.

.search-details { margin-bottom: 20px; }

The final result should look something like this:

Search details added to the Canvas search results screen

We recently hosted a little survey within the WooCommunity (members only) to figure out just how we could further improve WooThemes for our users. We got more than 3000 responses on the survey and we’ve already started to put some new decisions in place based on your feedback.

To say thanks, we also promised to give away 4 x 16GB iPad 2′s to some lucky winners. Jeff got the the honour to pick 4 random numbers which we then matched with the respondent list. Here’s the 4 winners:

• Nick Kask
• Bob Dunn
• Frank Groet
• Phil Greenwood

Congrats to these winners and thanks to everyone else that helped us out by taking the survey. For those that weren’t so lucky to have won a shiny, new iPad, your reward will be in all the awesome stuff we release in the next couple of months.

Sometimes, you may want to move a page’s title to another part of the page’s layout. This may be for CSS styling reasons, or simply because you prefer it there. Today, we’ll look into how we can achieve this in Canvas.

What we’ll be doing here is:

1. Disabling the original title.
2. Adding a new title in our desired location.

The default position of the page title looks as follows:

The default page title position in Canvas

The finished code

Before we start, lets take a look at the finished code.

add_filter( 'the_title', 'woo_custom_hide_single_page_title', 10 );

function woo_custom_hide_single_page_title ( $title ) {
	if ( is_page() && in_the_loop() ) { $title = ''; }

	return $title;
} // End woo_custom_hide_single_page_title()

add_action( 'woo_content_before_singular-page', 'woo_custom_add_page_title', 10 );

function woo_custom_add_page_title () {
	global $post;
	$title = '<h1 class="title">' . get_the_title( $post->ID ) . '</h1>' . "\n";
	echo $title;
} // End woo_custom_add_page_title()

What the code does

As can be seen above, we’ve got two custom functions, a filter and an action.

The above code does the following:

1. Run a custom filter on “the_title”. If it’s being used on a single page and is in The Loop, disable it.
2. Add a custom action on “woo_content_before” (only in the “singular-page” context) and display the title text, wrapped in “h1″ tags.

The final result should look something like this:

The page title outside of the Canvas content area

We have quite the jobs over here at WooThemes, working with WordPress and creating beautiful themes. On paper it sounds wonderful, and it really is in reality as well. That still doesn’t mean that there isn’t any monotony to our jobs or burn out that may happen. Yes, even for founders of hugely successful companies the problem exists. Or at least I assume, since I can’t speak from experience.

So what do I do personally to keep my spirits high and my passion burning? Well I’ll tell you a little bit from where I’m at currently.

Inspiration In Three Forms

Unfortunately, my title as Community Manager counts me out from doing any theme development, which is for the better trust me. This doesn’t stop me from digging through our themes and tearing them apart best I can though. I’ve lately been really digging into child themes and have had a blast doing so. This provides me a good opportunity to really become familiar with our themes and possibilities provided by them. Which in turn helps me answer questions about modifying themes or if certain things are possible with WordPress. Given the open source nature of WordPress, people are always doing something incredible with it and I like to try and stay on top of what’s being done. This is definitely one spot that keeps me inspired, I try to spend some time every day doing what many of our customers are doing. Experimenting and molding our themes.

Continue Reading »

The WordPress search functionality is a useful way of helping your users find the specific content they’re looking for. Knowing that the searching functionality is in place, the main focus would then be on making the search box as visible to your visitors as possible. Therefore, why not add the search box in your website’s header area? This is what we’ll be adding to Canvas in today’s tutorial.

The finished code

Before we start, lets take a look at the finished code.

add_action( 'woo_header_inside', 'woo_custom_add_searchform', 10 );

function woo_custom_add_searchform () {
	echo '<div id="header-search" class="header-search fr">' . "\n";
	get_template_part( 'search', 'form' );
	echo '</div><!--/#header-search .header-search fr-->' . "\n";
} // End woo_custom_add_searchform()

What the code does

The above code does the following:

1. Instruct the “woo_header_inside” hook to look for and execute the “woo_custom_add_searchform()” function.
2. Setup a wrapping DIV tag with an ID of “header-search” and CSS classes of “header-search” and “fr” (float right), get the template part called search-form.php and load it inside the new DIV tag.

Lastly, the CSS

Lastly, we’ll add some CSS to the `custom.css` file to vertically centre the search box within the header (the value used here would differ depending on your header’s height).

.header-search { position: relative; top: 20px; }

The final result looks something like this:

A search box in the Canvas header

We’re trying our hand at redesigning the news, courtesy of the incredible talents from design maestro, Andy Rutledge.

A couple of weeks ago, Andy wrote an elaborate article about how digital news is broken. His article included an analysis of The New York Times‘, as well as a proposed design of how he would’ve attempted to “fix” digital news. His proposed redesign of The New York Times sparked many conversations across the social web and the design soon become a firm favourite amongst users.

So we acted swiftly, got in touch with Andy about the design and managed to acquire the rights to it. This means that you can soon expect the design – to be called Currents – to become part of the WooThemes collection. Just another way in which we go that one step further for our users.

Continue Reading »