Before we dive in, I want to thank and congratulate you on purchasing one of my items. I truly appreciate your support and I'll do my best to provide you with an outstanding service.
Let's go over the minimum requirements that you will need in order to have a fully functional site using this theme running in no time.
WordPress provides a fully comprehensive and in depth guide to installation on their codex site.
So instead of going over what's already been outlined there, I will simply point you in the direction of the Famous 5 Minute Install.
If you have little or no knowledge of how WordPress works please take some time to familiarize yourself with the framework.
After purchasing the theme, if you chose to download "All files & documentation" your theme folder should have the following files contained within it.
- Available Files
- Documentation (folder with this help file)
- Licensing (folder)
- Samples (folder)
If you chose to download "Installable WordPress file only" you should have the cross.zip archive by itself, which is ready to be installed via the dashboard.
Making Custom Changes
The main package comes with a child theme (cross-child.zip) that inherits the look and functionality of the main theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you should use a child theme.
If updates will be available (which might be important for security or functionality) and you decide to update the theme you should know your file changes are safe in the child theme. Speed up development time and be smart about it from the beginning.
The child theme must be installed after the main theme installation.
Install via Dashboard
Once you have logged into your WordPress Dashboard, navigate to Appearance > Themes. Click on the Add New button and then from the available options select upload. Navigate to where your files are stored locally and select the cross.zip file then Install Theme.
If the theme was installed successfully you should be met with notifications regarding installing plugins and activating the theme.
Do not use the main ZIP file (which contains Documentation and Samples) - use the installable cross.zip only, otherwise the whole process will fail.
Install via FTP
To install the theme via FTP you will need to unzip the theme archive (cross.zip) somewhere onto your machine. We will assume you have a working FTP program with login credentials as one is needed to install WordPress.
WordPress places it's themes within the /wp-content/themes/ folder. Navigate to this folder within your install and then place the cross folder within it. You will know this is the correct folder as the default WordPress themes (Twenty Fourteen, Twenty Thirteen) will be here as well.
Once the folder has been uploaded, in your WordPress Dashboard navigate to Appearance > Themes and activate the theme.
Once the theme has been installed successfully you will be prompted to install the plugins available with the theme and some that are recommended. Click on "Install Plugins" to get started.
Cerchez Core is the required plugin that MUST be installed. While the remainder of the plugins are not required, I recommend you install them as well.
Demo Content (Optional)
If this is your first time using WordPress I strongly recommend you import the demo content. Importing the demo content will bring in all the posts, pages, menus, widgets and theme options from the demo, into your site.
To import the demo content navigate to Appearance > Import Demo Data within your dashboard and follow the instructions.
Note: The import process requires the Cerchez Core plugin (bundled), so make sure you install and activate it first thing.
Note: If you have problems with this process please try the default WordPress import — visit the Tools > Import section and upload the content.xml WordPress file available in the Samples folder.
If you've installed the demo content move on to the Permalinks Section, otherwise let's start at Step 1.
Step 1 - Page Creation
To create a page navigate to Pages within your dashboard and click Add New. Give your page a title and then set the page template (if other then the default full-width template). The following pages require special templates to be set.
- Blog - Blog Template (displays latest posts)
- Sidebar - Sidebar Template (displays a sidebar where you can add custom widgets)
- Under Construction - 503 Under Construction Template when you want to work on your pages, but have a message for the front-end user as well.
Step 2 - Reading
We now need to change the homepage of the site to whatever page you like. Navigate to Settings > Reading in your dashboard.
Change the Front Page Displays setting to A static page and set your desired Front page.
Upon activating the theme, you may have noticed a new page within the theme dashboard called "Theme Options". Lets navigate to this page and have a look at the available options.
The first tab gives you the options to set your company logo, favicon and Custom CSS. The logo and favicon images can be set by an external URL or uploaded via the Media Library (recommended).
The favicon is a 16px by 16px small image that represents your website's icon displayed in the title/tab section.
The Custom CSS field can be used to quickly customize the style of the theme and can override the default theme's style or add additional fonts, colors, spacing properties, etc. This is useful for simple customization tasks, if you don't want to create a separate child theme.
You have several options to style the theme's colors and fonts in a really quick way. The base color sets the accent color used throughout the site in key elements and the background color/pattern settings affect the style of each page background. Another quick option is having the possibility to use over 600 unique Google Fonts for the body text and main headers without using an external plugin.
The theme contains only basic color and font options. If you like to style other parts of the theme you are welcome to do so using the Custom CSS field or by using a child theme. It is NOT recommended to modify the theme's stylesheet file directly.
The theme includes some extra options for adding a general notice displayed thoughout the site in the header area, enable/disable features like AJAX based components (search, blog, like system). You can enter your own pages for Twitter, Facebook, Google+, etc (via shortcodes described in a later section) and display them in the header or footer area.
There is also the option to display a sharing widget for posts — use it to drive additional traffic to your website.
All the settings available in the Theme Options panel can be backed up, restored or copied to another domain.
The backup and restore feature can be useful when experimenting with the options, but would like to keep a stable version just in case.
The transfer feature is useful when moving the site to another domain and helps you migrate without the need to configure the options again.
In case of a theme update (manual or automatic), the options are preserved so you don't have to worry about losing your preferences.
Shortcodes & Widgets
The theme contains a set of shortcodes to help you edit your post content more easily. They can be added manually in any shortcode based content area (for eg. the Text Widget). More conveniently, you can add them with the help of the TinyMCE button [ ] directly in the Visual Editor of any post/page.
Below is a list of available shortcodes, with a short example and atrributes (if any) for each one of them.
— display an accordion container
- collapse — determines if the accordion has only one accordion item visible at a time (default: true)
— display an accordion item (must be placed inside an accordion container)
[accordion collapse="true"] [accordion-item title="..."]...[/accordion-item] [accordion-item title="..." opened="true"]...[/accordion-item] [/accordion]
- title — set the title of the accordion item
- opened — determine if the item is opened in initial state (default: false)
— display an alert box
[alert type="success"]Alert text...[/alert]
- type — info, success, notice, error (default: info)
— display an audio player
- src, mp3, ogg, wav — source files (for HTML5 playback provide at least an mp3 and ogg file, otherwise the Flash player will be loaded)
- loop — determines if the audio player will loop the file (default: false)
- autoplay — determines if the audio player will autoplay the file (default: false) — iOS devices will require user mandatory interaction to play a file
- preload — determines if the audio player preloads the file (default: true)
— display text inside a box with a border
[box]Text inside the box.[/box]
— display a button link
- url — link of the button
- target — none, blank — open the link in the same tab/window or in a new tab/window (default: blank)
- size — small, big (empty is normal)
- color — grey, dark (empty is the base color)
- rel — set rel attribute
- id — set id attribute
- class — add extra class values
— display a call-to-action box
[call-to-action title="Hello, we are Cross!"] <p class="no-bottom">[button url="#"]Support[/button] [button url="#" color="dark"]Contact Us[/button]</p> [/call-to-action]
- title — text displayed as box title
— clears any floating elements like grids
[grid number="9"]...[/grid] [grid number="3" last="true"]...[/grid] [clear]
— display a vertical visual separator
— display a feature box
[feature title="Feature1" text="..."]<img src="feature1.jpg">[/feature]
- title — set the title of the feature box
- text — set the text inside the feature box
— create custom layouts by arranging elements into grids (columns)
[grid number="9"]Main Column[/grid] [grid number="3" last="true"]Sidebar Column[/grid]
- number — 1, 2, ..., 12 (a row is divided in a 12-column grid system - 6 means half the content area)
- last — it's mandatory to mark the last grid in the row (default: false)
- class — add extra class values to the gird container
— adds a highlight effect to any text inside it
This is a [highlight]sample[/highlight] text.
— adds a lightbox effect to any element (designed especially for image elements)
[lightbox url="big-image.jpg"]<img src="small-thumb.jpg" />[/lightbox]
[lightbox url="http://www.youtube.com/watch?v=bqIxCtEveG8" gallery="projects"]<img src="small-thumb1.jpg" />[/lightbox] [lightbox url="big-image.jpg" gallery="projects"]<img src="small-thumb2.jpg" />[/lightbox]
[lightbox url="http://www.google.com" popup="false"]<img src="small-thumb3.jpg" />[/lightbox]
- url — link for the big version of the image, video from youtube, vimeo, metacafe, dailymotion, twitvid or a gmap
- title — set a title to be displayed along the lightbox
- gallery — determine if the lightbox is part of a gallery
- popup — determine if the lighbox gets opened into a popup or gets redirected to the specified url (default: true)
— display the latest posts
- category — retrict posts belonging to a specific category (ID or slug)
- tag — retrict posts having a specific tag (ID or slug)
- limit — number of posts to show (Default: 3)
— display a pricing table container and columns for each plan
[pricing-table] [grid number="6"] [pricing-column title="Free" cost="$0"] <ul> <li>Feature 1</li> <li>Feature 2</li> </ul> [button href="#" color="grey"]Read More[/button] [/pricing-column] [/grid] [grid number="6" last="true"] [pricing-column title="Premium" cost="$100" highlight="true"] <ul> <li>Feature 1</li> <li>Feature 2</li> </ul> [button href="#"]Read More[/button] [/pricing-column] [/grid] [/pricing-table]
- title — title of [pricing-column]
- cost — cost of [pricing-column]
- cost_after — text displayed after the cost of [pricing-column] (default: per month)
- highlight — determine if it's the higlighted [pricing-column] (default: false)
— display a list of your latest portfolio items
[projects category="portfolio" filters="true" lightbox_gallery="portfolio"]
- category — retrict portfolio items belonging to a specific category (ID or slug)
- tag — retrict portfolio items having a specific tag (ID or slug)
- limit — number of portfolio items to show in total (Default: -1 which means all)
- per_row — number of portfolio items to show on a single line (Default: 3)
- filters — determine if filters are available for the gallery — this can be used in combination with the category attribute because filters are basically sub-categories of a specific category (Default: false)
- image_width — image width for the featured image of the portfolio item (Default: 900)
- image_height — image height for the featured image of the portfolio item (Default: 600)
- lightbox_gallery — determine if the lightboxes are all part of a specific gallery
- lightbox_popup — determine if the lighboxes get opened into a popup or get redirected to the their url (default: true)
- filter_all_string — string used for the All category in the filters (Default: All)
— makes an iframe, object or embed resize responsively
— display the current site title (useful for footer area)
— display a slider container used for slider items
[slider style="padding-bottom: 56.25%" autoslide="true"]...[/slider]
- class — add extra class values
- style — add custom style to the slide (padding-bottom is used for the aspect ratio - eg 16:9 -> 9/16*100 or 1080/1920*100 where 1920 is the width and 1080 is the height of the images) — default: padding-bottom: 56.25%
- autoslide — determines if the slider autoslides (default: false)
- autoslide_timer — time (in miliseconds) between autoslides (default: 5000)
- autoslide_timer_trans — determines the speed (in miliseconds) of the slide animation (default: 750)
— display a slider item (must be placed inside a slider container)
[slider] [slider-item]<img src="sample1.jpg" />[/slider-item] [slider-item caption="Simple and stupid."]<img src="sample2.jpg" />[/slider-item] [/slider]
- caption — title of a caption displayed inside (optional)
- caption_url — url for the optional caption
- caption_url_target — none, blank — open the link in the same tab/window or in a new tab/window (default: none)
— display a social link
[social type="twitter" url="http://twitter.com/liviucerchez" title="View my Twitter profile"]
- type — facebook, twitter, googleplus, mail, envato, pinterest, tumblr, linkedin, dribbble, instagram, skype, github, flickr, vimeo, youtube, soundcloud
- url — social link URL
- title — tooltip text
- class — add additional class values
- target — none, blank — open the link in the same tab/window or in a new tab/window (default: blank)
— display a tab container used for tab items
- id — name, number — determines the method for naming the URL for each tab (default: number)
— display a tab item (must be placed inside a tab container)
[tabs] [tab title="Tab1" active="true"]...[/tab] [tab title="Tab2"]...[/tab] [/tabs]
- title — set title of the tab item
- active — determine if the tab is initially active (default: false)
— display the current year (useful for footer area)
The theme contains sections in the layout where you can add blocks of information called widgets.
Widgets are viewable in Appearance > Widgets section. There are two widget areas available with this theme (WooCommerce Sidebar is a special widget area for the WooCommerce plugin).
The Default Sidebar widgets will be displayed on every page that has a sidebar (Blog Template, Sidebar Template).
Along with the standard available widgets, the theme includes two additional ones for Dribbble and Flickr users.
If you need to create special sidebars for some of your pages then I recommand you install the Simple Page Sidebars plugin that may give you more flexibility.
External plugins are a great way to customize your site further. The following plugins are recommended by the theme (excluding the required Cerchez Core plugin).
- Contact Form 7 — manage multiple AJAX based contact forms
- Simple Page Sidebars — gives the ability to assign custom sidebars to individual pages
- W3 Total Cache — easy performance optimization using caching: browser, page, object, database, minify and content delivery network support
- WooCommerce — powerful, extendable eCommerce plugin that helps you sell anything
Theme support cannot be offered for external plugins (even if they are recommended). If you notice any compatibility issue please let me know — I'll investigate it and I'll let you know if it's something related to the theme.
About Project Items
Project posts are just like regular blog posts (can be grouped in categories or marked with tags), but can be managed separately.
Create a Project Post
To create a new project post navigate to Projects > Add New, just like you would with a normal post. Give your project a title and adjust the permalink, if needed.
Next step is to set your Featured Image for each project — all project posts require a featured image that will be used in project galleries.
Let's go ahead and click Publish.
If you're looking for a way to change the project URL part, please take a look at the available child theme where you'll find an example in the functions.php file.
Manage Project Galleries
Project galleries can be displayed in any post or page using the [projects] shortcode. This can be generated using the Latest Projects menu item in the Shortcode Builder.
Every gallery can contain different project items. That's why it's recommended you group your project posts in categories and optionally mark them with tags.
Also, sub-categories can be used for filters when displaying a gallery from a base category (Portfolio in the above image case), so take some time and group your posts accordingly.
When editing any post you'll notice some additional properties under the content editor.
The standard posts contain an additional option to hide information regarding the author, date, comments or tags of a post.
Setting up a blog is as simple as creating a new page, selecting the Blog Template and adding new posts to your site.
You also have options to control the sidebar position in your blog page (and sidebar slot if you installed the recommanded plugin for it).
The theme is updated automatically from ThemeForest based on your account's username and API key, so make sure you enter them both in the Theme Options panel in order for this process to work. You can always update manually (re-upload or by FTP), but the automatic process is a more faster, safer and convenient option.
WordPress checks for updates approximately every 12 hours, so don't worry if you haven't received a notification right away.
If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form (right sidebar, at the bottom). Don't forget to help me out by rating and leaving your feedback for the theme at: themeforest.net/downloads.
Thank you and good luck with your work!