Pratt 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.
Fixed Navbar and Custom Header
The navbar is fixed at the top of the page and you can upload a custom header.
Pratt is an adaptation of the “Pratt” theme by Blacktie.co 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 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 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.
“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!
Sample Usage
Demo and Download This Theme
Demo this theme Demo
Download this theme from the WordPress.org Theme Directory Download
More Information
Be sure to check out How to Use Our WordPress Themes and our Theme “Shortcodes” Page. You can also check out other other themes as well on our WordPress Themes page.
Also be sure to check out the excellent HTML themes from Blacktie.co. Many of our themes, like this one, are based on them.
44 responses to “Pratt Bootstrap WordPress Theme”
Yes, take a look at functions.php file in the theme directory. Pratt is a child theme of Flat Bootstrap and you can copy it over to another child theme and make edits. You could try to do it with CSS instead, but PHP is more powerful in what you can do. Take a look at the Flat Bootstrap Child Theme functions.php file too as it has an example of how to change that “site credits” code.
Is it possible to remove or edit this “© 2017 Website Name. Theme by XtremelySocial.”
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?
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.
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.
hi , i use pratt theme on this site http://www.zombitalianrun.com/, but drop down menu doesn’t work after upgrade to WP 4.5.
Can you give me an advice?
Thanks
Your dropdown menus are working just fine for me at least from Safari and Chrome on a Mac.
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(‘tt<aside id="re…') #1 /var/www/html/wp-content/themes/pratt/sidebar-footer.php(17): apply_filters('xsbf_footer', 'tt<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.
Can you first make sure you are running the very latest version of both the Flat Bootstrap (parent theme) and Pratt from the WordPress.org 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.
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; }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.
Check out this page on the WordPress.org 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.
Hey for some reason my footer area is not displaying with a grey background (as it does in the preview). Here’s the site: http://prayermissionary.org/
Any idea why that would be the case? Doesn’t it display the footer with darker background and white text by default? Thanks!
I think it has something to do with your minify plugin. There is a comment in the code that says ” See http://code.google.com/p/minify/wiki/CommonProblems#@imports_can_appear_in_invalid_locations_in_combined_CSS_files“. 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.
Ahhh that did it. So simple. Thank you so much Tim!
Hai…
I want to ask , How I can link the SUBMIT button to my email .
Can you give me the tutorial.
Thanks
Johannes
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.
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!
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.
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.
http://nostrospazio.us
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.
Hi,
i really like your theme but is there a way to get some social links in the fixed navbar?
i´m new with wordpress and don´t know some codes.
THX
Sure. It’s not the most intuitive way in the world, but it can be done by adding links to the top nav menu. Start first by adding your social links to the menu. Test that out to make sure you have it all set up properly. Then the “trick” is to replace out the actual social site name (e.g. Facebook) with an icon from the set included with the theme. For example:
<i class="fa fa-facebook">The i tag stands for “icon”. “fa” stands for font-awesome, which is the included icon set. fa-facebook is the Facebook icon.
BTW, I’m looking into perhaps making this a bit easier in the future. I could automatically replace out the text link with the icon for the most popular social networking sites, but it would add a lot more CSS to the theme. I may try to find a way to do it with PHP so its more efficient.
I love this theme! It was exactly what I was looking for when I launched my own business website. The only thing I cannot figure out is how to get rid of the ‘Call to Action’ area. I’ve cleared all the information in all of the widgets, but it is still there. If I could even edit it, that would be great, but I can’t find how to do that either. Please help!!
Just add a standard Text widget to the Page Bottom widget area. To be safe, put a space in the text box. The existence of any widget gets rid of the sample. If you want to edit the sample via PHP, that’s in sidebar-pagebottom.php, but your changes would get lost during theme updates. There is also a theme variable called xsbf_theme_options where you could write a simple couple-line plugin that sets ‘sample_widgets’ => false.
BTW, I’m working on plugin that has a call-to-action widget to be able to easily replace the sample out without knowing any code.
Awesome! Thank you so much!!!! And that plug-in will be wonderful
Awsome theme. I was just wondering if i can use the scrollspy with your theme (i want to know if it’s included)?
Well, all Bootstrap components (CSS) and Javascript are included. But I assume you want to build a single-page website and use scrollspy to highlight the menu item depending on the section. You’ll probably need to make some tweaks to header.php and /inc/bootstrap-navmenu.php. That would be a cool feature to have. It would seem that when looping through the menu items, if the link only contains an anchor (e.g. #services, #ourteam), then you can use its a single-page menu and add the Bootstrap scrollspy tags.
Can I use budypress with this theme?
You can use the theme with BuddyPress, but I have not included any specific styling for BuddyPress. I think there is a BP plugin out there that is designed to add basic BP styling to any theme. If you have trouble locating it, I’ll try to track it down. I experimented with BP, but it was a long time ago. I really just wanted a few of its features and am using a different plugin for the “members” features on this site (Well, actually I wrote some of it myself).
I am pretty new to web development and appreciate the work that guys like you do to create themes like Pratt that are pretty awesome right out of the box. One thing I am having trouble figuring out is how to use a button as a link. Right now I have a button, but when I click on it, nothing happens.
here is the section of the code where I THINK it should go:
.” . _x( “You have a dream for your business. We can make it reality.”, null, ‘flat-bootstrap’ ) . ”
.” . _x( ‘Click here to start the conversation’, null, ‘flat-bootstrap’ ) . ”
I want it to go to http://www.jonnyweaver.com/contact
Can you help me out?
Thanks!
Sorry, that code didn’t all paste correctly. If you go to http://www.jonnyweaver.com you will be able to see what I mean.
Thanks!
Hai Jonny Weaver .
I want to ask …
How you can link the Form Menu ( SEND BUTTON ) to your email .
Can you tell me the way
Thanks
Johannes
Hello. I am happy to use your theme. Tell me, please, can I change the font size in the content of the site? Thank you
If you just want to change the body front size and not resize all the headings, you can add this CSS with the Jetpack Custom CSS plugin or add it directly to the theme’s style.css. The default body font is 18px, but you can change it like this:
body { font-size: 16px; }Sure, with just a little bit of CSS. Its easiest if you use the Jetpack Plugin as it has a “Custom CSS” feature. You can just add
body { font-size: 16px; }to it. Otherwise, you should create a child theme, but that is more complicated.Hi,
among the several themes proposed by wordpress list your is clean. I have two doubts:
1- If this is installed how child theme when I make my customizations they will be overwritten with the next version? Usually I create a child theme so theme options and other customization are retained through the updates.
2- Have you used with mqTranslate plugin? Do you know if it is compatible.
I’m using another premium theme but isn’t so compatible with mqtranslate
This is my new website in progress, you can give a look my problem is I cannot use language quicktags to create different content when using gallery or videopost format. http://www.norwayinteractive.biz/
Thanks for your support.
Angelo
You are correct that Pratt (and Link and Spot) are all child themes of Flat Bootstrap. If you only want to make changes to the theme through CSS, then the Jetpack plugin has a Custom CSS module that let’s you store CSS to override the theme. That CSS is stored in the WordPress database and is retained indefinitely. There are also other custom CSS plugins if you don’t want to use Jetpack.
If you absolutely need to change the PHP code, then I’d suggest copying Pratt over and giving it a new name. You can then make your edits there. Whenever Pratt is updated, you’d have to manually re-make your mods. However, the vast majority of theme updates are done to the parent theme (Flat Bootstrap). Pratt only has a functions.php and style.php file that are important. There are a couple of sidebars overridden in it, but that’s just to change the sample widgets that are displayed that you will replace with your real widgets anyway.
I have not used the mqTranslate plugin. I’m not sure what might interfere with it because I’m following all WordPress theme guidelines religiously. In fact, my themes are based directly on WordPress’ own starter theme, called “_s”. Its what they use to develop all of the TwentyFifteen, etc. themes.
Hello! I love your theme! I’m just having some trouble with the header. It looks great on the computer, but when I switch to an iPhone or another mobile device, it only displays the top left corner. Is there a way to center the header image, or shrink it for mobile view? Is that at all possible? Thank you!
I think all you need to do is update the Pratt theme to v1.3 and update the parent theme (Flat Bootstrap) to at least v1.4. The header images now crop to the center.
Great theme! We are currently using it on http://www.wastejarproject.com and would like to know if there is a way to have featured/header images on author, tag and category pages as well? I thought it may require additional plugins, if so, do know of compatible ones?
Thank you
The theme doesn’t provide a way to have different featured image headers on the “built-in” pages, like author, tag, etc. That is mainly because WordPress itself doesn’t provide that ability. I would do it with CSS. It would probably be easiest if you assigned a default header image for the entire site. That way your category, tag, etc. pages would at least have all the CSS necessary to display properly, you’d just need to override which background image gets displayed. For example, your category pages have a CSS class assigned like “category-eating-in”. The header image will be tagged with “section-image”. Then you set background-url to a different image.
Hello, first of all I wanna thank you for these awesome wordpress theme.
But I have onde doubt.
I need to know how can I make the name of my blog diseapear in the header, because the image on the background already has its name.
Thanks for your support.
Darlan Silva
If you add this CSS, it will hide the site title within the nav bar.
div.navbar-header { display: none; }Also, thanks for the kind words!