Set up your home page

We think this theme looks best with a full-width page with a large image at the top. To do that, go into WordPress Appearance -> Customize and set the option for Static Home Page to one of your pages. You’ll also need another page that doesn’t need any content it, but you will assign it as your blog page.

To add a full-width image to your home page (or any page for that matter), just use an image that is at least 1170px wide and for the home page at least 640px high. For any page except the home page, the image can be as short as 400px high. Set the Title, Caption, and optionally the Description and they will display centered in a white font. Full-width images can be set on any page. They will be full-width even on pages with a sidebar.

To set your home page (or any page) to full-width, You can choose either “Full Width” or “No Sidebar” for the page Template. Its under the Page Attributes section in the WordPress Editor. The full-width one will let any colored sections you add to your page fill the entire width of the screen. However, you will need to be sure to contain your actual page content.

The easiest way to do that is to set the WordPress editor to “Text” mode. You’ll see a button that says “Full Width”. Click on that and type in your content. Click on it again when you’re done. It will insert the following:

<div class="section offwhite"><div class="container">;
Put your content here.

The section adds padding and you can set the color to any one of the ones in our included color-palette. See the next section for details. Also read on for more information about all the included page template and more about the buttons we added to the WordPress editor.

If you use the “No Sidebar” template, you won’t have to mess with the container div, but your images and colored sections will have margin on the sides.

While you’re in the editor, you may or may not notice that we’ve added a new section called Additional Post / Page Options. There you will find a Subtitle field that we encourage you to fill out at least for pages. It will display under the title of the page or post. Most premium themes have this and it looks great, so we included it.

NEW! If you want to display some text or another widget on your home page, you can use the Home Page widget area. This will display regardless of whether you have a static page or your blog set as your home. In the latter case, its a great way to create an “intro” sections to your website even when you want users focused on your blog.

If you want to have a colored background for a home page widget (or Page Top and Page Bottom widget areas), its easiest to use the Simple CSS for Widgets plugin. It adds a CSS Class field to every widget. Create a text widget and add the classes “section bg-midnightblue” or any other color from our color palette.

If you really don’t want to use a widget, you can do the same thing this way. Leave the widget title blank and put all of this in the widget text area:

<div class="section bg-midnightblue">
<div class="container">
<h1>Welcome to our Website!</h1>
<p>This is an optional widget area that you can display on all your pages or just your home page. It works when the blog is your home page.</p>

The first two /div’s break out of the default widget div’s. The last two div’s are needed because the default widget will of course end its own div’s. Be very careful with this, though, because if you mess this up it will break your site layout.

Set theme options

One of the first things you’ll want to set is your header menu and optionally a footer menu. Use the standard WordPress menu editor to build those and set theme there or in Appearance -> Customize.

If you have a drop down list for your primary site navigation, the parent item should only be a grouping title with a “#” value for the URL parameter. The Bootstrap navbar requires a click to open the drop down list so any link that is set in the parent item will not work.

The footer navbar only allows for a depth of one drop down level. Its not designed to be a primary nav.

As for the header, you can get rid of it altogether if you want and your site title will display in the left part of the navbar. In Appearance -> Customize, uncheck “Display Header Text”. In this case, your site name will appear in the left part of the navbar.

However, if you would like to upload a custom background image that sits behind your site title and tagline, you can do that there as well. The image should optimally be 1600px x 200px, but the theme will let you upload different sizes. You just might need to add some CSS to get it to look right.

You can also upload a background image from here as well. However, this theme was designed to be “full width” so you won’t really see it very often. For really wide screens, like an iMac, we did cap the width of the theme at 1600px so the background will show in that case. But if your screen is narrower than that, you won’t see it.

Also note that if you change background color, that only shows beyond 1600px wide as well.

Set colored backgrounds in the content on your page or post

