If you are experienced with WordPress, or know how to install themes, you can skip this tutorial. However, if you are new or a beginner, this tutorial is for you.
Before you install your theme, you will need to unzip the theme package first because inside that is your theme file you install: flat-responsive.zip
A common issue that can occur with users new to installing WordPress themes is a "Broken theme and/or stylesheets missing” error message being displayed when trying to upload or activate the theme. This error message does not mean that the theme you have purchased is broken, it simply means it has been uploaded incorrectly. Luckily, there is a very easy fix. Please follow the steps below to rectify this issue or watch the screencast.
Please use the following steps firstly to hide the default content of theme; Go to Dashboard=> Appearance=> Customize=> Basic Setting=> Default Content Setting => And click in the Hide default content from theme => Then save it. And to keep the banner image you need to follow the following steps; Go to Dashboard=> Appearance=> Widget=> Banner Wide=> Then put the Text Widget inside the banner wide widget=> After that please use the image URL inside the content but use the image URL like this Then save it. And you can follow the following steps to change the logo; Go to Dashboard=> Appearance=> Customize=> Site Title & Taglines => Site Identity => And select in your logo which is kept in the logo style and upload the logo => Then save it.
Flat Responsive offers several features, but some require plugins if you decide to use them and should be considered as optional. You will need to download and install these because they are not included in the download of this theme. I do this so that everyone can choose which plugins they want to install, but it also ensures the most recent version of each plugin is installed.
To install plugins, you will go to:
Appearance >> Plugins >> Add New
Do a search for the name, click Install, and Activate.
Jetpack is a plugin that is made up of several plugins that you may find very useful because of what it has in it...a LOT of features. Since the release of version 3.0, I have to admit that Jetpack is actually quite the plugin because of what it can do. In fact, I built most of the demo site for Flat Responsive using Jetpack. I did not use all the features, so I kept those deactivated, but the ones I enabled allowed me to do the following:
There are more that you can use depending on your own preferences.
If you are not using Jetpack already, I would recommend checking it out and try it because almost everything you need is in it, otherwise you will need to install several plugins to get what Jetpack offers. They did a very good job with this one...finally. If you install it, make sure you read up on their documentation and for support, you can refer to the Support tab on the plugin's page at wordpress.org
This theme uses the WordPress Customizer which is a feature WordPress offers you to make changes to your active theme. Every theme will load up within the customizer, but what will be different from theme-to-theme are the settings and options they offer. The customizer gives you a live preview window of your website, and within the left column, you will see a series of tabs, each labeled as to what they are for.
There are a few ways of getting to the customizer:
The two most common methods are from the dashboard home page and the menu under Appearance >> Customize
You will hear this often and this is something that WordPress recommends; but if you plan to make custom changes to your theme, whether mine or from someone else, the best way is to use a child theme. You can read more about child themes here:
The reason for using a child theme is because if updates are available for your theme, in this case the parent theme of Flat Responsive, you won't lose any custom changes because they were done in the child theme. How this works is that the child theme inherits the styles and functionality of the main theme (the Parent theme), so any updates that happen, it will inherit those. However, if you made any custom changes to the theme, these exist in the child theme and not the parent theme, which is why when you update, you don't lose the changes.
Easy guideline for you:
When making core theme file changes with a child theme, this is done by copying the file from the parent theme and uploading it to your child theme, while maintaining the same file structure as the parent theme. So for example, if you wanted to modify the header.php file in the parent theme, you copy that file and upload it to your child theme to the exact same location as the parent theme.
Note:The child theme duplicates the same structure and layout as the parent theme.
Before you install the child theme, always make sure the parent theme is installed. It does not have to be activated, just installed, otherwise you will get an error.
With Flat Responsive, you get several blog layout templates:
You get four blog styles with Flat Responsive. Blog styles are not really layouts, but more of how your blog summaries look.
Blog style 1 is the default style for Flat Responsive, which gives you a smaller Featured Image below the post title and to the left of your post summary. Best suited when you use a left or right sidebar layout.
Blog style 2 gives you a Featured Image off to the left of both the post title and the summary content. You can have varying sizes of images, so you are not restricted to just one size...within reasonable sizing that is.
Blog style 3 gives you a larger image above the summary content with your content left aligned. This is best suited when you use a left or right sidebar layout for your blog and want to showcase large Featured Images in your post summaries.
This style is best suited for the Full Width (no left or right sidebars) so you can take advantage of very large Featured Images. Content is centered.
You have the option to choose the size of your featured images, but here are a few suggested guidelines:
When you upload your featured image, I recommend you have it cropped and optimized before doing so because this theme does not have a preset cropped function for your featured image.
With Flat Responsive, you get a text based site title and logo option. For the Site Title option, you can change colours of the title and tagline, as well, this title sits in a centered box that by default has a white background that blends in with the header background, which is also white. You can change the background colour of this box container. You can also change colours of your title, tagline, and even adjust the padding space of your header...the padding units are in "rem" which is a relative size. For converting from px to rem or rem to px, you can use this online tool:
By default, the Site Title option is going to show, but if you want a logo instead, this is how you do it:
You can change the page background for Flat Responsive, which already comes with a default background already setup for you. However, you may want to change it to your own preference. Your choicces are:
Some people may opt in for a full sized image, or you can use an image and with the WP Background settings, tile it to how you want it. Also be aware that if you have set your web page to be full width, only short pages will show the page background at the bottom area.
Flat Responsive offers you a couple website page widths:
You can change this width at any time, but I would recommend that you choose it right from the start. Also remember that this theme is responsive, so regardless of the page width you choose, as the browser window gets smaller, your page will automatically adjust.
Creating a custom front page and moving the blog further into your website is called "creating a static front page" which WordPress has a tutorial for this. However, I will give you a quick rundown of how this is done because most people will want this. WordPress by default will always put the blog on the front page, which is why a static front page is usually created because unless you are using this theme as a blog only, you will probably want to change this.
For more information about static front pages, check out the WordPress Codex:
This theme offers a large selection of font based icons from a source called "Font Awesome" which has proven to be very popular...so much, that there is even a plugin for it. We will use this plugin with this theme because I also added the font and custom styling for it.
When you install the Font Awesome Shortcodes plugin, you get a green button added to your editor that looks like this:
Basically you click in your page or post content where you want to insert the icon of your choice and then click the Font Awesome button which gives you a popup window to choose your icon. Once you select your icon, it gets inserted as a shortcode. You won't see the actual icon in your editor, but you can see it in your post or page when viewed from the front-end, or preview. This is an example shortcode based icon in your page editor:
Easy to do because wherever you need your icon in a theme file or template, you would simply add this HTML code:
<i class="fa fa-desktop"></i>
Of course, you would change the icon to the one you need by using the reference at the Font Awesome website:
With Flat Responsive, I added one custom style for icons that look like a circle with an icon in the middle. This is done by wrapping your icon shortcode or the HTML version with a container like this example:
<span class="icon-circle">[fa type="desktop"]</span>
<span class="icon-circle"><i class="fa fa-desktop"></i></span>
With the Circle Icon style, you can also change the colours like so:
<span class="icon-circle grey">[fa type="desktop"]</span>
<span class="icon-circle lightgrey">[fa type="desktop"]</span>
<span class="icon-circle tan">[fa type="desktop"]</span>
<span class="icon-circle rust">[fa type="desktop"]</span>
WordPress offers several post formats that are made available through any theme as long as the theme has support for each one. Unfortunately, creating a custom post format is not possible, so we are limited to the following formats:
If you would like to read more about WordPress Post Formats, you can visit the Codex page:
If you would like to see the available post formats on a live site, you can check out the demo website for Flat Responsive by going to the "WordPress" menu link and visit each submenu:
You do not have to use all the post formats that are listed above, but they are there for you if your website needs them. The Standard Post Format is probably the most common one because this is the default option when you write blog posts -- it's automatically set for that one. How you use the other formats is up to you. For example, you could use the "Quote Post Format" as a way to post client or customer testimonials. The Link Post Format could be used to create a type of link directory. The Status Post Format could be used as a way to publish quick updates to your site or other notations that you want to inform others of things that are happening.
When you use a post format, some of them will be styled a little different from the other, but what I've done with this theme is create a "linked" label that goes just before the title of the post that lets the reader know what kind of post it is. For example, the "Quote" post format will look like the screenshot you see below...notice the small label "Quote"? When you click on this label, it acts like a filter and will load up all the posts that are this post format.
Flat Responsive gives you the ability to customize almost every colour within this theme. There may be some elements that you need to create custom CSS to manage the colours of those elements, but for the most part, you should be able to achieve unlimited colour combinations with your website with the built-in colour selectors.
There are many colour options throughout the theme option settings and can be found on different tabs within the customizer. For example, the one in the screenshot below is found on the Navigation tab:
By default, WordPress will show a widget on every page that the widget position exists on. In most cases when making a website, you don't want that widget to show on every single page, so the only way to manage where and what pages it should be on is to use a plugin. You have a few options available:
Please also note the "Blog", "Single", and "Category - Archive" sections do NOT have the following widget positions available:
This tutorial will help you make a gallery using WordPress. Although this is a common thing with any theme, I will show you how it looks with Flat Responsive as your theme.
First thing you want to do is prepare your images ahead of time. I am one who likes to keep things consistent so that I get a nice gallery that is evenly displayed within a page, post, or text widget. This means preparing images by cropping, sizing, and optimizing photos before you upload them. If you were to create a gallery with different sizes of images and some are vertical while others are horizontal, you get a very uneven gallery layout...however, sometimes you may not have the option to make them all the same.
By default, WordPress will use the small thumbnail size, usually 150x150 if this is set in your Media Settings. Normally what happens with WP Media Settings, is that every time you upload an image, WP will generate a thumbnail of each of the sizes you set dimensions for. If you don't have these set, then you need to make sure your photos are the same size so that you can maintain a consistent layout. However, if you do have media settings in place, you can use a size attribute on your gallery short code.
To manage your gallery, such as thumbnail size, you can refer to the WordPress Codex documentation on how to edit your gallery shortcode:
Otherwise, while in your page where the gallery is, switch to the "Text" tab on your editor and add this to the shortcode:
Then click on Update to your page or post.
There are many ways to create a contact page, but the one thing hey all have in common is that they use a plugin for the actual form that people fill out. Normally I used Contact Form 7 as the plugin, but since I am using Jetpack in the live demo site for Flat Responsive, I decided to give this a try and created this tutorial based on Jetpack.
For a basic form, it's very solid and we know it's coded well because it's from the developers over at Automattic (makers of WordPress).
Each contact form can easily be customized to fit your needs. When a user submits your contact form, the feedback will be filtered through Akismet (if it is active on your site) to make sure it’s not spam. Any legitimate feedback will then be emailed to you, and added to your feedback management area.
NOTE: Even though I am using Jetpack for this, you can still create this contact page and use any other contact form plugin such as Contact Form 7, Gravity Forms, or any other plugin to add to your page.