Flat Bootstrap WordPress Theme
Modern, responsive, “flat” style theme
Full-width Images and Sections
Set full-width “featured images” and use the included color palette to create stunning colored horizontal sections for your content.
Tons of “shortcodes” for your page content
Columns, buttons, icons, labels, badges, tabbed and collapsible areas, progress bars, carousels (sliders) and more!
Flat Bootstrap is a modern, fully responsive, “flat” style theme with a nice color palette, big full-width images, and full-width colored sections.
It automatically adapts for desktops, tablets, and phones. It is based on the standard WordPress starter theme (_S) and the Twitter Bootstrap CSS framework. The theme was inspired by the HTML/CSS themes from Blacktie.co and color schemes from Designmodo.com’s flat UI.
Features include a mobile navigation bar, multiple columns (grid), buttons, icons, labels, badges, tabbed content areas, collapsible content areas, progress bars, alert boxes, carousels (sliders) and much, much more. This is a theme for both users and theme developers with lots of features but without the bloat.
Why We Wrote this Theme
There are thousands of WordPress themes and dozens of Bootstrap themes, but almost all of them are designed with a maximum width. Most of the Bootstrap themes are also only for developers, not users, with just the basic ugly Bootstrap sticking out like a sore thumb. Most of the Bootstraps themes aren’t based on a core WordPress theme either, so they can be difficult to figure out how to adjust the styling.
We developed this theme to be unique in these key ways:
- It is based on the WordPress core “starter theme”, so you already know how to style it and override templates and such in a child theme without learning anything new!
- It is based on Bootstrap for cross-browser capability in a fully responsive theme with tons of components that you can use in your content, such as buttons, navbars, sliders, etc.
- It is designed to be a modern, “flat” (or technically “almost flat”) theme with full-width colored sections and full-width images. This really brings your content alive and allows the reader to focus on that content instead of the theme itself.
- Its open source AND completely free. Most themes like this are considered “premium” themes and cost money. Our hope is that user’s will love it and theme developers will start using it as a core “framework” as well.
Theme Features
- Fully responsive theme that changes layouts for desktop, tablets, and phones
- Modern, “flat” style theme with beautiful color palette
- Big full-width featured images on any page
- Full-width colored sections
- Hundreds of icons from Bootstrap and Font Awesome
- Variable column footer with 1 to 4 columns
WordPress Features Supported
custom-background, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, fluid-layout, full-width-template, left sidebar, light, one-column, responsive-layout, right sidebar, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Page Templates
- Full-width page with colored page header
- Full-width page without page header
- Full-width page with three (3) most recent posts (in columns on desktop)
- Page with right sidebar (default)
- Page with left sidebar
- Page without sidebar
- Site Index with search, pages, categories, tags, and recent posts listings
We’ve even included the ability to have individual posts be full-width as well.
“Shortcodes”
Our “shortcodes” aren’t really shortcodes… you simply use the standard Bootstrap markup, such as < div class=”whatever”>. If you really like shortcodes instead, you can download either of these plugins. They both work just fine with this theme.
- Colored buttons
- Colored message boxes (alerts)
- Tabbed content areas
- Collapsible content areas
- Sliders (carousels)
- Everything else that the Bootstrap CSS framework has to offer!
Demo and Download This Theme
Demo this theme Demo Flat Bootstrap Theme
Download this theme from the WordPress.org Theme Directory Download Flat Bootstrap Theme
Flat Bootstrap Child Theme
Allow users to customize the theme
Changes with CSS
Override background colors, link colors, etc. easily with a CSS file.
Changes with PHP Code
Use filters to change more significant aspects of the theme features
The Flat Bootstrap Child Theme is for users to be able to easily customize the theme.
It includes a stylesheet (style.css) for you to override or add CSS styles. It comes with a functions file (functions.php) in case you want to modify any theme functions. You can also, of course, copy down any of the page or post templates from the parent theme and modify them within your child theme. This way you can still receive updates to the parent theme for bug fixes and new features.
This child theme is included directly in the Flat Bootstrap WordPress theme. Just copy it up to your theme root directory and make your changes.
Flat Bootstrap Developer Theme
Strips out all the “extras” so you can style it up however you want
Minimal CSS Styling
CSS is stripped down to a minimum
PHP Stripped Down to a Minimum
Several PHP functions aren’t loaded, Font Awesome is removed, etc.
Flat Bootstrap Developer is a child theme for Flat Bootstrap that strips out all the “extras” so your theme is “light” and you can style it up however you want.
The child theme includes a style.css and functions.php to remove most of the theme’s extra features, javascript, and styles. Specifically:
- style.css does not include theme-specific styles from the parent theme
- functions.php removes or changes the following theme features
- Removes the custom bootstrap CSS and replaces it with the core Bootstrap CSS from the CDN
- Removes our theme-flat.css stylesheet that has the colored sections and extra buttons in it (btn-hollow and btn-transparent)
- Removes font-awesome.css (but Bootstrap Glyphicons are still there as they are used by the theme itself)
- Removes jquerymobile.js (small custom version) and our theme.js that triggers swiping in carousels on touch screens
- Loads only the required include files, which are for template tags, and adding Bootstrap to the theme.
- Does not load includes for the theme customizer (custom background, header, etc.), Jetpack continuous scrolling, keyboard navigation on attachment image pages, “extras” included in the TwentyXYZ themes, or plugin recommendations.
- Changes the site credits a bit, just to show how to override any function in the theme, both in the main functions file or in the included files.
Since this theme is for developers, we are hosting it on github. Download Flat Bootstrap Developer Theme
92 responses to “Flat Bootstrap WordPress Theme”
[…] Flat Bootstrap WordPress Theme […]
Hi Tim. Just updated my parent theme, Flat Bootstrap, to Version 1.8.
I’ve got a custom loop for one of my page templates that displays all posts in a certain Category.
“`have_posts() ) : while ( $whitecollar_query->have_posts() ) : $whitecollar_query->the_post(); ?>
<a id="notable-“>
“`
Since the update, it always adds a new empty container after the second post, and then goes on and displays the rest of the posts. Here’s a screenshot of my page where you can see the resulting gap in the posts:
http://grab.by/OhEm
It seems that this is coming from functions in the theme-functions.php: xsbf_add_container and xsbf_end_container.
Do you think I can safely delete these functions in the parent theme, or even better, turn them off somehow in the functions.php of my child theme?
Thanks so much.
Sorry. The markdown formatting I tried for the code above was a real fail. It’s not even all there. Please ignore. I think it’s a pretty standard loop.
Can remove these new functions like so:
//Remove a function from the parent theme
function remove_parent_filter(){ //Have to do it after theme setup, because child theme functions are loaded first
remove_filter( ‘the_content’, ‘xsbf_add_container’, 5, 1 );
remove_filter(‘the_content’, ‘xsbf_end_container’, 1999, 1 );
}
add_action( ‘after_setup_theme’, ‘remove_parent_filter’ );
That is exactly the proper way to do it. Thanks for taking the time to post the solution and bringing it my attention. I’ve got some major reworking of things going on now and I’ll consider when and how that feature is implemented. It’s really there for certain page templates, such as the site index, to move “after content” stuff to the end of the page.
Just updated to 1.7 (from 1.6 which did not error) and getting the following error in the footer:
Warning: DOMDocument::loadHTML(): Tag aside invalid in Entity, line: 1 in /wp-content/themes/flat-bootstrap/inc/theme-functions.php on line 335
Uh oh, not good. Is this your production site? Because usually production isn’t set to debug mode. But regardless, it needs to be fixed. I’ve done that for the next release but didn’t realize people would have debug mode on. Here is the fix within /inc/theme-functions.php. Notice the lines added before and after
$dom->loadHTML( $footer );// Use PHP to parse the DOM structure and count the number of widgets $dom = new DOMDocument('1.0', 'utf-8'); libxml_use_internal_errors(true); $dom->loadHTML( $footer ); libxml_clear_errors();What I did was improve the method for determining how many widgets were added to the footer. But the PHP’s libxml doesn’t understand HTML 5 tags. It works just fine with them, but spits that stupid error. Those two lines suppress it. Hopefully someday the function will be enhanced to allow you to specify that HTML5 is valid and have it not kick errors.
I’ll probably issue a v1.7.1 quick fix instead of waiting for v1.8 to be completed. Thanks for pointing this out quickly.
Done 😉 At least as far as posting to github if you want to grab it from there. I merged the fix back into the master branch. Flat Bootstrap on Github. I’ll upload the update to wordpress.org in a little while.
Tested the master branch version 1.7.1 OK.
Has the WordPress download been updated? I have just installed the 1.7 update and I’m getting 3 of these errors in the footer.
I was almost ready to release v1.8, so uploaded that on Friday. It hasn’t been reviewed yet by the WP team. In the meantime, you can get v1.7.1 from my github to remove the errors.
I put further info here
https://wordpress.org/support/topic/widgets-problem-with-flat-bootstrap-theme
You are so awesome for finding that and commenting on how to fix it. I definitely would like to leave the sidebar names translatable, so what I’ve done is update all the calls to load the sidebar to use its “id” instead of its “name”. So “sidebar-1”, “sidebar-2”, etc. I would love to change the id’s to something more meaningful, but then everyone would lose their widget settings. So I’m leaving them the way they are. This fix will be in the next release!
I found the problem
It’s a problem with the internationalization (I’m using Spanish version).
the register_sidebar function is using:
‘name’ => __( ‘Sidebar’, ‘flat-bootstrap’ )
while the template pages are this way:
if ( ! dynamic_sidebar( ‘Slidebar’ ) ) : ?>
That results in names discrepancy.
So if I apply interationalization in both places, it also works:
if ( ! dynamic_sidebar( __( ‘Sidebar’, ‘flat-bootstrap’ ) ) ) : ?>
This helps as a refference:
https://codex.wordpress.org/Function_Reference/_2
I had a tough time trying to get the widgets working within your theme.
If I switched to another theme, the widgets worked just fine, but with yours, only the default widgets were shown, no matter the changes I did in the admin widgets section. Also, the “widgets customizer” just thrown a message that there were no widgets areas available.
Finally, I discovered that if in the code I changed the widget areas names for the ids, it worked!
Example (in sidebar.php)
Instead of
I need to put
It seems very strange to me that it seems that no one else is facing this problem.
I’m using WordPress 4.4.1
There is nowhere to add the screenshot here.
I’m a bit confused. Can you post a screenshot?
Thank you for your answer. I did that. There are 2 footers. The first one i got rid of but the second doesnt change no matter how many footer widgets i add.
Go to customize and then the widget section. Add a text widget to the footer with no content. The footer will disappear.
You must log in to post a comment.