Finally done with a simple theme called Blue Rooster. The theme is a two column layout with a extra templates that can convert your blog into a CMS. The sidebar and footer are both widgetized, author and category templates included, as well as social buttons already intact. The theme style is a mix of rounded corners, flat edges and wooden elements with a schema of muted, dark colors on a plain white surface. Blue Rooster is free under Creative Commons license.
Usage
Blue Rooster is ready to use out of the box. The standard blog template will work with or without assigning thumbnails to your posts. In order to use thumbnails – you would have to assign custom fields to your posts with name: “image“. To learn more about custom fields – check this link from the Wordpress Codex. You DO NOT have to resize your images for the thumbnails, thanks to the Darren Hoyt for his TimThumb script which made this all possible. The thumbnails are also powered by jQuery: PrettyPhoto – which is a lightbox clone where the larger images are displayed when clicked. A link to the single post is also included with the larger image.
The Bonus Templates
If you want to use the slide show in the front page – just apply the template “template-home” to your home page. Then make this page the static page of your site. To customize the slide show – simply replace the images in the images folder. Note that there are two sets of images: the larger image and the bottom bar. The active state and non-active state of the bottom bar matches the larger image. The Testimonials section in the template are actual posts under a category: testimonials. Simply create this category and start creating posts under it. The testimonial author works as the title for this section.
The Photo Gallery page is as simple as applying “photo gallery” to a page. The images in this gallery are automatically populated from your custom field thumbnails. So in order for this to populate – you must use thumbnails in your post.
Other Stuff
A custom login form is built in the header which is also jQuery powered. Once logged in will give you quick access to the dashboard, as well as quick “Edit” links after each post. The single post page includes an author information which feeds information from your user profile and Gravatar. So to utilize this section – your user information and gravatar must be filled out. The comments section support threading and pagination.
You can demo Blue Rooster from this link. Download the theme from here. I can also release the .psd files for customization only if I get a large response (by leaving comments). Otherwise – feel free to check it out and use it for your next project.
UpdateThe PSD files can be dowloaded from this link
with 422 followers
Nice looking theme.
If you haven’t already, and assuming the theme is GPL, you should submit it to the theme directory on WordPress.org: http://wordpress.org/extend/themes
very nice theme thanks
Michael, this is really nice work. Keep it up. I saw your stuff on Themeforest and Twitter brought me in.
Cheers
Edmund Pelgen
woooow great theme
i’ll use it
no doubt, this is one of the best free wordpress theme. I am going to check it out for my other site.
I hope you will release the psd files, or at least please send them to my email address as I want them to setup my blog.
Full credit to your work.
This is a fantastic theme. I love the simplicity, exactly what I have been looking for. Would love the .psd files for editing. Thanks again.
@a_usman, @Adam – the psd files are in this link: http://fearlessflyer.com/main/wp-content/downloads/psd/blue-rooster-PSDs.zip
wow….. this is amazing
This is an awesome WP theme mate! It have a very professional looks.
Your submission has been approved, the theme is now listed at http://www.cmstheme.net/theme/wordpress/blue-rooster.html
Hello Michael,
Another great theme. I love it. Just needed a little help.
When I got to widgets and add widgets to my footer, they actually do not replace the default widgets. How to remove or replace the default footer widgets..?
Thanks
@usman –
I filled the footer with dummy HTML for demonstration purposes only. So go in footer.php (under Appearance > Editor > Footer.php) and you will see there’s 4 blocks of dummy HTML code you have to delete manually.
Hello Michael,
Great theme.
How to use photo gallery template?
Thanks
Yes, I would like to know this as well. Following the directions on this page have not produced any results. All of the variations I have attempted have been equally unsuccessful. Apparently I am just that stupid. A little hand holding would likely go a long way. Thanks.
@mame, @TBarrios – the photo gallery template pulls image custom fields from your post. So all you have to do is apply the Photo Gallery template onto a page and that’s it.
ermm.. nice idea … this is great.. thank you..
You have a great talent. Thank you for sharing so spectacular theme. And discuss the http://tinyurl.com/nn8t86
Nice theme! Thank for sharing
I like the touchscreen style
OMG! Brilliant Theme!
And its FREE
Thanks!!
Awesome post, these themes are very inspirational!Thanks for sharing.
Is there anything wrong with the custom field ? I assigned a custom field as in the instruction but i didn’t work. I installed this theme offline with XAMPP.
on each post should be a custom field with the name “image”,
the value should be the full url of where the image is.
see link: http://fearlessflyer.com/main/wp-content/uploads/2009/06/custom-field1.jpg
At last I found the problem with the thumbnail, it must be upload to the host. I gave it the link to an image on other site so i didn’t work.
Your theme is really pro.
It must used as a business website than a normal blog.
I like it very much.
Thank you.
Could you please tell me how to divide a post into many page like the demo ?
Use the “Next Page” short code to divide your posts into multiple pages
Thank you very much for your help!
Sorry for disturbing you so much but could you explain more about using the short code “Next Page” ? I don’t know much about these things
This is a great theme, thanks so much for making it available.
How would I go about changing the amount of time the home page slides are displayed? I’d like mine to be a bit longer before it autoscrolls to the next.
Thanks again.
@Rory – in the theme folder, go into scripts, rotate and open “rotate.js”, you will see at the end of the script: “.tabs(‘rotate’, 2000)” – the “2000″ is 2000 milliseconds – change that to a higher value i.e. 5000 is 5 seconds.
I am having trouble finding the code that controls the rate at which the slide images in the home template transition. Can this be controlled, because they change too quickly for my intended use. Thanks again!
@TBarrios – in the theme folder, go into scripts, rotate and open “rotate.js”, you will see at the end of the script: “.tabs(’rotate’, 2000)” – the “2000″ is 2000 milliseconds – change that to a higher value i.e. 5000 is 5 seconds.
Really smartest theme i’ve ever seen, nice thought!!!
Hey Michael,
This is an awesome theme! I can’t believe I have not seen it sooner! Really, great work.
Quick question. How can I change the timing on the homepage rotator? I would like to slow it down slightly. Appreciate any help. Thanks.
@Nick – in the theme folder, go into scripts, rotate and open “rotate.js”, you will see at the end of the script: “.tabs(’rotate’, 2000)” – the “2000″ is 2000 milliseconds – change that to a higher value i.e. 5000 is 5 seconds.
I would love a copy of the PSD. Please release it.
Exactly where do I apply the template “template-home” to your home page?
Great theme:-)
You have to create a new page named “home“. On the right column of the “Add New Page” page – you will see a section called “attributes“, go to the “Template” drop down list and select “template-home“. Hit “Publish“
Love the theme! Would love a bit of help to get it working for me. I added a new page called home and selected the attribute Template Home and saved. The page was added but it still isn’t my “homepage” of the main url. It is still the Default Template style. How can I get my main url do be the Template Home?
Excellent Work:) What is the easiest way to custom hyperlink the small images in the rotator on the homepage?
change the href value for each image.
Changing the href values (ex. #fragment-1) for the small images in the template home breaks the rotator. Can you please explain in slightly more detail? Thanks for your help
More help please:)
Hi, very impressive Theme, I love it. But I have a slight problem: If I use links in my articles, they disappear in Article view. If I view the single post, the hyperlink is still there… Could you please give advice to solve this problem? Thank you so much.
Florian
Allright, I found out that the problem lies in the theme. It is using “the_excerpt();” in the article-view. It seems, that links are forbidden in this view. I changed it to “the_content();” and voilà, there are the links. Not a very nice solution, though. Do you have any suggestions how to allow hyperlinks in excerpts?
Hi Michael,
Thanks for sharing such an awesome theme! I searched high and low for a great looking theme that was well suited to both blog and more traditional content and this is perfect.
I’ve a quick question for you – is it possible to make the large images (eg, slide1, slide2 etc) on the homepage clickable? If so, how would I do this?
Cheers,
Michael
yes you can. the best way is to include the link and style it with a large background image in the css.
Thanks for the quick response Michael.
I’ll do a bit more research and try that.
Cheers,
Michael
Great Job Man!
Excellent theme, I would like to download this theme. Can some one help me to find the download link of this theme?
The PSD files can be dowloaded from this link
What a spectacular theme! Love it!
Thank you very much for sharing.
Michael – phenomenal theme. Many thanks.
I’ve been trying to use the thumbnails on my posts used the custom image field.
I’m having an issue where the image doesn’t come up on the post or the home template (with the exception of a grey box) but it pops up when I click on the grey box in the post. Any guesses?
Update: I’ve gone through the support for timthumb – changed my permissions accordingly – and still no thumbnails. Nothing is generated in the cache.
If anyone has any ideas it would be appreciated.
Excellent! Didn’t try it yet but I’m definitely creating some project to use it h yes!
Thanks.
Hope I can give you back something in the near future.
Hi,
First of all: Congrats on a fabulous, slick and elegant theme. I’ve experienced certain problems downloading it, though. It would appear that the blue-rooster.zip file is empty. At least it shows up empty upon downloading it, unlike the blue-rooster-PSDs.zip file, which works according to your intentions, undoubtedly.
I’m afraid I’m at my wit’s end. Could it simply be that it is empty?
Would appreciate it if you take a look. Thanks a million in advance!
@Jarle – try downloading again. I just installed a download counter plugin which may have caused it to show up empty.
Huh… I tried once more, to little avail, I’m afraid. But still hope for a solution. The theme is definitely worth waiting for.
Hi Michael, this is really fantastic. I downloaded it earlier today (via Rapidshare cos the zip file was empty) and I’m working on it as we speak… The only thing I can’t get my head around is how to get a thumbnail in my post using custom fields and therefore generating a gallery. Sorry, but I’m a novice and any help would be greatly appreciated.
Thanks in advance for all the great work!
Ciao,
Rosie
when creating a post – directly underneath there’s a section called “custom fields”.
create a “key” with the word “image”, to the left of it “value” – enter the full url of the image you like.
you don’t need to resize – it will do it automatically.
Hi Michael,
Thanks… it works!
Another quick question. Can I use prettyphoto for photos that are on pages too? It only seems to work with photos in posts and my site is basically all pages with just one page for the blog. If prettyphoto doesn’t work with pages, I’ll need to look for another lightbox. Do you have any suggestions?
Again, many thanks!
hi,
i dont get the homepage-template to work. Mainly because i don’t understand how to ‘apply the template “template-home” to your home page’
Please help!
Tnx
nevermind it works!
hi Matt, How did you apply the home-template? I can not find it! :S
Thanks!
hahaha, its actually realy easy. Log in to your Wordpress admin, go to Pages –> new page. Title it home, then go to the right sidebar where you will find the Attributes tools. There’s one called Template with a dropdown. Flick it and you’ll see Template Home. Apply and save and you’re good to go!
the theme download link gives me a zip file with a blank file in it
Love the template. Thanks for the use. Is their a way to set the timing on the rotator for the home-page slide show?
yes you can. in the theme folder, scripts, rotate – i believe it’s rotate.js – look for the number 2000 – increase to higher number.
How would I create a sub-menu (child pages) to the existing menu system on this theme?
I have “about us” page and then 3 other sub-pages that go under “about us” but I just cannot figure out how I would display these menu to drop down from existing menu. I am trying not to put these on the sidebar but right below the current menu system. It could be plain text, boxed, CSS, jquery, whatever. As long as I could make a visual link to child pages
please help me out with this?
And a beautiful theme by the way!
This has helped me – you would have to code yourself though. Open header.php and styles.css – modify according to this article: http://wplimits.com/2008/09/suckerfish-drop-down-menus-with-wordpress/
Thanks again Michael… quick question (may not be a quick answer)… Is their an easier way to add “ad” images and links. Am I just not finding it? Love how this is turning out by the way.
You know what… I did it the long way and it looks and works great. Thanks again for the theme.
Hello Michael, this is one of the most beautiful Wordpress themes I ever see. You rock, kudos for that!
Just for you guys who don’t know how to split a post into multiple pages, just use tag in your post.
For “Blog” page to work, create it and choose “blog” under Posts page field in Reading Settings.
Cheers.
i have changed the smaller images below to match the ones i used n the upper slide show. however, the old images still show up. what might i be missing?
the smaller images is only one image. Make sure that its the same name.
I love this design, however mine looks nothing like the design you have here. I wish I could figure out the thumbnails thing.
great theme
thank you
Wow Thanks .. I like this color style a lot. It s look modern and look professional site.
I like this style and template ’s color a lot. It look modern and professional.
Hello, I am building a site for a friend of mine using the Blue Rooster template, and for some reason, my frontpage slideshow is no longer working. You can click on my name to view the site, any help would be MUCH appreciated.
I’m assuming there’s some sort of Javascript conflict, any help would be greatly appreciated. Thank you.
yes – it is most likely a javascript conflict. disable whatever plugins you have and enable one at a time. this will help you sort which plugin is conflicting with the slideshow.
That did the trick! Thanks for your super-fast response!
Hello and thanks for this wonderfull theme.
I have a question. How i can customize the “add blocks 100×100″ image to be different in each block? I have tried and i can customize it but it is the same image in all blocks.
Thank you
That’s because I used the same image for demo purposes only. You would have to go in “sidebar.php” and edit the img src values, as well as the a hrefs. Just basic html.
Hi again! What can i do to put the reply option in comentaries?
Hello, Thanks for this great theme. One questions: can be translated? Best regards.
Hi there – I love this template! I’m wondering if it’s compatible with Wordpress 2.7? That’s the platform available to me through my ISP. Thanks!
it should be.
Hi,
Your theme is really amazing i have never seen that kind of work before. I have installed this theme at http://www.newdelhitattoos.com but I am facing some problems-
1. How to make the library working? Line add more pics in the library
2. I can not see the thumbnails in the gallery and also in the post sections.
Looking forward to hear from you.
Best Regards,
Avdhesh
Hi Avdhesh,
1. The library automatically fills itself with the custom images you put in for your posts.
2. The thumbnails in home and the posts section are both using Timthumb automatic resizer
I can almost guarantee that this is the problem: Your hosting environment doesn’t have the GD library – or support Timthumb – Contact them to enable this for you.
Thanks a lot for the help i have been in touch with my hosting company they have fixed one domain with another theme but on you theme still there is some problem. They have created a ticket for that and will get back to me in 2-3 days. thanks for the self again.
Yoooooo!! My Problem is solved. Thanks a lot for you time and help. while Doing all this and getting the GD library enable on my domain. I found out one more thing may be this can help to other people.
If you have the GD library enable and the thumbnail script is working and still you are not getting the thumbnail then you must be doing this mistake.
Pass the image URL which is on your domain if you will pass the url in the value field which belongs to another domain will not work.
Enjoy the theme and MANY THanks to
Michael
Regards,
Avdhesh
I try to use custom field to give a thumbnail, but it doesn’t show up the image. How to fix this?
Your hosting environment doesn’t have the GD library – or support Timthumb – Contact them for details.
Great site, thanks a lot. I followed your directions for making my “home” page the “template home”, but it still defaults to the blog look when I link to the page. Any ideas?
Thanks again!
Go to “Settings” > “Reading”, Under “Front page displays” – select “A Static Page” and choose your home page – hit “Save”
hey gr8 theme i like it!!!
but it took at least 2 mins to spor the DEMo link , would you make it more visible ? along with the Download Links and the PSD download , you can use custom CSS for them or just a Write panel
Love your template. But the 3 buttons links in the header don’t work
I replace : fragment-1 -2 -3 by http://lesateliersfetish.com in the home page template
but it doesn’t work…
Thanks for help !
and thanks a lot for this great template !
it looks like you got it going.
Yes, that’s working ok now ! Thanks again for your great theme !
Hey is there any Solution to link the Slider Images?
I really like this template, but I broke the homepage template.
Instead of the animation I know have 3 very large still images on the homepage.
Any idea how to fix this?
I’ll keep tinkering in the meantime.
Oops cried wolf, too many plug ins activated. Is working now.
Hi, a really great theme! Could some one please explain to me how to get the Blog function to work?
Also I wonder if it would be possible to link the big picture to a specific page and different pages depending in witch picture that are shown?
it’s a nice template
you can open my Website “themeses.com” download more Mobile Phone wallpapers
Just wanted to say great work, great design and great support. You are the reason people want to learn more, thanks for your time and efforts.
Hi, i love this template,but, what is the font?
Thanks
is there a way to change the size of thumbnails?
To those wanting to know how to add a link to large images in the slideshow. Just wrap the div in a link. Like so:
Thank you @Tyler
I love this theme it is perfect for a project I’m working on. How do I apply the template “template-home” to my home page in wordpress. I have it installed on my dashboard, but see no options for changing the template to Template-home? Sorry in advance for my ignorance.
create a new page – name it “home”. on the right hand side – under “template” select “template-home” and hit publish.
Again, thank you so much for the site and the support. I have MOST of the kinks worked out, but I am still REALLY struggling with the Photo Gallery. I believe that I have the DB turned on, and I keep putting the “prettyPhoto” in the “link rel” area in the advance picture area…and I STILL cannot get the pics to my photo gallery. HELP, please!
thanks – John
@John – just to let you know – the “Photo Gallery” in the demo site is using the page template “photo gallery” – not the Wordpress “insert gallery” from your uploaded media. The photo gallery template pulls all the custom images from your previous posts and displays them as a “gallery” – you don’t have to do anything like add a rel attribute etc.
I am trying to get the lower images on the slideshow work with the smaller versions of the large images that I have placed in the folder to replace the original ones from the template, but nothing seems to work. Do you have any ideas?
you need to replace the image named “button-sprites.png” which is one big image for all the buttons and the hovers: http://www.infinityrealms.net/wp-content/themes/blue-rooster/images/button-sprites.png. you can also download the photoshop file from my downloads page.
Thank you so much, and I am ‘officially’ an idiot. This is one of the most amazing themes I have eve seen and used. It’s beautiful and full of surprises!
Hi Michael,
Wonderful theme, I love it and look forward to using it on my blog. The photo gallery is very well done but I have a small problem. It is based on custom fields “image” which means that the page will retrieve the images of all the notes on the page “blog”. I would like to use the page gallery to publish only works or photographs without making them appear more tickets blog. How can I create a new custom field to the gallery page?
PS: On your blog you can see that the latest comments, it seems that a link is missing which prevents us from reading the earlier reviews.
Hi Nicolas,
Hmmm. a new custom field is not the answer – you can do a special query for a specific category on the gallery page instead. This will pull only the posts from a designated category – still using the same “image” custom field. in your blog – you can “exclude” that specific category so they won’t show up.
I can’t exculde a category only on “Home page” and “Blog page”. Can you help me please ? I want to see it only on “Galery Page”.
Nicolas.
how to remove quick login?
Hi, Michael.. I’m having an ISSUE. Fantastic theme, btw.. But, I would like to use the gallery a certain way. I’ve got it to work.. But I would like to know how to use it to display certain images, per section?
For example, I want to have a Ladies gallery on one page and Men’s gallery on another. Each page would show all of the images, but would be separated by Ladies (tag) and by Mens (tag)?
Please help. I’m on a timeline.
you would have to create a new page template – modify the loop to filtered by specific tags.
This theme is GREAT!
Just retweeted it and downloaded it….I’m looking forward to getting into it.
Thanks for releasing this!
Kim
Morning, saw a tweet on Twitter and had a look. Great looking theme, however the download links don’t seem to work. Is it me or is there a slip up?
The download links seem to be dead..
working on this issue.
Very awesome theme. I work with wordpress since a few time. I would like to use it for one of my web site.
http://www.medecindefamille.ca
I would like to know if it’s possible to have the PSD file because i like to change the wood background for a plain color.
Thank you.
The PSD files are in my downloads page
Hello
To use the “template-home “, the Blue Rooster theme, delete the file “index.php” original. However, when the system calls the “template-home” the slide does not work correctly. An image appears below the other. What should I do?
That’s incredible and cool theme. I’ve reviewed it in my site with great pleasure.
Thanks a lot
GREAT WORK! I have just downloaded and would love to know if there is a way to replace the “recent posts” section/ 3×2 image grid, with a regular Page, or textbox widget.
is this possible. hope so! love it so far.
it is possible – you would have to edit the template file in code.
What code should i put in. I tried to replace it with different .php… but it seemd to clear out the etire section.
i’d be REALLY great if i could just turn that whole section into 3 slots for widgets? possible?
@Nguyen – the “Next Page” shortcode is: http://fearlessflyer.com/main/wp-content/uploads/2009/07/nextpage.jpg. Make sure you’re under “html”, enter the next page where you want your posts to split.
That’s so great. I tried to use the shortcode but I wrote wrong code [Next Page]. Thanks for you help!
you’re right – I forgot the those images are meant to control the slideshow. if you want a customized bar underneath the slideshow – just hide the original one (display:none) and create a custom one to replace it.
Yes you can – all you need to do is add “rel=”prettyPhoto” ” to the anchor tag of the photo. This will trigger the prettyphoto script.
Thanks for answering Michael, but this just isn’t working. If I try to add the rel in the advanced link settings of a photo when editing the page, WP just refuses and no matter how I fill this in, it remains blank. Am I doing something really stupid…?
Thanks for any help offered.
Rosie
I am having the same problem as Rosie regarding the blank page. the “rel=”prettyPhoto” ” method isn’t working for me either. Otherwise, excellent template!
@Manuel – Go to “Settings” > “Discussion” > check the box that says “Enable threaded (nested) comments“
Thanks for the tip Avdhesh!
Hi,
I have send you a email on your email address. Can you please reply that if possible.
Thanks,
Avdhesh
First, awesome theme. I have been able to get the top slider images to change. When I replace the images for the part under the slider, those images do not change.
Just to make sure I am doing it right, I am replacing the images titled “btn1, etc.” correct?
replace the image named button-sprites.png