A how-to guide and general information to help you get the most out of your new theme.


Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

This document answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support forum.


Informations about Updates and New Themes are always announced on Twitter and Facebook.


USER GUIDE



Folder Structure


The Theme is built with WordPress best practices in mind, therefore it makes heavy use of the WordPress template engine. What exactly does that mean?

Whenever you see a php function call like this within your php files (get_template_part(), get_header(), get_footer() or get_sidebar() ) the theme retrieves a reusable code snippet, most of the time a chunk of code that is used in many different files.

  • This approach has the benefit that you can edit a single code snippet and the changes will effect many page templates
  • Its still easy to only change a single page template since you can simply include a modified copy of the snippet instead of the original one
  • Last but not least it makes the folder structure clear and tidy.

Apart from the php structure the theme uses a lot of modern CSS3 features, most notably the power of media queries to serve different layouts for different viewport sizes. If you use a modern browser (IE9 +, Chrome, Safari, Firefox) and resize your browser window you will realize that the theme adapts its size to the viewport.

Folder structure:

  • Full Frame → all PHP template files needed to run the WordPress theme as well as the main stylesheet (style.css)
  • Admin → mostly configuration files for the admin panel. Also holds some registration functions for custom post types and dynamic styles.
  • Languages → PO. and MO. files for translation this theme.
  • JS → Custom Javascript files, the prettyPhoto Lightbox files and the jQuery library
  • CSS → Multiple stylesheets:
    • css/app.css - loads the default grid with all widths for the different screens.
    • css/normalize.css- loads the css normalize & default styling for html elements like <a>, <ul>, <li>.
    • css/style.css - main css file.
    • css/custom-style.php - a php file that holds all color informations entered within the backend. It is recommended to not edit this file and instead use the custom.css file.
    • css/custom.css - stylesheet dedicated for user customizations.
  • Img
    • Layout Images, Icons folder etc.
  • Lib → lots of small code snippets and functions that were mentioned before that make the theme flexible and easy to edit.

Installation and Setup


First of all if you are new to WordPress, I would recommend to learn a little bit about it before you get started. Here are some nice Resources on how to get started with WordPress.

To install this theme you must have a working version of WordPress v3.0 or newer already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

IMPORTANT: Make sure that you unzip the downloaded file first (do not try to install or upload this file to your server). In the contents of this file you will find the actual theme zip file called "Full Frame.zip". This is the file you're going to be using to install the theme in your WordPress.

When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:

  1. FTP Upload: Using your FTP program, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server.
  2. So that the structure looks like: /wp-content/themes/fullframe/ .

    Once the upload is complete go to the WordPress administrator backend and activate the theme (the theme should appear now under Appearance > Themes)

  3. WordPress Upload: Navigate to Appearance > Add New Themes > Upload. Go to browse, and select the zipped theme folder. Hit “Install Now” and the theme will be uploaded and installed.

Upload the Full Frame.zip file through the WordPress admin backend (This will ONLY work if the server that hosts your website allows upload limits greater than 6 MB. Please note, most hosting providers have only up to 2MB file upload limit):

Once you have installed the theme, you can go back to the “Themes” page in the WordPress Admin Panel Appearance > Themes and select “Activate” on Full Frame.

Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:

define('WP_MEMORY_LIMIT', '64M');

If that doesn't make any difference, contact technical support at your hosting provider and they should be able to assist you with increasing the file upload memory limit.

The theme's options page should appear now near the bottom of the sidebar under the name: Theme Options:

Import Demo Content (Optional)



Attention: The demo content can only be installed on a fresh Wordpress installation running the Full Frame Theme. If you're having any posts, pages or other data please do not install the demo content as it may cause damage to your previous content!

If you are new to WordPress and have problems with setting up the theme you might want to import the dummy content file that comes with the theme.

