FREE Flat WordPress Theme for Personal Blog

flat-120-cover

After Microsoft introducing Metro design of Windows 8, Flat design – a concept popular many years ago in design – is making a comeback. Without lots of added embellishments, it can be a clean and simple way to communicate a message or promote a product or idea.

Following this trend, we was started a FREE Flat WordPress theme inspired by Free Flat UI by DesignModo. We would like to say that Flat WordPress theme is both beautiful and charming at the same time.

Features list

  • Charmingly Flat and Minimalist design
  • Fully Responsive Layout
  • Retina Ready
  • Off-Canvas Sidebar on Handheld Devices
  • Custom Background
  • Custom Sidebar Color
  • Editor Style
  • Twitter Bootstrap 3.1.1
  • Font Awesome 4.0.3
  • Write on HTML5 / LESS
  • Compatible up to WordPress 3.8.1
  • Customize: Logo, Favicon, Sidebar Background Color
  • Translation Ready (Language available: English, German)

Coming soon

  • More post format support: Aside, Quote, Link
  • Portfolio layout

It seems we’ve given people a lot to talk about

We get to see flat design at its very best in this theme. The design is simple, intuitive and minimalistic, with aesthetic being dictated by functionality and practicality. We are not entirely sure what the theme’s name is, though. It could either be Flat, or FREE Flat WordPress Theme for Personal Blog, you decide.

— Pixel77 / March 28, 2014

Despite being free of charge, the free responsive WordPress themes we have for you today all have a premium quality to them. All are responsive, so they will adapt to various screen sizes straight out-of-the-box. They have all been built with modern design trends in mind, so plenty of flat designs, large typography and parallax scrolling. All are jam-packed full of useful features and little extras that helps makes each theme that little bit more unique.

As always, the themes will work perfectly well for you as is, but the real fun is using them as a base for further development and customisation.

— Speckyboy / March 10, 2014

Flat is a charmingly flat and minimalist design that is new to the WordPress Theme Repository. It has a customizable blurred background, off-canvas sidebar and uses Twitter Bootstrap and Font Awesome

 WPMUDEV / March 5, 2014

You can’t say no to free

— Under World Magazine / February 23, 2014

Flat is a Personal WordPress Theme design developed by YoArts. We like to say that Flat is both beautiful and charming at the same time.

— Web Design Razzi / February 1, 2014

Incredible themes for you to be entertained creating or updating an elegant WordPress site. It is composed of awesome and crafted flat and minimal themes … with beautiful typography and every UI element you might need!

— WP Mayor / January 24, 2014

Inspiring Free WordPress Themes To Start Anew in 2014

— Noope / January 17, 2014

Who are using Flat WordPress Theme?

Submit your site? Contact us or Tweet @YoArts

screenshot

We want to do something special, keep this theme Free and alway will be. To help us accomplish that, if you feel this project helpful to you, please click on the donate button. Or just click to the follow button below to download.

About Jackie Lord

