Fiver
Fiver is an image-free, minimal theme for WordPress created using cutting edge HTML5 tags and CSS3. Fiver is a free Open Source package distributed through the official WordPress themes site. The theme is licensed under GPL version 3.
Fiver has been tested in the latest versions of Chrome, Firefox, Safari and Internet Explorer. No guarantee is made as to it’s compatibility in older browsers (I’m looking at you IE6!).
For help and support with this theme, please leave a comment below and we’ll get back to you really soon.
Fiver is available to download at the WordPress.org Theme Repository
Just came to thank you for the theme. It was exactly what I was looking for – a simple, text-based theme. Perfect.
Thank you so much!
Hi! I’m using your theme right now, and I was wondering if there’s a way to shift the side bar and content to the left so that it isn’t so dead center. Like, I want the posts to be at the center of the screen wtih the side bar to the side. Thanks!
Also, would you happen to know how to make the POSTS title in the same format as About me, gallery, etc? The posts is a widget and the pages are linked using hte custom menu widget
Left aligning the blog is dead easy – edit the style.css and find the
#wrapperselector. Change the bit that saysmargin: 50px auto;tomargin: 50px 0;and save the file. That should do it.I don’t quite want to left align it.
I just want to center it on the content instead of sidebar+content.
Luv the theme however I’m looking for an image fix. My bad if this was already posted I looked and did not see this question.
How can I get image thumbnails in posts to show up on the categories page?
We have no plans to add this to our themes at the moment. If you wanted to add it yourself, you would need to modify the theme to add support for post thumbnails. You can find out more about that functionality here. http://codex.wordpress.org/Post_Thumbnails
Hello Andy, is it possible to put an image on top of the homepage when using your theme Fiver?
Secondly, I would like the left sidebar to look like e.g. http://www.nytimes.com/. Can I do this?
Thank you for this great theme!
Fiver is designed to be a text only theme so no, you can’t put an image on the top without modifying the theme files (html and css). You’re free to change the theme as much as you see fit – it’s open source. You just need to tweak the CSS to make it appear how you want it.
Hi Andy!
Thank you for great theme.
I have one question: how can i make page without sidebar?
Best regards from Russia!
Easy peasy. Make sure you have the latest version of the theme, then go to ‘appearance > widgets’ and make sure you have removed all the widgets from the sidebar. The sidebar will vanish and the design will automatically adjust.
Hey there,
I installed this theme and played around with it. I really like it, but there is one thing that I don’t understand so far. I wanted to use the plugin ‘CodeStyling Localization’ (https://wordpress.org/extend/plugins/codestyling-localization/) to translate your theme into German, but the theme isn’t recognized by this plugin. Do you have any suggestions how I can translate your theme without changing the PHP files (as I would need to do this after every theme update)?
Hi there,
For it to work you would need to extract every piece of wording from the template and put it into separate translatable language (.po) files, then put the appropriate variables back into the theme. It’s a lot of work and not something I really have time to do at the moment, but it’s certainly something I will consider in a future update.
By all means, if you want to do it in english and send me a copy of the theme with the translations in place, I’ll be more than happy to update the theme with the changes and credit you in the readme.txt
Hi Andy,
Sorry to bother you again – I have been having another play with the formatting on my blog – changing the header that I added when I first customised Fiver. The only thing is the body below the header is not in the middle of the page, it’s flush left. Not sure what I’ve done. Although as I write I wonder if closing the header tag half way through the header.php file might have something to do it. Not fully understanding how php holds things together doesn’t help here…
I have enjoyed using your Fiver theme so much, I have published a review on my blog: http://www.pixink.net/blog/get-going-fast-with-the-simple-fiver-theme-for-wordpress-review/
Hello,
I love this theme, which I am using for my website…
I am not very able at programming code, though I try to understand the functioning of it all, but I just don’t manage a way to make the sidebar float with the navigation…
Is it possible? Because it seems to me as if it where part of the content…
I would be thankful if you could help me!
Thanks!
Hi Pablo,
I don’t quite follow what you mean I’m afraid. The navigation should be on the left hand side of the content. Is that not what you’re seeing? What browser are you using?
I also like the theme very much, as it is very clean and good for source code display.
About the Disqus problem: There is an easy fix, we describe it in detail on our page here – German only, sorry:
http://catfind.it/2012/01/wordpress-zeigt-disqus-nicht-an/
Here’s a short how-to in English:
Click on Appearance, Editor, be sure that you are editing Fiver.
Search for .clearfix and modify the code as follows (thereby commenting out the visibility: hidden; part).
.clearfix {
clear: both;
/*visibility: hidden;*/
}
I hope the author can include this fix in future revisions
HTH,
Max
Hi Max,
It looks like the guys at Disqus use the same class name as me but in a slightly different way. I only every apply it to the horizontal rule tag, so if I make that selector a bit more specific it should stop any problems. This should also fix it but without effecting the design of the theme:
hr.clearfix { clear: both; visibility: hidden; }I’d also really like to see the theme have an option of moving the sidebar from the left to the right!
First, great theme. Exactly what I wanted and so glad I didn’t have to code one myself. I just updated to WP 3.3 and now the left navigation doesn’t show up. Have you had issues with the latest versions?
Hi Jason,
The latest update changes the way the navigation works slightly so that you can choose not to have it at all if you don’t wish (gives people a bit of flexibility).
To reinstate the sidebar, simply use the widgets functionality (under ‘appearance’ in the WP dashboard) to drag in your chosen navigation elements and all will be well.
Hi!
Nice theme, thanks to it I don’t have to make my own theme to make my upcoming blog fit my mainsite-design
But!
I have a problem, you may call me an idiot… but I can’t figure out how to make the main-column wider?
Would like it to fit 700-750px or something + the sidebar.
Can you help me?
And by the way – happy new year!
/Christoffer
Happy New Year to you too Christoffer!
There are two things you need to alter in the themes stylesheet to make it wider. The first is the #wrapper which is currently set to 750px wide – change that to 960px.
The second thing to change is .has_sidebar sectionit’s currently set to a width of 550px – change it to 770px
That should be all that’s required to make the theme wider! Enjoy!
Thank you!
Were about to say that it wouldn’t work, but now I change the CORRECT code and not that I thought you meant!
Thank you! Take care!
Hello,
This theme has come to my rescue because it is the first theme I have found where the code is intuitive. I have been able to find my way around way better than all the others I have tried.
However, I was wondering if I can add a menu along the top under the heading? I can code it, I just don’t know where to put the code to make that work.
And is it possible to change the landing page? i.e. make it one of the pages instead of the blogroll?
Many thanks!
Hello again, in addition to my other questions, how complicated would it be to get control of the header on my fiver themed page? This is what it looks like at the moment: http://www.pixink.net/blog/http://www.pixink.net/blog/?page_id=25
I have found your theme so easy to work with but in order to continue using it in future I know I am going to want more than just a heading at the top.
In an ideal world I would want a nice editable box at the top: a blank canvas that I could edit in the style sheet. At the moment I want to put a bit more information up there about what the blog is about, but if the header space were editable I would have the option of adding a div box off to the right to put a call to action for certain promotions and things.
Please get back to me asap and let me know if this is possible!
Hi Maija,
What you are trying to do is some pretty complex customisation of the entire theme. Fiver is supposed to be a minimal theme and doesn’t support any of these things out of the box. It sounds to me like you’ll need to get your hands dirty and actually edit the theme files directly to do what you need.
As far as the menu goes, your choices are to either use a navigation widget in the left menu, or to hard code something in the header (I would recommend you use WordPress’s wp_nav_menu() function so you can edit the menu items from within WP itself). All changes to the header area can be found in the themes ‘header.php’ file.
Good luck with your customisations!
Hi Andy, thanks for your response!
I appreciate the themes simplicity, I really do, because it’s easier to see the wood for the trees and I feel braver about editing it!
Having said that, I don’t feel confident about inserting my html in the right place. I’m not familiar with php so I am finding it hard to navigate the files. Is it possible to point me towards the right file and section?
I had a look at the header.php file – is it as simple as putting more code between the and and giving it more definition in the stylesheet?
Where can I find the wp_nav_menu() function?
Many thanks.
M
Hi,
There’s a link to wp_nav_menu documentation in my previous comment. It doesn’t exist in the current theme so you’ll need to look at the docs and suss it out (they’re pretty good).
Yup… you can add anything you like into that file between the header tags and it’ll appear. Best thing to do is make a copy of the theme files and have a play with it, if you’ve got a backup, there’s nothing you can really break so go wild!
Hi,
I have managed to get the pages to appear at the top in a list. Not that I understand why it works or where the ‘list’ instruction is located in this system!
I want to stylise it so the list is horizontal (constrained by divs?) can I do this using the stylesheet or do I have to learn php?
Thanks!
Hi Maija,
You can do it completely with CSS. There’s a really useful article here that should guide you through the process.
http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/
Success! Thank you so much. I am pleased I was able to do it all in CSS.
Now that I have made a fixed page the landing page, what link do I put in my menu to go to the blog roll? (sorry!)
Also, I would like to change the h1 (blog name) font to match the article and meny font but editing “header h1″ in the stylesheet isn’t making any difference. Am I missing something?
Thanks for all your help.
When you specified to have a static page as your homepage, there is also an option to say which page will house the blog. So go to the pages section on your WP dashboard and create a new page called ‘blog’. Don’t worry about content, you can keep it empty.
Then go back to the settings -> reading part of the dashboard and you will be able to tell the site to use the new blog page for your blog. Then just add the blog page to the navigation and it should work.
I’m not sure. I tried it on my development site and it seemed to work just fine. It’s hard to know why it’s not working for you, especially if you’ve changed other parts of the CSS but If you give me a link to your site, I could take a look and see what’s going on (no promises on being able to fix it though).
http://www.pixink.net/blog
let me know if you need a more specific link
ok… looks like I can see what you’ve done. You’ve set the h1 font to arial, which is the font it’s already in
If you try changing it to something else, like Tahoma, Impact or whatever, you’ll see it changes as it should do.
ah haha it was starting to look so different in bold and big and with a different letter spacing… I guess I have been staring at this too long. break time!
And thanks again.
my adaptions are coming along really well. thank you! is there an easy way I can put the sidebar on the right side instead?
Hi Maija,
It’s quite simple. At the moment, the nav is floated left and the content is floated right – all you have to do is swap them round. Just search for float in the stylesheet – I’m pretty sure it’s the only place I use it
I missed something from your first message – you want to change the homepage. That can be done in the WordPress settings – I think you’ll find it under ‘settings > reading’
sorted! Thanks.
Hey,
I am creating a new wordpress site and I just discovered your theme. It’s amazing! I changed the font, but I was wondering how I could change the ‘selecting’ color from orange to something else.
Could you tell me this? Thanks!
Lucy
Hi Lucy,
You just need to change the hover colour in the CSS. If you search in the original stylesheet for instances of :hover you should be able to find what you need to override in your child theme.
Hi, nice theme, but being I’m not really a geek (engineers on holiday, typical!), I’m a bit stuck with something basic that I know I should not really be doing with your theme, plus, there is one issue that I’m sure isn’t me, that I’ll start with: a) Where are the ‘Pages’ links from the left nav menu? (I see them on the Fiver screenshot.) b) Onto the big issue: As you can see, I’m trying to add a banner graphic to each page using the Background thingi wotsit. But the text of the site name obliterates it, and when I make adjustments to the size value or remove the site name itself, things go, as we say here in the UK, ‘tits up’. Halp! Thanks.
Hi Alex,
The ‘pages’ links are a WordPress Widget, you can enable them in the ‘widgets’ section of your WordPress dashboard.
I’m guessing from the look of it, you’re adding some custom CSS to put your logo as the background of the H1 tag in the header? If thats the case, just add the following style to your H1 tag as well to make the text disappear (you can add this within the existing H1 style if you wish):
header h1 { text-indent: -9999px; width: 768px; }Thanks! Just trying to work out why I’ve got huge gaps above and below the graphic.
You’ve set the margin on the H1 to ’200px’ – that will give you 200px on all sides. What you probably want is something more like ’0 0 30px 200px’ (30px below and 200px on the left).
Thanks! It worked!
No problem!
Hi,
I have a question about the link widget with images instead of text. In explorer I get a border around the images I don’t want. I got a border around the logo image as well but I took care of that with a “border=o” in the header php. Unfortunately I couldn’t figure out where to get the same problem fixed for links, and my share/follow plugin.
This is only a problem in explorer, can You help?
Hi,
Old versions of IE would put a blue border around any images with a link around it. It can be fixed with a small CSS tweak like so:
header a img, nav a img { border: none; }You can manually add that to the style.css if you wish, or wait for the guys at WP to approve the update.
Enjoy
Andy
Hello, thank you for this special theme, I liked and I chosen for my website. Anyway, I have a question, I would like to insert video but I would like to see the thumbnail of this video on the page and not only the link, I have to use some particular plugin or……thank you very much
Hi,
WordPress has a way to upload video media from the post editor, failing that if you post a youtube URL anywhere in a post, WP will automatically embed the video from that page. I think Automattic’s Jetpack plugin has some helper tools for embedding other sorts of video too.
Thanks for making your code clean. Thanks for not bloating the hell out of it. Thanks for being so irrefutably awesome.
Hello and thank you for the fantastic theme. It’s among the bests I’ve seen so far. I still would have a question though: is there an incompatibility issue with Lightbox Plus? When you clik on a thumbnail, the image is not centered :
http://www.viciousart.com/blog/?page_id=192
thanks!
Hi Gui,
To be honest, I’ve never used that plugin, but I think I know what the cause might be as I’ve experienced it with other lightbox systems on sites that I’ve laid out in a similar way.
Basically, it’s because I use the HTML and BODY tags rather than adding an extra wrapper for styling purposes. It’s unlikely the problem will be resolved by the plugin author. I’ll try and fix it.
Thanks for bringing it to my attention!
I’ve managed to fix it in my dev release and will update the WordPress.org repository shortly. They are normally pretty quick at updating themes that have been previously approved, so you should see the fix soon. Enjoy!
Thank you so much!!! Can’t wait to give it a try.
Hey Andy.
Can you tell us when the updated version is online please? Thanks
Gui
Hi,
It’s been approved by the moderators, but isn’t live in the themes directory yet (the guys at Automattic seem to do that maybe once / twice a month at most).
Subscribe to the RSS feed for the blog section and we’ll be sure to post as soon as it’s up.
The updated version is now live!
GREAT. Thank you!!!
Dude, thank you SO freakin’ much.
I’ve been looking for a simple, easily extendable, HTML5 theme to use as a framework for like five(r) hours now. I’m so happy I found this. Thanks for making your code clean. Thanks for not bloating the hell out of it. Thanks for being so irrefutably awesome.
Sincerely,
Bryan
No problem Bryan. I always used to start with Kubrick and then remove all the un-needed markup and CSS depending on the project. I made this myself, after they stopped including it as the default theme and realised that it must be useful for someone other than myself. Enjoy!
Hello Andy
Thanks for the reply and answer it helped a lot.
I have another question which I have tried to figure out and was not able to and asked another person and never got a response. I am trying to get the photos on my blog open without leaving the page. Another words I want the clicked photo to open as an overlay. simillar to this link.
http://www.nyembroiderystudio.com/blog/2011/06/27/laser-cutter/dscn0671/
I would be gratefull if you tell me how I can integrate this.
Thanks
Jimon
Hi Jim,
There are quite literally dozens of ways of doing this, all of which will require you to have some knowledge of html and javascript. Luckily, there is a way to do it without any knowledge and that is by using a WordPress plugin.
The functionality you require is known as a ‘lightbox’ effect, so if you search in the WordPress Plugin Directory either online or via the WordPress admin panel for ‘lightbox’ you should find a number of options that do what you need.
I haven’t personally used any of these plugins so I would recommend that you try a few and pick one that works best for you.
Hello Andy,
You have designed the most amazing theme. Simple, clean and to the point.
Can you tell me how can I change the font to Courier at least the header and secondly, how can I add Facebook/Twitter/emailat the bottom of each entry.
you can see the blog at http://www.jimon-magazine.com/diary/wordpress
Thanks
Jim
Hi Jim,
Glad you like it! Regarding the social links, there are loads of plugins available for WordPress that handle that kind of thing, do a search in the plugins directory for ‘social’ and I’m sure you’ll find something that will suit your needs. To do it manually will require going to each provider, reading up on the API docs and implementing their individual methods. This is what we did on the Stinkyink blog and to be honest, it’s a bit of a pain in the bum. If you do want to go down that route, you can start with this blog post: http://stinky.in/qMAM6e
Changing the font is easy as It’s only specified in one place. Go into the WordPress Admin panel, Click Appearance on the left hand menu and then ‘editor’. On the right hand side at the bottom under ‘styles’ you will see ‘style.css’.
On line 16 you should see:
font-family: arial,sans-serif;Replace that with:
font-family: 'courier new', 'courier', monospacedEnjoy!
Hi Andy,
Nice job on the theme, just recently started using it. If I may ask, I’ve installed the plugging by Disqus for keeping track of the comments on the site but it looks like it’s not working right. In detail it is not showing up on the post. For know it’s inactive, I’ve reached out to those guy’s and until I hear back from them I’m just waiting for a reply. I’m sorry for taking your time with this, but I wanted to ask you if maybe you had some thoughts or light on the matter?
Thank you for your time.
R.Miguel
Hi Michael,
I’ve never used Disqus so I don’t really have a clue why it would be failing. However, Fiver uses the standard comments function to show the comments and has just been styled up with CSS so there shouldn’t be anything in the template that would cause problems.
I have to do some maintenance on the theme in the near future, so I’ll try and test with the plugin and see if I can’t work out what’s going on. In the meantime, if you discover what the problem is, please let me know.
Thanks! I apreciate to much your template, but I need to modifying some parts. Can I send it for you? &;-D
Hi Ednei,
I’m sorry… I don’t have time to do individual customisations.
Ok! Thanks anyway… &;-D
Really like the theme…I do have a question though…In which file do you ‘style your html tag to gave the background image’ as you mentioned in the previous comment? Also, I noticed that you can copy the ‘links’ template, edit the name in the code and also the filename, and it will show up as a new page template. Can you do this to the default template? If so, which file do you copy and edit?
In the stylesheet. It’s the file called style.css
The default template is index.php, you would need to add the template header like you have in the links file though.
Thanks Andy… I have uploaded the site live now ( here) still working on it a bit. Can you explain where I could add a wrapper to the center “white section” so that it remains white no matter the size/amount of the content?
sorry, the link is : http://www.nyembroiderystudio.com/blog/
Hi Trista,
Looks great! I’m glad it’s working for you!
If I was you, I would style your html tag to have the background image, then style your body tag with a white background and it should do what you need (you might need to adjust the padding on the html tag to get the look you need though).
This is a great theme — thank you! I implemented it on a blog for which I had made a custom theme before widgets (yes, whenever that was), and everything moved over beautifully. Then I went in and changed all the fonts and colors. The CSS for this theme is VERY clean — that is so nice! I am very glad you kept the fonts simple. It made it easy to customize.
I would love to see these enhancements to the Fiver Theme: (1) a widget-ized footer with columns; (2) a variant with a wider sidebar; (3) a sidebar that can be flipped from left to right.
The current version of fiver is the first public release which I deliberately kept very simple but I have big plans for the theme in the future so I’ll keep your ideas in mind for upcoming improvements!
I’m currently working on another theme (currently under review) and have added some basic theme options, so it wouldn’t be too hard for me to change Fiver to flip the menu around and what not.
I’d also really like to see the theme have an option of moving the sidebar from the left to the right!
I actually did that. If you go into the editor and track down the sidebar you can change the “float: left;” to “float: right”
Hi, I am using your fiver theme… I have been styling it a bit with css and only know enough to be dangerous. I have come across a couple snags..Can you help? two major questions. maybe more to follow…
1.) I can only get an image as the header by inserting a “background image” in the header styling… is there a better way to do this – I would like to make the image a link as well.
2.) I have a background image for the whole site – but would like a white background for just the text – i have accomplished this, however when the section side or the nav side is longer/shorter than the other the color background shows through, i would like it to remain white.
It is only on a local host currently, but I can send you a screen shot if you send me an email address.
Can you help me?
Thanks!!!
Trista
Hi Trista,
1) The H1 inside the header contains a link, so if you style the ‘header h1 a’ with a background image and adjust the width and height accordingly, you should be good to go.
2) Fiver is designed to be incredibly lean and free from extraneous markup, so theres no wrapper that you can easily style, that said you could style the body tag with your background image etc as that’s where the width of the page is set.
no wrapper! That may explain why my page body is no longer centered under the header! Not quite what I was aiming for!
Hi!
I use this theme now, and i have modified some things for me. I use a serif font and i used justify for the text align in the p elements. And i have translated some parts to german.
Thank you for this theme. It looks great!
Steffen
Glad you like it!