Roya Documentation by Spnoy v1.2.1


Roya - Responsive AJAX Portfolio WordPress Theme

Created: December 2012
By: Spnoy
Support: [Coming Soon]

Thank you for purchasing Roya. If you have any questions that aren't covered in the documentation, then please feel free to email via our user page contact form here. Thanks again!


Table of Contents

  1. Installation
  2. Setting up
  3. Theme Features
  4. Included Files
  5. Image Credits

A) Installation - top

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 this guide: http://codex.wordpress.org/Installing_WordPress.

Theme Installation

The theme files need to be uploaded before you can activate the theme for use. There are two ways you can do this, FTP upload or WordPress upload.

If you are uploading via FTP upload, then you need to upload the unzipped folder “Roya” to the /wp-content/themes folder of your WordPress installation.

If you are uploading via WordPress upload, then navigate within the WordPress admin area to Appearance > Add New Themes > Upload. Select the zipped file “roya.zip” and then hit Install Now.

Activating Roya

Once you have uploaded the theme, you need to activate it by going to Appearance > Themes, and activate “Roya”.


B) Setting up - top

Widget Areas

There are up to 6 widget sections that were customised to work out with the theme scheme, They can be viewed and changed under the Appearance > Widgets menu.

We used two widget on the demo website, 'Roya Custom Latest Post' and 'Search'.

Remember that the social icons and copyright sections are not widget, but you can enable/disable/modify them from the Theme Options, which can be found under the WordPress Appearance menu.

Portfolio

The Portfolio menu option on the left is where you add Portfolio items. To add a new portfolio item, select the Portfolio > Add New option from the left hand WordPress menu.

You will then be able to set a title for the portfolio item, set a featured image (Thumbnail image) and add the body content.

You can add categories for each portfolio item, which act as the filters in the filtering bar.

You will then need to create a page using the "Portfolio" template to display your portfolio items.

For doing that, Go to Pages menu option on the left and select 'Add new', Set the title, for example if you want your home page to be a Portfolio page like the demo, set the title to "Home".
You should then select the page template from the Template area in the right sidebar and then Publish the page.

Go to the Settings > Reading and set 'Front page displays' to 'A static page' and in 'Front page' list select the page that you just created 'Home'.
This step is necessary if you want your Home Page to be one of your Pages, and in this case it's showing your Portfolio page.

Now you can start adding Portfolio item into the Portfolio section and check them out on the page that you just created.

Just remember if you want to display your page in the navigation, you can easily go to Appearance > Menus and add the page to the Menu that you created.

Blog

The Posts menu option on the left is where you add blog items. To add a new blog item, select the Posts > Add New option from the left hand WordPress menu.

You will then be able to set a title for the post, set a featured image (Thumbnail image) and add the body content.

If you just want to display abstract of the post on the blog page and the rest on it's single page, you can use <!--more--> in your editor to make a breaking point to the rest of article.

You will then need to create a page using the "Blog" template to display your posts.

For doing that, Go to Pages menu option on the left and select 'Add new', Set the title, for example "Blog".
You should then select the page template from the Template area in the right sidebar and then Publish the page.

Now you can start adding Post into the Posts section and check them out on the page that you just created.

Contact

To setup a contact page, you need to do 2 things.

1 - Install and active "Contact Form 7" plugin.
2 - Create a page using "Contact" template.

You will then need to create a form using the "Contact" option from the left hand WordPress menu. After creating the form, It will give you a shortcode, you should place that shortcode into your Contact page.

For farther customization and edit, you should use the options provided for you in the Theme Options > Contact tab.

Customisation

Roya can be customised through the Theme Options, which can be found under the WordPress Appearance menu.

You can also select the Advanced tab to select the theme color scheme and set the Post per page and Portfolio per page that is used to determine how many posts or portfolio item should be display on the page.

There are numbers of options which you should take the time to look through to customise Roya to your needs.


C) Theme Features - top

Theme Options

The theme options can be used to customise the theme to suit your needs. You should take the time to go through all these options to ensure that you are getting the most out of the theme.

Custom Page Templates

Portfolio - This template is used to display your portfolio items, You can choose how many items to display per page.

Blog - This template is used to display your blog posts.

Contact - This template is used for the contact form, which requires the Contact Form 7 plugin to be installed. You can provide the content for this page through the "Contact Form 7" plugin and the contact tab in the theme options panel.

