Japibas – Free Premium WordPress Theme

Japibas - Free Premium WordPress Theme
Please note: This is an old post. The information is probably not accurate and up-to-date anymore.

Japibas is nice free clean WordPress theme, that you can use as magazine blog or for your personal blog. Version 2.0 is a completely rewritten version of the 2009 version. The theme now uses HTML5, CSS3 and is much much better!

Update December 22, 2011: The theme has been updated to version 2.0 and this post has been updated

Features

  • Design has been updated to use CSS3 instead of images and it’s responsive
  • The markup is now HTML5
  • Multiple color schemes (Green, Blue & Red already included – Easy to add more)
  • Small Theme Options page (yep, that’s a feature)
  • Child theme friendly
  • Content Slider
  • Killer post thumbnails function that work with WordPress’ featured image functionality and provide extra features
  • 6 Widget-ready areas
  • Built-in pagination
  • Small set of useful shortcodes
  • Uses the built-in WordPress menu system
  • Compatible with all major browsers (not IE6)
  • Fully internationalized, so you can run the theme in any language
  • Well documented
  • And much, much more!
Download Demo Downloaded 15,333 times
  • Requires at least WordPress 3.3
  • Tested up to 3.3

You can view the source and help improving it on Github. The theme is licensed under GPL.

Translations

You should download both files (or the zip file) and put them in wp-content/themes/japibas/languages/

105 responses

  2. Pingback: S氓 er 2009 n忙sten ovre | Jayj.dk
  3. Pingback: Code — NetHedz
  4. Pingback: Zine Plugins — NetHedz

    1. It’s free, as said several times in the post 馃槈

      Sorry for the long answer time, but you got caught in my spam filter

  6. Hi, I have one question on Japibas: it is a very nice theme, and I’m trying to set it up for my blog. Actually I wrote a post to be shown in the slider, and it works well, with the clickable header.
    But if I make the same associating it to a 900×220 image, the image itself is not clickable thus I can’t get to the article. How can I make it clickable? thanks a lot!

  7. Pingback: Japibas WordPress Theme | WP Tuts

  10. Hello,
    My question:
    How to set categories defined in WordPress (last version) in the menu bar of Japibas theme?
    Only pages appear in the menu bar…
    On Setting, I did not exlude any pages from Categories but categories do not appear in the menu.
    Thank you

    1. Hello,

      As said in the post, the theme hasn鈥檛 been updated since 2009. So it’s currently not using the WordPress 3.0 menu editor.

      I鈥檓 working on an update for the theme right now but I don’t know when it’s done. Try to google some tutorials on the new menu and edit the header.php and functions.php yourself.

  13. Pingback: Japibas Version 2.0 | Jayj.dk

  14. Nice theme. It would be great to have a portfolio page inside as well.
    Regards hjemmesider

    1. 1. I don’t know. I haven’t tested the theme with bbPress. You could try to follow this guide

      2. Is your browser width lower than 1050px? The scrollbar shows then the width is lower than 1050px. It properly should be lower

      You can create a child theme and add this in the child theme style.css:

      @media all and (max-width: 1050px) { html, body { overflow-x: hidden; } }

      It will be changed in the dev version of Japibas soon.

      1. I’m using mozilla firefox version 11. is its width less than 1050px? And i can’t create a child theme. Can i edit any code in the parent theme itself. if so which one please specify. Thank you.

      2. Problem solved buddy. I’ve edited that code in the parent theme style.css itself.
        BTW its a very good theme. Thanks for such a nice and fast response. Awaiting for more free good themes.

  16. Hey in the navigation, the words OLDER POSTS and NEWER POSTS must be interchanged.. How do I do that? My latest post is not being showed in the home page?

      1. Oh regarding the post.. in the theme settings I’ve listed not to display that category posts in the top. Post Problem solved.
        The pagination problem also has solved! Thanks for instant reply!

  22. I don’t really understand how to do something like the first slider image.
    An image with the text next to it :/

  24. Hi,
    Thanks a lot. How can I change the layout setting for one particular page ? All my website is on the Default Layout, and I don’t see any Page Template selector.
    Thanks !

    1. That is currently not possible directly from the theme. You can do it with a plugin or a child theme.

      I’ve created a Gist with a child theme that uses the Theme Layouts extension by Justin Tadlock. There’s a download link at the top.

      I haven’t tested it so there might be some errors in it but it should create a solid starting point.

      Hope it helps you 馃檪

    1. Hello Moji

      You’re right. That’s very weird. It’s shows when you go into a post and a page. I’m using the native wp_title() function.

      Your best option of one of these two:
      1. Use a SEO plugin like WordPress SEO by Yoast (recommended as it’s pretty awesome)

      2. Create a child theme and put this code in the functions.php:

      function my_japibas_child_wp_title( $title, $sep ) {
	global $paged, $page;

	if ( is_feed() )
		return $title;

	// Add the site name.
	$title .= get_bloginfo( 'name' );

	// Add the site description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		$title = "$title $sep $site_description";

	// Add a page number if necessary.
	if ( $paged >= 2 || $page >= 2 )
		$title = "$title $sep " . sprintf( __( 'Page %s', 'japibas' ), max( $paged, $page ) );

	return $title;
}

