“Cruis Wordpress Template” Documentation by “Peerapong Pulpipatnan”


“Cruis Wordpress Version”

Created: 05/05/2012
By: Peerapong Pulpipatnan

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to ask your question at the support site at http://support.themegoods.com/. Thanks so much!


Table of Contents

  1. Getting Started
  2. Installation
    1. Setting up main menu
    2. Setting up theme settings
    3. Setting up image gallery
    4. Setting up video portfolio
    5. Setting up project
    6. Setting up page background image and slideshow
    7. Setting up blog
    8. Setting up contact
    9. Setting up social media profiles
    10. Setting up widgets
    11. Setting up page sidebar
    12. Theme Translation
    13. Enable/disable background image adjustment
    14. Enable/disable image title
  3. CSS Files and Structure
  4. JavaScript
  5. Sources and Credits

A) Getting Started - top

In order to begin installing Cruis theme. You need the latest version of Wordpress. Here is the download URL. Once you downloaded and set it up, You are ready to go.


B) Installation - top

Upon downloading the package, you will have an "Cruis" folder inside the theme package. Upload this folder to your themes folder at: your WordPress installation root directory /wp-content/themes

Log into WordPress administration and click on the Appearance > Themes tab. After that is done, activate the theme as you would activate any other theme.

Notice: if you are new to WordPress and have problems installing it you might want to check out this link: Solving broken theme issues. After that is done activate the theme as you would activate any other theme at Appearance > Themes. Cruis is now the active theme and you will be sent to the Themes Option Panel immediately.

If you are new to WordPress and have problems with setting up the theme you might want to import the dummy content file (Cruis_sample_content.xml) that comes with the theme. You can import this file by clicking Tools > Import > Wordpress. 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 ex. main menu and theme settings.


B 1) Setup Main Menu - top

Open Appearance > Menus then click "Create Menu" name it "Main Menu". Add items to your menu items and select menu location.



For those who are not familiar with Wordpress 3.0 menu below are some tutorials.

  1. http://templatic.com/news/wordpress-3-0-menu-management
  2. http://www.wonderhowto.com/how-to-use-new-menu-system-wordpress-3-0-thelonious-376792/

B 2) Setting up theme settings - top



If you want to change options of the Theme open the “Theme Setting” (located in your admin sidebar) and click it, you will notice several tabs with options.


B 3) Setting up image gallery - top



First you have to create a gallery. From your admin sidebar, open Galleries > Add New. You will get add new gallery form. Enter gallery title and description then click "Publish".

Now you have 1 empty gallery. Next you have to add images to this gallery. From gallery admin page. Click on "Add New" next to "Gallery Images" text.

Then select images you want to upload to this gallery. Once you finish upload each image. It will automatically attach to this gallery. You can also change image title and description from this page. If you want to change order of images within gallery. You can easily drag&drop image next to each one. Once you finish dragging, click "Update" to save changes.

Setting up homepage gallery and music

Open Cruis admin > Homepage and Select homepage gallery. You can also change homepage gallery style there. You can also add music on homepage (if select Full Screen Slideshow for homepage styles). Open Cruis admin > Music. You have to upload all music formats (mp3, m4a, ogg) to support all browsers.

Note: If you can't upload your music files via admin panel. Please contact your webhost to increase uploaded file size limitation.

OK now you have a image gallery. Next step is to add gallery page. Cruis has 7 predefined gallery templates. From your admin sidebar, open Pages > Add New. You will get add new page form. Enter page title and description.

Next look at "Page Options" box. On gallery thumbnails, 2, 3, 4 columns templates, you can select "Static image" or "Slideshow" as page background. If you select "Slideshow" then you have to select "Background Gallery" for it. But if you choose "Static image", you have to upload "set featured image" for its background.

Then you have to select "Content Gallery". This is the main images contents display on page and every gallery templates have to had this option selected.

You can also add "Password Protected" for this individual gallery page. Just enter your gallery password and when visitor view your page, they will need to enter password, you have entered here. This is option is best for displaying image gallery for certain customers :)

Next look at Page Attributes" box. Cruis has 6 predefined gallery templates and you can select one for this page :)


B 4) Setting up video portfolio - top



First you have to create a portfolio item. From your admin sidebar, open Videos > Add New Video. You will get add new video form. Enter video title and description.

Next look at "Portfolios Options" box. Select content type from "Youtube Video", "Vimeo Video" or "Self-Hosted Video". If you select "Youtube Video" or "Vimeo Video" type, you have to enter video ID ex. "cdygEzfbhqc" for Youtube and "27299211" for Vimeo.

If you select "Self-Hosted Video", you have to enter "Video URL" (.mp4 format).

Next you have to upload image for this portfolio item. Look at "Featured Image" box. and upload your video preview image.

