Speaky, A Free Twenty Ten Child Theme for WordPress

Posted on August 10th, 2010 by in Free WordPress Themes | 91 Comments  
Speaky, A Free Twenty Ten Child Theme for WordPress

WordPress 3.0 came out with a beautiful new default theme called Twenty Ten. While that theme is great, it can be styled into something a lot different. That is exactly what we did with our Speaky theme. Speaky is a free WordPress child theme for Twenty Ten theme. Speaky theme is equipped with all the features of the Twenty Ten theme such as:

  • WordPress 3.0 Menus
  • Custom Background Option
  • Header Images Option
  • Featured Post Images Option
  • Featured Post Slider on Home Page
  • Widget Ready Sidebars
  • Clean Semantic Web Markup

Before we go any further, we have to let you know that this beautiful work was the creating of Dronix (@dronixs) – Follow him on Twitter :)

Video Preview of Speaky Theme

You can also check out the Live Demo for Speaky Theme.

Ready to Download the theme?

Download Speaky Theme by WPBeginner

This theme is released under the GPL license to support development. If you use this theme as a base to customize other themes, do show it off in the comments below. Download

Setup Instructions

As you see in the live demo, that Speaky comes with a Featured Post Slider. This will work only if it is setup right. Which is why we will show you how to set it up properly. The slider only shows the posts from a category slug called “featured”. That means, you must have a URL Structure other than the default one. Any post that appears in that category and has a post thumbnail with a width of 940px will be shown only on the Home Page. On pages like category, and archive the default header image will be shown. On all single post pages, the post thumbnail will be shown.

The slider displays only 10 slides with the “featured image” of any recent post under the category of Featured by default. To change the category or number of slides open up header.php file and look for:

<?php speaky_slider(); //Displays a slider using the featured image ?>

It should be line 93, then add the category name and number of slides. Here’s an example using the News category with 5 slides.

<?php speaky_slider( 'news', '5'); //Displays a slider using the featured image ?>

Changelog

v1.1

	* new: Archive, Category, and Search pages have been added for a minor css tweak
	* fix: Slider function rewritten.
	* fix: Using wp_enqueue_script() to also include Nivo Slider, not just JQuery.
	* fix: Minor css tweaks after testing of the Theme Unit Test data.

v1.0.1 (Initial Release)

To install this child theme, you will need to upgrade your WordPress to the version 3.0 minimum, then simply upload this theme into your Themes folder. (For more See: How to Install a WordPress Theme)

We appreciate all of your feedback on the theme in the comments below, on our twitter, or our facebook page. If you can, please help us spread the words out about this theme to all of your friends by using our share widgets :)

About

Editorial Staff at WPBeginner mainly Syed and David.

Post comment as twitter logo facebook logo
Sort: Newest | Oldest
SeanKollak 10 pts

I have started with Speaky today and I think it's simply great.

http://www.reimix.de

Any feedback and input welcome - still learning

I just redesigned my site using a Twenty Eleven child theme based on Speaky: http://optimwise.com/

Gregory Ciotti 8 pts

Has this theme been updated to the latest version of TimThumb in order to avoid the recent exploit?

wpbeginner 50 pts moderator

Ciotti It is not using timthumb.

JP2003 5 pts

I also like how you customized the NivoSlider to pull from from the Featured Image. I'm gonna use that one.

JP2003 5 pts

This looks pretty solid. I think I am going to give it a try. Thanks!

Gregory Ciotti 8 pts

JP2003 One of the best Twenty Ten child themes, by far.

I really love this theme, it is great, the only problem I am facing is that I would like the slider to work on all the pages on my site and not only on the posts. Could you please help me to sort out the code that the slider of the header work on all pages?

I like this theme, and have used it a few times so I thought I'd mention a couple things. The slider throws an error after clicking a post in IE (i don't know much about JS) I added this to it
[code]wp_enqueue_script('jquery');[/code]
right below //Include JQuery and NivoSlider

The other thing I did was made it show the post title instead of the image title.

Edit jquery.nivo.slider.pack.js and change captionOpacity:0.0 its at the bottom.
change the opacity in header.php to 0.0 (if you've added the Nivo options to it)

open functions.php and add
[code]<div class="nivo-caption2"><p><?php the_title(); ?></p></div>[/code]
above (around line 24)
[code]<?php the_post_thumbnail();?>[/code]

then in your CSS add

[code].nivo-caption2 p{line-height:30px;padding-left:10px;font-family:"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;}[/code]

I've used alot of Speakys header code to include it into my own theme http://test.zeaks.org

Is there any way to have the slider image caption display the post title instead of the image name? I've played around with it for hours, but really have no idea how to do it.

Great Theme! On the slider, how might one:

1) increase the time each post thumbnail is displayed on the slider.

2) Remove the image name (and perhaps even the black bar) from the bottom of the slider image?

