Hi! Before we begin, thanks for purchasing this theme! We hope you enjoy working with it.
In the following pages we'll cover the installation, setup and use of this theme, together with a reference to its special features. We tried to cover every important side of it, so we truly suggest you dig into it if you have doubts or difficulties. However, if you find yourself with no answers or have any question beyond the scope of this document, please feel free to post it in our support forum at http://quadroideas.com/support/ and we'll get to it as soon as possible (allow for a 24hs period).
Happy blogging!
Quadro Ideas
Before we begin the installation of the theme you have to be running an updated version of WordPress. If this is your first time using WordPress and need help with that you may want to have a look at the Codex page for Installing WordPress: http://codex.wordpress.org/Installing_WordPress. Don't worry, it should be really easy.
There are two steps required in order to install a WP theme: uploading and activating. To upload it, you have two options:
Upload through WordPress: From the WP menu go to Appearance » Themes, select the tab "Install themes" and click on "Upload". Then, choose the binder.zip folder contained in the folder you downloaded from QuadroIdeas.com.
Upload through FTP: Unzip the binder.zip folder and upload only the theme folder using your preferred FTP client into the wp-content/themes at your domain.
Once you have uploaded the theme to your server click "Activate" it.
If you downloaded the theme from the Appearance >> Themes screen in your WordPress dashboard, you don't need to upload it. Just click on "Activate" and you'll be ready to go.
Note: When you update your theme from the admin Dashboard, any custom modification you may have done to the theme's files (if you did any) will get replaced for the new updated files. Please keep a copy of those modified files or, much better, make your own customizations in a child theme. This does not apply to the Theme Options and WordPress settings. If you didn't touch the theme's files you don't need to worry about it.
To activate your menus, go to Appearance » Menus.
Create a menu adding your selected pages to the right column on the screen, and order them as you want. Give the menu a name, save it, and then define a "location" for it clicking on the "Manage Locations" tab. The location you'll need to supply at least right now is "Primary Menu".
Unless you want your homepage to load your latest posts by default, you'll want to define a page to be the homepage, which later you'll modify to suit your needs.
Navigate to Settings » Reading and for "Front page displays" select "A static page". Then, select any page you have created to be your homepage. You can use the regular template (or even the Blog Template, though it will also load your latest posts) for it.
You have two options to create a blog on your site. The first one, as explained in the previous point, is to navigate to Settings » Reading and for "Front page displays" select "Your latest posts". This will show your blog posts in the homepage of your site automatically. To display your blog on a different page other than the homepage, select "A static page" instead of "Your latest posts". You will then be able to chose a page to be your front page, and then a different page to hold your posts on the "Posts page" option below.
You can also pick your blog and archives style, between a masonry (kind of a grid style) and a more classic one, and choose between two and four columns for its layout at Appearance >> Theme Options, on Layout tab.
The amount of posts a specific blog page will show before the navigation is defined on the Settings >> Reading page, with the "Blog pages show at most" option.
In WordPress, an Archive is a collection of posts, grouped by a particular common denominator (which can be its author, a category, a tag, a post format, etc.). You don't need to perform any action to make them work. WordPress will automatically show an archive when a category, tag or author link is clicked.
With Binder PRO you have the ability to display a term description right next to the term title in any archive. Search engines like Google love archives and they love archives which they can categorize and describe. So, showing this description can be very valuable regarding SEO efforts.
To display a description for a particular term, all you have to do is fill in that description in the proper field. For that, navigate to Posts >> Categories, or Posts >> Tags and complete the "Description" field. It will not only be useful for your readers and for search engine optimization, it will also make that archive page look super slick.
PRO TIP: For author archives, a nice author box is shown before the posts displaying the author's gravatar, bio and contact methods. If you navigate to Users >> Your Profile you'll see email and website URL fields, that are native WordPress input fields for user contact methods. That information gets shown with a nice icon every time the author box appears, so you may want to fill those fields up to allow for your readers to reach you there too.
Next we'll cover the general set of options Binder offers. These options are theme wide and define most of the theme functioning. Remember to save each tab before you go on to the next one, otherwise your changes won't be saved. Alternatively, you can use the reset button to restore each tab to its defaults.
To begin, navigate to Appearance » Theme Options.
The Branding section controls the logo for the site's header, for your about text and the favicon. Is desirable that you upload logo images both for regular ratio screens and both for retina screens (twice as big as the regular ones).
The Miscellaneous section controls the display of the 404 Error page, the loading of Retina scripts and the "Back to top" functionality, both of which you can enable or disable. Disabling the scripts if you won't use those functionalities may improve loading times a little. Remember that disabling the Retina script means that newer images that you upload to WordPress won't get cropped accordingly, so you may want to plan that in advance.
Inside the Layout Options you'll find:
On the Design Options tab:
You can select here fonts for the different sections of the theme. It is advisable to choose no more than one or two different external fonts (such as those from Google Fonts) to improve loading times.
There are two options here worth explaining with a little more detail. The Weight options, and the Subset options.
When we load fonts from Google fonts we only request specific font weights in order to minimize browser and bandwidth resources. The default font weights that get requested are 'normal' and 'bold', which are 400 and 700 respectively. For that, the setting on the field looks like this:
:normal, bold
You can bring only a specific weight if you'd like to, like this:
:300
Or bring many, like this:
:300, normal, bold, 800
Just be sure that those font weights exist on the font set you are requesting by browsing the Google fonts archive and looking into each font.
Also, there are certain languages which will need a whole different set of characters in order to display their words. That's what the Subset option is for. If you are writing in English, Spanish, French, German and so, you won't probably need that. In case you know your language needs for a font subset to be called for, just add that with a semi-colon before the subset name. For example, for Cyrillic subsets add this in the subset field:
:cyrillic
Fill in the accounts for each social network icon you want to display on the site's header or footer. Then, select an icon scheme, and the set of colors for each social section. Hint: choose the branded version if you want each icon to be on the color of its network. You can select here, also, whether to open those links in a new (_blank) tab or in the same one (_self).
In addition to the Theme Options, you'll find inside the post editor a small metabox called Post Options with a field that allows you to pick the background color for any specific post's header.
For any page you create in WordPress you can pick a template that matches your needs. You'll find the Template select field inside the Page Attributes metabox, at the right side of the page screen. Binder comes with 2 custom templates you can choose from.
The default page template simply brings any content you enter to the page. Simple and nice. You can use the Featured Image WordPress option to show an image behind your page's title.
In addition, you can paste in the WordPress editor a shortcode from your favorite contact form plugin. Binder comes ready to beautifully integrate with the free plugin Contact Form 7 and with the Gravity Forms plugin too, which are -also- of the bests out there.
Other than setting the desired template for the page you are creating, you have the option to add a featured image to any page by clicking in the "Set featured image" link inside the Featured Image box. An uploaded Featured Image will be cropped and used then as a background image for the page header, where the title resides.
If you need to adjust the page title color to make it more visible, or if you just want to give your page a more personal style, you can pick a color for the title by using the "Title color" field you'll find in the Add new/Edit page screen.
There are two features you can make use of when writing a post regarding its styling.
The first one, WordPress native and perhaps more obvious if you have already worked with WordPress in the past, is the Featured Image box. By uploading an image through the Featured Image box you are giving the post a visual way of representation across the whole theme (whether it is in the blog view, a recent posts widget or any other way of posts displaying). Specifically, the featured image will get two important uses. First, it'll be cropped to sit automatically and nicely below the post header on the single view. Second, it'll be the image shown next to the post in the Masonry Blog layout, and also in the Classic one.
Binder is a publishing theme with an accent put on the visual side. That's why you'll find another little box in your Add New/Edit post screen which lets you pick a background color. This color will serve as a background color for your Masonry Blog style. If you don't want to use a specific background color for your posts just leave that empty and the theme will handle those background with its defaults.
Hint: If you are into colors, you may pick a specific colors palette that suits your project and pick those colors recursively when you publish a new post to make your blog look fresh and lovely. Or, you can go crazy and pick colors depending on your daily mood... the colors game is open here!
Post formats, introduced in WordPress since version 3.1, is a feature that allows you to specify what the post content is about and Binder is ready to make that content look great. You can choose the format for your post on the right side of the post editing screen.
You can actually use any kind of content for any kind of post, and even compose a Standard post (the most common one) full of videos and galleries, but if you really want to see Binder's magic, pick the right kind of post and let the theme display its content in a gorgeous way to feature what you really want to show on each post.
With future compatibility in mind, Binder does not use any custom fields to grab the data from your posts, just figures out what you intended to add and uses it. Also, it does not matter where you put your special content inside the post, just create and let the theme handle the work for you.
For Video posts and Audio posts you generally embed your content by pasting the URL of the chosen media (YouTube or Vimeo, for example) and hitting enter on your keyboard after that line. In the blog view, video posts with videos from YouTube or Vimeo will use an automatic video screenshot if no Featured image gets added to the post.
For Gallery posts you add your images through the Add media button above the content editor, and once there create a gallery, order your images and insert the gallery into the post.
The Image post uses the image you uploaded as Featured image, so don't forget to add that one if you want your image to be bold and nice.
The Aside post, Status post, Quote post, and Link post handle the content in a very simple way. Enter whatever you have to say and that's it. Don't forget that if you are adding a link post you should actually have the link in your content (you can create it with the link-chain button in the content editor of WordPress).
These cute and neat widgets come with this theme as a gift. They are available for you at your Widgets screen, in the Appearance menu. :)
The Image widget is simply a widget that lets you easily add an image to your widget area. Fill in a URL for your file or click the "Upload Image" button and hit Save. That's it, a nice image in your widget. :)
This widget displays a list of recent posts from your posts list, next to its respective thumbnails (using the Featured Image for each post). If the post doesn't have a Featured Image it'll show a default thumbnail icon. You can set how many posts to show in the list.
This widget displays a selected post from your posts list, nicely integrated with its thumbnail (using the Featured Image on size "medium" for each post). If the post doesn't have a Featured Image it'll show a default thumbnail image, but it probably won't look as nice as when it does have an image. This is clearly a more visual widget.
The Quadro Video widget lets you include a video from any of the common social video sites (Youtube, Vimeo, Blip.tv, etc.) into your widgets area. Just paste in your video URL and it'll accommodate to show up always nicely and at the correct size.
We've chosen a group of WordPress plugins we think you will find very useful in your everyday WordPress work, and added special support for them, making sure they display and fit nicely within the overall design of the theme. That does not mean other plugins won't look nice when using them on Binder, nor it talks about how those plugins perform. Other plugins will look as great as they are built, always. It just means we've styled these plugin's components according to the rest of the theme so you can install them and activate them and never wonder whether they will look fine or not.
Available on the WordPress plugins repository, Page Builder is a free plugin "to create responsive column layouts using the widgets you know and love". With it you'll be able to structure your content in many columns and rows you need and place inside them neat elements such as: galleries, buttons, call to actions, videos, testimonials, price boxes and more. You can also use the native WordPress widgets and the nice Quadro Ideas widgets that come with the theme.
We also recommend you to install the SiteOrigin Widgets Bundle to get even more elements to insert inside your content, like: posts carousel, features/services, customizable buttons and call to actions, prices table and sliders. The second great thing about this is that you can also use these widgets in regular widgetized areas all over your site.
Whether it's a simple contact form or that you're looking to build a more complex form for your website, these tools will be the best choice for you. Binder supports the amazing Contact Form 7 and Gravity Forms plugins. Choose the one you like the most and create custom contact forms for your site. They're both really great and solid and you can use them in pages, posts or insert them inside a widget.
The Contact Form 7 is a free plugin that you can find in the WordPress repository. We recommend you using it to build simpler forms; it's really easy to implement and you can find the documentation guide here.
If you're looking to create an advanced form that can integrate with several popular web applications and online services but that's still easy to configure, then you can go for the Gravity Forms plugin. It has 3 types of licenses with different prices; you can choose the one that better fits your project and start right over.
Available on the WordPress plugins repository, Crelly Slider is a free plugin to create amazing layered sliders. With it you'll be able to build your slides using images and text layers with custom animations. Then you can use the slider on a page or a post by pasting its shortcode inside the content wherever you want.
Available on the WordPress plugins repository, Jetpack is the famous plugin made by the Automattic team. In their words: install Jetpack to "supercharge your self-hosted site with a suite of the most powerful WordPress.com features". You'll find the plugin comes with a lot of add-ons you can enable for your website. We put a lot of thinking on trying to find those that can be really useful to you. These are the features that are specially supported by Binder that you can enjoy on your site:
Binder includes some action hooks you can make use of to modify (or interact with) specific parts of the theme. For a detailed explanation of working with hooks in WordPress please refer to the hooks documentation in the Codex.
Simply put, a "hook" is a little spot where you can literally hook specific actions or functions, to be run in certain parts of the site's run time without touching or modifying the template files for the theme. All the code can be added in your functions.php file inside a child theme and be kept ordered and safe from updates.
To add a function to a hook, just add it this way:
add_action( 'the_hook_name', 'your_function_name' );
function your_function_name() {
// do stuff here
}