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.

Hide the Edit link Button from Blog pages

I know the little “Edit” link that appears on pages and posts annoys people because it does to me too. So for everyone who wishes they can delete that edit link from the front of their site pages when viewing it, I have a theme option setting for you. By default, most themes have this so that it allows the site owner to edit the page or post by clicking on this link directly from the front-end. Go to Appearance >> Customize >> Basic Settings >> Blog Settings Check the box next to Hide Edit Button Click Save & Publish

Using Icons

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. Get the Plugin Go to Plugins >> Add New Type in the search: Font Awesome Shortcodes Activate it Using Icons in your Content 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…    read more 

Make a Contact Us page using Jetpack

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 Pure & Simple, 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…    read more 

Make a WordPress Gallery

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. Create a page or open a page (or post) where you plan on adding a gallery Click on the Add Media button above the…    read more 

Show a widget on select pages only

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: Jetpack – Has a Widget Visibility feature that adds the settings at the bottom of every widget Display Widgets – A plugin that lets you show widgets on select pages. It also adds the settings to each widget in the admin. Dynamic Widgets – A plugin that offers extensive options but does come with a learning curve, albeit very powerful features. Pure & Simple uses Jetpack on the live demo site and I enabled the Widget Visibility feature on it so I can use it to show widgets on select pages….    read more 

Add Breadcrumb navigation

Flat Responsive is ready for navigation, should you decide to implement it using a plugin called Breadcrumb NavXT. Very easy to setup, and it will give you navigation for your pages or posts. To see this in action, please visit the demo site here: Sample Breadcrumbs Install the Plugin Go to Plugins >> Add New Search for “Breadcrumb NavXT” and then click to install and activate it This gets added to your WordPress Settings menu group which you can customize to your needs Once done, the theme has code already in it that displays your breadcrumb navigation on most pages and posts with exception to the “Front Page”.

Customize your Theme Colours

Pure & Simple 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: Go to Appearance >> Customize >> Colours Click on any of the colour selectors and choose your colours Click on Save and Publish

Setup your Social Network Icons

Flat Responsive comes with a large selection of available social network icons and a few other options that you can use. I’ve included most of the popular and common options where you can simply activate the ones you want to use and add in the links (URL’s) so visitors can check out your social pages. Currently, this theme offers: Twitter Facebook Google+ Linkedin Pinterest Flickr Youtube Vimeo Instagram Reddit Stumbleupon WordPress Github Dribbble Tumblr RSS When adding your URL’s to the social settings in the customizer, you need to include the full URL like this example: Activate Your Icons Go to Appearance >> Customize >> Social Networking Go down the settings and enter in the full URL to your social profile pages Click Save and Publish If you need to temporarily disable your social bar, under the Social Networking tab in the customizer, you can check the box next…    read more 

Introduction to Post Formats

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: Standard Post Format Aside Post Format Image Post Format Gallery Post Format Audio Post Format Quote Post Format Status Post Format Video Post Format Link Post Format If you would like to read more about WordPress Post Formats, you can visit the Codex page: Post Formats If you would like to see the available post formats on a live site, you can check out the demo website for Pure & Simple by going to the “WordPress” menu link and visit each submenu: Demo Website 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…    read more 

Choose your Blog Layout and Styling

With Pure & Simple, you get several blog layout templates: Blog Full Width (no left or right sidebars) Blog Left Sidebar Blog Right Sidebar Blog with Left and Right Sidebar Blog Styles You get four blog styles with Pure & Simple. Blog styles are not really layouts, but more of how your blog summaries look. Blog Style 1 Blog style 1 is the default style for Pure & Simple, 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 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 Blog style 3 gives…    read more