add_filter( 'wp_title', 'my_japibas_child_wp_title', 10, 2 );

      Thanks for the comment. I’ll make sure to fix it in a future version.

  29. Hi, i try japibas theme with Wp 3.5.1 but i’ve got this message :
    Warning: Invalid argument supplied for foreach() in /mnt/171/sda/0/c/c.chabanne.psy/wp-content/themes/japibas/inc/theme-options.php on line 111
    Could you please help me !
    Thanks !
    hubert

  31. Pingback: Best Sites to Find Free WordPress Themes Download | allfreeitemfromsitespopular

  32. Bonjour,

    J’adore ce theme mais je n’ai pas la pagination “page suivante 1 2 3”
    comme dans la demo.

    1. Hello,

      If you mean the pagination in posts you can type this:

      <!--nextpage-->

      into the Text editor where you would like your page breaks to appear.

  34. Bonjour Jasper tout d’abord merci pour le th猫me tr猫s bien et parfaitement ce que je recherche pour mon blog ! J’aurai quelques petite question s’il vous plait. Tout d’abord je cherche comment avoir le menu d茅roulant comme sur la d茅mo, car lorsque je cr茅e des pages elle s’affiche comme sa : http://hpics.li/ce52210 et moi je voudrais quelle s’affiche comme vous avec le menu ..

    De plus j’aimerai savoir s’il est d茅sactiver un champ obligatoire, je veux dire retir茅 l’obligation de mettre un email ? Voila merci 馃檪

    Hello Jasper first of all thank you for the theme very well and perfectly what I look for for my blog! I shall have some small question please. First of all I how try to have the drop-down menu as on the demo, because when I create pages she(it) displays as his(her,its): http://hpics.li/ce52210 and I would want what displays as you with the menu..

    Furthermore I shall like knowing if he(it) is to deactivate a compulsory field, I mean removed the obligation(bond) to put an email? Here is thank you:)

    1. Hello Bil,

      You should set up your menu in Appearance > Menus and add it to the ‘primary’ theme location.

      About the optional email. In Options > Discussion there’s a checkbox with the label “Comment author must fill out name and e-mail”. Try to uncheck that

      Hope that helps you. If not, feel free to write again

      – Jesper

    1. Hello,

      I’ve not tested it with BBPress so could you please tell me what is not working? If it’s the styling that needs to be adjusted you could create a child theme: https://github.com/jayj/Japibas/wiki/Child-themes

      I’m hoping the next version of the theme support BBPress however that might take long time as this theme is not my top priority right now.

      But if you tell what’s wrong I’ll take a look at it.

      – Jesper

  37. Hi thank you for your excellent theme !

    I have a question, how to make the slider auto-rotate ?

    Thank you,
    Sofiane

    1. Hello Sofiane,

      Thank you.

      You can edit js/script.js. On line 7-8 and 16-22 there’s some commented code, you can remove those comments. In line 10 you should set auto to true.

      Hope you understand what I’m saying. If not, feel free to write again.

      – Jesper

      1. Hi Jesper, yeah i perfectly understand 馃槈

        Thank you for your quick reply !

        I’ve changed your slider for a new one that i prefer : “Easing Slider”, i hope it don’t bother you.

        Thanks a lot for theme from Paris !

    2. You can also, if you need a pause between slides, ad this parameter:
      pause: 6000,

      for a 6 seconds pause

  38. Very usefull the SudoSlider link !

    Just one think I don’t understand. All my posts are displayed in full text in the home page or archive page.
    How to limit the text length and display the “Continue reading” link ?
    I found nothing in the admin.

    Big Up from Paris !

  39. Hello Jasper,

    My current theme is “BlogoLife”.
    I downloaded “Japibas” but the installation fails.

    The error message is as follows;
    The archive could not be installed. It lacks the style.css to this theme.

    Maybe you can help me? Thank you very much.

  40. Hello Jesper,

    I’m using your theme since two years now and i’m really thankful of all it deserve.

    Have you plan to do a new update of your theme ? It will be very great !

    Regards

    1. Hello Sofiane,

      Thank you.

      I’ve planning to update the theme but I’m very busy with other projects at the moment. There might be an update before the end of the year but I can’t promise anything.

      – Jesper

  41. Dear Jesper,

    This is an amazing theme! I have modified it a little bit and it suits great with the topic of my blog!
    Just one question, because I am not very experienced with programming. I would like the site description to come in front, and not in the back of the branding. Is there any way to do that?

    Many thanks!

    1. Hello Dimitra,

      Sorry for the late reply. You got caught in my moderation queue.

      I think the best way is to increase the height of #branding from 79px to something like 120px.
      And change the line-height on #site-description from 82px to normal.

      Lastly, I really recommend using a child theme (https://github.com/jayj/Japibas/wiki/Child-themes) instead of making changes directly in the theme files.

      Hope that helps you. If not, feel free to write again.

  42. Hello,

    My hosting company had me move from Php 5.2 to 5.5 and now in the admin interface I get the message (wordpress 3.4.1) :
    Warning: Illegal string offset ‘new_version’ in ……./htdocs/wordpress/wp-content/themes/japibas/inc/upgrade.php on line 74

    What’s the best solution to this ?

    Thank you very much for your great theme.

    1. Hello Christian,

      First of all, you should really update WordPress to 4.0

      The easiest solution to this to open functions.php in the theme files and find this line:

      require_once($template_directory . '/inc/upgrade.php' );

      And delete it.

      This will disable the update notification for the theme but it doesn’t work anyway as I accidentally deleted a file on my server…

      Hope that helps you.

  43. Hi Jesper,

    Thanks for your theme, I like it even if it was launched in 2009 !

    I would like that the date of the posts do not appear in the home page and on the single page of each post.

    I don’t now where to look in the code.

    Could you help me to reach my goal ?

      1. Thank you Jesper, it works perfectly :).

        I have another request, I would like to remove completely the footer where it appears “Powered By: WordPress”.

        I looked on different tutorials which said to look in the functions.php file but I didn’t find exactly where to look at.

        Could you help me please.

      1. I forgot to tell you that I tried this in theme options but it didn’t work.

        I tried as well to remove the footer.php from the wp-content without any effect.

        WordPress still display his footer by default.

  44. Thanks for this awesome theme !

    I’ve got a question on responsive behaviour of the theme :
    I can’t figure out how to have a different behavior on Ipad (3) & Iphone (5).
    I would like to have the sidebar on ipad, but not on iphone…

    With the official “style.css” it seems to work, if you check with the google chrome tool… but not on “real” Ipad (3) & Iphone (5).

    I tried to change the number of px in “max-width:” at the end of the css sheet, but the behaviour on ipad & iphone is always the same.

    Have you an idea ?

    1. Hello Mat,

      The layout should be two columns on an iPad and one column on iPhone.

      However, there’s a bug in the current version of the theme on tablets and mobile devices.

      You can use Jetpack’s Custom CSS module or a child theme to add this CSS that should fix the problem:

      @media (max-width: 1050px)