To add a colored section to your content, just add a section like you did above and change the color to one of the ones below. These colors are all perfectly color-matched to go together and are common colors for “flat” style websites. They are largely taken from Gizmodo’s flat-ui, but we’ve given them easy to remember names.

  • bg-white
  • bg-offwhite
  • bg-lightgray
  • bg-gray
  • bg-darkgray
  • bg-lightgreen
  • bg-darkgreen
  • bg-brightgreen
  • bg-darkbrightgreen
  • bg-yellow
  • bg-lightorange
  • bg-orange
  • bg-darkorange
  • bg-blue
  • bg-darkblue
  • bg-midnightblue
  • bg-purple
  • bg-darkpurple
  • bg-red
  • bg-brightred
  • bg-darkred
  • bg-almostblack
  • bg-notquiteblack
  • bg-black

When you use a colored background, it fills the width of the screen. The fonts and link color on the lighter colors (up through dark gray) and the shades of black are left untouched. The fonts are set to white and the link is white with an underline in the middle colors (light green through red). The reason we put the underline on the links is because one of the main complaints about flat websites is that the user can’t tell what’s clickable. This way they can easily tell and it looks fine anyway.

Add full-width images as “sections” in your content

In addition to colored sections, you can easily add a full-width image as the background to a section. It works similarly to when you add a featured image to a page, except you can add them anywhere in your content.

Just choose the standard WordPress “Add Media” button and select or upload an image. These images should be 1600px wide and at least 400px high. Fill whatever you want in the “Caption” field and it will be displayed, centered, on top of the image. You can use <h1> and <h2> tags for big fonts. Anything else will display in the normal text size (which is 18px by the way).

Format a page differently using this theme’s included page templates

Since this theme is designed to be full-width, we’ve included a number of page templates for that. We’ve also included an additional template to move the sidebar to the left (default is right for non-full-width pages). The page templates are described well in the actual post editor, but here is more information on them.

Default Template: Left sidebar

Full Width: No container, so you can insert full-width colored sections and images. Be sure to wrap your content in <div class="container">content here...</div> so it has sufficient padding around it.

Full Width No Content Header: Same as above, except doesn’t display the page title at all. This way you can insert your own image or colored section or whatever you want to be the “header” of your page.

Full Width with Recent Posts: This is full-width like above, but is great for your home page in that it displays 3 recent posts at the bottom of the page.

Full Width with Sub Pages: Ah yes. This template is great for listing products, your portfolio or whatever without needing a plugin or custom post types. Just add this template to a page and all of its sub-pages will display in a grid style layout with image thumbnail and title.

Left Sidebar: Just like the default template, but with the sidebar on the left. Maybe you like that better than on the right?

No Sidebar: If you don’t want to mess with the true full-width templates and having to remember to wrap stuff in a “container”, just use this. Its works like a normal page but with no sidebar. You’ll have a bit of margin on the right and left, but no big deal.

No Sidebar or Content Header: Just like above, but doesn’t display the page title. Put whatever you want at the top of the page instead.

Site Index: What theme isn’t complete without a site index template, right? Especially in the days of “mobile first” where menus are kept simple, this is a great way to let readers explore your whole site. And for no extra charge, the “Page not Found (404)” page also includes this same site index.

Use the included buttons to quickly add common elements to your page or post

This theme includes two “quick tags” in the WordPress HTML editor to add a normal full-width sections or a special “header” section that has a thick bottom border. You just need to make sure you are in Text mode instead of Visual mode in the editor. The quicktags are as follows:

fullwidth – For use in a full-width page template or fullwidth article. Inserts a section and container for your content. Default color is offwhite, but you can change it to any of our included colored backgrounds.

featured – If you want a full-width colored section that perhaps contains a smaller image (eg. screenshot), you can use this. Default is also offwhite, but looks great with a color.

What these quicktags are doing is simply inserting some HTML to utilize the included Bootstrap capabilities. Read on for more information about Bootstrap. We can add more if people want, but read on to see other ways you can do this.

Use Bootstrap to add cool stuff to your pages or posts

This theme is based on Bootstrap. It is an open-source CSS framework from Twitter that is mobile-first, fully responsive, and cross-browser tested. It lets you add columns, tabs, navbars, carousels (sliders), icons, lists, panels, tooltips, and much, much more to your content.