The Demo Data .xml file allows you to upload some dummy content to your site to help you get started with the Theme and get to know the functionality. Please note, that the .xml file doesn't include images or the slider data. See the slider section & screencast of this documentation on how to set them up.

  • Log into your WordPress backend
  • Navigate to Tools > Import
  • Click on "WordPress". If you haven't imported anything yet, you will need to install "Importer" plugin.
  • Select the .xml file in the SampleData folder.
  • Now make sure to Select the Menu in Appearance > Menus and set up "Home" as front page and "Blog" as posts page under Settings > Reading.

The theme will then import some dummy posts and pages from the live preview. However you will still need to set some options on your own, like which page should serve as front page or how menus should be displayed. A quick demonstration video can be found here.

Please note: If the demo content was not imported ( the standard export/import .xml option is used in the theme ), it means that there is a server side issue or our demo page is not accessible via http ( you can check the demo on our site ). Sometimes, the content can't be downloaded from external site to your wordpress content folder because of the folder permissions, server configuration, temporary site URL etc. In this case, we recommend you to contact your hosting provider regarding this issue.


Doing Modifications


The theme comes with a backend that allows for heavy style customization (colors, fonts, etc). However often times this is not enough, and you users want to add their own CSS Rules to the theme. We heavily recommend to use a so called Child Theme for that. Using a Child Theme allows you to update the theme and at the same time you also make sure that you will never lose any of your modifications to a theme update.

Using a child theme is simple: just install it, as well as the original "Full Frame" Theme on your server. Instead of activating the Original Theme you activate the Child Theme. Now if you want to add any custom css to your theme use the Child Themes style.css. If you want to add any custom php functions use the Child Themes functions.php.

Now if you update the Original Theme with the latest Version, your child theme will stay in place with all your customizations ;)


Front Page and Blog

SETTING UP THE HOMEPAGE

Setting up Front Page

Before setting up the Frontpage, let me tell you that Front page and Home Section are different. Home section is the the first section in the Frontpage where as Frontpage is where all your sections will be displayed. This is different from the Home Section.

To set up the Frontpage, you must first create a new page with no content inside it, you can do so by navigating to Pages > Add New. You can give this page a title of Frontpage. Under the page attributes section, Select Page template as Front Page Template" and Click Publish.

Once you have created your new page, Goto Settings > Reading. Select A static page and assign the Frontpage for Front Page:

If you haven’t applied these settings above, your frontpage sections will not be displayed.

Setting up Blog

To set up the blog, you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title of “blog” yet you do not have to include any content. Click “Publish”.

Once you have created your new page, Goto Settings > Reading. Select “A static page” and assign the “blog” for “Posts Page:”

Your blog index is now created and can be viewed by visiting the page you just published.


Recommended Plugins


IMPORTANT: Once you've installed the theme successfully you will need to install some plugins necessary to get the most functionality for the theme.

The Full Frame theme has been prepared to work with a few additional plugins to enhance its functionality. Once you install the theme you should see a info box on top letting you know of the plugins "required" and "recommended" to be installed for the theme. Click on the "Begin installing plugins" link:

At the next page hover over a plugin to get the "Install" link to install individual plugins:

If you clicked on the "Dismiss this notice" link to remove the info box:

and would like to install the necessary plugins for the theme at a later time, you could access the plugins' install page from the Appearance > Install Plugins menu: (please note, this link will only list the plugins for the "Full Frame" theme)

Required Plugins Info:

Plugins the Slider Revolution and Contact Form 7 are included in the theme. This plugins are required for the "Full Frame" theme.

SLIDER REVOLUTION

Full Frame includes the “Slider Revolution” plugin for creating rich, dynamic, sliders on top of the standard responsive slider used in your gallery posts and shortcodes. Thanks to the auto activation feature of Full Frame this plugin will be activated when you install Recomended plugins.

If you have any problems with the auto activation you also can do it manually by going to the "lib" folder and then "plugins". In this folder you will find the revslider.zip file. Simply copy this to your desktop then go to Plugins > Add New. Select Upload on the Add New page and then Choose File to select the .zip you just copied to your desktop. Upload it, activate it, and you’re ready to begin using the Slider Revolution.

