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.
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
- Includes a child theme you can use to start customizing your site and still be able to receive updates to the Flat Bootstrap theme.
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!
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
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.
Screenshots
Flat Bootstrap Demo, Download, & Support
More Information
Flat Bootstrap Child Theme
The Flat Bootstrap Child Theme is for users to be able to easily and safely 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. It is in a subdirectory though so it’s not active by default. Just copy it up to your theme root directory and make your changes there.
Flat Bootstrap Developer Theme
We have also written a child theme that is specifically for developers or power users. It is a “lean and mean” child theme that strips the theme back to “just the basics”, so you can build it up however you want. Since it is for developers, the Flat Bootstrap Developer theme is posted on GitHub.
121 responses to “Flat Bootstrap WordPress Theme”
Comments
Hi!
Mobile menu does not work with php8. Any solution?
I was finally able to migrate this site to PHP8. I think the mobile menu issues with PHP8 are from Bootstrap. You’ll need a newer version of Bootstrap 3.x. Check out my GitHub for an updated version. GitHub Flat Bootstrap Master
Tim, that is great. I also replaced the old Bootstrap with v3.3.7 and dropdowns are working again. Am now testing out the rest of the site for functionality. It’s a relief because I was not sure of any security/vulnerability issues with running the old Bootstrap. Thanks for taking the time to check it out.
I just updated Flat Bootstrap on GitHub to a version 2.0 that I’d been working on for a long time. This afternoon, I updated that version to Bootstrap v3.4.1. https://github.com/xtremelysocial/flat-bootstrap. If you check it out, let me know if you run into any issues. I’ll post this update to the WordPress.org theme directly, but it will take some time for them to review and approve it.
Great news, Tim. I’m a little tied up with other work but will definitely try out the Version 2 on GitHub; and report back. Very happy that you’ve got to this new version.
Hi Tim, I can’t figure out how to add comments to the bottom of each post in my Pratt theme even though I click on Allow Comments. I’ve tried adding Discus, but that code doesn’t work either. What am I doing wrong?
Hello! I love this theme but it has not been updated for 2 years. Any chance this theme will be getting an update?
I have a brand-new version 2.0 that I’ve been working on, but I have gotten super busy at my day job and haven’t been able to get through all the testing that I want to do on it. Are you most interested in updating the actual Bootstrap code itself to the latest version? I could consider a smaller “dot release” with that in it.
An update to the Bootstrap code would be great!
@TimNicholson Great theme. but dropdown menus stopped working recently. Had to use legacy jQuery to get it to work. Guess it has been 4 years since it got updated. Are you planning to do more or maybe suggest a very similar theme I could use instead? I’ll be happy to pay for the updated theme if it works with my heavily customised child theme.
Hi. Thanks for pointing out this issue with JQuery. WordPress has updated to a recent 3.x version of it that isn’t compatible with the version of Bootstrap 3 that my themes are using. It does look like the latest version of Bootstrap 3.3.7 supports JQuery 3.x. Bootstrap v3.3.7. I’ll look into updating just the Bootstrap JQuery to that version and see if it fixes the issue without breaking other things.
It seems to work! Menus are fixed. All I did was download Bootstrap v3.3.7 and replace Flat Bootstrap’s bootstrap.min.js with the newer one. I’ll need to test this more before issuing a formal update, but this should work for you for now.
Tim, that is great. I also replaced the old Bootstrap with v3.3.7 and dropdowns are working again. Am now testing out the rest of the site for functionality. It’s a relief because I was not sure of any security/vulnerability issues with running the old Bootstrap. Thanks for taking the time to check it out.
Hi Tim, nice theme… Another designer used your theme to create a site and i just want to remove the footer but i do not find a way to do it. This is our site: http://www.naturalwoodfloorstudio.com/ We want to remove the footer that says VIDA NATURAL, the whole light gray area. Thanks
Your site looks absolutely awesome! Would you mind if I actually featured it on this site as an example of what can be done? It looks to me that you have updated the footer to look the way you want. Check out the child theme’s functions.php for how to change the site credits programatically. It can also be done using CSS.
[…] Скачать WordPress шаблон […]
Hey there,
Just wanted to remark the font-awesome being enqueued with the current theme is out of date; it’s using 4.5 when the latest is 4.7. I’ve written a script to just grab the latest, is this something you could incorporate with the next update?
add_action( ‘wp_enqueue_scripts’, ‘enqueue_font_awesome’ );
function enqueue_font_awesome() {
wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css’ );
}
I’m glad you knew how to write a function to override where the fonts load from. WordPress.org won’t allow me to load from a CDN, so I will have to manually update the local files to the latest version.
[…] Info/Download View Demo Get […]
I just found that there can be issues using:
$dom->loadHTML(mb_convert_encoding($footer, ‘HTML-ENTITIES’,’UTF-8′));
I’ve changed the fix to use the following (in theme-functions.php line 352):
$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML(‘‘ . $footer);
libxml_clear_errors();
This seems to work.
^^^ ugh. Proper code is stripped out. See this for correct code/fix:
http://stackoverflow.com/a/37834812/3048619
@izabelcastrorodrigues Thanks for this fix. I was also having issues with character encoding in a footer widget. @Tim, please have a look at: http://stackoverflow.com/questions/3523409/domdocument-encoding-problems-characters-transformed for issues regarding DomDocument
I just installed Flat Bootstrap theme and setup Flat Bootstrap Child. Thank you.
When I upload a header image it will not display unless I turn on “Display Site Tile and Tagline”. But then the Site Title and Tagline display on top of the header image. Wondering what I’m missing?
I answered my own question by adding header.php to the child theme.
I would really like to center the navbar but I can’t seem to get the css right.
Hi author,
I had problems about encoding in footer. I fix the problem with this:
$dom->loadHTML(mb_convert_encoding($footer, ‘HTML-ENTITIES’,’UTF-8′));
file: (inc/theme-functions.php)
[…] Theme Homepage […]
Hi Tim,
I thought I could simply use bootstrap customizer (http://getbootstrap.com/customize/#grid-system) to set 24 column grid and use it in my child theme.
What do you think about this?
Hi Tim,
Thanks a lot for your work!
I’m currently using a child theme with Flat Bootstrap v1.9, but i’d need to switch to 24 columns bootstrap grid system. Could you suggest me a smart way to do it?
I thought I can find and replace classes in template files, maybe there are other ways…
Thank you so much,
Matteo
I’ve not heard of a Bootstrap 24 column grid. I would think that would be really, really hard to change over to. Unless someone has a version of Bootstrap that still includes all the 12 column grid classes and then you just change a few places where you want 24 columns. Do you mind me asking what you want this for? I’m thinking there may be easier ways to accomplish your goal rather than changing the whole fundamental grid system.
[…] Full Details & Download | Demo […]
Hello 🙂 I’m relatively new to WP and loving your Flat Bootstrap theme. I’ve started to customize and add custom CSS and have run into a problem using the horizontal rule . Is this the correct place to post my question?
Thanks!
I would have posted the question on the Flat Bootstrap page itself, but that’s ok. What are you trying to alter with CSS?
Hi,
I am using the Flat Bootstrap theme and have an issue where I have two H1 tags I want to get rid of – one is the Site Title and one says ‘Footer Menu’ – any ideas how I can get rid of these so I just keep the one H1 tag I want ?
thanks
John
Search engines like Google don’t mind multiple H1 tags, but if you would like to get rid of the one in the footer associated with the footer menu, you can edit footer.php. That H1 tag is there only for accessibility (screen readers).
Best Theme ever, thank you
A little question are you going to plan to make flatbootstrap 2 with bootstrap 4?
I have been following Bootstrap 4 closely. There are of course MASSIVE changes to even the core grid system, the spacing, etc. I have been working on another major version update to Flat Bootstrap (v2.0) that still uses Bootstrap 3. I’d release that first and then some bug fixes and possibly some minor enhancements. I’d LOVE to use the new Bootstrap v4 “flexbox”, but IE9 doesn’t support that. Also, its still in Beta and users of my theme have probably built page content off of v4. So there are major decisions to be made and major code updates required. I think I will need to leave the existing Flat Bootstrap at v2.x and release a separate version of it that uses Bootstrap v4. That would allow users to chose if/when they move up, but also then creates confusion and I lose download history, ratings, etc.
[…] Full Details & Download | Demo […]
Hey Tim,
First off, a big thank you for creating the Flat-Bootstrap theme, I can tell you I’ve used it as my base-theme to create over 20 websites for clients and while it took me a bit to get used to how it’s organized, I have to say once you get it, it works like a dream.
I just wanted to note that by default, the theme does not have post_formats turned on, even though you are calling it on the index.php file, under the loop:
get_template_part( ‘content’, get_post_format() );
Also I suggest that for the comments above, just adding a note about how to call that separate template using the name after ‘content’ and before get_post_format() (for example, I’ve edited this index.php and included a content-category.php template that helps me organize category pages so I don’t have to write if is_category() into all the other content pages).
get_template_part( ‘content’, ‘category’ , get_post_format() )
Thanks Tim! Excited to keep using your themes!
Thanks for the kind words! I did purposely use very strict adherence to the standard WordPress template hierarchy. It drives me nuts when themes (especially frameworks) try to “build a better mousetrap”. Although I do use template parts heavily to avoid code duplication. It’s always a balancing act.
I decided to have post formats turned off by default since I don’t (yet) have any special templates or CSS for them. I intended for child themes that do have support for them to set the list of formats in the $xsbf_theme_options->post_formats variable. To avoid confusion with the users, only the unique formats that the child theme actually supports should be listed.
I think you are suggesting that I include the category as part of the template call and that makes good sense. But if I don’t include a content-category.php will it then default to content.php? I’ll add this to my “to-do” list.
Hi, Brandon. My themes support drop-down menus (2 levels) out of the box. They utilize the built in WP custom menu system. You create the menu in WP admin and then assign it to the top nav menu location.
Hi Tim. I’m a software developer but completely unfamiliar with WP. I have a friend who is using WP and your theme, and she wants to make the main menu a dropdown. I’ve tried to navigate through the WP backend but I can’t determine if the theme itself isn’t designed to support a dropdown menu or if it’s something else. I know this is a really stupid question but my lack of knowledge of WP really makes something this simple rather confusing.
Hello everyone ! I’m using this theme for lots of website. He is very good, i like this theme very much but I have a problem with him. Only in the sidebar-footer,
Letters with accent does not display correctly. Someone know how to fix this problem ??
Thanks you in advance,
mat
It may be related to the problem posted directly before this one. If so, make sure you are on the latest version of Flat Bootstrap (v1.9).
Hi, first: great themes, easy to use and very developer-friendly! Thanks for offering them free, very much appreciated.
Second: there is one ugly thing in “xsbf_footer_filter” function, “$dom->loadHTML ( $footer );”. If the string $footer contains special characters (like German Umlaute) you get junk in your webpage. I added “utf8_decode( $footer )” to it and everything works perfect. Maybe a thing for the next update?
Btw., any plans for Bootstrap 4 already?
Are you using Flat Bootstrap v1.9? That does the utf8_decode() already.
// Use PHP to parse the DOM structure and count the number of widgets. Note that we // have to suppress errors because libxml doesn't recognize html5 tags yet. It still // processes them just fine, though. $dom = new DOMDocument('1.0', 'utf-8'); libxml_use_internal_errors(true); //$dom->loadHTML( $footer ); $dom->encoding = 'utf-8'; // fixes foreign language issues $dom->loadHTML( utf8_decode( $footer) ); // important; libxml_clear_errors();I’ve looked at Bootstrap v4. It has some pretty radical changes and its still in “alpha”. I’m trying to get them to change the way they handle “vertical rhythm” too because I don’t like it at all. So I’m going to have to potentially do overrides to that. They do plan to support BSv3 moving forward too (unlike when they went to 3 and stopped supporting 2). I don’t have any kind of schedule to support BSv4, but am aware its coming and thinking about it already.
Hi! I use flat-bootstrap and created a child-theme. When looking in the functions.php of the parent theme there is the following line (292 in my editor):
“wp_enqueue_style( ‘flat-bootstrap’, get_stylesheet_uri() );”
This means that “style.css” is ALWAYS loaded from my child-theme (because of get_stylesheet_uri()) . Shouldn’t it be “get_template_directory()” instead? Or am I getting something wrong?
Cheers!
Heiko
OK, sorry, my fault. In my “functions.php” I added the action with the priority of 20 like this:
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’, 20 );
which caused the trouble. Removing the 20 and everything works as expected.
Great, thanks for replying with your fix!
Hello
I am very happy with the flat-bootstrap
I installed a child theme
I would change such a parameter
flat-bootstrap/ css/ theme-flat.css
After multiple tests, nothing works, I can certainly do it, wrong
Where can I find a tutorial to explain the procedure
(Can not find the answer)
Thank you for the reply and for your work
Please check out How to Use our WordPress Themes and the Child Themes page on WordPress.org. It’s great that you are using a child theme as that is definitely what you want to do. But instead of copying down the theme’s CSS and editing it, simply put the styles you want to *override* in the child theme’s style.css.
Just a heads up… Flat Bootstrap v1.9 (the parent theme for Pratt) will be coming out very soon and I have made significant changes to theme-base.css, theme-flat.css, etc. You definitely don’t want to alter those files.
Hi thank you
If i understand,
I want to modify (override)
.content-header {
padding-top: 35px;
padding-bottom: 35px;
}
which is in theme-base.css
I just put it (modified) in style.css in the child theme
Correct?
Thanks again
Yes, exactly! CSS loads in order and whatever is last “wins”. BTW, Flat Bootstrap v1.9 is out now, so don’t update until you change the way your child theme works.
Thanks. We will look forward to the new release coming through. We really appreciate you looking into this. Andrew
Thanks for getting back to me. I have turned the sidebars back on; you can see the issue at http://analytics.org.nz/events/testevent/ Please let me know if we can help in any way. Andrew
At first glance, I thought it was the inline “float: right” (for the map and possibly that login section) was not playing nicely with Bootstrap’s grid system. However, since this was working for you in v1.7, but not in v1.8, I think it may be due to this change that I made. From the release notes:
“Previously on full-width page templates, we used javascript to move content from any plugins to the bottom of the page. For example, to push social sharing buttons below the content. In this release, we do that for all pages and articles, regardless of whether they are full-width or not. For example, social sharing buttons now get moved below the site index page content when using that page template.”
I’m thinking that it has to have something to do with that. For the next version, I’m going to rethink when and how I’m doing this. For now, I would use the suggestion above from lisajwells to turn off this functionality altogether.
Since you are using Flat Bootstrap, you can easily copy the /flat-bootstrap-child theme and edit it’s functions.php. Add this somewhere in there:
//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 turns off that particular functionality and should fix your problem. Please let me know whether that works or not. If this is causing problems with plugins, I want to rethink how its being handled.
I have just released a v1.8.1 that sets this functionality back to the way it was in v1.8 as a quick fix. I’ll be addressing this issue more holistically in v1.9. It will take a while for WordPress.org to approve the new version, but if you want it now you can get it from the Flat Bootstrap github repository. Its in the regular “master” branch.
PS: We have temporarily removed the widgets etc from the Events page, but will put them back if that helps with your debugging.
I have just updated to v1.8, and on our events pages (created by the Events Manager plugin), the right-hand-side widget area (Meta etc) have all moved to the bottom of the page. (The other non-events pages are fine). You can see this at http://analytics.org.nz/events/auckland-11-march-how-data-and-analytics-are-transforming-new-zealands-public-sector/ This used to work fine with your theme. Any suggestions? This happens on Firefox and Chrome. Thanks for a great contribution – we really like this theme. Andrew
Thanks for your kind words! I am working on some changes as to how the sidebars are called (by ID instead of Name, so as to not cause problems with non-English sites). I’d like to understand what’s going on here to make sure the next version (v1.9) doesn’t have any issues at all with sidebars.
I am helping out a friend who had someone else set up his website.
He is looking for some changes, and I am having some difficulties with the following:
1.) Adding a logo to the navigation/menu bar.
2.)The header photos are huge and he wants the smaller. I have found how to make them smaller – and he also wants different images on each page – that I figured out to hide the header. However, it leaves behind a blue bar that I would like to remove.
3.) Somehow on two pages different images were added to a couple of pages, but the title of that page is coming through the image. That needs to be turned off. Probably with the hide image. However, I can’t find where he loaded those other images as they stay on even though I hide the header. I did not find their reference in the pages code.
4.)Last but not least – he has the menu set up and sub-pages with that page as its parent, yet in the menu – there is no drop down menu showing for those items. It appears to be set up correctly.
Any help would be appreciated.
Nicole
I changed the sites identity and did not like what it did so I deleted it, yet it is not removing from the page. Both on the navigation bar and as background text on the header image.
Which theme are you using?
(1) Flat Bootstrap is pretty different than all my child themes when it comes to the site title and description. I’m looking to add support for the Jetpack plugin “site logo” feature, although I am waiting a bit for it to “mature” and be “standardized”. For now, I’d just use CSS or adjust the header.php to add a site logo.
(2) My child themes (Link, Spot, Pratt) all allow you to easily have a different “page header” (within the theme’s PHP and CSS its really a “content header”). Just add a different “featured image” to the page that is at greater than 1170px wide and it will be used as the large image header. Of course as you have found, you can adjust the size and cropping with CSS .
(3) I don’t know what you mean by adding two different images to a page. WordPress only allows one “featured image”. If your featured image is >1170px wide, its assumed you want it stretched up to 1600px and have the page title (and my themes support a subtitle) overlaid on top of the image.
(4) My themes all display a few top-level pages by default, but they are really designed to use WordPress’ custom menus. Have them create a 2-level menu in WordPress and assign it to the top nav bar.
[…] 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.
Second Child Theme Not Showing Up On Dashboard
Hi,
I’m trying to create a second child theme with the Flat Bootstrap theme. I was successful in creating the first child theme that was provided under the flat-bootstrap-child directory. I am trying to create a second child theme calling the directory flat-bootstrap-conference. I have changed the theme description on the style.css file with the new Flat Bootstrap Conference theme name but it does now show up on my Themes dashboard. I’ve created multiple Child Themes using Twentyfifteen but unsuccessful with using this theme. Hope someone can help me with this.
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
I’m looking into your Flatbootstrap and Spot theme again. I miss the flexibility of the personalisation which your theme offers.
I want to change the green colors which seem to be standard (Flat Bootstrap/Spot), but I can’t find them in any of the stylesheets. In addition, will the colors in general be built into the customiser at some point?
According to the WordPress codex “@import” is no longer “best practice”. Will that be changed in the child themes?
Which green colors are you talking about? Some are in the custom bootstrap.css, some are in theme-flat.css. In future versions, I’m looking to put even more “core” styling into bootstrap.css, limit theme-flat.css to my additional CSS (like my color palette and additional buttons, etc.) and put more of the font selection and changed button and link colors into the Flat Bootstrap style.css.
Yes, I’ve started upgrading my child themes to use PHP (functions.php specifically) to load the various stylesheets as opposed to using @import in the CSS. I’m making some changes to Flat Bootstrap v1.9 to make it a little easier to override just the stylesheets, just the javascript, or just the fonts.
I’m trying to keep theme options to a minimum and have most things “just work” and leave things like color changes to CSS overrides since it’s usually pretty easy to do with a few lines of CSS.
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.
Hi
I created a website with your theme and it looks great but I can’t change or get rid of the page bottom. I read how you say to get rid of them but it doesn’t work. Can you help. Thanks
oh, excuse me, i get it now …
theme defaults to show widgets if no other widgets have been specifically assigned ..
cheers
hi,
thanks for a nice theme with a lot of options.
I’m trying to use widget login plugin but it doesn’t seem to work. anyone else have this problem?
theme- 1.6 , wordpress 4.3.1
thanks
Hi Tim, indeed, single.php was messed by a plugin that I used and I had since solved the problem. In short, the plugin defined another custom directory for it’s custom post type also called single-events.php and overrides the theme it. Otherwise, singles-my_custom_name.php works as usual. Thanks for the great starter theme and happy hacking!
I’m using 1.6 and code tags do not get formatted correctly. There is an extra border especially when using markdown which forces a tag. I corrected it by adding a border none style to “pre code” . There might be a better way. Maybe include a fix in the next version?
I’ve noticed that too and just looked into it and I think I have a fix. For now, you can use the pre tag instead of code. I’ve tried to style them to look the same anyway (I don’t like the red coloring for code). Or in theme-base.css you can comment out the word-break and word-wrap as they are already handled earlier in the file.
/* Style code tag like pre tag so its white instead of red */ code { /*word-break: break-all; word-wrap: break-word;*/ color: #2f2f2f; background-color: #f5f5f5; border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }This fix will be in the next update (v1.7). Thanks for having me look into it deeper.
Hi, so for default WP install, single post is rendered via single.php. If I have a custom post type called “events”, then I would duplicate a file called single-events.php. But for Flat, I can’t seem to achieve that. Any clues?
Yes, its supposed to work that way. That part is actually handled by WordPress core itself, not the theme, so I can’t imagine what could be wrong. Meaning, WordPress itself is supposed to look for single-events.php and load that, otherwise it will load the theme’s single.php. Could it be that your custom post type is really called “event” and it should be single-event.php?
The only thing I can think of in the theme itself that might mess with which template gets loaded is if you’ve flagged the post to be full-width. Then I trap the WordPress core logic and load single-fullwidth.php instead of single.php. But as long as you don’t check that box, then which template gets loaded is untouched. You can look at the function xsbf_single_template() in /inc/theme-functions.php to see what’s happening.
Hello I am using the Flat Bootstrap theme. I love the feel of the theme. However, there are two things that bother me about the version I have (v1.5). When viewing it on a mobile device, I would like to disable the default mobile view. Also I do not want the “Call to action” sidebar at all. I found out how to make it invisible, but I would like to remove it permanently. I am totally new as a web developer and could use some help on this. Thanks.
I’m not sure what you mean by disabling the default mobile view. There really isn’t a mobile view as the theme is responsive, meaning it adapts to different screen sizes. For the “Call to action” widget, that is just a sample. Add a blank text widget to the Page Bottom widget area and it will go away. If you want to be able to choose to hide certain widgets on small screens, you can use a plugin such as Simple CSS for Widgets and use Bootstrap’s built in classes for that. See http://getbootstrap.com/css/#responsive-utilities.
placing a blank text widget doesn’t work. “call to action” widget doesn’t disappear. Also text written in that textwidget is not shown.
Put one or more spaces in the text widget. That tells the PHP code that there is something in it and it should be displayed, but the user won’t see the spaces. Any actual text you add certainly should be showing. Can you give me a link to your website?
This is a nice theme but having to add an empty widget to get rid of something no one will want on their site is kind of silly. Having a real call to action widget that could be added would probably be a better option.
I agree. I did it this way primarily so the WordPress.org directory could show some semblance of what the theme might look like. Since its a flat theme, the colored sections and buttons are what give it the look and feel. WordPress doesn’t give us any way to include sample data, for a widget or otherwise. They also won’t allow inclusion of an actual widget in a theme.
It has been suggested the problem is caused by WordPress being in a separate directory /assets/ rather than in the Home directory. Since the behavior is the same on two different hosting platforms that sounds a real possibility. Any comments?
I suppose that’s possible, but I do use the built-in WordPress functions to specify where to look for things rather than hard-coding locations. My test site is in a subdirectory like you have as well and I don’t have any issues. Have you tried the Customizer with the default WordPress theme to see if that works?
On both my current site and now my new site on a different hosting platform, the Customizer (from Appearance / Header) displays then flashes on and off, as if it is redirecting somewhere and having trouble doing so. In this state I cannot do anything with it. I’ve had my programmer look at it and it does the same for them too. Both the Flat Bootstrap Child Theme and WordPress are up to date.
Can anyone tell me what is wrong and how to stop it flashing?
Thanks.
Has anyone used Bootstrap to play audio with playlist? I’m using Flat Bootstrap Child theme.
Hello Tim, I’ve been working on an implementation of the Flat Bootstrap Child Theme and it is working quite well for our needs with one exception. The integration with bootstrap on the menus. After reviewing functions.php and inc/bootstrap-navmenu.php. Can you recommend a way to only use the 0 level link/dropdown behavior to only be used on smaller screens? On larger screens that are not touch – it would be nice to still support hover for dropdowns and a linked parent nav item to remain a link.
I have already reproduced a significant portion of functions.php to override the method for loading Font Awesome – we opted for a plugin to use a CDN. And I began to add the functions and the includes to the child theme – but then why am I using a child theme at this point 😉 So I thought I ‘d see if you might have an idea.
Thank you.
I’ve thought about having drop-downs trigger on hover, but haven’t made it a priority. I’m trying to keep the themes as close to pure Bootstrap as possible and their devs are totally against it. I think it would be easiest to actually stop using the bootstrap nav walker and just go back to straight WordPress menus. Its a one line change to header.php and then adding whatever CSS you want to handle the menus.
[…] turned to a few of my old standbys to get this done. The theme remains Flat Bootstrap. The plugins pulling the majority of the weight […]
Hi, I’m all new here and looking for support to the Flat Boostrap theme. I have translated the PO file; however not everything can be translated. I’m missing the “Read more” – where can I translate that?
Hia! Thanks a lot for your work, i’m currently using the Flat Bootstrap v1.5 theme, and found out that there is a problem with submenus in theme, in some reason, it isn’t dropping down on hover or when clicked( can u help fixing this? Thanks!!
The theme is based on Bootstrap which is open-sourced by Twitter. Their opinion is that with widespread mobile use, hover menus are outdated. I’m not saying I agree, but I’m trying to keep my theme 100% compatible with Bootstrap. If you really want traditional hover menus, I could point you in the right direction. Look at header.php and you’ll see where I’m calling a custom Bootstrap-specific callback. If you change it to the default (can blank out the callback), then the normal WordPress menu structure will be output. You’d have to code up all the menu-related CSS yourself, though.
[…] Flat Bootstrap […]
Can you tell me how to change the color of the top menu.
[…] 次に試してみたのが、「Flat Bootstrap WordPress Theme」です。 早速インストールして、表示してみた。 英語だとかっこいいけど日本語だとちょっとスタイリッシュさに欠ける。 タイトルの文字がやたらでかく感じた。ただこれくらいなら、ちょっとCSSで調整すれば良いだけだからいいかなと思った。 後フラットデザインなのはやっぱり良かった。 それでコレに決めようと思ったんだけど、記事を読むと若干の読みにくさを感じた。 もともとの記事の構成とか見出しにデザインしてないのとかもあるが、このテンプレートの拝啓が灰色でかつ文字の色も「＃５５５５５５」になっていたのでコントラストが弱かったのかとも思った。 このテーマには推奨のプラグインがあった。 […]
[…] very cool free one I’d recommend would be “Flat Bootstrap” by Xtremelysocial. It has a flat design that is what is cool now. It’s also fully […]
[…] que estás leyéndome, buscando una estética limpia, temporalmente gracias al “theme” Flat Bootstrap de XtremelySocial, hasta que tenga la suficiente destreza creativa para crear mi propio […]
[…] Flat Bootstrap […]
[…] Flat Bootstrap […]
[…] Flat Bootstrap […]
[…] Flat Bootstrap: für die Social-Media-Liebhaber […]
[…] Flat Bootstrap: a Modern and Fully Responsive Theme for Social Sites […]
[…] Flat Bootstrap: a Modern and Fully Responsive Theme for Social Sites […]
[…] Flat Bootstrap WordPress Theme […]
[…] Flat Bootstrap Child Theme […]