January 14 WordPress theme Flat, one column, minimal and modern Wordpress theme focused on great design, usability, readability, speed and concise code. Best of all, it's free! :)

by
on February 27, 2014
(7 min read)

My new website’s theme has had very positive feedback and the other day someone asked me where to get a copy of it. I actually coded it for myself and wasn’t planning on releasing it although I am usually looking for free similar themes to this one and there are very few. So I’ve released it for free, here you go!

I’ve got invites for a free bank transfer!

The theme is called January 14  and it was tailored to my website, a 6 year old half-Wordpress half-custom framework, so it wouldn’t work with a WordPress installation straight away. I’ve spent some time adapting it and it now works with any WordPress website. Bear in mind that to change some settings you will need to edit the files directly, open the functions.php for some settings or change the color scheme by editing the CSS/LESS files. Also, this is not a fully featured theme yet, the archive pages are missing.

Download

Download the latest version of the theme:

Download January 14

Github repository: github.com/luckyshot/xe-jan14
Demo: xaviesteve.com
Changelog: github.com/luckyshot/xe-jan14/commits/master
License (optional): Purchase no-attribution license (remove my footer credit on one site)

Features

Dynamic header

january 14 posts

Each post and page (including the homepage) gets its own custom header image, it’s as simple as inserting an image in the content. No need to set a Featured image or deal with extra menus, the theme will pick up the first image automatically and apply it as the header. If there are no images a beautiful default one is shown.

Responsive

The theme is responsive and renders great in any device.

Reduced size background for mobile devices

It detects if users are in a small tablet or smartphone and provides a lighter version of the header image to load the website faster and save network bandwidth.

Social media buttons

theme social buttons

Includes Facebook, Twitter and Google+ sharing buttons on each post.

CSS3 animations

There is a subtle CSS animation of the header’s background image when loading the page, some users have confused it with Parallax, it is a similar effect but without using any extra plugins.

No jQuery needed

This theme uses vanilla JavaScript so you don’t need to load the library if you don’t need to.

Easy to develop on top

I’ve made it a challenge to code the theme in as few lines as possible, this means it is very easy to read and understand the code. For example, the file page.php only has 9 lines of code and weighs 0.2KB.

pagination and footer

HTML5 semantics

page.php full code

The HTML in this theme is simple and concise, there is no extra <div> or elements for layout purposes, all layouts are accomplished through CSS.

Fully automated

When I code things, I want them to save me from doing repetitive tasks all over again. This is why January 14 is smart enough to do some things for you.

  • Detects the first image in a blog posts and sets it as its thumbnail and as the background image in the header (no need to specify Featured image on every post)
  • Detects the first paragraph on every posts and makes it bigger to induce readers to read the content
  • Grabs the meta description of the page/post and sets it as the subtitle

Comment form expands on focus

commenting

The comment form starts being one simple text box, when the user starts typing it then shows all the other fields and buttons.

Installation

If you are installing this theme on an existing blog make sure that the first image in the content can disappear from the text and go as the header background.

  1. Create two pages and name them Home and Blog, then set the page template of Home to Homepage.
  2. Go to Settings > Reading and set Front page displays to A static page and choose Home as the Front page and Blog as the Posts page.
  3. Go to Appearance > Menus to create the menus
  4. Install Yoast WordPress SEO to< enable subheadings and descriptions in listings

Projects

special category

There is a special post category that will display its posts in a vertical layout. They can be anything you want, you can modify it by opening functions.php and changing the value of JAN14_FEATURED_CATEGORY to the Category slug of your choice. The titles around the website will adapt to whatever category you choose.

Why I don’t use custom post types for the special post category

When I started my website custom post types didn’t exist so for legacy reasons I stick with several Categories. And to be honest with you, I prefer it. It is much easier to deal with and if I need to change a Post to a Project I can just check and uncheck a couple checkboxes and I’m done. MySQL data is also much cleaner and if you ever change your theme custom post types can become a nightmare to deal with.

Differences between the released theme and the one in XaviEsteve.com

The font in my website is Proxima Nova which is subject to Copyright so I have replaced it with Open Sans which is free and very similar. The Resume and contact page templates are not included. The project icons are not included on the theme but you can download and use them for free, link below. Some images are loaded from an image file so you can change them easily, in my website I have embedded them in the CSS to save server requests and load the pages faster, the difference is minuscule so don’t worry too much.

License

Please donate to keep this server up

© 2014 Xavi Esteve – Creative Commons Attributive

You can use it in personal and commercial projects free of charge, you must keep the tiny link to my website in the footer.

Credits

  • TimThumb by Ben Gillbanks and Mark Maunder
  • Flat Miniset used in Project icons made by iconShock.
  • I have been unable to find the source for the back.jpg image in the homepage and other static pages, great photo.
  • The big text headings in the code are made using ASCII Text Generator
  • You can embed small images in your CSS code like me by using the Base64 encoder
  • Theme tested using http://wptest.io/

Thank you for sharing the article

    
    

Xavi Esteve wrote this article on February 27, 2014 and published it in english, web design, front-end, graphic design, ux and popular.

No comments yet

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 30€ discount