One thing you don’t want from Bootstap, though, is their default settings. Your website will scream “Bootstrap”. So we’ve tweaked all the settings for you already to give you a nice color palette, great looking fonts, and a “flat” look.

You can check out our “Shortcodes” page on our website to see many of the Bootstrap features in action. Just go to Our Theme Shortcodes

For the full documentation, please see the Bootstrap website at and Be sure to check out the components section and javascript sections there as well. All of that works perfectly in this theme.

Add icons to your pages and posts

Bootstrap comes with a bunch of icons you can use. Check them out here: Glyphicons. You’ll want to put these in a <span> tag or the WordPress visual editor will strip them out. When in Text mode in the editor, click the button that says “icon” and a sample will be inserted for you as follows:
<span class="glyphicon glyphicon-heart icon-lg">&nbsp;</span>

We put the &nbsp; code in there just to add a space as WordPress likes to strip out HTML tags that it thinks are empty.

But wait… there’s more! We’ve also included Font Awesome which takes the whole icon thing to another level. Particularly useful are the social networking icons, but there are tons more to choose from. Just like Bootstrap’s icons, these icons are stored as a font file meaning they are pixel-perfect at any font size even on retina (high pixel density) displays like the iPad, Macbook Pro Retina, high-end Android tablets, etc.

To use Font Awesome icons, just put the following in your content:
<span class="fa fa-facebook"><span>

Please see the documentation for the full list of icons: Font Awesome.

One more cool thing about icons… you can use them in menus as well if you’d like. fa-home, fa-user, etc. are all very useful for this.

Add buttons to your pages, posts, and/or widgets

In addition to the all the standard Bootstrap buttons, we’ve also added a couple of additional buttons that work great on colored sections. One is hollow, meaning it just has the border and the center let’s the background color show through. The other is a “transparent” button that adds opacity to the background color to make it look darker. Use them like this:
<a href="" class="btn btn-hollow">Hollow Button</a>
<a href="" class="btn btn-transparent">Transparent Button</a>

Set a POST to full width

Yep, you can do that! Very few themes have this feature because its not a standard part of WordPress, but we’ve added it because this theme is so focused on full-width. When editing a post, within our Additional Post / Page Options section there is a checkbox to display the them full-width. It works exactly like the “Full Width” page template described above.

If you are concerned that the text is too wide to be read easily on large screens, use the Bootstrap grid system (columns) to narrow the text only on large screens. This works perfectly for that:

<div class="container"><div class="row">
<div class="col-lg-8 col-lg-offset-2">
Content goes here.

What this does is contain the text to about two-thirds of the screen width (Bootstrap’s grid is 12 columns), but ONLY on large screens. For smaller screens, it displays full width. Now you are starting to see the power of Bootstrap’s grid system 😉 You can also use col-lg-10 and col-lg-offset-1 if you’d like it a littler wider.

Add widgets to the sidebar and optionally the footer, page top, page bottom, and home page widget areas

We’ve included lots of widget areas. Of course there is an obligatory sidebar that you can put whatever you want to in. However, if you are using mostly full-width pages and full-width posts, its only going to display on the archives and search pages.

So you may want to add sections to the page bottom which display after your content and before the footer. Full-width colored sections look great there for calls to action or whatever else you want. We recommend installing the Simple CSS for Widgets plugin, so you can just add “bg-gray” or whatever color you want to it. We think these actually look better than loading up the sidebar, but that of course is entirely up to you.

Remove the sample Page Bottom and Footer Widgets

Most of our themes have sample widgets that display when you first install the theme. These are just examples of some of the types of things you can do with the widget areas.

If you added any widgets to the Page Bottom and Footer areas, the default widgets will no longer show. However, if you don’t want to add any widgets to those areas and also don’t want to show the default ones, you can simply add an empty text widget to each area.

NEW: The Home Page widget area obviously will display only on the home page, but it works whether you have a static page or your blog set as your home page. In the latter case, it’s a great way to add an “intro” section or sections to your home page even though you want the blog to display there as well.