Once activated, Slider Revolution will create it’s own menu item at the bottom of the WordPress Admin Panel. This is where you will create your slides and get your shortcodes to place throughout your theme as needed. Make sure to read through the Slider Revolution documentation to get a better understanding for how the plugin works, but we think one of the best ways to get used to it is to just play around with it and be creative. You’ll be amazed at what you can create with this increadible product!

CONTACT FORM 7

If you would like to have a contact form on one of your pages we recommend using Contact Form 7. Due the fact that we fully integrated the styling of the contact form in our theme, you simply can activate the plugin and will have good looking forms.

Setting up the Homepage


To set up the homepage you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title yet you do not have to include any content. Select the “Home” template from the Page Attributes section and click “Publish”.

Once you have created your new page which uses the “home” page template, navigate to Settings > Reading and configure the “Front Page Displays” setting. Select the static page option and choose the page you just created as your front page.

Your homepage is now created and can be viewed by visiting your root URL. You can configure the display of the homepage by visiting the theme options panel.

Setting up the Blog


To set up the blog, you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title of “blog” yet you do not have to include any content. Click “Publish”.

Once you have created your new page, navigate to Settings > Reading and configure the “Front Page Displays” setting. Select the static page option and choose the page you just created as your posts page.

Your blog index is now created and can be viewed by visiting the page you just published.

Setting up the Portfolio


To set up the portfolio section, you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title of “portfolio” yet you do not have to include any content. Select the “Portfolio” template from the Page Attributes section and click “Publish”. The main portfolio section can now be viewed by visiting the page you just created.

Adding Portfolio Items

To add a new portfolio item, navigate to Portfolio > Add New. Here you can add a brief description of the project, an excerpt, assign various categories (1 per project only) and upload images. The excerpt is an important piece of each post as it is displayed below the thumbnails in the portfolio, ensure you create a short, punchy excerpt for each.

Adding Images

You will need to upload various images to each portfolio item for it to display correctly. Each portfolio item can display a slider of up to 5 images. To upload each image, browse your computer from the Images section, upload, and choose “Insert Into Post” to set. Each image must be 700px in width but can be any height.

You can create a thumbnail for each project which can be uploaded in the same manner as all other images.


Theme Features


The theme comes packed with features that control the layout and extend the functionality of WordPress. This section will document those features and how to use them successfully.

Custom Menus


If you are using version 3.0 of WordPress or higher, you can setup custom menus to configure your site’s navigation. The theme comes with one custom menu location called “Primary Menu” and is located at the very top of the theme.

Should you be running earlier versions of WordPress, the menu degrades gracefully and automatically creates your navigation for you - custom menus are replaced with a list of pages. In this case, you will have options to alter the display of these menus from the theme options.

Setting up custom menus

To setup your custom menus, navigate to Appearance > Menus. Give your menu a name and build it up using the available widgets. You can add a variety of items including pages, categories, custom links. To extend the available widgets, click the screen options tab at the very top of the screen and configure your options.

Once you have built and saved your menu, simply select the theme location using the widget on the left. Under “Main Menu”, select your custom menu from the dropdown list to use it as the site’s main navigation.

Theme Options


The theme comes with a simple to use administration panel. You can access it by navigating to Appearance > Theme Options. The theme options are conveniently spread over a number of tabs and each tab contains the options that pertain to a particular area of the theme. Please take some time navigate through each tab and read options description.


Home Settings

As the label suggests, these home settings allow you to configure your site’s setup. In this section you can upload your own favicons and customize parallax section.


Typography Options

In the Typography section you can define your theme elements font-family, font-size, font-weight and text-transform. So you have full set of options to get any results in typography.


Social Options

Provide the links for the social platform for which you want to be appeared in the Header and Footer. You can also determine if you would like that social items be opened in a new tab when a user click them.


Styling Options

