Cakifo, a Free WordPress theme

Cakifo, a Free WordPress theme
Please note: This is an old post. The information is probably not accurate and up-to-date anymore.

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]

…or search for ‘Cakifo’ in 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.

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

See a detailed changelog at Github

162 responses

  1. 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.

  2. 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!

      1. 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!

      1. 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?

  3. 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

    1. 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 🙂

  4. 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.

    1. 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

      add_filter( 'feed_link', 'my_feed_link', 1, 2 );
      add_filter( 'category_feed_link', 'my_other_feed_link' );
      add_filter( 'author_feed_link', 'my_other_feed_link' );
      add_filter( 'tag_feed_link', 'my_other_feed_link' );
      add_filter( 'search_feed_link', 'my_other_feed_link' );
      
      function my_feed_link( $output, $feed ) {
      	$url = 'http://feeds.feedburner.com/xxx';
      
      	if ( $url ) {
      		$outputarray = array( 'rss' => $url, 'rss2' => $url, 'atom' => $url, 'rdf' => $url, 'comments_rss2' => '' );
      		$outputarray[$feed] = $url;
      		$output = $outputarray[$feed];
      	}
      
      	return $output;
      }
      
      function my_other_feed_link( $link ) {
      	$link = 'http://feeds.feedburner.com/xxx';
      	return $link;
      }
      
      1. 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!

  5. 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

  6. Ok… another question.
    Is there a way to move meta from the post bellow the author box?

    Like

    ___________________
    author box info
    ___________________
    post meta info
    ___________________

    1. Just add it to post.php and remove add_action( "{$prefix}_before_sidebar_single", 'cakifo_author_box' ); from functions.php line 150

    1. 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

  7. 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

    1. 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?

      1. 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 🙂

  8. 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’);
    }

    1. You should use the wp_enqueue_scripts action to call the wp_enqueue_scripts function.

      Try

      function my_scripts_method() {
          wp_deregister_script( 'jquery' );
          wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
          wp_enqueue_script( 'jquery' );
      }    
       
      add_action('wp_enqueue_scripts', 'my_scripts_method');
      

      Remember to should add this to a Cakifo child theme or a plugin. Not the Cakifo functions.php

  9. 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.

    1. 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

      1. 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.

  10. 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 🙂

      1. 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?

      2. 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:

        add_action( 'after_setup_theme', 'cakifo_child_theme_setup', 11 );
        
        function cakifo_child_theme_setup() {
        
          /* Get action/filter hook prefix */
           $prefix = hybrid_get_prefix();
        
           add_action( "{$prefix}_close_author_box", 'cakifo_child_google_facebook_links' );
        }
        
        function cakifo_child_google_facebook_links() {
          echo 'My links';
        }
        
        

        Hope that helps you and thanks a lot for the suggestions and feedback 🙂

  11. 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.

    1. It’s just display: none

      You can find some mobile detection functions if you search for them. I don’t have one.

      1. 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? 🙂

      2. It could be great if you would share the code 🙂

        Even if it doesn’t gets included it might help others.

  12. @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?

    1. 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

      #topbar .menu-item {
        background: #dd4814;
      }
      

      “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?”

      You are more than welcome to write a blog post for this blog if you want. But that’s up to you.

      1. “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 😀

  13. 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.

    1. 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?

    2. If you want, you can create a child theme and put this code in the child theme functions.php

      function cakifo_child_theme_head() {
         echo '<meta name="viewport" content="width=device-width">';
      }
      
      add_action( 'wp_head', 'cakifo_child_theme_head');
      
      1. 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

  14. 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.

      1. 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.

      2. 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.

      3. Footer is #footer

        Motto:
        If you use a text logo: Appereance > Header > Header Text
        if not #site-description

        Breadcrumb:
        .breadcrumb-trail

  15. 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

    1. 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.

      <blockquote style="width: 360px; margin-left: 0;">
      [...]
      </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

      1. 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.

      2. 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.

        1. Looks for an image by custom field.
        2. If no image is added by custom field, check for a WordPress featured image.

        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 or thumbnail.

  16. 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

    1. 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

    1. 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

  17. 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.

    1. 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

  18. 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

  19. 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

  20. Thanks and thanks for featuring the theme at your site!!!
    You have my sister helped with it because that I have long.

Comments are closed.