We’re calling this the “spring cleaning” edition and for good reason. Well, of course because it is spring, but also because this version focuses on both cleaning up and updating the templates, functions, and CSS as well as allowing for more varied themes in the future.

The child theme has been updated to include some of the common user requests as well. Jetpack Testimonials are now displayed better and Jetpack Portfolio items can have a subtitle. All this has been done with the intent to cause little no disruption to existing child themes. However, if you have created your own child theme, you should test it out thoroughly.

Flat Bootstrap WordPress Theme Screenshot

Flat Bootstrap v1.9 Release Notes

“Back End” Updates

  • Updated all components, including Bootstrap, Font Awesome, and html5shiv (for older browser compatibility) to the latest versions.
  • Refactored the CSS to more easily allow child themes with different typography and overall styling. We added table of contents to each CSS file so its easy to see and search for where various classes are. For example, those related to “Posts and Pages”. Specifically these changes were made to the CSS stylesheets:
    •  Several styles were moved into our custom bootstrap.css. This reduces the size and increases performance a bit.
    • Many styles were moved from theme-flat.css to either theme-base.css or this theme’s style.css. theme-flat.css now only contains enhances to Bootstrap so developers and power users can better pick and choose which of the theme’s stylesheets to include in a child theme.
  • Similarly refactored some of the functions in functions.php to allow fonts and scripts to be more easily overridden in child themes. Specifically:
    • Rewrote xsbf_scripts() to now have 3 separate functions within it: xsbf_load_fonts(), xsbf_load_css(), and xsbf_load_js(). This allows for finer granularity in overriding these things in child themes. However, the original xsbf_scripts() function is still used as a wrapper for these functions in case anyone completely rewrote that function in a child theme.
    • Changed the xsbf_load_includes function to use an array of function names to include and loop through them instead of having to have code to load each one individually.
    • Changed the sidebar filters to always fire, even when the widget area doesn’t have any widgets. This allows for “samples” or “defaults” to be displayedby child themes until a user adds some of their own widgets (or removed completely). This relates to the functions xsbf_home(), xsbf_pagetop(), xsbf_pagebottom(), and xsbf_footer().
    • Removed variables and functions that we have deprecated in earlier releases to streamline the code. Specifically:
      • $theme_options variable (use $xsbf_theme_options instead). This is most important for child themes to use the right variable for overrides.
      • All background colors from the color palette that weren’t prefixed with “bg-” are removed to avoid conflict with plugins. Example: You can no longer specify just “white” or “blue” background colors. Instead use “bg-white” or “bg-blue”. Note that color-white and color-blue, etc. for font or icon colors are still active.
      • Removed function xsbf_theme_preview(). WordPress.org didn’t want to allow this function. (That’s why we just display sample widgets if no widgets are defined in that particular widget area)
      • Removed two functions no longer used since WordPress put the custom header image and custom background image functions into the Customizer instead of separate admin screens. The functions removed are xsbf_admin_header_style() and xsbf_admin_header_image(). These functions will also be removed from the various child theme’s functions.php file as well when they are updated.
      • Removed two more functions, xsbf_theme_directory() and xsbf_theme_directory_uri(), because we never implemented them and decided not to mess with WordPress’ logic around loading template files.
  • Simplified the content-header.php by leveraging new WordPress v4.3 the_archive_title and the_archive_description functions. No more complicated code to check titles for post types, post formats, etc. Filters are now used in /inc/jetpack.php to override what displays for Jetpack Portfolios and Testimonials as opposed to cluttering up the core theme template files.
  • Updated theme functions.php file to only load /inc/jetpack.php if Jetpack is installed and activated. Within jetpack.php only add logic around portfolios and testimonials if that particular custom post type has been activated.
  • Removed the function from functions.php that handled embedded video sizes. WordPress now includes even better logic in core.
  • The scroll-to-top link that is displayed when the user hasn’t added their own custom footer menu now uses Bootstrap’s included font icons (glyphicons) instead of font-awesome. All other font icons in the theme were already working this way. Now if you want a child theme with a different icon set, feel free to skip loading font-awesome.

