Alfa Responsive OnePage Wordpress Theme

Howdy!

Thank you for buying Alfa! We have spent a very long time developing this theme and the framework which it is built upon. We’ve done our very best to make it as extensive and feature-rich as possible, while also keeping it incredibly easy and slick to use. We’ve also worked hard to improve the ease of customisation.

Documentation Improvements

We would happily welcome feedback from you on how, if anywhere, you would like this documentation improved. If you would find anything a little bit easier and more helpful if we went into more detail, or explained something a little better – we’d be happy to hear it. We want Cutting Edge to be the best theme on the market! If you have any comments, please mail us via the form on http://www.themeforest.net/user/Spyropress.

Video Tutorials

To help you better understand the theme, and for walkthroughs of certain aspects of Cutting Edge, please check out our tutorial videos:

WordPress Installation

This theme requires a working version of WordPress to already be installed on your server. If you need to install WordPress then please visit: http://wordpress.org/download/. If you need any help with the installation, please refer to the guide below:

Step By Step

Here is a brief step by step on how to install WordPress:

1. Download and unzip the WordPress package if you haven’t already.
2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
3. Upload the WordPress files in the desired location on your web server:
   • If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server.
   • If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), create the blog directory on your server and upload WordPress to the directory via FTP.

   Note: If your FTP client has an option to convert file names to lower case, make sure it’s disabled.

4. Run the WordPress installation script by accessing wp-admin/install.php in a web browser.
   • If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php
   • If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp-admin/install.php

Installing a Theme

Download latest version

You can download the latest version of your theme files from Themeforest.

1. Log into your Themeforest account and go find the Spyropress Theme purchase on your downloads tab.
2. Click the “download” button next to it and choose to download the “Installable WordPress Theme” which is just the WordPress file, or choose the “Main Files” which is the entire package.

Uploading through the WordPress Dashboard

The easiest way to install your theme is to upload via the WP Dashboard:

1. Go to Appearance » Themes » Install Themes » Upload
2. Click [Browse] and select the zip file
3. Click [Install Now]

Uploading via FTP

If you have FTP login details, you can upload the un-zipped file to the correct folder on your site.

1. Extract the downloaded folder on your computer.
2. Log into your hosting space via a FTP software like FileZilla.
3. Goto themes folder to the wp-content/themes/folder.
4. To Activate the theme go to your site WordPress Dashboard then to: Appearance » Themes.

Setting Up

Required Plugin Installation

Right after the theme was activated, a notification at the top of the screen will suggest to continue with the installation of the plugins that come packed into the theme. You can also access this page by going to Spyropress » Install Plugins.

1. Click [Begin installing plugins] and select the plugins you need to install from the list. We recommend to install all of them. So you can create every element and parts of the theme.
2. Activate the Plugins you just installed.

Required Plugins

1. ContactForm 7 a plugin to manage multiple contact forms

Recommended Plugins

1. WordPress SEO by Yoast improve your wordpress seo

Demo Content Import (Optional)

The fastest and easiest way to import our demo content is to use our Theme Options Demo Content Importer. Our importer will give you all pages and posts, widgets, theme options, assigned pages, and more. This is recommended to do on fresh installs because it will replace your current theme options and widgets and other settings. So the best time to use the importer, is when you first install Spyropress Theme. To import our demo content, please see the steps below.

1. Navigate to Spyropress » Theme Options and click on the Import tab.
2. Click the [Import Demo Content] button.
3. Once the button is clicked, it can take some time to import everything. Please be patient and wait for it all to load. Once it loads, you will see a “Success” message. Once you receive the success message, please visit your site to view all the demo content.

Speeding up your website

About WP Super Cache

WP Super Cache is a plugin for WordPress that generates static HTML pages from your dynamic WordPress blog. Once static pages are generated, those pages are displayed to visitors, using less server resources than dynamic webpages.

For busy websites running WordPress, we recommends that a caching plugin, such as WP Super Cache be enabled. This will allow your website to handle more simultaneous visitors and also typically loads much faster than without the caching plugin.