html, body {
overflow-x: hidden;
}

      Hope that helps you.

      – Jesper

      1. Thanks for your answer… but I already found this bug.
        The display is quite better, but still 1 column on both ipad & iphone

        I changed it directly on the first lines of the style.css sheet :
        …
        @media all and (max-width: 1050px) { html, body { overflow-x: hidden; } }

        If you have another idea ?

  45. I add it on the style.css (the compressed one)

    I’m on google Chrome :
    From the home page,
    right clic / inspect element / sources / (style.css)
    not very far away, you will find :”鈥media all and (max-width: 1050px) { html, body { overflow-x: hidden; } }”

    (it’s the compressed css, but it’s the first words)
    I also change the end of the style.css, just to cancel the display of .entry-date, .entry-meta, .more-link and .entry-comments-number.

    1. Yes… that’s exactly my problem : it works on the simulator, but not on my devices…
      thanks anyway for trying 馃檪
      I’have some ideas to check, I’ll post my solution when I would have found !

      I have another tricky question :
      I like the orange theme. I installed the child-theme, but only the link-color is in orange… The home color under the logo is still green.

      (if you want to check, beware of the cache, I just retried, without success)

      1. 1) Try adding this to the child theme functions.php:

        add_action( 'wp_head', 'mat_japibas_child_viewport');

