Download WordPress Flat Theme – HTML5 & Responsive – Free Bootstrap Framework – Beautiful Website Template

Download WordPress Flat Theme – HTML5 & Responsive – Free Bootstrap Framework – Beautiful Website Template

Preview WordPress Flat Theme – HTML5 & Responsive – Free Bootstrap Framework – Beautiful Website Template

Flat Theme is a very beautiful, Multipurpose and Responsive HTML5 website template built using Twitter Bootstrap 3.0 Framework. It is one of the powerful and Responsive Web Designed template developed by ShapeBootstrap.

About Us Page Demo
Mobile View
Shows how Tags and Comments are used in Blog Page
This is what we do or services page style

Footer that displays in each page

There are tons of custom post type for Accordion, Tab, Alert, Slider, Columns, Icons, Services and many more.   Theme Options: Flat Theme is the first ever free responsive WordPress theme that comes with tons of theme options which allows to change the logo and favicon. Options to change header background color, text color, link color and link hover color is also available. Fonts can be changed from the Google fonts list. There are some more options available like contact page settings, change admin logo, Google analytics and so on.

“Flat Theme” Documentation


Download “Flat Theme” and save it to your local computer.
Install the theme from your WordPress Dashboard. Or, extract and copy the “flat-theme” folder to the /blog/wp-content/themes folder.
Now go to “Themes” from your WordPress dashboard and activate the “Flat Theme”.

Important Informations

Google Fonts – Flat Theme useds Roboto font by default for our “Flat Theme”. It is a free Google font. This theme supports above 650+ Fonts.

Flat Theme Features

  1. 100% Search Engine Optimized Premium Quality Theme 
  2. Fully Responsive Layout-Desktop,Tablet,Phone etc. 
  3. Built with Bootstrap 3.0 
  4. Fit for Blogging, Portfolio and Business 
  5. Custom Post Type Carousel Slider, Portfolio, Pricing Table, FAQ, Services, Tabs, Accordions,
  6. Testimonials added. 
  7. Language Translation Supports 
  8. Shortcodes- Font awesome Icons, Buttons, Accordion, Columns, Button, Alert, Blocknumber, Block, Dropcap, Testimonial, Tabs and much more. 
  9. Valid XHTML and CSS with jQuery. 
  10. Isotope Portfolio Filter 
  11. Rich typography 
  12. Theme Options for changing site layout and different settings. 

Importing The Demo Template Data

1. The sample-data.xml file is included within the Download package which will be used to import the content.
2. Navigate to WP Admin -> Tools -> Import.
3. Select and install WordPress importer.
4. Select the sample-data.xml file and upload it. It will in few minutes install and upload all content with images.

Importing The Demo Template Data

5. Now navigate to WP Admin -> Appearance -> Menus page and select the newly created menu and assign it to “Main Navigation” location.

6. Import the sample-data.xml file from Tools>>Import>>Check the “Download and Import Data”.

Widget Settings Import

7. Import the widgets.json file from Tools>>Widget Settings Import for import the theme default widget settings. A plugin is required named “Widget Data – Setting Import/Export Plugin” to import widget settings.
We have included the XML file from our demo named sample-data.xml, this allows you to quickly set up your “Flat Theme” as same way our demo is set up. Please note, the XML file includes all images and the slider data. Instructions on how to do this are below.

8. Default Theme Option settings are saved on theme-options.txt file. Copy and paste the theme-options.txt data and go to Appearance>>Theme Options>>Backup Options now click Import Options.

Homepage Settings

Navigate to Menu Settings -> Reading and set “Frontpage” template from the dropdown menu as Front page.

#sp-home” style=”margin-left: auto; margin-right: auto;”>

WordPress Reading Setting

Slider Settings

Slider Menu

Developer have created few Post Types for this theme.To set up a Slider Go to WP Admin Dashboard. See a Menu named “Slider” is a post type, click Add New. Post Type “Slider” supports- Title, Editor, Thumbnail.

Slider Settings