Configuration & Settings

Please complete all four steps to use the suggested settings.

Step 1. Set General Settings

On “Advanced” tab When selecting between “Use mod_rewrite to serve cache files” and “304 Not Modified browser caching” please note that 304 Not Modified browser caching will not be selectable as long as you have Use mod_rewrite in use. You will need to use one or the other as recent updates to the WP Super Cache Plugin have made the use of both un-accessible at this time.

• Check box next to “Cache hits to this website…”
• Select button next to “Use mod_rewrite to serve cache files”
• Check box next to “Compress Pages”
• Check box next to “304 Not Modified browser caching”
• Check box next to “Don’t cache pages for known users”
• “Cache rebuild” & “Extra homepage checks” should already be checked, leave them that way.
• Select “Update Status” button.

Step 2. Set Mod_Rewrite Rules

Then, scroll down and select “Update Mod_Rewrite Rules” in the yellow box.

Step 3. Set Garbage Collection

Scroll down to “Expiry Time & Garbage Collection” and enter “3600″ in the box, then select “Change Expiration”

Step 4. Set Rejected User Agents

It is recommended that you do not remove the default user agents from the list, to prevent bots from caching content and pages not normally seen by your visitors.

Explanation of the Options Selected

Cache hits to this website…

Enables caching

Use mod_rewrite to serve cache files

Fastest caching method, uses mod_rewrite rules in client’s .htaccess file

Compress Pages

Super Cache files are compressed and stored that way so the heavy compression is done only once. These files are generally much smaller and are sent to a visitor’s browser much more quickly than uncompressed html. As a result, the server spends less time talking over the network which saves CPU time and bandwidth, and can also serve the next request much more quickly.

304 Not Modified browser caching