function mat_japibas_child_viewport() {
  echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
}

        Does that work?

        2) You need to add some CSS to orange.css for it to change more than the link color. You can use the code from here: https://github.com/jayj/Japibas/blob/master/colors/red.css and change the colors to orange.

  47. Thank you so much !!

    Iphone & Ipad : fixed
    On iphone, one time, the overflow x was visible… but it appears juste once. On Ipad, the display is perfect.

    Orange CSS
    Please find the (completed) orange.css below
    Now running on http://entrepreneurchretien.com/

    /*
    * Name: Orange
    * Slug: orange
    * Description: Orange color scheme for Japibas
    * Link color: #ff6d00
    */

    a,
    #site-title a:focus,
    #site-title a:hover,
    #site-title a:active,
    .entry-title a:hover,
    .entry-title a:focus,
    .entry-title a:active {
    color: #ff6d00;
    }

    /* Header */
    #branding {
    /* Dark, grey topbar */
    background: #1f1e1c;
    background: -webkit-gradient(linear, left top, left bottom, from(#313131), to(#1f1e1c));
    background: -webkit-linear-gradient(top, #313131, #1f1e1c);
    background: -moz-linear-gradient(top, #313131, #1f1e1c);
    background: -o-linear-gradient(top, #313131, #1f1e1c);
    background: -ms-linear-gradient(top, #313131, #1f1e1c);
    background: linear-gradient(top, #313131, #1f1e1c);
    border-bottom: 1px solid #171512;
    }

    .loop-meta {
    /* The orange bar in the top */
    background: #be4002; /* Old browsers */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #be4002), color-stop(25%, #fd5e0f), color-stop(100%, #be4002));
    background: -webkit-linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
    background: -moz-linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
    background: -o-linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
    background: -ms-linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
    background: linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
    border-top: 1px solid #fd6f28;
    border-bottom: 1px solid #a53802;
    }

    #branding:before,
    #branding:after {
    background: inherit;
    border: inherit;
    }

    .loop-meta:before,
    .loop-meta:after {
    background: #be4002;
    border: inherit;
    -webkit-box-shadow: 1px 1px 0 rgba(255,255,255, 0.4);
    box-shadow: 1px 1px 0 rgba(255,255,255, 0.4);
    }

    .loop-description,
    .page-title {
    text-shadow: 1px 1px 0 #be4002;
    }

    /* Navigation */
    #access .menu-item > a {
    background: #3c3c3c;
    border: 1px solid #4e4e4e;
    border-bottom: none;
    color: #fff;
    display: block;
    font-size: 14px;
    text-shadow: 1px 1px 0 #2b2b2b;
    }

    #access .menu-item > a:hover,
    #access .current-menu-item > a {
    background: #fd5e0f;
    border: 1px solid #fd6f28;
    border-bottom: none;
    text-shadow: 1px 1px 0 #be4002;
    }

    #access .current-menu-item > a {
    background: #fd5e0f;
    }

    .ie #access .menu-item > a:hover,
    .ie #access .current-menu-item > a {
    background: #be4002;
    }

    /* Entry titles */
    .entry-title a:hover,
    .entry-title a:focus,
    .entry-title a:active {
    background: none;
    text-shadow: none;
    }

    /* Buttons */
    .more-link,
    input[type=”submit”] {
    background: #474747; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd5e0f), color-stop(100%, #be4002));
    background: -webkit-linear-gradient(top, #fd5e0f 0%, #be4002 100%);
    background: -moz-linear-gradient(top, #fd5e0f 0%, #be4002 100%);
    background: -o-linear-gradient(top, #fd5e0f 0%, #be4002 100%);
    background: -ms-linear-gradient(top, #fd5e0f 0%, #be4002 100%);
    background: linear-gradient(top, #fd5e0f 0%, #be4002 100%);
    border: 1px solid #be4002;
    color: #fff;
    text-shadow: 1px 1px 0 #be4002;
    -webkit-box-shadow: inset 0 1px 1px #fd8042;
    box-shadow: inset 0 1px 1px #fd8042;
    }

    .more-link:hover,
    input[type=”submit”]:hover {
    background: #fd5e0f; /* Old browsers */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #474747), color-stop(100%, #272727));
    background: -webkit-linear-gradient(top, #474747 0%, #272727 100%);
    background: -moz-linear-gradient(top, #474747 0%, #272727 100%);
    background: -o-linear-gradient(top, #474747 0%, #272727 100%);
    background: -ms-linear-gradient(top, #474747 0%, #272727 100%);
    background: linear-gradient(top, #474747 0%, #272727 100%);
    border: 1px solid #171512;
    text-shadow: 1px 1px 0 #111;
    -webkit-box-shadow: inset 0 1px 1px #989898;
    box-shadow: inset 0 1px 1px #989898;
    }

    /* Blockquote */
    blockquote {
    border-left-color: #fd5e0f;
    }

    /* Comment bubble hover state */
    .entry-comments-number:hover {
    background: #fd5e0f;
    border: 1px solid #be4002;
    color: #fff;
    text-shadow: 1px 1px 0 #be4002;
    }

    .entry-comments-number:hover:before {
    border-color: #be4002 transparent transparent #be4002;
    }

    .entry-comments-number:hover:after {
    border-color: #fd5e0f transparent transparent #fd5e0f;
    }

    /* Pagination */
    .pagination a:hover {
    background: #fd5e0f;
    color: #fff;
    text-shadow: 0px -1px 0px #be4002;
    -webkit-box-shadow: 0px 2px 0px #be4002;
    box-shadow: 0px 2px 0px #be4002;
    }

Comments are closed.