Alfa Responsive OnePage Wordpress Theme

WordPress Theme Documentation

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 Alfa 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 Alfa, please check out our tutorial videos:

Video Tutorials

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:

Installing WordPress

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.

installing-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.

importer

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.

wp-super-cache-configure_options

Step 2. Set Mod_Rewrite Rules

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

wp-super-cache-update_rewrite_rules

Step 3. Set Garbage Collection

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

wp-super-cache-garbage_collection

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.

wp-super-cache-rejected_ua

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:

Contact Us

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.

setting-home-blog-page

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

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].

Since creating and editing pages is basic WordPress knowledge, we won’t cover it in detail. If you’re new to WordPress, you may find the following resources valuable: How to Create a new Post How to Edit and Existing Post Using Categories and Tags

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

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].

spyropress-buckets

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.

magician-featured-image

Feature Image (Cover Image)

You Must set this image, this is the Cover Image

Cover Image will be displayed in portfolio listing. This image is not visible in portfolio single page.

magician-featured-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.

Notice: For best result, original images should be minimum 940px in width

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.

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 NameDescription 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

creating-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

create-access-token

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 KeyConsumer SecretAccess Token and Access Token Secret values and enter these in the Theme Options » Settings » Twitter oAuth Settings panel within WordPress.

oauth-access-keys

spyropress-twitter-oauth-settings

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

spyropress-theme-option

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.

Exporting / importing the theme settings

You can export and save your theme settings and later import them back in Appearance » Options Export/Import section. Please read the available options description for more info on how to export or import theme settings.

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

the-spyrobuilder-intro

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.

alfa-spyro-builder-modules

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