Pratt is an adaptation of the “Pratt” theme by for WordPress. It is a modern, fully responsive, “flat” style theme with a nice color palette, big full-width images, and full-width colored sections. The navbar is fixed at the top of the page for easy navigation.

The Pratt theme is a child theme for Flat Bootstrap. The site title is displayed in the navbar, so you still retain your site branding.

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 and color schemes from’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 theme is designed to have a “static” home page and so when previewing the theme and when you first install it, a sample page is displayed. The theme is perfect for showcasing products or photos with a midnight blue page header.

Theme Features

  • Fully responsive theme that changes layouts for desktop, tablets, and phones
  • Navbar fixed to the top of the page for easy navigation
  • 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.


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!

Sample Usage

Pratt Full Page

Demo and Download This Theme

Demo this theme Demo

Download this theme from the Theme Directory Download

More Information

44 responses to “Pratt Bootstrap WordPress Theme”

  1. theboostfellowship Avatar

    Is it possible to remove or edit this “© 2017 Website Name. Theme by XtremelySocial.”

  2. antoniodalboreesn Avatar

    Hi there, I just installed Pratt Theme and I really like it a lot.
    I need to change the height of the header image but cannot find any reference in the css.
    Can anyone help me please?

    1. Tim Nicholson Avatar

      First look in the parent theme (Flat Bootstrap) for the main CSS. Specifically /flat-bootstrap/css/theme-base.css. Then the CSS in the Pratt child theme has some overrides in it. Specifically style.css in the theme’s root directory.

  3. timjfowler Avatar

    I would like to carousel-ify the header image, but I’m a bit lost as to how and where to insert the Bootstrap carousel shortcode to make that happen.

  4. selfrulesorg Avatar

    hi , i use pratt theme on this site, but drop down menu doesn’t work after upgrade to WP 4.5.
    Can you give me an advice?

    1. Tim Nicholson Avatar

      Your dropdown menus are working just fine for me at least from Safari and Chrome on a Mac.

  5. theweirdogeek Avatar

    Hey guys, been loving this theme but I think I’ve found a bug when I was trying to move to an Ubuntu 16.04 server with PHP 7. In the Widgets admin page, when I put “recent posts” in the footer, it will not display the footer and admin bar (recent posts work fine in the sidebar, though). I get this output when I enable WordPress’s debug mode:

    Fatal error: Uncaught Error: Class ‘DOMDocument’ not found in /var/www/html/wp-content/themes/flat-bootstrap/inc/theme-functions.php:340 Stack trace: #0 /var/www/html/wp-includes/plugin.php(235): xsbf_footer_filter(‘\t\t<aside id="re…') #1 /var/www/html/wp-content/themes/pratt/sidebar-footer.php(17): apply_filters('xsbf_footer', '\t\t<aside id="re…') #2 /var/www/html/wp-includes/template.php(572): require_once('/var/www/html/w…') #3 /var/www/html/wp-includes/template.php(531): load_template('/var/www/html/w…', true) #4 /var/www/html/wp-includes/general-template.php(122): locate_template(Array, true) #5 /var/www/html/wp-content/themes/flat-bootstrap/footer.php(22): get_sidebar('footer') #6 /var/www/html/wp-includes/template.php(572): require_once('/var/www/html/w…') #7 /var/www/html/wp-includes/template.php(531): load_template('/var/www/html/w…', true) #8 /var/www/html/wp-includes/general-template.php(84): locate_template(Array, true) #9 /var/www/html/wp-content/themes/flat-bootstrap/index.php(69): get_footer() in /var/www/html/wp-content/themes/flat-bootstrap/inc/theme-functions.php on line 340

    I tried doing a clean install on my laptop (with the same Ubuntu 16.04 and PHP 7) and the bug persists.

    1. Tim Nicholson Avatar

      Can you first make sure you are running the very latest version of both the Flat Bootstrap (parent theme) and Pratt from the directory? I put in some code changes recently. I have definitely been able to put Recent Posts in the Footer, so I’m thinking you may have an older version or something more complex may be going on.

      1. Tim Nicholson Avatar

        Also, if you still can’t get this figured out and want to see if it is the newer logic in my theme that is failing in your situation, here is how I handled the footer logic using preg_match_all instead of loadHTML. I switched to the latter because that function is more “forgiving” of malformed HTML (say from a widget), but if its causing problems I would consider switching back.

        If you put this code in the theme’s functions.php file, it will override the code that normally gets executed.

        add_filter('xsbf_footer' , 'xsbf_footer_filter' , 10 , 1);
        function xsbf_footer_filter( $footer ) {
        	/* Find and count all the ', '', $footer );
        	} elseif ( $num_widgets == 3 ) {
        		// This is already the default, but if default changed then uncomment this
        		//$footer = str_ireplace( 'class="widget col-sm-4', 'class="widget col-md-4 ', $footer );
        	} elseif ( $num_widgets == 2 ) {
        		$footer = str_ireplace( 'class="widget col-sm-4', 'class="widget col-sm-6 ', $footer );
        	} else {
        		$footer = str_ireplace( 'class="widget col-sm-4', 'class="widget col-sm-12 ', $footer );
            return $footer;
  6. srobwild Avatar

    I have a question for you. I love your theme, but am struggling to get my pages straightened out. When I click on the “Home” link at the bottom of the page, it takes me to a page that I cannot find in my “Pages” menu option and in the “Post” option. I did delete the pages that were already set. I then cannot go in and select the new page that I created as my home page. HELP. I hope this makes sense. I am wanting to use the theme as a business website, not a blogging website. I appreciate your time.

    1. Tim Nicholson Avatar

      Check out this page on the site entitled Creating a Static Front Page. That functionality is all controlled by WordPress core. Once you have that all working, then it should be easy to update your footer menu (also via WordPress admin) to point to your home page.

  7. Matthew Lilley Avatar
    Matthew Lilley

    Hey for some reason my footer area is not displaying with a grey background (as it does in the preview). Here’s the site:

    Any idea why that would be the case? Doesn’t it display the footer with darker background and white text by default? Thanks!

    1. Tim Nicholson Avatar

      I think it has something to do with your minify plugin. There is a comment in the code that says ” See“. It’s supposed to combine all the theme’s CSS into a single file, but I think its skipping the actual Pratt theme’s style.css. That’s where the footer (and after-footer) are colored. Since the minify script strips out all the comments, I can’t easily tell if its skipping other needed CSS files also, but what you are talking about is definitely in the main style.css file.

      1. Matthew Lilley Avatar
        Matthew Lilley

        Ahhh that did it. So simple. Thank you so much Tim!

  8. Johannes Williem Avatar
    Johannes Williem


    I want to ask , How I can link the SUBMIT button to my email .

    Can you give me the tutorial.


    1. Tim Nicholson Avatar

      The email form is just a sample to show what the theme looks like with one. You’ll need to use the Jetpack “Feedback” module or another email plugin. Then you add a new text widget to the footer area with whatever code you need for that plugin. Once you add a widget, then the sample form goes away and gets replaced by the widget contents.

  9. gymplified Avatar

    Hi! Thank you so much for making this theme, I love it! Just a couple of queries… Is it possible to change the light green text? I love it, but someone pointed out it might be hard for people with sight problems to see. Also, is it possible to reduce the height of the header image? When people first go to my site, they just see that, and not any posts, so it’d be great to reduce it by about half. TIA for any advice!

    1. Tim Nicholson Avatar

      If you are talking about the link color, then you can change it with CSS. There is some pretty complex logic that adjusts the link color within other colored sections, but to change the main link color that is displayed over the off-white background, its pretty easy. The default code is here, but you can change the colors:

      a { color: #16a085;  }
      a:hover, a:focus { color: #19B798;  }

      To change the height of the header image, take a look in the style.css file. Search for the comment “Change height of cover (home page) and section (other pages) images”. The Pratt theme sets it to 480px high, but you can change it.

  10. Nathan Lake Avatar
    Nathan Lake

    Great theme…exactly what I wanted with 1 tiny exception. How do I get rid of the page-down arrow that is superimposed over the header image? See the arrow between the R and the O? I want to hide it.

    1. Tim Nicholson Avatar

      That is easy to do with CSS. Just add this:
      a.scroll-down.smoothscroll { display: none; }

      BTW, when I tried to access your site from my Mac with Safari, I got this error page: “Sorry This site may not be viewed from a mobile device. Please use a desktop computer, preferably using Chrome.”. I’d fix that.

This site uses Akismet to reduce spam. Learn how your comment data is processed.