by Xavi Esteve
on February 27, 2014
(5 minute 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!
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:
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
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
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.
HTML5 semantics
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
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.
- Create two pages and name them Home and Blog, then set the page template of Home to Homepage.
- 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.
- Go to Appearance > Menus to create the menus
- Install Yoast WordPress SEO to< enable subheadings and descriptions in listings
Projects
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
© 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/
No comments yet