Here you can set your primary colours.


Header Options

Here you can control any options that relate to the Header.


Footer Options

Here you can control any options that relate to the Footer


Sidebar Options

Here you can control any options that relate to the Sidebar


Slider Options

Configure the homepage slider and paste your Revolution Slider shortcode here.


Contact Options

Here you can set all the details which are to be included inside the contact section of the page.


Blog Options


Lightbox Options


Custom CSS

Here you can insert any custom CSS code necessary.


Updater Settings


SEO Settings


Support Docs


Backup Options

This theme also allows you to backup your theme options data and you know it’s always good to make a backup before you make any big changes.


Translation


Full Frame is localised and you can easily translate it to any language you like. Please note that font family you are using in the theme should support the language's special characters.

Configure WordPress

Before translating your theme, you’ll need to make sure WordPress is setup correctly with your locale. Open wp-config.php from your wordpress installation root folder and modify the line below, or add it if it missing. Complete lists of codes can be found at (country codes) and (language codes).

For example you will need to modify as below for Spanish Language.

define ('WPLANG', 'es_ES');

The translation files .po/.mo (and fullframe.pot file) are located in Full Frame > lang in the Themes folder.

To translate the theme, just follow these steps:

  • Duplicate the en_EN.po file and rename it to your language (for German it's de_DE.po)
  • Edit the new .po file using POEdit ( http://www.poedit.net/ )
  • Hit save, a new .mo file should be created.
  • Make sure that in the root of your WordPress Installation in the wp-config.php file your language is defined like this:
    define ('WPLANG', 'de_DE');

To rename different Words, like "Portfolio Description", "Project Details" etc, just follow these steps:

  • Open en_EN.po file using POEdit (http://www.poedit.net/)
  • Rename the Words you want to rename.
  • Hit save, the .mo file should be updated.
  • Make sure that in the root of your WordPress Installation in the wp-config.php file your language is defined like this:
    define ('WPLANG', 'en_EN');

We constantly develop new features, so after downloading a new Version we recommend to check that everything is translated correct.


HTML Structure


The Theme uses valid HTML 5 and comes with predefined classes for common elements needed in web design.

All templates share basic elements like header, footer, main, and entry so be carefull when editing those or adding/changing the CSS for those ids and classes :)


CSS Files and Structure


The CSS for the theme is split into various files: one that holds the basic markup for layout which are app.css. The style.css holds theme specific css rules.

We got an empty custom.css file which should be used by you to add your own modifications. Since we never touch the custom.css file when making updates you can easily update to later theme versions without beeing in danger of loosing stylesheet modifications.


JavaScript


The theme uses advanced jQuery functions. You do not need to know how to use jQuery to activate them, almost everything is controlled by WordPress.

Magnific Popup: a custom pretty photo skin

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. The lightbox gets automatically applied to links that contain images.

Better documentation can be found here:
http://dimsemenov.com/plugins/magnific-popup/documentation.html


PSD Files


Since the design for the theme was mainly done in google Chrome once the initial Mockup was done we could only include the mockup psd file and the logo files. Other than that the theme doesn't use any images.


Image Sizes


This is the image array used in functions.php to tell wordpress which image sizes to use.

  • add_theme_support('post-thumbnails');
  • add_image_size('fd-lrg', 1024, 99999);
  • add_image_size('fd-med', 768, 99999);
  • add_image_size('fd-sm', 320, 9999);

You can change these settings in functions.php. The theme will then create different thumbnail sizes according to your changes on upload. To reflect those changes you might need to do some minor changes within your CSS file, depending on what you have changed.


Sources and Credits


Open source projects

Licensed projects

jQuery & Plugins

Demo Graphics (didn't included in download)


Again, thank you for purchasing this theme!

If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support forum.


Well Done! If you like this theme, please rate it. If you’re about to rate it with less than 5 stars, please let me know the reason first and I will do my best to improve the theme.

Have fun with your new theme! Best regards ;)