Jackie Lord is the co-founder and Head of Product at DesignWall. A Web Developer specialist, and special interest in UI/UX design, WordPress.

  • Pingback: 250+ Free Responsive WordPress Themes | Designrazzi

  • Pingback: Free WordPress Theme: FlatBlog » Doteasy WordPress Resources Website – Beginner's Guide for WordPress

  • Pingback: FlatBlog: Free WordPress Theme 2013 | Aladdin Storefront

  • Pingback: 95+ Free Responsive WordPress Themes, Part II | Designrazzi

  • Pingback: Flat - theme gratis al estilo Metro - ClonesWP

  • http://www.web-mee.com skorpyo

    just wanted to thank you a lot for sharing this awesome freebie, I’ll be using it for my own blog.

    • yoarts

      You are welcome!

  • http://GraphicNeed.com/ M.Aswad Mehtab

    fantastic work !! will be using o my personal blog , it looks clean and useful . thanks

    • yoarts

      Thanks for your feedback!

  • http://www.web-mee.com skorpyo

    I can’t seem to see it be responsive for some odd reason…

    • yoarts

      Responsive feature will be added to the next version of this theme.

      • http://www.web-mee.com skorpyo

        great to hear that…

        • yoarts

          Responsive feature has been available. Please update and enjoy!

      • ridhoyp

        When it will be release? :)

        • yoarts

          About 1 to 2 days, I will complete this job

  • Pingback: 200+ Free Responsive WordPress Themes | The Wicked Coder

  • Pingback: 20 Inspiring Free WordPress Themes To Start Anew in 2014 - noupe

  • Rahul Joshi

    Facing an issue with the Featured Image. It reduces to 52×52 icon: http://webresourceslinks.com/

    • yoarts

      Please change it in Media setting

      • Rahul Joshi

        I am not able to see any related settings under Settings>Media. The featured images were absolutely fine with my previous theme. Since I upgraded to Flat, they got reduced to this thumbnail size.

        • Rahul Joshi

          Another thing. If I see the image in the post area in WP Admin, I see the size as 570×300. But the published version is 52×52

          • yoarts

            I’ve installed the “Regenerate Thumbnail” plugin for you. All the thumbnail has been regenerated.

          • Rahul Joshi

            Thanks for that. Would I need that thumbnail plugin to remain there for future posts as well or it won’t be required any more?

          • yoarts

            No, you just need using this plugin one time only.

          • Rahul Joshi

            Ok. Thanks for the help once again.

        • yoarts

          Can you send me an administrator account for further checking. Please using this contact form to send: http://www.yoarts.com/contact/ for security reason.

          • Rahul Joshi

            sent you the details. Thanks for the help

  • Dylan Thomas

    Hey yoarts – having trouble getting the Continue reading feature to show. Any help?

  • Xavier

    Hi Jackie! This is the best wordpress theme I had. The only problem is that I am not comfortable with the default font. Could you explain how to change the font and size? Or you can add an option in the next update. Thanks!

    • yoarts

      Noted, I will add this feature to the next version of this theme. Thanks for your suggestion!

      • http://tenslovak.sk LeBaux

        Definitively have the same issue. Especially since “Roboto” font does not include latin chars common to western Europe – ěščřžýáí etc. In terms of languages french, german, polish, czech, slovak… Editing “template.css” is extremely uncofortable since the file was minified, and even after I have uncompressed the file, it is hard to change all the fonts, and colors. I know you are planning onto incorporating most of it into customizer, but better organized template.css might be much more useful :)

        Talking about customization – color of links, hovers and default color of other elemets should be customizable, or at least take the value from “theme color” field.

        • yoarts

          I have added a feature to select other font in Flat version 1.2.11. WordPress Reviewers team has been approved and it will be live about 1 -> 2 days.

          Please don’t edit the theme files. If you need any feature, just request me or commit your change to our Github repo: https://github.com/yoarts/flat

          To customize CSS, I suggest you using Jetpack. This plugin have a feature allow you put some CSS codes to your WordPress website: http://jetpack.me/support/custom-css/

  • Technokidpro

    How to stop featured showing on the home page and post page.

    Also how can I change the color theme? I am changing it to red from customize. But its not showing.

    • yoarts

      How to stop featured showing on the home page and post page.
      => Just log in to Dashboard > Post > Edit then remove Feature image on the post

      how can I change the color theme? I am changing it to red from customize. But its not showing.
      => Now this theme just have option to change “background color” only

  • LeBaux

    VERY fast theme. Adding a backbone.js would make it real killer :)

    • yoarts

      Why?

      • http://tenslovak.sk LeBaux

        Well, with backbone you could load just content area and make the theme even faster. Check out https://thethemefoundry.com/wordpress-themes/collections/ Of course this is just a random idea, I do not really expect from you to invest so much time into improving already super fast theme :) BTW. There is a little bug in this theme. GIF for explanation.

        • yoarts

          Ok, i will take a look about backbone JS soon.
          Btw, Thanks you for your testing. But i think this bug is not high priority at this time. Because your website viewers is not usually resize browser when they are browsing.

  • JayElles_BoT

    Its great, but on my author page (linked to author-bio.php I assume) there is no author bio.

    Link: http://balloftech.com/author/jay-elles/

    • yoarts

      I’m going to add this feature to the next version of this theme. Thanks for your suggestion!

  • DanTin

    Great theme however when I use with Disqus comments (like you) and choose to change the text to not show “0 Comments” and click save it doesnt update in your theme. Always shows “0 Comments” even though I want it to show “Comment” when nobody has left a comment.

    See attached image for clarity.

    Many thanks, love this theme!

    • yoarts

      Can you send me an administrator account for further checking. Please using this contact form to send: http://www.yoarts.com/contact/ for security reason.

  • Ricky

    How would you be able to adjust the post / page width from the standard as i cannot seem to locate this to change it?

  • Stefan

    Is there any posibility to buy this them, so i can remove “Theme by Yoarts”

    • yoarts

      Contact me via: j4ckielord[at]gmail.com

  • mikelis

    The theme looks really nice, but I have a problem with submenus. Seems that they are not uspported in this theme? Because in my site the submenu items just list the same as normal menu items and go out of the container. So, is this a problem on my end or the theme really does not support submenu items?
    Thank you in advance.

    • mikelis

      looks like I`ve sorted it out. The problem only occurs when creating a new menu.

      • yoarts

        What is your website? Can i take a look. I’m going to fix this issue!

  • Oleg

    Hi! How can I change color of that dark menu column? I really need it!
    PS the theme is perfect!

    • yoarts

      Thanks for your suggest!
      I’m just added this feature to Flat version 1.2.7
      Official updates will be provided in next 1-2 days.

      • Oleg

        Thank you for speed and quality of response! Looking forward to see the update!
        By the way, if you could allow to choose the background picture of any size that would be really awesome. I mean, if upload a background pattern ex. 20×20 it lags:(
        Keep on staying awesome! Thank you!

        • yoarts

          I highly appreciated your comments!
          I’ve added a new option to customize function to help you choose the background-size of the site. Version 1.2.7 of this theme has been approved, so I will add this feature to Flat version 1.2.8.

          • Oleg

            Wow, it really works! Thank you!!!
            And God bless such designers!

  • WebNashr

    Please include RTL support to your great theme.

    • yoarts

      Can you help me translate this theme to your language. And then I will definitely include RTL support to this theme. Please contribute to our Github repo: https://github.com/yoarts/flat

  • http://www.shayking.net Shay King

    Having an issue with the theme. If the user hits a wrong link on the page they are shown an article instead of the error 404 page. Also if searching for an item and there is no post they are shown an article instead of search result not found

  • Hazy

    I love this theme and I am using it for my blog. I was just wondering if there is a way to include *both* site title and logo instead of just one of them?

    • yoarts

      Very good idea!
      But I don’t know why you need display both site title & logo. I wrote this code, please try to apply it on your site.
      If it beautiful, I will decide to apply this feature to the upcoming version of Flat.
      Please change your customizer.php file of your theme (inside /inc folder) like that: https://github.com/yoarts/flat/commit/373ab378c8687e49a09e50425cafff3c8764192a

      • http://knitwithcathair.com Hazy

        Great – it works! I have added my url to my profile if it helps. I wanted to have both as my logo doesn’t include my site title. Is there any way to put a line break between the two? Im useless with html and css to try to fix it.

        • yoarts

          Can you send for me your logo, and site title. I want to take a look before design this feature.

          • http://knitwithcathair.com Hazy

            My site title is ‘Knit With Cat Hair’ and my logo is attached to this.

          • yoarts

            Ok I will add a little CSS to make your logo look better in the Flat version 1.2.11

  • Takkino

    With the last update, the title in the index is empty!

    • yoarts

      You are meaning Site title or Post title? Can you send for me your website URL or a screenshot for further checking.

  • Vinh Nguyen

    Hi, I’m trying out this beautiful theme. How do I get icons to show next to the links in the sidebar like in the demo? What about getting the automatic dropdown categories list in the sidebar? Thanks.

    • Sergio

      Hi, I have the same problem, I can’t see any way to configurate de font awesome icons with pages, categrories or post. Please, help.

    • yoarts

      To using icon on the menu, please write down the icon class to the menu class. You can find all icon class here: http://fontawesome.io/icons/

      See screenshot for example

      • Vinh Nguyen

        Thank you!

      • http://woikr.com/author/swaroop Swaroop

        Thanks yoarts. I couldn’t find the “CSS Classes” field in my menu options at first..

        For others who’ve faced the same prob. Here’s how to fix that.
        http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

        • yoarts

          Turn on this field by click to Screen Options on the top right.

          • http://www.martin-evans.net Martin Evans

            do these icons only work for top level menu items or for sub items too?

  • Ryan Paul

    Amazing theme indeed. I stopped looking for one to replace my aged custom theme I built.

    I don’t see any options to customize the CSS. Can this theme be built more along the traditional style with all css in the stylesheet?

    Even css overrides aren’t work :(

  • Oleg

    Hi, again! Thanks a lot for your theme and the quality of support!
    I was just going to discuss with you the theme resolution. As you created, if a size of a window with an open web-site is small, it switches to a mini format (the left column goes up), which is really useful for opening from mobile phones. But this mini format is not cool at laptops, seriouly. If someone opens my website form iMac Air, iPad or any other computers with relatively small screen, they see only the ‘mini-version’. I don’t like it and my readers neither! How can I disable this feature of transforming the web-site? I don’t want the left column to go up! (see screenshots attached).
    I really hope you can help me! Thank you!!!

    • yoarts

      I will add a feature to Disable Responsive on the upcoming version of FLAT.

      • Oleg

        Hi! I’ve just updated the theme to the latest version but I cannot find this feature. Where can I find it? Thank you!

        • yoarts

          Hi Oleg,
          Depend on a lot of requests above. In Flat version 1.3.0, I will load the full site in iPad instead of hiding the sidebar without disabling the responsive. How do you feel?

          • Oleg

            Very good, to ”iPad mini” and to ”iMac Air”, please! iPad Air opens the site by defalt in a small window in a mini-format too.
            To summarize, I think the mini-version should be opened on small tablets and mobile phones with a screen smaller than ”iPad mini”.

      • Oleg

        Updated todat to 1.2.12 – still cannot find this feature. Could you help me, please?

        • yoarts

          I’m still finding a better solution for this issue. I will let you know after i found it.

  • Mike

    Hi. I like your theme :-) But i’ve got an error. If I enable the WP Piwik Tracking Code for wp_footer, Google Chrome don’t load the complete stylesheet of the site on first load. After clicking on a hidden link (If you know where it is…) the site layout works… do you have any ideas?

    • Mike

      stop…it’s not the plugin…it seems the site url with or without www makes the difference… sorry… :-(

      • Mike

        noooooo … now I found it… if I logged in, the first new tab with the site seems corrupt. If I logged out, it works… :-(

        • Mike

          no, it is not… :-( but it’s the same problem with an other theme … sorry …

  • james

    Is it possible to force the mobile view by default with the nav bar at the top instead of the sidebar? How would i do this? (love your work on this site!)

  • http://www.martin-evans.net Martin Evans

    How do you add the icons to the menu? Looking at comments below you add a code to the CSS Classes section of the menu item – however on my install there is no CSS Classes box – is this some part of a security lockdown or just not something available now?

    PS My site is http://www.martin-evans.net

  • http://woikr.com/author/swaroop Swaroop

    Hi! How do I get those tiny images beside each of the Menu items? I looked around a lot and couldn’t find out if you did it via this theme options (I couldn’t find any) or if you installed plugins (wasn’t detected by WP Theme detector either).

    My domain (swaroop dot in) doesn’t show the images that I see here.

  • Brandon

    Hi, How do make it load the full side in iPad instead of hiding the sidebar without disabling the resposiveness?
    Thanks.

    • yoarts

      Thanks for your recommend. I will change it in Flat version 1.3.0

  • http://woikr.com/author/swaroop Swaroop

    Has any one customized the responsive menu to appear visible (or a different menu altogether) when the detection says mobile?

    I wish to change from the current “Drop down” type look for mobiles to a flat (always visible but less number of menu options visible) look.

  • http://woikr.com/author/swaroop Swaroop

    Also the gear icon on the left doesn’t make any sense for mobile and doesn’t show anything either. I’d rather put up a home icon there.. Has any one explored it further?

    • yoarts

      I will make this icon changeable in Flat version 1.2.14. You can using translate solution to change this icon. See instruction here: http://premium.wpmudev.org/blog/how-to-translate-a-wordpress-theme/

      PS: Version 1.2.14 is currently in development. Please wait until that version is official release in a few days, then update your theme to get the change.

  • wolforg

    Hello and congratulations for this great theme
    I’ve translated it in french, feel free to download this translation here :
    http://www.wptrads.com/theme/flat-2/
    Best regards,
    Didier.

  • csuperbroz

    I can’t see the download link. But i follow your twitter account. What can I do?

    • yoarts

      Please contact me via hi@yoarts.com. I will send the latest version of this theme for you.

  • http://woikr.com/author/swaroop Swaroop

    Another issue I see is duplicate images (1 thumbnail and 1 Actual image) and both of them are visible.

    Each time after a Theme Update, I have to go and comment out the “entry-thumbnail” from the Content.php.

    Is there a better fix for this?

    <!–

    <a href="” title=”” rel=”bookmark”>

    –>

    • yoarts

      Kevin Papst is working on this feature. He is developing an option to show/hide featured image. Can you suggest him something: https://github.com/yoarts/flat/pull/18

      • http://woikr.com/author/swaroop Swaroop

        Is the Featured image displayed as “thumbnail”. I see it as a bug because a featured image should only be shown once. For me I see

        Post Starts
        Thumbnail
        Actual image
        Some text
        Post Ends

        • yoarts

          Can you attach a screenshot for further checking

          • http://woikr.com/author/swaroop Swaroop

            Sure here you go!

          • http://woikr.com/author/swaroop Swaroop

            @yoarts:disqus Did you take a look?

  • csuperbroz

    Is it possible to put the title/headline of a site higher?
    For me there is too much room between the beginning of a site and the top of the page.

  • Patrick Andersen

    Where can I download the widgets you’re using on the left hand side?

  • Patrick Andersen

    I want to put the headlines of my site higher than usual. Is this possible?

    On which .PHP do I have to work on?
    Which Lines have to be erased?

    • Patrick Andersen

      This is still a problem. Can somebody help me out?

      • yoarts

        Where do you want to display headline?

        • Patrick Andersen

          On the top of a page.
          To put it simple: I want to place the headline above the usual headline.

          In other words: I want to place more text above the fold, so the headline have to be higher.

          • Patrick Andersen

            I want to put the headline like this (upwards):

          • yoarts

            You can add custom CSS code to change this:
            - Step 1: Install Jetpack
            - Step 2: Enable Custom CSS function
            - Step 3: Add those codes to Custom CSS Editor:
            .hentry {
            padding-top: 40px;
            }

  • Laura Dubin

    Is there an unminified version of template.css? I’d like to study the code a bit, and phpdesigner has done a good job for the most part of unminifying it, but there’s still a lot of hiccups. over 10k lines of css!

    • yoarts

      This theme has been writing on LESS, then compare to CSS by a GUI tool. You can learn more about LESS here: http://lesscss.org

  • http://www.wordpressfamily.com/ Tim Tom

    Amazing theme. Love the colors. Thanks for sharing.
    http://templendo.com/best-flat-wordpress-themes/

  • Arnaud

    Hello!

    Here’s a little detail: in fr_FR.po “Lire la suite «” should be “Lire la suite »” I tried to change it but I can see it in the frontend. Any idea?

    Regards,

    Arnaud

    • yoarts

      I will update language file in the upcoming version of Flat.

  • http://jorgesilvestrini.com/ Jorge Silvestrini

    Jackie – I’m trying to get the same font as you have on this template on the title (Site Title Font Family). I can’t find which one it is. All the options here don’t show as your font. Could you explain how to get that font or which font it is? THANKS!

  • SPITE HOUSE

    First, thanks for the theme! Running into a small issue on mobile where my logo bleeds over the Font Awesome icons. I’m using a logo only, no title or description. This wouldn’t be an issue with a logo on transparency like mine, except the image links to the homepage, so people are clicking the image instead of the Font Awesome icons without even realizing what’s happening!

    I’ve attached a screenshot with an opaque version of my logo so it’s easier to see what’s happening. Is it possible to protect those icons by scaling the logo in a different way? Thanks again!

    • yoarts

      Can you send for me your website URL for further checking

      • SPITE HOUSE

        http://spitehou.se/ – I’ve changed the logo image back to a transparent PNG but the issue is still there. Thanks!

        • yoarts

          You encounter this error because you have deleted tagline

          • yoarts

            Your site is beautiful!
            Can I list your website as one of the beautiful sites using Flat WordPress theme?

  • Teodoro Lopez

    Hi! The front page, doesn’t show the title of my blog. Show the url of this. Some solution? Thank you!

    • yoarts

      Please install the WordPress SEO plugin

      • Teodoro Lopez

        It works! Thank you! Great work!

  • Richard Bergstrom

    Hi there. First I wanted to say I really like the theme. However, I am having an issue.

    While it seems to work well on my computer, my Note 8.0 and my iPad 3, if I access the site on my Droid phone (HTC V One), the font size of the header/title is _huge_, basically three letters per line. Is there any way to change this?

    I do have the WordPress SEO plugin installed… maybe it’s somewhere in there that I change it?

    I’m also curious if there’s a way to modify the slider so that it doesn’t stretch out images horizontally, either by shrinking the slider or leaving a black background around the image. (Lesser priority)

    Thanks!
    Richard Bergstrom
    http://rockieszingers.com
    rockieszingers@gmail.com

  • Carl Ninian

    Hi! Great theme! I am just starting to take use of it.
    How do I change the color of the text? I can’t find the right files or sites.

  • polifreak

    When will you update the template to work on 3.8.2?

    • yoarts

      This theme is working fine with WordPress 3.8.2

      • polifreak

        There is an error when you click on a post….does not open when click on post title

        • yoarts

          This theme has been updated few minutes ago and this issue has been fixed! Please check in your dashboard.
          Btw, do you want to submit your website to our website list are using Flat WordPress theme? Just let me know your website URL!

          • polifreak

            Thanks for the rapid reply. I have the theme installed on two sites. On one of the sites, the featured images our not showing up on the homepage. Any idea as to why?

          • yoarts

            Enable featured image in Dashboard > Appearance > Customize > Archive Pages

  • http://plus.google.com/+jayrushing Jay Rushing

    Hi there… For my thumbnails to be properly sized (and to use the regen thumbnails plugin) I have to edit the code of the theme’s content.php from to and then it works just fine. Otherwise it is using the full size image displayed at the smaller size.

    Every time there is an update I have to manually redo this. Do you know of a way I can avoid having to do this?

    • yoarts

      Please using Child theme to do that customization. You can find the instruction here: https://codex.wordpress.org/Child_Themes

      • http://plus.google.com/+jayrushing Jay Rushing

        That solution would be simple and contained there if it were CSS or functions.php, but since replicating content.php in a child theme would override content.php from the parent theme, every update would require manual re-checking of the code and more work than just adding back in the ‘thumbnail’ argument.

        The solution I’ve found is through a child theme, but only adding a functions.php file that has set_post_thumbnail_size( 600, 350 ); in it to define the default post-thumbnail size since Flat uses the undefined default image.

  • nachomastr

    Hi, amazing theme thanks! I just got one quick question, the responsive layout while looking at it on my phone looks expanded. It doesn’t fit correctly. Could it be of the image sizes of the post? Your site looks great on my phone.

  • Sven

    Hey guys,
    I can’t find a documentation about the shortcodes for realizing buttons, frames etc. Where is it located?

    • yoarts

      This theme using Bootstrap Framework, so you can find the documentation about it here: http://getbootstrap.com

  • Patrick Andersen

    How can I change the Link-Color?

  • Jave

    hi,
    i’m sorry, i can’t find where to costumize de color of the menu
    i don’t have any option do do that