Indicates to the client’s browser whether a requested file has been modified or not (see: http://www.addedbytes.com/for-beginners/http-status-codes/ or elsewhere for more info on that apache code)

Don’t cache pages for known users

This prevents logged-in users from being served cached pages and is the default for almost every caching plugin out there.

Expiry Time & Garbage Collection

The default setting will allow cache files to age 1 hour (3600 seconds) prior to being removed which is ideal. This setting can be increased for sites that do not have many posts (1,000 or less ) if you do not update your content often. If you have a very large amount of posts ( 25,000+ ), a lower setting around 1800 may be more viable to prevent stat/CPU issues due to the amount of files being created.

Rejected User Agents

It is recommended that you do not remove the default user agents from the list, to prevent bots from caching content and pages not normally seen by your visitors. (For example, if you have a calendar, a real visitor may only browse months close to now, but a bot will index every month forever as if it is a different page. Caching these pages real visitors are unlikely to visit wastes resources.)

Translation

Alfa is 100% translation and multi-lingual ready, and we recommend that you use the very popular WPML plugin.

To translate the static strings, if you aren’t using WPML then I recommend downloading PO Edit, from http://www.poedit.net/. Once you have installed please follow the steps below:

1. Open the /themedir/languages/ folder and duplicate the en_US.po file, then rename it to your desired language code. For example; for German you need to re-name it as de_DE.po for Spanish es_ES.po for Turkish tr_TR.po etc. You can find all the codes from this link http://codex.wordpress.org/WordPress_in_Your_Language
2. Then you will need to open the .po file in PO Edit. Once opened, you will see all strings that needs to be translated. Type the translation of a string into the “Translation” column. Do not delete or edit “Original string” part.
3. When you finish translating, save the file. This will create an .mo file in the same directory.
4. Upload the new files into the languages folder of the theme /wp-content/themes/themedir/languages/ and then follow this guide: http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Single-Site_Installations

Send Us Your Translation!

If you translate Alfa into a language that isn’t included, then we’d really appreciate it if you could send it to us. This will benefit you as you won’t have to re-upload it when you update the theme, and will also help out others. If you want to contact us about this, please use the form provided on the page here:

Logo

You can change the theme’s logo by accessing the Theme Options and uploading your logo with the uploader.

You’ll want to upload an image to use for the favicon too. The favicon should be 16×16 in pixels.

iOS/Andriod Icons

You may want users to be able to add your web application or webpage link to the Home screen of their iPhone, iPad or Andriod, represented by an icon. Upload icons in Theme Options to represent your web application or webpage.

Setup the Home and Blog Page

To setup the home and blog page, navigate to Settings » Reading, select “A static page” and choose your “Home” page as the Front page and “Blog” page as the Posts page.

Watch the  Creating a static front page for your blog video from WordPress.tv.

Menus

Overview

WordPress comes with a wonderful and easy to use menus functionality, letting you quickly create a custom menu and place it in your theme’s supported menu areas or even in a widgetized area with the menus widget. You can customize your menu in all our themes by going to Appearance » Menus.

The WordPress menus functionality is well documented on the WordPress codex.

Adding Links

Here’s a general overview of a menu we’ve created for our theme. We’re working on our main (primary menu), if you haven’t created a menu yet you will be prompted to create one before being able to add pages, etc… to your site’s navigation. You can create as many menus as you’d like as well.

In the left hand column is a list of all your pages, as well as custom post types, categories, tags, etc… You can then select certain pages, or products, or categories and add them to the menu you are creating.

Creating Drop Down Menus

Once an item is added to a menu, those menu items can be rearranged. Placing the mouse cursor over the menu item title, when the mouse cursor changes to 4-arrows, hold the left-mouse button down, drag the module to where you want to place it, then release the mouse button (this is called drag-and-drop).

To create a drop down item drag a menu item slightly to the right of the menu item above it to create a hierarchy (parent/child) relationship in the menu.

WordPress 3.6 adds a note when a menu item has become a sub link as well.

Adding A Home Link

Adding a “Home” link to your menu is useful if you want to give users quick access back to your front page, or if you have set a static page as your front page, and want a “Home” item in your menu. The logos in our themes are also links to your home page, but this helps some users with a specific link saying home.

To add a “Home” link, click View All under the Pages panel.

Managing Locations

It’s up to the theme developer to decide how many menu locations a theme should have. Again, in our example we have several menu locations. Your theme may not have the same location names or number of locations. Regardless, there are two easy ways to assign a menu you just created to a menu location.

While creating or editing your menu, you can assign it’s location at the bottom of the menu. There is also a Manage Locations tab where you can assign all locations a menu from one screen. Helpful if your theme has many menu locations.

How to link section to Menu

Creating a link to your section is what a One-Page Theme is all about and we make this really easy and fund to add the section links. Watch the video Tutorial for this.

Posts / Blog

To start adding posts to your blog, navigate to Posts » Add New.

Creating A Post

Once you’re on the Add New Post screen:

1. Start filling in the blanks: enter your post title, write your actual body content in the main post editing box below it.
2. As needed, select a category, add tags, and make other selections from the sections below the post.
3. When your post is ready, click [Publish].

Buckets

Buckets are reusable piece of content, which can be placed in the middle of another content area or even inside another bucket.

Advantages of Using Buckets

• Buckets make use of SpyroBuilder for creating content! that mean you can design the complex bucket layout as well.
• Content is reusable in any area of the website – post, pages, sidebars, etc.

To start adding buckets, navigate to Buckets » Add New.

Creating A Bucket

Once you’re on the Add New Bucket screen:

1. Start filling in the blanks: enter your post title, write your actual body content in the main post editing box below it or you can use SpyroBuilder.
2. When your bucket is ready, click [Publish].

Shortcode

Bucket shortcode can be used to display specific bucket into a post, page, widget or custom post types.
[bucket id="" /]

Portfolio

Portfolio let you showcase your work beautifully in the Alfa, to start adding portfolio items, navigate to Portfolios » Add New.

Creating A Portfolio Item

Once you’re on the Add New Portfolio Item screen, you will then be able to set a title for the portfolio item, add the body content, and also provide all the meta information such as extra details and media.

Feature Image (Cover Image)

You Must set this image, this is the Cover Image

Portfolio Previews

You can upload and add several images as Portfolio Previews. These images will be used in the slider area of the Portfolio Detail Page.

You can add/choose categories for each portfolio item. . Portfolio categories will be used to filter through the portfolio in the filtering system.

You can also set the Live Preview URL of the item and you can also add testimonials to that item, so your user can know what your client thinks about your work.

Adding Portfolio Listing to Page

Now we assume that you have added several portfolio items, lets display your portfolio items on the HomePage.

• Goto the Pages and select HomePage to edit
• Expand the Row in which you want to add your portfolio lsiting
• Click [Add Module] Button and select Recent Portfolio Module
• Set number of work you want to show
• Click [Save]

Gallery

Gallery show your images or videos through Gallery manager in an effective way.

To start adding galleries, navigate to Galleries » Add New.

Creating A Gallery Item

Once you’re on the Add New Gallery screen:

1. Start filling in the blanks: enter your post title for your internal use.
2. You can have an image or video by selecting the item type.
   1. If you select image you have to set the featured image on the right side of the screen.
   2. If you choose video another field is appeared below it asking you to enter the video url you want to use.
3. You can categorize the item by selecting the Gallery Categories.
4. When your item is ready, click [Publish].

Twitter oAuth

To enable the use of Twitter widgets/modules/assets within Alfa, you will need to create your own Twitter Application and then generate access tokens and secrets for use.

Creating a Twitter Application

To create your own Twitter Application, follow these steps:

1. Head over to https://dev.twitter.com/apps
2. Click the Create New Application button
3. Give your application a Name, Description and link to your Website, you can leave the Callback URL empty
4. Scroll through the Developer Rules Of The Road section and check the Yes, I agree option
5. Enter the Captcha code and click Create your Twitter Application

Obtaining an Access Token and Secret

Once you have created your Twitter Application you will need to generate an Access Token and Secret.

1. Go to https://dev.twitter.com/apps and select your new Application, if you just created your application you will already be on this page.
2. Scroll to the bottom of the page and click on the Create my access token button under the Your access token section to create your access token and secret

Setting up your Theme Options

1. Go to https://dev.twitter.com/apps and select the application you created.
2. Scroll to the OAuth settings and Your access token sections
3. Copy the Consumer Key, Consumer Secret, Access Token and Access Token Secret values and enter these in the Theme Options » Settings » Twitter oAuth Settings panel within WordPress.

Child Theme

We have provided a child theme package ready for you to use if you wish to make changes to files, while keeping them through updates. The child theme is included within the main download folder, all you need to do is upload this as well as the standard “Alfa” folder, and then activate the child theme in Appearance » Themes from the WordPress menu.

style.css

We’ve include the child theme css file ready for you to add your own styles, if you’d prefer to do it here rather than in the custom css box within the theme options. If you are adding styles here, but aren’t seeing them on the front end, try adding !important to the end of the declaration. This is sometimes needed to override the dynamic css styles that are generated from the theme options customisations.

functions.php

We’ve also included a child theme functions.php file, which you can use to add your own php functions, or override functions from the parent theme.

Theme Options

Alfa featured an amazingly powerful and beautiful Theme Options where you can find all the theme settings. The theme options can be used to customise the theme to suit your needs, including backgrounds, layouts and much more. You should take the time to go through all of these options to ensure that you are getting the most out of the theme.

All, theme options are self-explanatory or are described well directly in admin panel. The theme options is divided into the categories to make them easy to find.

Setting Up

1. All the theme options can be set in theme admin panel. To display it navigate to Spyropress » Theme Options in WordPress admin menu.
2. After admin panel is displayed, choose the options category from left pane.Panel contains many different settings for the theme. Please, read the option description for more information on each option and how to set it up.
3. After you set all the required options, don’t forget to save your changes by clicking the [Save changes] button.

Slider

Alfa featured an amazingly powerful and beautiful Fullscreen Slider where you can add unlimited slides.

Setting Up

1. Navigate to Spyropress » Theme Options in WordPress admin menu
2. After admin panel is displayed, choose the Customization category from left panel
3. Select Content Type as Slider
4. Click [Add New Slide] and select the image you want to use on the slide.
5. After you set all the slides, don’t forget to save your changes by clicking the [Save changes] button.

The SpyroBuilder

Overview

Spyropress Brings the revolutionary Drag-and-Drop Builder. Create elegant and complex layouts through our advanced visual interface. Be free to add anything in any place you want and be in control of everything.

Modules

It is backed by Modules comes with Developer API to let you create unlimited modules according to your need. The Modules API is similar to the WordPress Widget API, so easy to learn nothing new.

Integrated into WordPress Core

Yes! Now you can use your favorite widgets, shortcodes, wordpress sidebars and wordpress menus while building your content using the SpyroBuilder, build freely whatever you want.

Video Demo

Coming Soon

SpyroBuilder Modules

Alfa includes 15 Modules, that you can use with The SpyroBuilder to create the page layout as you want.

Blog – display your latest post with this module.

Bucket – display any bucket which you have created for re-using of content.

Contact Info – display your contact information such as address, phone, email, etc and your timing as well.

Divider – separate your website sections easily.

Gallery – gallery builder let you create a gallery in the website.

Google Map – embed a google map with zoom option.

Heading – create heading into the page layout wherever needed.

Icon Teaser – display brief text with a link and icon.

Our Team – let you display your staff with their name and photos.

Parallax Area – create parallax node into the page layout wherever needed.

Recent Portfolio – let you display your latest work in elegant grid way.

Rich Text – provides a WYSIWYG editor to create rich text content into page.

Service List – let you display your services in a elegant column way.

Skills – display your set of skills in beautiful progress bars.

Testimonials – list your clientèle testimonials.

CSS Files

assets/css/skeleton.css - Sleek, intuitive, and powerful front-end framework for faster and easier web development.. More info: Skeleton Grid

assets/css/custom.css - Its a blank css file used to have custom styling if required and you can override it in Child Theme.

assets/css/jquery.fancybox.css - fancybox lightbox skin used in the theme.

assets/css/layout.css - The main css for the theme, which includes the layout and styling for all aspects of the theme.

JavaScript Files

assets/js/app.js - this is where all the custom magic happens. Feel free to edit any of this code, but make sure to keep a backup in case anything goes wrong!

assets/js/bigvideo.js - a jQuery Plugin for Big Background Video (and Images)

assets/js/easing-min.js - a jQuery plugin from GSGD to give advanced easing options. You can find out more here: http://gsgd.co.uk/sandbox/jquery/easing/

assets/js/gmaps.js - a jQuery plugin for integrating Google Maps easily. You can find out more here: http://hpneo.github.com/gmaps/

assets/js/jquery.cbpFWSlider.min.js - a jQuery plugin for Fullscreen Slideshow of images. You can find out more here: http://tympanus.net/codrops/2013/02/26/full-width-image-slider/

assets/js/jquery.cycle.all.js - a plugin used to cycle images

assets/js/jquery.fancybox.js - a jQuery plugin for lightbox. You can find out more here: http://fancyapps.com/fancybox/

assets/js/jquery.imagesloaded.min.js - a plugin used to detect when images have been loaded

assets/js/jquery.isotope.min.js - an exquisite jQuery plugin for magical layouts. You can find out more here: http://isotope.metafizzy.co

assets/js/jquery.lettering.js - a jQuery plugin for radical web typography

assets/js/jquery.localscroll-1.2.7-min.js - makes animated scrolling navigation, using anchors

assets/js/jquery.nicescroll.min.js - a jquery plugin, for nice scrollbars with a very similar ios/mobile style

assets/js/jquery.parallax-1.1.3.js - a plugin used to turn nodes into parallax effect

assets/js/jquery.quovolver.js - a jQuery plugin for Rotating Quotes

assets/js/jquery.sticky.js - makes an element on the page stick on the screen as you scroll

assets/js/modernizr.custom.js - is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. You can find more here: http://modernizr.com/

assets/js/jquery-ui-1.8.22.custom.min.js - official jQuery user interface library