“Front-End” Updates

  • Strengthened the logic around moving plugin content to the bottom of the page. This is now done for pages with sidebars instead of just for full-width page templates, but the logic is much improved to minimize conflicts with plugins. This is done primarily for plugins that add content after the main page content, such as social sharing icons.
  • If you use our “sections” CSS class to create colored sections with top and bottom “white space” (padding / margins), you’ll notice that the top and bottom white space is now 46px whether you start the section with an h1-h3 tag or an h4-h6 tag. If you care, Bootstrap normally adds 22px top margin to h1-h3 tags and 11px top margin to h4-h6. This was driving us nuts, so we found a way to fix this with CSS. Now the first hx tag in the section sets the top margin to 11px. Since the bottom margin is also 11px for hx and p tags, the top and bottom white space will match. Yay! Now if you want to get really fancy and line up a paragraph (p tag) in the sidebar of your blog, you can use new margin and padding classes described below. Specifically, use <p class="m-t-1">...</p> to add 11px margin to the top.
  • Put back some padding for icons ( tag) when using the icon-lg and icon-xlg styles. We added some left and right padding (15px for icon-lg, 25px for icon-xlg) so these icons aren’t smashed up against each other, such as when listing social media icons.
  • Updated the Flat Bootstrap Child Theme to show users more things that can easily be done with CSS. Specifically:
    • Bumped parent theme (template) version to 1.9.
    • Changed loading of parent theme’s stylesheet using wp_enqueue_style() instead of using @import in style.css. This is now best practice for performance reasons.
    • Changed primary link cover (and link hover) just to show users how to do it.
  • Jetpack Testimonials are now displayed better. We show the user profile pic (featured image), then put the actual quote (content) and user’s name (title) formatted as a blockquote. Individual testimonial pages still exist but the user’s name doesn’t link to it and the annoying “read more” (when there is nothing more to read) is gone.
  • Added “smooth scrolling” effect when clicking on the comments link at the top of a page or post. Cool, huh?
  • The theme’s screenshot now supports “retina” (high resolution) displays. It is now 1200x900px.
  • Updated this here readme.txt file to update the how-to information. Of course we also updated our child theme to implement examples of some of the most common requests from users.

But Wait, There’s More!

Part of the reason we wanted to clean up the code was to make it easier for us (and others) to release more varied themes, write plugins that can include just relevant parts of the theme (such as our color palette and additional buttons in theme-flat.php), and generally have a solid “foundation” to embrace the future.

Bootstrap v4 is now in its second alpha release and will someday be GA (Generally Available). The changes to it are so massive that they plan to support Bootstrap v3.x for a long time.

One of the major changes is that they are providing various padding and margin CSS classes. Since Bootstrap v3.x doesn’t have any, we have included the ones from v4. You are free to start using those to prepare for the future.

We still support our own custom padding classes, such as “section”, “padding”, “padding-top-bottom”, etc. We will always keep the “section” class as an easy way to apply sensible padding to a section, but may deprecate the other ones at some point. We may alter the “section” class by a couple of pixels to better align with these new Bootstrap classes better, though.

The Bootstrap v4 padding and margin classes follow the form:

[p|m]-[a|x|y|l|r|t|b]-[0|1|2|3]

Wait, WTH does that mean? Well, its “programmer speak” for how to format the class.

  • [p|m] means either padding (p) or margin (m).
  • [a|x|y|t|r|b|l] means all sides, left and right (x-axis), top and bottom (y-axis), top (t), right (r), bottom (b), or left (l).
  • [0|1|2|3|auto]. Zero (0) means no no margin or padding. In our theme 1 means 11px, 2 means approximately 16.5px and 3 means 33px. Auto can only be used with margin (m) and the x-axis. So m-x-auto sets the left and right margin to “auto” which means the element will be centered horizontally.

Here are a few examples to get you started:

  • p-y-3 = 33px padding on the top and bottom (our “section” is 35px BTW, so that’s why we may adjust it to 33px in the future)
  • p-x-2 = 16.5px margin on the left and right
  • m-a-1 = 11px margin on all sides
  • m-t-0 = no top margin

For more information see Bootstrap v4 Spacing. For a full list, look at our /inc/theme-flat.css and search for “Bootstrap v4 margin and padding”. Happy white-spacing, everyone!

Availability and Download

Flat Bootstrap v1.9 is immediately available from your WordPress Admin or for direct download from WordPress.org.

Account

Help Support Us