OK now you have a portfolio item. Next step is to add portfolio page. From your admin sidebar, open Pages > Add New. You will get add new page form. Enter page title and description.

Next look at Page Attributes" box. Select "Video Page" for page template and click on "Publish" :)

You can also organize videos into "set" (like video categories). Once you assign video to set. Go to appearance >menus. Then select which set you want to add to your menu items.

If you can't see it, click on screen option (top right) and check on "Videos Sets".


B 5) Setting up project - top



First you have to create a project. From your admin sidebar, open Projects > Add New Project. You will get add new project form. Enter project title and content.

Next you have to upload featured image for this project. Look at "Featured Image" box. and upload your project preview image.

OK now you have a project item. Next step is to add project page. From your admin sidebar, open Pages > Add New. You will get add new page form. Enter page title and description.

Next look at Page Attributes" box. Select "Project Page" for page template and click on "Publish" :)

You can also organize projects into "project category". Once you assign project to project category. Go to appearance >menus. Then select which set you want to add to your menu items.

If you can't see it, click on screen option (top right) and check on "Project Categories".


B 6) Setting up page background image and slideshow - top


Setting up a background image to Archive, Category, Search, Tag pages

Open Cruis admin > Archive, Category, Search, Tag pages Background Image and Select image for blog background (Recommended size 1440x900 pixels)


Setting up a background image to a page

From your admin sidebar, open Pages > Add New. You will get add new page form. Enter page title and description.

Next look at "Page Options" box. Select "Static image" as page background then you have to upload "set featured image" for its background. Click on "Set featured image" to upload preview image for this post. Once uploaded click "Use as featured image".


Setting up a background slideshow to a page

From your admin sidebar, open Pages > Add New. You will get add new page form. Enter page title and description.

Next look at "Page Options" box. Select "Slideshow" as page background as page background then you have to select "Background Gallery" for its background.


Change theme default background image

You can replace theme's default background image by replacing "bg.jpg" in /example folder of the theme.


B 7) Setting up blog - top

First, you have to create some blog post which is basic stuff. You can find many tutorials from Google :) (or just play around with posts on your admin dashboard). Next step, I will guide you how to create a blog page to display these posts.

From your admin sidebar, open Pages > Add New. You will get add new page form. Enter page title and description.

Next look at Page Attributes" box. Select "Blog" for page template and click on "Publish" :)


B 8) Setting up contact - top

First, you have to setup your email address. Open Cruis Admin Panel > General and setup your email address.

From your admin sidebar, open Pages > Add New. You will get add new page form. Enter page title and description.

Next look at Page Attributes" box. Select "Contact" for page template and click on "Publish" :)

You can also add widgets to "Contact Sidebar" on Appearance > widgets.


B 9) Setting up social media profiles - top

You can setup social media profiles which display on page footer. From your admin sidebar, open Cruis Admin Panel > Social-Profiles. Add your social profiles to enable them.


B 10) Setting up widgets - top

However the homepage sidebar is support all Wordpress 3.0 widgets. I created 8 custom widgets to make your website more interesting.

You can also add your sidebar via Admin panel.

To add content to sidebar simple go to Appearance > Widgets and drag item into certain sidebar.


B 11) Setting up page sidebar - top

When you create a page. There is an options to Select Sidebar" and select page template as "Page with Sidebar"


B 12) Theme Translation - top

You need an application name "PoEdit" and you can download it for FREE here http://www.poedit.net/.

Once you download and install it. Open file /languages/en_US.po with PoEdit then translate it to yours. You will need to upload all files in /languages folder to your server once you finished translate.


B 13) Enable/disable background image adjustment - top

If you selected background slideshow on page. It will automatically adjust your image size (cropped or resized) to works perfectly with visitor screen resolutions. However you might not want to crop your images. You can disable it. From your admin sidebar, open Cruis admin > Homepage > Enable/disable auto fit image to screen for homepage slideshow and Cruis admin > Blog-Portfolio > Enable/disable auto fit image to screen for other pages.


B 13) Enable/disable image title - top

You can enable image title to display small description text of your photos. From your admin sidebar, open Galleries and click on gallery you want to change its image title. Click on image and you will see "Edit Media" form. Enter image title and click "Update Media".

Once you finish editing images title. You can enable or disable it via Cruis admin. From your admin sidebar, open Cruis admin > Homepage > Enable/disable image title and description for homepage slideshow and Cruis admin > Blog-Portfolio > Enable/disable image title and description for other gallery pages.


C) CSS Files and Structure - top

The CSS for the theme is split into various files in css folder of theme. One that holds the basic markup for layout which is called screen.css. We then got one file for the light skin (light.css).


D) JavaScript - top

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. All the function calls like the slideshows are located in the custom.js file in js folder of theme.


E) Sources and Credits - top

I've used the following script, images, icons or other files as listed.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Peerapong Pulpipatnan

Go To Table of Contents