Default - This page template is the default page template, which can be use for creating pages. You may notice a custom meta box called "Page Detail" ( it will only appear when the page template is "Default template" ). It will be used on the page under the page title and give the viewers some information of what is going on, on this page.

Page Options

Every Post/Portfolio/Page has a box called "Page Options", You can use it's settings to customize your page to suit your needs.

Custom Widgets

Roya Custom Latest Post - This widget displays your latest blog post with a readmore button, you can set a title for this widget but it's recommended to not to, for the sake of the design beauty.

Shortcodes

This theme comes with two Awesome shortcodes that you can use it in your pages or posts or ..., just place it in the editor and publish, Wallah!

1. [roya-gallery] - use it in your posts or pages and it will give you a flexible Slideshow of the gallery that you created for that post or page.

2. [advanced-roya-gallery] - use it in your posts or pages and it will give you a Advanced Slideshow with carousel.

And again, make sure that you create a Gallery for your post/page and you will upload enough images.

Remember that you can still use the native wordpress gallery shortcode: [gallery] and even install third party plugins for it.

Contact Form

This theme comes with a customised contact template, it uses "Contact Form 7" plugin for it's functionality, so if you don't have it you should insatll it.

You can create your contact form using 'Contact' menu option on the left, if you want you can use your own markup for customising contact form, this is the markup that we used to create the contact form on the demo page:

[text* your-name watermark "Your Name (required)"]

[email* your-email watermark "Your Email (required)"]

[textarea your-message watermark "Your Message"]

[submit "Send"]

Social Sharing Buttons

The theme supports "Social Sharing Buttons" and you can edit it's settings through the Theme Options panel which can be found under the WordPress Appearance menu.

Just remember, the theme uses "Digg Digg" plugin for Social Sharing functionality, so if you don't have this plugin in your WordPress, you should install and activate it, otherwise "Social Sharing Buttons" won't work.


D) Included Files - top

CSS Files

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

Fonts

Arimo - Main font used in this theme.

Archivo Narrow - Secondary font used for Captions and Titles.

JavaScript Files

main-script.js - This is where all the custom magic happens. This script execute on every template except Portfolio template. Feel free to edit any of this code, but make sure to keep a backup in case anything goes wrong!

portfolio-script.js - This is where all the custom magic happens. This script execute only on Portfolio template. Feel free to edit any of this code, but make sure to keep a backup in case anything goes wrong!

blog-ajax-handler.js - This is where all the Ajax Call for Blog template gets handled, if you want to edit this be sure you know what are you doing and keep a backup in case anything goes wrong.

portfolio-ajax-handler.js - This is where all the Ajax Call for Portfolio template gets handled, if you want to edit this be sure you know what are you doing and keep a backup in case anything goes wrong.

jquery.isotope.min.js - An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.

jquery.prettyPhoto.js - “prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.” Read more about jQuery lightbox for images, videos, YouTube, iframes, ajax.

jquery.imagesloaded.min.js - A jQuery plugin that triggers a callback after all the selected/child images have been loaded. Because you can't do .load() on cached images.

jquery.flexslider-min.js - An awesome, fully responsive jQuery slider toolkit. You can find out more here: http://www.woothemes.com/flexslider/.

tinynav.min.js - TinyNav.js is a tiny jQuery plugin (443 bytes minified and gzipped) that converts and navigations to a select dropdowns for small screen.

respond.min.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). You can find out more here: https://github.com/scottjehl/Respond.

WordPress Plugins

ZillaLikes - A simple plugin for adding "like" functionality to your content.


E) Image Credits - top

All the images that we used in our demo, Belong to these guys and we used them with their permission, Seriously these guys are Awesome, check out their works.

Eric Hoffman - http://dribbble.com/kolage

Johnny Martinez - http://creattica.com/creatives/jmart/52909

Josh Dykgraaf - http://creattica.com/creatives/josh-dykgraaf/173194

Karolis Strautniekas - http://dribbble.com/strautniekas

Patrick Monkel - http://creattica.com/creatives/patrick-monkel/28935

Ryan Boyle - http://creattica.com/creatives/ryan-boyle/13372


And once again, thank you so much for purchasing this theme. We try our best to have our customers satisfaction, That is why we always try to put our 100% energy on the job and present the best output possible.

You know where we are, so don't be shy and drop us some lines :)

Spnoy Studio

Go To Table of Contents