Setup Tutorials for Flat Responsive

Welcome to the Setup Tutorials for Flat Responsive. These are the standard guidelines to help you install, configure, and customize your newly downloaded theme. If you have any requests for additional tutorials relating to this theme, please contact me and I will review your suggestions. These tutorials are also based on the assumption you have a basic understanding of how WordPress works.

Before you install Flat Responsive

Before you install Flat Responsive, it’s important to know a few things before you begin. With this theme, you get a lot of files and folders within the downloaded package that may seem confusing as to what each one is for. We recommend taking some time to explore the contents so that you will have an idea of what is included. We are also on the assumption that you have some basic understanding of how WordPress works. However, if you are new to WordPress, we recommend you check out for documentation for installing and using WordPress. You may also want to consider checking out for video tutorials about how to use WordPress. If you need help with understnading the basics of HTML and CSS, you will want to bookmark as a reference. Plugins are NOT included with this theme. We do not include these because not everyone wants to…    read more 

How to make your front page look like the live demo site

In this tutorial we are going to show you how to create a front page like the demo, all of the process are explained below: Step 1 – Plugins That are Used Widgetkit Lite – For the front page slideshow Remove Widget Title – Allows you to hide the widget title from the front-end Jetpack Widget Visibility – Lets you publish widgets on select pages Step 2 – Create a Home Page Slider You need to create a slider using widgetkit plugin. The complete tutorial to make a slideshow can be find here: and place the shortcode that come from widget kit to banner-wide widget position. Step 3 – Create a Call To Action You can create a call to action as the demo site using the following snippets: <h2 class=”home_page_title”>Get Your Business Started With Flat Responsive</h2> <p>Use Flat Responsive theme to create your business website as it is SEO…    read more 

How to Use Excerpts instead of the content summary

There’s a couple of ways to display post summaries in a blog: Content summary with the classic “Read More” Using excerpts which have a set number of words (sometimes characters) Content Summary Using the content summary method is the most common because when you create your post, you select where you want to split your post with a “Read More” tag. This gives you a shortened version of your post on the front-end of your website with a Read More button or link. Excerpts You actually get a couple excerpt options where the first takes a certain number of words from the beginning of your post, while the other lets you create your own “custom excerpt” instead of using the content from your post. It’s also important to know that excerpts DO NOT inherit formatting such as bold, underline, italic, etc. They also strip out media such as images.  However,…    read more 

The Page Builder template

One of the upcoming trends are themes with Page Builders that are either built into the theme or use a plugin. A page builder is a feature that allows the user to create various page layouts simply by a drag and drop method. In a sense, what you are building is a page with widgets. No content is added like you would with a normal page or post when using the editor. For Circumference, it does not include a page builder coded into it, but does provide you with a blank page template named: Page Builder Choosing a page builder plugin is something you will need to sit down with a coffee and explore what choices you have by searching Google for “WordPress Page Builder Plugins” and see what comes up. One in particular will be the Page Builder plugin by SiteOrigin and appears to be a popular (free) option. Basically…    read more 

How to use Icons

Flat Responsive uses font icons from FontAwesome which means you can have different sizes, just like a font. You can use icons almost anywhere, especially with the html snippets that Flat Responsive has like “icon boxes”, “media boxes” etc. How to Find an Icon that you need and place into content Go to Select a Icon that you want Click on the icon that you want, you will find a html snippets provided to you. For Example: the snippets looks like Copy and Paste the Snippets to your content. Now your icons shows in the content.  

Page Columns

To give you more flexible layouts, you can use page columns (content columns) which uses the Bootstrap framework. Using Bootstrap 3, you get a 12 grid column layout which is also responsive. To read more documentation on the grid layout, check out the Bootstrap website here: Bootstrap Grid Circumference is built using Bootstrap and the overall width uses the grid system. Basically the width is made up of 12 grid columns and uses css classes to create varying widths of containers, for example, the logo container and the main navigation container uses this method where the logo is 5 grid columns wide and the nav is 7 grid columns wide. Getting Sample Columns In your original downloaded theme package is a folder called HTML Snippets. Inside that is a text file “Columns” which you can use to get you started and offers some instructions as well. You can create your…    read more 

Introduction to HTML Snippets

HTML Snippets are like mini-templates that you can use inside your page content and find in your theme package that you downloaded. Generally you have themes with shortcodes, but this theme uses HTML Snippets instead because they are true HTML compared to shortcodes; shortcodes can also be a bit confusing as well. This theme currently offers the following snippets: accordion panels blockquotes call-to-action columns contact form custom images dividers drop cap form elements icons icon boxes list styles logo bar media boxes price columns  progress bars recent posts plus special headings tables text labels widgetkit gallery widgetkit slide captions widgetkit slideshow settings widget styles How you use these will be up to you, but for most of the snippets that relate to in-page elements like icon boxes, list styles, etc., these text files also contain some instructions which you may want to print off as a reference for each one….    read more 

How to work with Google Fonts

In this tutorial, we’re going to show you how to use Google fonts in Flat Responsive theme. What is Google Fonts ? Google Fonts is an interactive directory of free hosted API for web fonts. This directory has now more than 650 web fonts and it’s increasing each day. You can find those fonts here :  Getting Started Download the Plugin After you have downloaded the plugin Activate the plugin After you activate your plugin you can go to Settings menu, and select google fonts Choose font from the dropdown and click on the show options, afterthat select the tags where you want your google fonts implemented . For example if you want your h1 class to be font “abel” choose font abel and select the h1 property. If you want different fonts for all selector you can choose the fonts from font1, font2 and font 3 respectively. After…    read more 

Create a slider like the demo website using Widgetkit

The slider on the flat responsive demo website is optional, but this tutorial will help you get setup if you decide to use the Widgetkit slideshow. This plugin is free to download from and once installed, you can take advantage of the custom theme (style) that we created for it. As a side note, you do not have to use this slider if you have a different one in mind. Download Widgetkit Lite (free) here: Go to Plugins >> Add New >> Upload Browse for the widgetkit zip file you downloaded and install then activate it Note that it gets added to the bottom of your admin menu group Upload the Slideshow Theme With the flat responsive theme, you get a custom theme for the slideshow to match what you have seen on the live demo website. You can find this style in the the “flat-responsive-package” folder, then in…    read more 

How to use the custom image styles

WordPress has it’s own default image styling and layouts which are common with every WP theme. These are: Align left alignleft Align center aligncenter Align right alignright Align none alignnone Depending on the theme, usually the common styling is a border around the image, but Circumference extends the styling concept to give you a little more in addition to the basic alignments that you see listed above. With Circumference, you get the additional styles inlcuded Attention: Because these image styles use CSS3, some browsers may not recognize the style attributes applied. IE8 will be one browser that will ignore these styles. Instead of circles, you will get the squared image style. Offset Style Offset is probably the more complicated style bcause of how it gets created in your page or post because it will require some code adjustments. However, we helped you out with a predefined snippet of code that…    read more