Thanks!

I really love this theme - I found it fast and easy to customise the CSS, which seems refreshingly clean and straightforward. But is it really a child of TwentyTen? It doesn't import the 2010 CSS, and has so many template files that I wonder what is left of the parent in the child. Perhaps you should rename it cuckoo.

Okay. So, what if I don't want my slider to show my posts? I have 5 images that I want shown on my pages. I don't want to post random pictures on my blog just so they will show up on a slider - I want them on my slider without interfering with my blog.

Me Too! I'd like to know how to do that. Actually, I'd rather know how to feature pages not posts, but if I could manually set the images and their links, I could live with that.

Nice theme. A good child theme for the TwentyTen theme.

Ok demetrius try the version below.

Download Speaky

Merry X-mas & Happy NY, guys!

There's no @ Homepage (even in demo here).
Does anybody have a solution to fix it?

Hey demetrius I'm not sure what you mean by "no @ Homepage". Can you elaborate a little so I can help you get a solution.

Ooops, extremely sorry - html tag "TITLE" was stripped :)
There's no title at Homepage even at the demo site.

Gorgeous child theme for Twenty Ten. Reminds me of Thesis visually. Thank you

Hi Dronix,
I encountered a problem:
Featured Post Slider on Home Page do not work
help me
Thanks!

The featured image needs to have a dimension of at least 940x198 pixels.

@jens: Hey sorry to hear that didn't fix the problem. While debugging I still see that the text-transform: uppercase seems to be adding the extra margin on top. Maybe remove that property all together?

BTW, you have font-weight: bold added to the li while text-transform: uppercase to the ul, try declaring your font styles in one place. I know my fix said to try adding the text-transform property to the li elements but did you add it to: #access .menu-header li, div.menu li while removing it from #access .menu-header ul, div.menu ul?

Hi,

first and foremost: i love the theme, its really cool and handy.

one thing though, maybe someone with css knowledge can help me out. when i hover over the menu (with drop-down-submenues in theme) the hole page moves down a bit. so, when the submenues appear, everything is down a couple of pixels (10-15). why is this happening? it happens in firefox 3 on mac, but not safari.

http://kiezfieber.de

thanks for your time
greetings
jens

The cause for the extra padding/margin seems to be because of the text-transform: uppercase that you have there. Try adding that property to the li element instead of the anchor links.

hi dronix,

wow, thanks for your fast input. i tried changing the uppercase definition to the li element, but it didnt fix it.

well, mayber it' something else, i dont know. it's kind of annoying but i can live with it.

if anybody know how to fix this glitch, i would appreciate your help.

thank you in advance.

Anyone know if there's an update due at any stage to fix the slider problem? I really don't want to go digging about with the code in the jQuery library as I don't know anything about it!

The code for the slider was rewritten for v1.1 there shouldn't be any problem other then some styling issues with IE which Janivanda posted above.

Hi,
This is a great plugin and I am using it for my personal blog that I have just started. Just wondering if you are aware of the 'WordPress NextGen GalleryView' plugin. I am trying to get Speaky to work with it but I am just getting a blank page that looks like it's loaded pictures but fails to play the slideshow.

Hey Gary mind posting a link so I can take a look? Not sure if it's the theme's fault but maybe your Javascript isn't being loaded.

Thanks for replying.

I ran firebug on the page and saw 'Nivo-Slider.php is not a function' error. Which as you say may have been interfering with the JavaScript.

So I managed to resolve this by installing the Nivo slider plugin and it worked. As a newbie to Wordpress I am still looking at my gallery options, but I shall stick with the 'Speaky' theme, it's very clean.

Fickle me.

I really like the Speaky theme for my Wordpress 3 website! I'm a Firefox user and everything looks fine, including the slider and featured posts etc..
But, my readers complaining about the messy layout in Internet Explorer 8.0. When using featured posts inthe slider, IE8 doesn't show the slider images.. When not using featured posts the default header image will show up correctly..
Is there a fix for this? I'm using Speaky 1.1.