Install additional plugins that work well with this theme

When you first installed the theme, you may have noticed a banner at the top of the screen that talked about installing required and optional plugins. To be sure, none of these plugins are required. However, they are very useful additions to this theme. As of initial release, the following plugins are in the recommended list.

Jetpack – This plugin from the makers of WordPress themselves adds a ton of features. The most relevant for this theme are: Tiled Galleries and Widget Visibility. The latter can be used to display certain “Sidebar” or “Page Bottom” widgets only on certain pages.

Simple CSS for Widgets – Great way to easily add a background color to an entire widget, especially the ones in the Page Top, Page Bottom, and Home Page widget areas.

Bootstrap 3 Shortcodes – This plugin supports most of the Bootstrap components and makes it easy to insert the HTML and then you can easily edit it. Its a lot like the quicktags we included, but much more comprehensive.

There are other Bootstrap Shortcode plugins out there as well and they all will work well with this theme. Some of them require you to uncheck a box to indicate that you are already using a theme that includes Bootstrap so the plugin doesn’t try to add another copy of it. That’s primarily the reason we chose to recommend the one above is simply because it doesn’t try to add Bootstrap it all. It requires a theme like this one that has it.

Regenerate Thumbnails – This is very useful when first setting up the theme because it allows you to resize all your featured images to match this theme’s standard sizes. See below section for more information.

Set Post “Thumbnail” Image Sizes

In your blog, this theme displays “thumbnails” that are 640px x 360px. If you don’t want to have an extra image size stored on your server, go into Appearance -> Media and set the Medium thumbnail size to that.

While you’re in there, you can update the Large image size as well. Of course you don’t have to, but the maximum content area that this theme displays is 1170px wide. So you probably don’t want to go any wider than that. The theme will resize it on the fly in the viewer’s browser, but its a good practice to set this so it doesn’t have to do that.

Note that these settings only change the sizes of new images that you upload. So you can use the Regenerate Thumbnails plugin to resize all of your existing images.


Why did you write this theme and why should I use it?

Great question! 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:

  1. 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!
  2. 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.
  3. 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.
  4. 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.

How come you haven’t included a bunch of “shortcodes” like most of the WordPress themes OUTSIDE

Well, don’t get the WordPress community started on this topic 😉 Themes are supposed to be just the theme. Plugins are supposed to allow users to easily format content or automatically add content. In fact, WordPress won’t approve any themes with actual shortcodes in them. Plus, if a theme includes shortcodes, you are locked into that theme because those shortcodes will break on any other theme.

This theme includes a few “quick tags” in the WordPress HTML editor to add sample icons, full-width sections, etc. See the section How to Use This Theme above for a list.

Of course you can always copy any of the samples from the Bootstrap website as well.

However, if you really want true “shortcodes”, we’ve recommended a coupe of plugins for that and you’ll see those recommendations when you install our theme. This way, you can still have the convenience of using shortcodes, but switch to any Bootstrap theme and not lose your content.

Why is there a full-width checkbox on my posts?

WordPress doesn’t let you have post templates like the page templates above. So until then, we’ve included a checkbox that will display your post full-width just like the fullwidth page template. This template is great for full-length articles, especially when you have one or more fullwidth images in them.

See the section above How to Use this Theme for more information on the various page templates and full-width post template.

How do I change the link colors?

Changing the link colors in the main post / page content area is pretty easy with CSS:

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

Note that links in the footer, copyright section, or any colored sections you’ve added to a page will still use their original link colors. This is so the links look good and don’t have conflicting color combinations.

How do I replace the site title with a custom logo?

After releases their official plugin for custom logos, we plan to support that. In the meantime, you can do it with something like this in CSS:

.site-title a {
 background: url('') left top no-repeat;
 display: block;
 text-indent: -9999px;
 width: 100px;
 height: 100px;

130 responses to “How to use our Bootstrap Themes”

  1. hotpropertiesoc Avatar

    I did not have the option to uncheck the “display header text” so I had to go in and change the PHP to this:
    ‘header-text’ => true, // does allow user to turn off header text
    so now even though I have the box uncheck the function still does not work and I’m getting header text all over my cover image and my pages need titles.
    what do I do?
    How do I overwrite or remove the header text altogether?
    I like it in the Nav bar but it’s so unnecessary over the cover image where I placed my logo

    1. Tim Nicholson Avatar

      Which theme are you using? Flat Bootstrap lets you turn off the header text from the Customizer. If you have a custom header image setup, that will still display above the navbar. It’s also designed to display just the site name in the navbar when you do that. If you are using one of my other themes, that option just toggles the site title in the navbar since those themes don’t have a “header” above the navbar.

      1. hotpropertiesoc Avatar

        Thanks so much for your reply, I’m using spot theme, I’d post a link but I only have a splash page up right now as I build it. I’ll take a look at the flatbootstrap theme too, maybe I can use that one?

      2. hotpropertiesoc Avatar

        flat bootstrap wont work. is there any code I can put in spot to remove the text overlay on the header image and still keep the page title intact?

  2. Montrose Townsend Avatar
    Montrose Townsend

    Hello Tim, I love the Link theme. But as I am a novice I am finding it really difficult to edit the call to action area, page bottom and the footer. I want to start a juice bar and I am trying to customize those areas accordingly. Do you have a tutorial?

    1. Tim Nicholson Avatar

      I don’t have a specific tutorial with the exact code you need, but in general you can “view page source” and copy in the HTML for each of those sections and paste them into a text widget. That will get you very close and you can tweak the HTML from there.

      BTW, I am working on a plugin that makes it easy to create a call-to-action section at least.

      I’d also like to automate the social media section using a the social media menu that’s already included in the Link theme. I just don’t know a good way to handle if someone wants more or less than 3 icons because the theme design really only looks good with 3. What I would probably do is if exactly 3 links are set in the menu, then make it look exactly like the sample, but if less or more links are in the menu, then just put a single green colored background instead of using the two shades of green.

      At any rate, I realize that ease of duplicating the “demo” theme is important and I’m working on the best ways to handle that. So stay tuned!

      If you are adventurous, you can try out that plugin from my github. Its still very much in development, but the call-to-action widget works pretty well as long as you put it in the Page Top or Page Bottom widget area. I’ve got work to do on it to decide how to handle things if someone were to place it in a sidebar or footer where its really not intended to be.

  3. Mira Living Avatar
    Mira Living

    That would be wonderful, Tim!

    From looking at heap of free themes (go WP! I LOVE this community!), the things that frustrate me the most as a developer are when I can’t quickly and easily create EXACTLY what the demo looks like – all the demo functions should be built in as default. If they’re not default options, remove them from the demo (or alternatively create 2 demos? one for the free version and another for the pro version).

    The theme my client decided to go with on my recommendation was called “Seasonal” – so simple and beautiful right out of the box – brilliant for absolute WP beginners. She decided to purchase the pro version because it wasn’t possible to change the sidebar image or font colourings with the free version.

    So maybe that’s a model that could be useful for this amazing theme of yours, Tim? Include all the demo features AS IS in the free version, then with the pro version include the more advanced customisation?

    If more developers did this kind of thing, it would make WP themes shine and compete with the other DIY site builders (squarespace, wix, weebly for example).

    1. Tim Nicholson Avatar

      Thanks for the clarification. I see what you mean now in terms of “simplicity” of replicating the demo site. I haven’t yet figured out how to go about building a “pro” version of the themes for monetization.

      I believe what you are suggesting is that the free theme on could have very theme-specific options to allow users to just edit the links and text in the “demo” or “sample”. Then have a paid Pro version that is more flexible in changing up the layouts, more flexible widgets, etc.

      That is an interesting approach that I hadn’t really thought of. Mainly because my goal with the free theme was to make it a “framework” of sorts (technically a “parent theme”) that had lots of flexibility but then leverage 3rd-party plugins to simplify content creation.

      I’ll continue to put thought into all this. I’m trying to decide whether to focus on such a plugin next or roll out more themes with different color schemes, layouts, etc. I’ll probably pose this question in more detail in an upcoming post on the site to get feedback.

      1. Mira Living Avatar
        Mira Living

        Pleasure, Tim 🙂

  4. Mira Living Avatar
    Mira Living

    Hi there,

    I’d love to use the call to action bar in Flat Bootstrap but can’t figure out how to edit this? Apologies if this information is elsewhere – I couldn’t find any answers.

    1. Tim Nicholson Avatar

      While the sample widget is still visible, use “Show Page Source” in your browser and copy that widget’s code. Then paste it into a new text widget. You’ll need the Widget CSS plugin that the theme recommends in order to color the text box. I’d also add the CSS class “section”. So the CSS would look like “section bg-darkblue”.

      1. Mira Living Avatar
        Mira Living

        Thanks so much for your quick response, Tim! The client decided to go with a simpler theme – Flat Bootstrap is brilliant and SO powerful – it just wasn’t quite easy enough for a wordpress beginner but I’ll personally return to it in the future.

        1. Tim Nicholson Avatar

          Thanks for the kinds words, Mira. I would consider creating a child theme that removes some of the features (complexity) of Flat Bootstrap if there is demand for that. I’m also considering developing a plugin with things like widgets to make building colored sections, call-to-action buttons, etc. easier. There are certainly a ton of plugins for that, but I’m thinking of rolling my own. What types of things did you have in mind to make Flat Bootstrap simpler?

  5. Mina Canterville Avatar
    Mina Canterville

    Hi, I really like this theme, thank you! As some people have already commented here, I’m also having trouble changing widgets. No matter which ones I select, only the default ones are showing. I changed theme and the right ones showed. I changed back to Flat Bootstrap and only the default appeared. I also tried deactivating all plugins and my wordpress and theme are the latest updates. Any ideas of why this is happening, please? Here’s my website, (still under construction): At the moment the widgets I have for the sidebar are Recent Posts and Text, but none are appearing. Might it have something to do with the site language being Spanish? Thank you!

    1. Tim Nicholson Avatar

      It looks like you changed your site to a different theme so I can’t look at it. Have you upgraded Flat Bootstrap to the latest version? Can you try just adding a simple text widget to the sidebar to see if that displays?

  6. Tim Nicholson Avatar

    Hmm. There doesn’t seem to be an easy way to do this with a CSS override. Thanks for pointing out the desire to do it, so I can see if there is something I can put in the next theme update to make it easier. Its pretty easy to hide just the calendar icon, but there isn’t an easy way to hide the “|” symbol that separates the icon/date from the # of comments. If you wanted to hide ALL of that stuff on that line below the article title, then the CSS would be .entry-meta p { display: none; }

  7. Jonathan Friedman Avatar
    Jonathan Friedman

    The Spot theme is fantastic, thanks for creating!
    A quick question:
    I removed the dates for my posts using a plugin, but it left the calendar icon in the beginning of each post. How can I stop the calendar icon from appearing at the top of all my posts? And when I do this, how can I adjust so title of post appears next to the body (ie filling in the empty space where icon/date used to be)?

  8. Danielle Frappier Avatar
    Danielle Frappier

    I’m using the Pratt theme, which I really enjoy btw! I’m looking to replace the logo with a custom one. I saw this:

    `.site-title a { background: url(‘’) left top no-repeat; display: block; text-indent: -9999px; width: 100px; height: 100px; }`

    but what class would I have to override for the pratt theme?

  9. reedmthompson Avatar

    How do you change the aqua color scheme of the text and buttons?

    1. Tim Nicholson Avatar

      Look for the styles you want to change in theme-flat.css (a, a:hover, etc.). Then specify different colors in style.css or better yet using Jetpack or some other plugin that let’s you add css overrides within the WordPress admin.

  10. levityracing Avatar

    Also how do i centre and change the spacing on the Header menu? its currently all bunched to the left side


    1. Tim Nicholson Avatar

      Which theme are you using? Flat Bootstrap? What do you mean by “all bunched to the left side”?

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