Slider has few settings with Background image, Button Text, Button URL, Boxed Styling, Positons-left or right. You can set Videos (Youtube, Vimeo) also. Developer have done some special works with the Slider. See the output of the slider:

#spsliders” style=”margin-left: auto; margin-right: auto;”>

Output – After Using Slider

Slider Controllers automatically increased with the number of Slider Posts.

Blog Page Settings

If you are running a blog and wants to show in a separate navigation menu instead of showing in the Homepage. Then create a new page, named it Blog (whatever you want). Then go to Appearance->Menus-> Select the page where you want to show your Blog Navigation.

A Blog Page

About Us / Our Team Page Settings

Create a new page with default template and name it About Us/ Team page. If you are downloading our Theme package then you will be found all demo texts and Data in a package. We have build this WordPress Theme based on Twitter Bootstrap Framework. If you want to get some extra features like Our Team in Demo. Then place these codes in your Editor in Text mode. You should some basic knowledge on Twitter Bootstrap. If not then please download our Quickstart Pack and edit the texts and images.

Our Team Example Page

Team section will be created by “Team” Post type. You can see Team Post Type from above.

#teamadmin” style=”margin-left: auto; margin-right: auto;”>

Creating a Team Page

From above we are seeing that there are four team members. This “Team” post type, we have exported by shortcodes. Now, go to your Team page and see in the Editor there is a Shortcode button. Click this and select the Team from Post Types.

Starter Shortcodes

Pricing Page Setting

Create a new page named it “Pricing”, leave it in default template.
Pricing Tables Post Type: Create a Item and name your pricing table column. Pricings settings will be like below:

Price Settings

Setting up Pricing Table is similar like Team Page. Select the shortcode button from the editor in your Pricing Page.


Flat Theme supports custom WordPress menu with two level or three level dropdown menu support.
To setup the menus, navigate to Apperance > Menus page. Enter a name for your menu and add links to the menu by using the options given on the left sidebar. You can manage your menus using the drag and drop functionality. After setting up your menu, select the menu you just created from the theme locations dropdown box and hit the “Save” button.

#menu” style=”margin-left: auto; margin-right: auto;”>

WordPress Menus

Select the menu location from Manage Locations.

#menu-settings” style=”margin-left: auto; margin-right: auto;”>

Manage Locations

General Settings

In general section we have given options like- Favicon upload, Your own Logo Upload (Logo Hide/show option), Apple Icon and Theme layout- Full width or Boxed layout.

#general” style=”margin-left: auto; margin-right: auto;”>

General Settings

Header and Footer

You can change your header background color. In the footer section you can show or hide your own copyrights. Google analytics section has been given by default.

#headerfooter” style=”margin-left: auto; margin-right: auto;”>

Header and Footer


You can show Breadcrumbs Title and subtitle from Blog section. Author BIO can be show/hide from single post. From page, comments can be show or hide. Also excerpt length can be set.

#blog” style=”margin-left: auto; margin-right: auto;”>

Blog Title


Link color and Link hover color can be changed from Styling Options. You can also change Body Background color, Body font color, font style and Heading Font.

#styling” style=”margin-left: auto; margin-right: auto;”>

Styling Options


Contact section is more dynamic as you want. You have to insert your Location (City/State and Country). You can also customize the height of your Google map location. Finally insert your email address. All the E-mail functionality done in back-end.
Create a Page and named it “Contact US” and choose “Contact Form” template. That’s it.

#contact” style=”margin-left: auto; margin-right: auto;”>


Advanced Settings

Advanced section can do some advanced features like- Exclude Pages from Search, Breadcrumbs, Allow comments on Pages and WP Admin Logo Login.

Advanced Settings

Post Thumbnails

Flat Theme uses the WordPress Post Thumbnails function, this way you can upload one image and WordPress will automatically re-size it to all the different thumbnail sizes.To set a post thumbnail for your post, go to Posts > Add New > Set Featured Image > the normal upload box will now appear, upload your image and click “Use as featured image”.

Sources and Credits

This Flat Theme uses the following images, icons or other files as listed.


WordPress Download:

Leave a Reply

Your email address will not be published. Required fields are marked *