Hi-
I've been trying to change the size of the Nivo Slider to fit images 940x279. I can change the css and the slider frame gets bigger, but the image is getting cropped at the top and bottom. Any suggestions?

I was thinking about an option to show recent posts instead of 'featured'. Is it possible?

Don't understand your question. You mean have recent posts 'featured image' in the slider?

Hello,
I've installed 3 wordpress sites on 1 FTP, all with the Speaky Theme.
For two of them, it works perfectly.
The third (http://www.el-ancor.com/fiction/) has a problem.
This error occurs when I try any url :

Fatal error: Cannot redeclare _verifyactivate_widgets() (previously declared in /fiction/wp-content/themes/speaky/functions.php:205) in /fiction/wp-content/themes/twentyten/functions.php on line 506

I tried to copy/past the functions.php of the functionals sites, but it still does not work.

Do you have a clue ?

Thank you.

Quick Update:
The update won't be released for another two weeks. I currently have a bad hard drive and it won't be fixed until sometime next week.

Hi Dronix,

Looking forward to the fix - having the same problem with the slider not showing up.

I'm new to WP but did a bit of digging around and when comparing my source code to your demo site here I noticed that your slider function

jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});

is being called BEFORE the JQuery library gets included on my site, whereas on your demo site its called After. Not sure how to modify header.php to fix this.

Cheers KB

Hi those that have the same problem that I had - this is what worked for me. I'm using WP 3.0.1 in a multisite environment.

When viewing the source of my header, the main JQuery library was being called after the Nivo Slider JS file and the the load function. (Not sure if this is because of Multisite).

Anyway I moved anything to do with the Nivo Slider javascript code and put it after wp_head(). I know it says not too but I didn't know else to get JQuery library to load before. This fixed it for me in FF, Safari and Chrome, but IE (7&8) it wasn't appearing.

The IE fix was a css one, in file custom-nivo-slider.css I commented out display:none; for #slider img.

hope that helps

KB

Hey Matt thanks for trying out the theme. We're currently trying to release an update to this theme within the next week. There seems to be a bug with the slider at the moment. A fix will be included in the update.

Cheers

hi guys, looking forward to the update and great news that a fix is on the way! Thanks once again.

Great news Dronix!
I'll be sure to try out the new one ASAP,
and I'll provide further feedback as well.

Hi, I have installed Speaky and done all the settings but the slider won't work. I have created a custom category and slug and updated the header.php accordingly. I have changed the permalink structure. I uploaded the thumbnail images (940x198) and they appear on the post pages, but the front page header is still static. Any guess? Thank you very much.

You have to create a category called Featured and post in it.

Hi. Thanks for the quick reply. I did as you suggested, but the main page header disappeared. The slider is not loading. Any guess? Thanks again.

Hey Jorge is this a clean install of the theme. By default the theme displays the slider with posts that are categorized as featured.

Btw, is this a live site?

Awesome theme guys, well done. I'm having similar problems to Jorge I think. I installed the theme last week and had it running with default header for a few days. Did a new post today though and make a new category for it called "featured" which has killed the home page header altogether.

I haven't edited the header.php and haven't done anything to the post's slug or site's permalinks. (they're just: 2010/09/05/my-tiff-2010-movie-schedule/) You can see it with latest post at www.thewheatln2.com. Post image shows up on post page so I guess the image is correctly formatted. Apologies for not getting this, am sometimes a little clueless with things!

Thanks again.

First off,
this is a very nice looking child theme.
Thanks for providing it to the public like this.
:o)

I am also sharing the same problem.
I've created a post category named "featured",
which also has the slug "featured".

I've added one of my existing posts to the "featured" category, as well as added one of the default header images from the "Twenty Ten" theme as the "Featured Image" for the post (ensuring that it was still set to full size).

The header that I have defined in the admin appearance tab is no longer showing on my home page... let alone the slider that I was expecting.

WP v3.01
Twenty Ten v1.1
Speaky 1.0.1

Any insight you can provide is greatly appreciated.

I had trouble getting the slider to work and found that the php was calling for is_home () and that will only work for blogs not static front pages (like I was using). I swapped out is_home() for is_front_page() and it works great. Make sure to update all the references for the js and css and it will work great.

Hi, I like what you did with TwentyTen, is it possible to place a Flash Banner in place of the header image, and possibly have a different one for each page?
Also,can the header size be increased from the 940x198,specifically the height?

Thanks!

Tweets about us: