Cakifo is a free, responsive WordPress theme built from the rock-solid Hybrid Core theme framework. With its HTML5 markup and support for all the WordPress features you love, it might be the perfect theme and a great starting point for your blog!
Other features include a homepage template, content slider, post formats, improved widgets and many more useful features. Customize it with a custom background, logo and link color or use a child theme, as the theme is very child theme friendly.
[This download is no longer available]
Some features of Cakifo
- Child theme friendly – Nearly everything can be customized in a child theme
- Uses Hybrid Core (by Justin Tadlock) as framework
- HTML5 markup
- Responsive design
- Theme Customizer – Make changes to the theme and live preview them
- Custom logo (text, image or both)
- Custom background
- Custom front page with slider, recent posts, and posts from categories
- Per-post layouts that allow you to quickly change the layout of your site
- Post setting that allows you to add a custom stylesheet for individual posts
- Breadcrumbs
- Built-in pagination
- Killer post thumbnails function that work with WordPress’ featured image functionality and provide extra features
- Multiple sidebars that you can customize however you like
- Fully internationalized, so you can run the theme in any language (Danish and French are already added!)
- RTL support
- Uses the built-in WordPress menu system
- Context-aware action and filter hooks
- Many useful shortcodes
- Small theme settings page (yep, that’s a feature)
- Custom link color
- Highly-configurable widgets that give you full control over their display
- And much, much more!
Download the theme
[This download is no longer available]
Appearance > Install Themes
This theme has been tested and works with the latest version of WordPress (3.4). It is a parent theme, so any modifications you make should be handled within a child theme (example included in download)
You can view the source and help improving it on Github. The theme is licensed under GPL.
Version 1.4 on August 4, 2012
The theme is now available in the Official Themes Directory which means it can be installed from Appearance > Install Themes
.
- Hybrid Core 1.4
- WordPress 3.4 support
- Uses Flexslider from WooThemes as the slider script
- Theme Customizer support
- Use text, an image or both as logo
- Change the link color
- A lot other changes. The full changelog in on Github–
Update May 8, 2011
Version 1.1 has now been released. Changelog:
- HTML5! The theme now uses HTML5
- Improved Post formats
- Frontpage improvements
- Use loop.php instead of post-format.php
- Print and RTL styles added
- Slides script updated to 1.1.7
Awesome work! I’m picking apart the code now. 🙂 So far, it looks pretty good and something I will definitely be recommending to others. This is a great example of what can be done with Hybrid Core.
Wow! Thanks Justin! 🙂
I’ve changed much of the code since this release. The latest version is at https://github.com/jayj/Cakifo
You’re more than welcome to write again if you have any recommendations or find any bugs.
Thanks again
pretty nice design i love it
Thanks! 🙂
Clean and feature rich, very nice! I’m spreading a word about this theme @ my web
Thanks and thanks for featuring the theme at your site 🙂
Hello and congratulations for this great theme 🙂
I’ve translated it in french today, feel free to download this translation for including here : http://www.wptrads.fr/theme/cafiko/
Best Regards,
Nice, thanks!
I’ve just uploaded them to the beta version of the theme. They’ll be included in the next update (There’s 2 untranslated strings in it because of changes to the theme)
https://github.com/jayj/Cakifo/commit/f2152a76b836dbbf5aeb56304d023f6a021c799e
Brilliant – thankyou very much, as I was looking for a good example of parent/child theme. Nice effort, and hoping to create my own real soon!
Your welcome 🙂 Thanks for the kind words
Np 🙂 I have been trying to understand the framwork/parent theme/child theme concept, and after headaches playing with many, settled on Hybrid. I have had a lot of fun already with cafiko, and it has helped my learning. Design frameworks are the way forward. Designers – ignore them at their peril!
Just wanna say “Thanks!”
Great theme.
My pleasure 🙂
Amazing theme, by far my favorite of the Hybrid Core framework!
Thanks Gregory! 😀
No problem! I also had a question, does this theme make use of TimThumb? And if so, has it been updated to be secure from that recent TimThumb exploit?
Nope! The theme does not use TimThumb. It uses native WordPress functionality for resizing images
Excellent theme! I’m using it now.
Just 1 question.
In single post/page, why is site title a h4 instead of h1?
Single
Index
Thanks! Your code is not showing but I know what you mean.
The sitle title is a h4 on singular posts because the most important heading on these pages are the post/page heading.
Joost de Valk has written about it on his blog.
But since we’re using HTML5, it would actually be totally fine to use a h1 for the site title on all pages. But I decided to lower the headings in the theme after reading a discussion on WordPress Trac about the headings in Twenty Eleven. The HTML heading structure is basically not good in a accessible point of view right now.
With all that said, I just updated to theme to use a h1 again 🙂
Thanks! Very clear. 🙂
Amazing theme for sure, thanks for it!
But i have some questions.
1. I see the demo have an author’s box bellow the post, but i can’t find it on the theme. I have my bio infos on my profile and everything, but it doesn’t show up o.o
2. Does the theme load some js for Tweet, Face or +1 shortcodes if i’m not using them? I’m used to use AddThis for those share buttons, so i wanna get ride of them.
Does they load anything even if i’m not using the shortcodes?
3. The theme add the RSS link, but i wanted to use FeedBurner’s rss link. So i added it to header… but the old one (default from WP) did not go away since it’s being called by wp_head. Is there a way i can remove it and just let my feedburner one?
I think i saw a functions.php code once, but can’t find anymore.
Thanks again!
Oh and btw, i’m using the Github one.
Thanks!
1) See my answer here
2) Nope. It only loads script if you are using the shortcodes.
If you use the same share button shortcode multiple times on a page, it loads several scripts – this will be fixed in the next version
3) This code is untested on Cakifo but I use it for this site
1. I don’t use a Child Theme… since i do too many speed related otimizations, i don’t use child themes :S
I know it’s a mistake and all but… yeah. Is there a way to activate it without using a child theme?
2. Ok, thanks 😀
3. I actualy just found that code at WP Begginer. Problem is i wanted my entire blog to just have one feed… and this one add comment feed and etc :S
Will keep looking for something.
Thanks for all the help!
If you customize the Cakifo theme directly (you shouldn’t) just find functions.php line 583 and change
to
Wow, worked like a charm, thanks again!
And i know i should not modify the main theme… but doing calls to a child theme, import and stuffs… i’m just speed adicted :S
Ok… another question.
Is there a way to move meta from the post bellow the author box?
Like
___________________
author box info
___________________
post meta info
___________________
Just add it to post.php and remove
add_action( "{$prefix}_before_sidebar_single", 'cakifo_author_box' );
from functions.php line 150Thanks for the reply 😀
Sorry for the delay.
Thanks for feature theme of cakifo, bravo for the subscriber here..!!
Thanks
Hi Jesper,
I’m using this theme for one of my blog which has a pretty lengthy content
and I think it is slowed down when scrolling because of css box-shadow (at least, in Chrome).
Maybe you should check this article:
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
Hello ArmNo,
Thanks for the feedback! I actually read that article last week, I’ll look into it and see what I can do
I suggest you make a child theme and remove/adjust the shadow to fit your needs
Hello Jesper,
yesterday WordPress 3.3 is released. Your 1.3 version of Cakifo is only compatible with WP 3.3. Can you tell me when you officially release Cakifo 1.3?
With the update to WP 3.3 the slider stopped working on my website. I really like the slider!
Thanks in advance
Hello,
The 1.3 version should be released shortly after Justin Tadlock release Hybrid Core 1.3 (in beta right now)
I see what the problem is on your site. The slider script is being inserted before jQuery. Do you use a plugin or something to use the Google hosted jQuery?
Hello,
yes I use the Google hosted jQuery instead of the WordPress jQuery. I do this because I have a slow upload connection.
I’ve temporarily disabled the slider on my site and will try again when you release the 1.3 version.
Thanks for your answer 🙂
What code do you use to use the Google hosted version?
I use the following code. It contains more functions besides using the Google hosted jQuery.
function removeHeadLinks() {
remove_action(‘wp_head’, ‘rsd_link’);
remove_action(‘wp_head’, ‘wlwmanifest_link’);
wp_deregister_script( ‘l10n’ );
remove_action(‘wp_head’, ‘wp_generator’);
}
add_action(‘init’, ‘removeHeadLinks’);
function _remove_script_version( $src ){
$parts = explode( ‘?’, $src );
return $parts[0];
}
add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );
if ( !is_admin() ){
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, (“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”), false, ‘1.3.2’);
wp_enqueue_script(‘jquery’);
}
You should use the
wp_enqueue_scripts
action to call thewp_enqueue_scripts
function.Try
Remember to should add this to a Cakifo child theme or a plugin. Not the Cakifo functions.php
Hi, This theme looks great. Would love to use it if I can figure it out but I have a stupid question. Why doesn’t the installed theme layout look like the demo version layout of the theme? I can’t find any options in the settings or instruction for applying the columnized grid layout shown on the demo. Do I have to manually enter hooks or shortcodes? Also not seeing my images in slider. Guess I’m missing some documentation? Thanks.
Hello,
The documentation for the theme isn’t the best, I know.
There’s a Wiki on the Github page
With the columnized grid I guess you mean the front page? If so you should check out “Setting up the Front page” in the Wiki. That page talks a bit about the slider as well.
The slider should show images if you add a ‘Featured Image’ to the posts.
– Jesper
Thank you so much. The wiki’s very helpful. I also noticed you’ve embedded detailed explanation in the code as well. I appreciate your quick response and the amazing effort you’ve put into this project. Thanks again.
My pleasure 🙂
Hello Jay,
Can i sugest that, on version 1.3, you add Google+ Profile with rel author, and Facebook profile to the author box?
Also, related posts would be awesome 🙂
Gonna use it on a new version of a project i’m making. I will try to add those manualy once i get my HD back, but it would be cool to have it by default 🙂
Hello,
Great ideas!
I’ll look into it tomorrow and see if it can make it into version 1.3
The related post properly can because I have the code from another of my themes.
If I don’t add the Google+ and Facebook fields, I’ll make sure to add a hook to you can add it in a child theme.
I created two issues on the Github page
https://github.com/jayj/Cakifo/issues/3
https://github.com/jayj/Cakifo/issues/4
If you can’t make it to version 1.3, i will try to make a tutorial somewhere to users to add it 🙂
Thanks for acepting my sugestions! But i have one question:
I will start the dev by tomorrow probably. Is the GitHub version stable enough for me to make a project based on it? Is it fully responsible already?
I’ve added a Related Posts widget, See this commit.
I have also added some hooks to the author box
They can be used like this in a child theme:
Hope that helps you and thanks a lot for the suggestions and feedback 🙂
The Github version is stable.
I’m only waiting on Hybrid Core 1.3 and that in beta2 right now
Ok, great 🙂
Gonna start the work today then.
Thanks for the great theme Jay!
I’m annoying, i know. But i have another question.
I see that, when i resize the browser, the the blog is responsive and the slider goes away. That is great.
What i wanna know is: is it just a “display:none;” or if the user use a mobile phone, the slider really won’t load?
That would be the best way, i guess, since it would load faster for mobile phone users.
And if so, do you have a function for that? Cause that would open a wide door of posibilities. For example, i could add a floating sharing bar if the user is on a desktop, and inline sharing buttons if the user is on a mobile phone.
It’s just
display: none
You can find some mobile detection functions if you search for them. I don’t have one.
I wonder if the “if_iphone” conditional tag still works on WP. It was implemented in version 2.9 iirc, and worked with all mobiles.
Gonna give it a try and if everything works, i could share the code? 🙂
It could be great if you would share the code 🙂
Even if it doesn’t gets included it might help others.
@Jesper
Thanks a lot man! Gonna start working on those stuffs asap 🙂
Here is what i did this afternoon: http://www.julianfernandes.com.br/ubuntubrsc/
The idea is to erase the search box and put our logo there. The top menu, in the end, will look like ubuntu.com’s one 🙂
But i have been testing it on a LG Optimus One, and it seems the text is really small. I may use the same design idea, but use bootstrap, Twitter’s framework, to work with it.
Let’s see what i can do 🙂
And about the code, yes, i will share it as soon as i work with it. Should i write a tutorial for you to post here, or just comment with the code?
Also, the top menu isn’t fully responsible yet, right? I see that when i resize the browser, some menus just go away.
Wow! That looks fantastic!!
It looks like you’re changing things directly in the theme instead of a child theme? That’s a bad idea. You should create a child theme instead so you won’t lose your changes next time the theme is updated
“Also, the top menu isn’t fully responsible yet, right”
They don’t actually go away. In your case they have white text and no background
Try
You are more than welcome to write a blog post for this blog if you want. But that’s up to you.
“Wow! That looks fantastic!!”
Thanks man 🙂
Since the website is for our Ubuntu Linux LoCo Team blog, i tryed to use Ubuntu’s font and god, it just suited the theme perfecly.
“It looks like you’re changing things directly in the theme instead of a child theme? That’s a bad idea. You should create a child theme instead so you won’t lose your changes next time the theme is updated”
I’m not a big fan of child themes. They are too slow in terms of speed. Importing a theme’s CSS, not being able to optimize all the theme… i prefer to just mess with the actual theme, and then when there are updates, just find the updates on GitHub and implement myself. That also opens a door to ignore certain updates that i don’t need. Like, let’s say you add a widget before the top menu for ADs. I would not need it, so if there was on my website, it would just slow things a little.
Also, since i optimize every single part of the code, it makes impossible to use child themes. I get a hell lot of speed out of it, and a great PageSpeed/YSlow rank, but my coding is slower than normal… it’s a price i like to pay =P
“They don’t actually go away. In your case they have white text and no background”
Will change it with the code you provided 🙂
But did you looked at booststrap’s top menu responsivness? If you could implement a menu like that on Cakifo, it would be better in my opinion.
You can see this WordPress Bootstrap theme that 320 press made: http://320press.com/wpbs/
Resize the browser and you will see what i’m talking about.
I actualy got kinda tempted to mix twitter’s framework + your design, but you should look at they CSS… god damm it’s a mess xD
When i finish customizing Cakifo, i will give a try to that, since there’s 2~3 months left for me to release this version of the website.
“You are more than welcome to write a blog post for this blog if you want. But that’s up to you.”
Will do 🙂
I will also show how to add a floating bar for sharing buttons. The trick is, that with the is_iphone conditional tag, we can make that, when the user comes with a mobile agent, the floating bar goes away and inline social sharing buttons comes in. That way, it won’t destroy the visual, loads faster on mobile and we still get social love 😀
On a side note, i’m getting 2 annoying bugs.
Try acessing this post for example: http://www.julianfernandes.com.br/ubuntubrsc/mari0-game-indie-que-mixa-super-mario-bros-portal-lancado.html
Then scroll down to the next/prev post pagination. When the name is big, they get one above the other. That with 1366 x 768. Did not tryed with other resolution :S
Also, with Google Chrome, the submenus go up by 1px, and i can’t find the CSS to fix that. On Firefox it works like a charm, but on Chrome, it does that.
Hover the menu “Categorias” with Google Chrome to see it.
Hey,
This is a beautiful theme and I’m implementing for a local client. My problem is the site is not acting responsive when I check on my iPhone. Am I doing something wrong – so far no code wrangling…just plug ‘n play outside of the footer where I included my link.
Developer site at: http://getindaflo.com/yogainspirations/
Thanks for any help or advice!
Jason
Indaflo Marketing Solutions
Kapaa, HI
Hello Jason,
What is the screen resolution on your iPhone?
The theme becomes responsive when the browser width lower than 980 pixel and even more under 768 pixel.
On 980 pixel it becomes one column on all pages except the homepage template.
On 768 pixel the slider gets removed and the top-navigation placed behind a button. The homepage templates turns into 1/2 columns as well.
I admit the responsive may not be the best. Do you have any places you want to be improved?
If you want, you can create a child theme and put this code in the child theme
functions.php
thanks jesper…I’ll give it a try and post back the results. as for iphone resolution…its an older 3GS model – not sure about resolution, but definitely within the responsive boundaries you programmed.
I do have a couple of large images the theme is shrinking down…so maybe that’s the issue? I’ll remove them and re-test.
jason
No, the images should not be the issue.
Try the code I posted. You can read a bit about viewport here if you want https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
I will implement it into version 1.5 (maybe 1.4.4 if needed)
Hello,
I’m not an expert in html, but I will improve my site. I want to use your theme, simple, clean and suitable even for just a website.
I appreciate that you can customize the background, logo and links.
I wish I could even change the background color pages and posts, possibly with a dark color to bring out my photos.
How can I do? Thank you.
Hello Dario,
If I understand you correctly, you want a different background color on posts and pages than on the other pages?
The easiest way would to use a plugin like WP-Backgrounds Lite
Hello,
Thanks for the quick response.
It ‘s already possible to choose the background color, the header text color and the link color.
I would also change the color of the pages, posts, categories, etc. Now they are all with a white background, but I would like them to another color even the same, but not white.
I hope I explained: I translate with Google.
Ahh, I think I get you now.
You should first create a child theme. Follow this guide: https://github.com/jayj/Cakifo/wiki/Child-themes
When in your child themes style.css, add this:
Thanks Jesper!
I disturb you again. What should I write to change the background color of:
– Footer;
– Motto in the Header Text ;
– “You are here”.
Thank you again.
Dario.
Footer is
#footer
Motto:
If you use a text logo:
Appereance > Header > Header Text
if not
#site-description
Breadcrumb:
.breadcrumb-trail
Jesper,
Thanks again for the earlier help on the viewscreen (mobile response) issue. I’m still working it out.
I noticed another issue with the theme in fullscreen mode. When I add a “Featured” image, it is mysteriously displaying a “thumbnail” version in top right of the screen (behind my promotional “quote” area).
Any ideas to remove this, while not losing the Featured Image display on the homepage??
Thanks!
Here’s a link to review (but its occuring on all instances):
http://www.getindaflo.com/yogainspirations/into-the-bliss-cd/
~Jason
I think the best way would be to delete the Featured Image and add it to the post content instead. That would give you more control over the placement.
Or you can add some CSS to the blockquote.
I know inline styles are not the best but in this case it properly the easiest. If you know it will happen again, you should add a child theme and add it to that style.css
Hey Jesper,
Thanks again for your prompt replies on theme questions!
I had already tried the suggestion above, but had the same issue here:
http://yogainspirations.com/hawaii-kundalini-yoga-dvd/
Basically, it’s not about the picture “inside” the blockquote…the question is about the errant picture off to the right that appears to be a “thumbnail” of the “featured image” just hanging there (I believe incorrectly, yes?)
On the above link, you’ll see the “feature image” placed in the post – and – the errant “thumbnail” off to the right. In the other example I sent before, this errant “thumbnail” is hiding behind the blockquote.
Any ideas on why its there, or how to remove it without causing related issues?
Thanks again,
Jason
PS ~ I’ve also moved the site to the actual client domain from my server.
Hello,
I see the problem. But currently I do not think it is a theme issue.
The script searches for a post image in the following order.
So you see the thumbnail to the right either because:
– You have a “Featured Image” chosen
– Or because you use a custom field called
Thumbnail
orthumbnail
.Hello Jesper,
First of all, I would like to compliment you on the very nice looking Cakifo theme. Very nice work!
However, today I found an issue with the pagination of the theme. When browsing the archives for a certain year and you want to jump to another page using the page numbers, the generated URL is wrong.
For example, have a look at http://www.tomvanderheijden.com/2012/. When you scroll down to the bottom of the page and you click on the number 3 to go to the third page, you are being directed to http://www.tomvanderheijden.com/3013/page/3/, if you want to jump to page 5 you are being directed to http://www.tomvanderheijden.com/5015/page/5/. So, not only the page number is increasing, but also the year is changing, which obviously shouldn’t be happening.
I would be very greatful if this could be fixed.
Thank you,
Tom
Hello Jesper,
Please ignore my previous message. I noticed this was fixed in version 0.1.6 of the loop-pagination.php in Hybrid Core.
Tom
Love my theme – thanks!
Thank you! 🙂
I hope you’ll continue to love it. The next version is going to be pretty awesome
LOVE this theme very much, it made me feel comfortable. Thanks you very much.
Thank you very much for the kind words 🙂
This is a really nice theme. =)
I love it lots.
I’ve followed your instructions at https://github.com/jayj/Cakifo/wiki/Setting-up-the-Front-page and I’ve managed to get the recent posts out as per your demo.
But how do you also display your Cat A, Cat B, Cat C, Games etc under your front page?
Hello Regina,
Thank you.
You can choose which categories to display on the
Appearance > Cakifo settings
screen.It’s under the setting “Headline Categories”
Hope that helps you. If not, feel free to write again
– Jesper
I chose this theme for a client specifically because of the functionality and aesthetics. Nice job!
Upon nearly completing the project I have discovered the client, while using IE8 to view his new site, is getting the “Show Menu” option instead of just seeing the menu. His wife is having the same issue where she works… so they are annoyed by it.
I understand this is a very intentional part of the theme, but is there a simple way to keep it from happening?
Thank you, and I’m more than happy to make a donation some how!.. assuming you can help me.
Hello Justin,
Currently it’s not easy to do that as IE8 and older don’t support media queries.
You can create a child theme and take a look at the following code:
https://github.com/jayj/Cakifo/blob/master/style.css#L997-L1098
It’s currently wrapped in a media query. You should try to add it to the child theme.css (without the media query) and see what happens. It might work correctly but it should help you.
In older versions of IE, the
html
tag has a class called.oldie
so you might want to add that in front of the selectors so it doesn’t affect other browsers.Hope it helps you. If not, feel free to write again. If you have any other questions, I recommend you sign up for support on Theme Hybrid.
– Jesper
About the donation, I don’t really know a lot about how to do that. I have Paypal if it helps. Please contact me if you want to know more.
Jesper,
I wanted to thank you for the help. That actually did help me to understand what’s happening and how the them operates.
Unfortunately the css in my child theme (per your instructions) caused the menu to not be displayed on other browsers. I felt like it was progress, but after all my attempts… still no luck.
To make things worse I’m displaying the header sidebar and it also won’t show in IE8. Driving me crazy and I’m losing time/money.
Would you be interested in tackling the menu and header sidebar display as a paid job? I’m hoping it would only take you an hour or two. I can make a down payment via a PayPal request to get you started. Please email me: *email removed*
Can give you FTP access, and everything is backed up already.
Thanks.
Justin
Hello Justin,
I sent you an email and removed your email from your comment.
– Jesper
Awesome blog! Is your theme custom made or did you download it from somewhere?
A design like yours with a few simple tweeks would really
make my blog stand out. Please let me know where you got your theme.
Many thanks
Hello,
I’m using a custom theme but you can find the CSS for it here: http://jayj.dk/wp-content/themes/oneandzero/style.dev.css
– Jesper
Thanks and thanks for featuring the theme at your site!!!
You have my sister helped with it because that I have long.
Very interesting theme. Clean and nice functions. keep up the awesome job 🙂
Marc
Thanks, Marc!
Glad you like it 🙂
I really love this WordPress theme, it´s great! Used it a few times already.
Hello Gerrit,
Thank you. Glad you like it 🙂
– Jesper