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.
</div></div>

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></div>
<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>
</div></div>
<div><div>

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 getbootstrap.com/compontents and getbootstrap.com/css. 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   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="whatever.com" class="btn btn-hollow">Hollow Button</a>
<a href="whatever.com" 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.
</div>
</div></div>

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.

FREQUENTLY ASKED QUESTIONS

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 WordPress.org

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 WordPress.com 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('http://yourdomain.com/images/logo.png') left top no-repeat;
 display: block;
 text-indent: -9999px;
 width: 100px;
 height: 100px;
}