Cardinal Theme Documentation
Thank you for buying Cardinal! 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.
Step by Step
Here is a brief step by step on how to install WordPress:
- Download and unzip the WordPress package if you haven’t already.
- Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
- 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.
- 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
1) Uploading Cardinal
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 “cardinal” to the /wp-content/themes folder of your WordPress installation. You can find this folder within the main download after you have unzipped it, it will be within the “Theme Files” folder
- If you are uploading via WordPress upload, then navigate within the WordPress admin area to Appearance > Add New Themes > Upload. Select the zipped file “cardinal.zip” and then hit Install Now.
If you get an error saying that the stylesheet is missing, then you have uploaded the wrong folder. Please check that you are uploading the cardinal/cardinal.zip within the Theme Files folder. You may have to unzip the file that you download from ThemeForest to find this.
2) Activating Cardinal
Once you have uploaded the theme, you need to activate it by going to Appearance > Themes, and activate “Cardinal”.
Downloading From Themeforest
1) Install Recommended/Premium Plugins
Now that you have activated Cardinal, you will see a yellow notice at the top of the screen. This notice is to let you know about the plugins that we recommend you install for use with the theme. Click ‘Begin installing plugins’ and install/activate the plugins one by one. You can also access this page by going to Appearance > Install Plugins.
2) WooCommerce Image Settings
You will need to set the WooCommerce image settings in order for the quality to be as high as expected. You can set these settings by going to WooCommerce > Settings > Products, and scroll down until you see “Image Options”.
See the screenshots on the right, which are the image settings which we use for our demo. We recommend you follow the same width, but you can choose your desired width/height ratio.
To make the Demo Content Import process as simple as it could possibly be for you, we’ve created a plugin to handle the entire process for you. You have the option to choose from any of the example sites we’ve created, and options to choose the specific items you import.
Install the Cardinal Importer Plugin
You will first need to install the plugin, which can be found in Appearance > Install Plugins, titled “Cardinal Demo Content“.
Once you’ve installed and activated it, you will see the “Cardinal Demos” option in the left WordPress Admin Menu.
Using the Demo Content Importer
When you access the Cardinal Demo Content Importer, you’ll be presented with the option of 30+ example sites to choose from. Each item has a preview image which links through to the example demo site, and specific import options.
You can choose to import just the demo content, just the colour scheme, or any combination of the provided options. Simply select what you’d like to import from your chosen demo, and then click “Import”.
The plugin will do the rest, and will let you know once the process is completed. The page may refresh a few times in the process, but this is completely normal – just make sure you leave it and that the process is not interrupted.
1) Header Setup
There are a wide array of header layouts that are possible for you to use within Cardinal. You can choose these options in Theme Options > Header Options, see screenshot on the right.
Once you’ve chosen the header layout you desire, you can also set various different aspects, to configure it even further. Below you can see 4 screenshots showing the different header options. Please check these options out, as if you’re looking to change the way the header is displayed, or it’s contents, then it will be found here!
2) Logo Setup
You can change the theme’s logo by accessing the Theme Options and uploading your logo with the uploader under the “Header Options” section.
You’ll want to upload an image to use for the retina logo too, to make your logo high quality on retina displays. The retina logo should be double the size in pixels, of your standard logo. If you do provide a retina logo, then please provide the logo width in the field below. This allows the theme to set the size, and enable the retina functionality to work perfectly.
The max height for the logo area is 42px as standard, but you can override this in the Theme Options panel. If you upload an image with a bigger height than this, it will automatically be scaled to fit. The logo area has a maximum size, as to keep the menu items correctly placed. If you upload an image with a smaller height than this, you may need to add top spacing to get it vertically centered.
3) Mobile Header Setup
Cardinal allows you to control how your mobile header looks, independent from the main header options. You can set at what responsive size the mobile menu shows, the display configuration, and what is displayed. You can see a preview of the options to the right.
The colours for the mobile header can be set in the colour customizer.
Cardinal features 5 menu areas; the main navigation in the header, the huge menu, the mobile menu, the menu in the top header, and the optional menu in the footer copyright bar.
By selecting the Appearance > Menus option from the left WordPress admin sidebar, you can manage & create your sites menus and menu items, and select where certain menus are shown.
To create a menu:
- Click the “create a new menu” link
- Enter a name for the menu, this can be anything e.g “Header Menu”, “Footer Menu”, “Mobile Menu”.
- Click the “Create Menu” button
Once you’ve created your menu, you need to assign it to the menu location which you would like to use it for. You can do so by setting it under the Manage Locations tab, once you’ve navigated to Appearance > Menus from the WordPress admin sidebar menu.
You can also set the top header menu, and footer menu here, so if you would like to use both make sure you create a menu for each area.
Mega Menu functionality is built-in to Cardinal, so you can easily create mega dropdowns without any extra plugins or configuration. All you need to do is create a menu that goes into 3 tiers. You can have as many items with a mega menu as you like. Menu items that only have one level of children will show a standard dropdown. The image to the right shows an example of the setup for a mega menu, and the front end output.
Once you’ve set your structure, you need to open up the parent menu item, and check the “Enable Mega Menu” checkbox. Here you can also set the number of columns, and also alter the styling. See far right for an example.
Mega Menu Item/Columns
Second level menu items can be used as standard menu items, or you can add custom HTML content – for example and image, or button. The textarea provided will accept shortcodes/html, or standard text.
There are also other options such as providing an icon name to show an icon to left of the title, making the menu item standard text instead of a link, or also hiding it completely. You can see these in the image to the right.
For an example of how an image looks in a custom HTML menu item, check below:
Setting the Footer layout
There are various footer layouts that are possible within Cardinal. You can choose multiple column layouts, with different splits, or have a single column if you wish. You can choose these options in Theme Options > Footer Options, see screenshot on the right.
Adding Footer Widgets
Once you’ve chosen your desired footer layout, you then will want to add content to it. You add this content by navigating to Appearance > Widgets. There you will find a number of Footer Column widget areas, which correspond to the columns for which you’ve set as your layout.
You can then drag any of the provided widgets to the footer columns, give them titles, organise as you like and customise the settings.
If you’d like to use shortcodes or HTML within the Footer widget area, then you’ll want to use the “Text” widget.
Creating A Post
Once you’re on the Add New Post screen, you will then be able to set a title for the blog post, add the body content, and also provide all the meta information such as extra details and media. In the blog meta you can set the image for the thumbnail, and also the media type for the detail page.
You can use the Swift Page Builder to create the content of the item, which effectively allows you to have limitless possibilities for what you can display, and also how you can display it. If you do use the Page Builder to create the content, you will want to provide a custom excerpt (can be found in the item meta).
The item meta also contains post slider options, allowing you to set the image for the slide that will show if the item appears in a posts slider, and also the display for the caption.
Creating A Blog Page
To display your blog posts, you will then need to create a page that includes the “Blog” or “Recent Posts” page builder assets, you can see these shown to the right.
The blog asset includes options such as the following, allowing you to customise the output to your liking, which you should adjust to suit your needs, as you can change what is outputted in a wide variety of looks.
Blog Asset Settings
The Blog asset is the main asset for displaying blog posts. This asset can display all blog posts in various display types such as Masonry, Timeline, etc, and also display with different pagination styles inlcuding Infinite Scroll and Load More via AJAX.
Recent Post Asset Settings
The Recent Post asset is ideal for displaying a small number of posts, such as the latest from all, or from a certain category. The asset has various display types and options, including a carousel option. You can see some of the options available on the right.
Adding a Portfolio Item
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. There are lots of portfolio options that you can set on a per-item basis, these include meta information such as client/sub-title/external link, and also display options for the main detail. You can set both thumbnail and detail media independently.
Once you’ve added your portfolio, you can display them on any page using any of the Portfolio Page Builder assets.
Creating A Portfolio Page
To display your portfolio items, you will then need to create a page that includes the “Portfolio“, “Portfolio Carousel” or “Portfolio Showcase” page builder assets, you can see these shown to the right.
The Portfolio asset includes options such as the following, allowing you to customise the output to your liking, which you should adjust to suit your needs, as you can change what is outputted in a wide variety of looks.
Portfolio Asset Settings
The Portfolio asset is the main asset for displaying portfolio items. This asset can display all portfolio items in various display types such as Masonry, Multi-size Masonry, Gallery, etc. The image to the right shows the edit screen for the portfolio asset.
Portfolio Carousel Asset Settings
The Portfolio Carousel asset is ideal for displaying a single line of portfolio items, looped to save space – ideal for a small section of the page to allow users to get a preview, or to view your latest portfolio items, for example. You can view the asset settings in the image on the right.
Portfolio Showcase Asset Settings
The Portfolio Showcase asset is designed to as the name states “showcase” either 4 or 5 of your portfolio items. These are shown in a single line, with dynamic hover overs to increase the view of the hovered item, and show details. You can view the asset settings in the image on the right.
Setting the Shop page
To display your products, you will want to create a page, leave the content blank, and then set the “Product Archive / Shop Page” in WooCommerce > Settings > Products. Here you can select the page, choose whether you show categories or products on the main shop page, the default sorting, and more.
If you would like to add products within a page that you create using the page builder, you can also use the Products & Products (Mini) assets.
Adding a product
To add a product, you need to go to Products > Add New from the left WordPress admin menu.
Once you’re on the Add New Product screen, you will then be able to set a title for the product item, add the description, and also provide all the data information such as price, stock status, attributes, etc.
You can add a featured image in the right column box, and above that set any other gallery images. Any images you add here will be used for the product slider images.
If you would like to create a product where you can select the size/colour of a product for example, and for setting categories/attributes then please check out the following guides:Product Variations Product Categories & Attributes
The excellent “WooCommerce Quickview” plugin is included with Cardinal as standard, this will allow you & your customers to quickly preview items from the shop list, and navigate between them, without having to navigate to the product pages. If you haven’t installed the plugin, then please go to Appearance > Install Plugins, and then install & activate “WooCommerce Quickview“.
Once you’ve activated this plugin, you will have a new menu item under the WordPress menu, titled “Quickview“. For the tigger settings, we recommend the settings which we’ve detailed in the screenshot on the right.
Note that as standard, there is a theme option set which shows the Quickview button only on hover. You can enable/disable this in Theme Options > WooCommerce Options > Shop Options.
Product Zoom Functionality
Product image zoom functionality is built into the theme as standard, no plugin required. To enable the zoom functionality, simply turn on the option in Theme Options > WooCommerce Options > Product Options. The option is titled: Enable image zoom on product images.
The “YITH WooCommerce Wishlist” plugin is recommended with Cardinal, as this will allow you & your customers to add products to a “wishlist”, which you can then save and share if you like. If you haven’t installed the plugin, then please go to Appearance > Install Plugins, and then install & activate “YITH WooCommerce Wishlist“.
Once you’ve activated this plugin, you will have a new tab item under the WordPress > Settings menu, where you can set various options.
Be sure to check Theme Options > Header Options, as there is a toggle here to enable/disable the wishlist menu item & dropdown in the header.
Adding a Team Member
The Team menu option on the left is where you add team members. To add a new client, select the Team > Add New option from the left hand WordPress menu. You will then be able to provide an image for the team member, and various info if you’d like through the team meta box, see the image on the right.
To display your team members, you will then need to create a page that includes the “Team” page builder asset. This asset features various options for you to change the way the team members are displayed.
Creating A Gallery
To create a gallery, you first need to navigate to Galleries > Add New. Once you’re on the Add New Gallery screen, you will then be able to set a title for the gallery, add your images, and set the page heading options.
Displaying list of Galleries
The Galleries asset is the asset you’ll want to use if you are looking to display a selection of your galleries for users to navigate. This asset can display all galleries in various display types such as Masonry, Gallery etc, and also other options such as linking, full width, column counts.
Displaying individual Gallery
The Gallery asset is the asset you would want to use if you wanted to display a single gallery in a page. The asset has various display types and options, which can see a selection of the options available on the right.
Adding a Client
The Clients menu option on the left is where you add clients. To add a new client, select the Clients > Add New option from the left hand WordPress menu. You will then be able to provide an image for the client, and a link if you’d like through the client meta box, see the image on the right.
To display your clients, you will then need to create a page that includes the “Clients” page builder asset. This asset features various options for you to change the way the clients are displayed.
Adding a Testimonial
The Testimonials menu option on the left is where you add testimonials. To add a new testimonial, select the Testimonials > Add New option from the left hand WordPress menu. You can write the testimonial text in the post content, and then the testimonial cite in the testimonial meta box.
Once you’ve added your Testimonials, you can display them on any page using the “Testminals” Page Builder asset.
The color customizer can be accessed by pressing the “Color Customizer” button within the WordPress admin bar, or through the Appearance > Themes menu.
The customizer is used to control all colours within the theme. It’s also used to set the design style, and other design aspects such as border styles for menus/headers etc. All changes you make can be seen live on the preview window to the right, allowing you to test the changes before you make them live & visible on your site. Note that hover colours won’t be previewed due to not being able to modify them via the customizer JS.
You have 3 design styles to choose from; Minimal, Bold, and Bright. These affect the display of certain elements, including headings, overlays, and page builder asset styles. You should choose/change this to see which best suits your needs.
The Swift Slider is our very own slider solution, which allows you to quickly create sliders for use anywhere on your site, with incredible ease. You don’t need to install any plugins to use it, it’s ready as standard, and you can setup/edit sliders using the Swift Slider section on the left WordPress menu.
Creating a slide
The Swift Slider is our very own slider solution, which allows you to quickly create sliders for use anywhere on your site, with incredible ease. You don’t need to install any plugins to use it, it’s ready as standard, and you can setup/edit sliders using the Swift Slider section on the left WordPress menu.
Setting up multiple sliders using categories
In order to set up multiple sliders, you need to use the provided “Slide Categories” taxonomy. Slide categories are used to group together slides, which you can these choose to display a single or all categories of slide when you display a slider. Slides can belong to more than one category, incase you want to display a slide on all sliders for example.
Displaying a Swift Slider
There are two ways in which you can display a swift slider on a page.
- You can use the page meta options, which can be found below the content editor when creating/editing a page. Using the page meta options, the slider will always be at the top of the page, above or below the header, and it will be the full width of the container. The options here allow you to configure the display of the swift slider. The Page Header Type option will affect where the slider is shown. See the image to the right for a screenshot of the page meta options for displaying a Swift Slider.
- You can use the page builder asset, which can be set anywhere in the page content, be used at variable widths, and also all configurable options.
The Swift Page Builder (SPB) allows you to create unique and amazing pages, exactly the way you want them! The SPB is powered by shortcodes, which are embedded when you select the content elements you want, and edit them. You can see the source by going back to the classic editor, although you shouldn’t ever need to do this and you should only make changes to this if you know what you’re doing.
The page builder is enabled and ready for use on Pages, Posts, Portfolio, and Team member post types, however you can enable it for products too within the Theme Options.
To add a content element to the page, all you need to do is drag the element from the dropdown into the content area, or simply click on it to have it added automatically. See the animation to the right for a visual walkthrough of dragging and dropping from the elements menu.
You can then edit the column width (on applicable elements) by pressing the left/right arrows in the top left of the content element, and also edit the asset (the pencil), duplicate the element, or delete the element.
When you click on the edit button, you will be given the option of specifying a number of parameters based on the content element. To the right is a screenshot from the edit screen of the Blog element, as an example. You can see there are a wide number of options for you to choose from. Simply set your desired options, and then click save to confirm your options.
As standard there are 10 sidebars that are included for your convenience. These are Sidebar 1-8, WooCommerce Sidebar, and CrowdFunding Sidebar. You also have the option to create your own sidebars, using the included Widget Area creator found in Appearance > Widgets – shown right. Simply write a name for the widget area, click the button, and a new widget area will be created for you.
We include 9 widgets with our framework, which you can use in any widget areas.
Swift Framework Advert Grid Widget – A custom widget to show an advert grid of up to 8 125 x 125 adverts in a single block.
Swift Framework Flickr Widget – This flickr widget displays a set number of your flickr photos. You can get the required Flickr ID from here http://idgettr.com/.
Swift Framework InFocus Widget – A custom widget to show a focus of a single post.
Swift Framework Portfolio Grid – A custom widget to show recent portfolio items in a grid with an image and title tooltip.
Swift Framework Recent Comments – A custom widget to show recent comments.
Swift Framework Recent Portfolio – A custom widget to show recent portfolio items with an image.
Swift Framework Recent Posts – A custom widget to show recent posts with an image.
Swift Framework Tweets – A custom widget to show the latest tweets from a Twitter account.
Swift Framework Video Widget – The Video widget embeds a video from a url that you enter into the input field within the widget options. You can find out what type of video you can embed here.
Cardinal includes the Swift Framework Shortcode Generator, which is a custom built feature for our themes. The generator allows you to embed shortcodes within your content quickly without having to remember the syntax. The generator allows you to select the type from the list, and provide parameters (if needed).
The shortcodes found within the generator are mainly for simple content based output, such as typography details, buttons, and social options.
You can find the shortcode generator within the WordPress WYSIWYG editor. See right for a visual indication.
There are a few premium plugins which we’ve hand picked for you, which are included within Cardinal and free for you to use. You can find these plugins within the main download folder, under the “Premium Plugins” folder. You can also install them from within the theme, by going to Appearance > Install Plugins.
Each plugin that is included is detailed below.
Create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.
This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.
This plugin allows you to quickly view any product in your WooCommerce catalog whilst browsing a category or product listing page.
By clicking the new Quickview icon, subtly placed over each product in the listing, a modal box will open with important product information and imagery, giving your customer the chance to add to cart there and then.View Plugin Site
Go - Pricing Tables
If you like traditional Pricing Tables, but you would like get much more out of it, then this rodded product is a useful tool for you. Beside the usual pricing table style Videos (Youtube, Vimeo, Screenr) and Images are also supported with optional responsivity. It’s very easy and fast to create stunning tables and integrate them into your WordPress site using Admin Panel. You will surely find the one most appropriate for you, which can be customized in a few seconds.View Plugin Site
Cardinal 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:
- Open the /cardinal/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
- 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.
- When you finish translating, save the file. This will create an .mo file in the same directory.
- Upload the new files into the languages folder of the theme /wp-content/themes/cardinal/languages/ and then follow this guide:http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Single-Site_Installations
To be added soon.
We’ve done our absolute upmost to make Cardinal as quick & efficient as possible out of the box. We guarantee you’ll be incredibly impressed with the speed as standard, but we know that squeezing as much performance out of your site as possible is a very key factor. That’s why we’ve added built-in performance options, that you can enable with a single click.
If you navigate to Theme Options > Performance Options (Under General), you will then find the option for “Load pre-minified scripts“. Enabling this option will reduce the number of scripts loaded, and also the file size of the scripts.
Note: if you have made any changes to the JS files included with the theme, then these won’t be included in the minified versions.
Further Performance Improvements
There are a few things that you can do to further increase performance, and while these may require a bit of configuration to get working 100%, they are likely worth the time it takes.
1) Caching – This involves storing cached versions of your pages & files for quicker serving. We’d recommend either WP Super Cache, or W3 Total Cache plugins. WP Super Cache is a much simpler option, whilst W3TC offers a lot more control if you are technically capable to configure it.
2) CDN – A content delivery network (CDN) comprises of multiple data centres, usually around the world, to serve content to the end-user as quick as possible. There are a large number of options that you can utilise here, but from our experience we would highly recommend CloudFlare. They offer free & premium plans, and we’ve seen great results. With the paid plans, they also offer extra tools to speed up image loading, and they also offer very good threat detection and prevention functionality.
Below are a list of the image sizes that the theme uses based on the different assets/locations within the theme:
- 5 Column (Standard) – 400px x 300px, (Retina) – 800px x 600px
- 4 Column (Standard) – 400px x 300px, (Retina) – 800px x 600px
- 3 Column (Standard) – 600px x 450px, (Retina) – 1200px x 900px
- 2 Column (Standard) – 800px x 600px, (Retina) – 1600px x 1200px
- 1 Column (Standard) – 1200px x 900px, (Retina) – 2400px x 1800px
- 4/3 – Wide Tall – 1000px x 750px, (Retina) – 2000px x 1500px
- 4/3 – Tall – 375px x 750px, (Retina) – 750px x 1500px
- 4/3 – Wide – 1000px x 375px, (Retina) – 2000px x 750px
- 4/3 – Standard – 500px x 375px, (Retina) – 1000px x 750px
- 1/1 – Wide Tall – 900px x 900px, (Retina) – 1800px x 1800px
- 1/1 Tall – 450px x 900px, (Retina) – 900px x 1800px
- 1/1 Wide – 900px x 450px, (Retina) – 1800px x 900px
- 1/1 Standard – 450px x 450px, (Retina) – 900px x 900px
- Full Width (Standard) – 2000px x ANY, (Retina) – 4000px x ANY
- Standard Width (Standard) – 850px x ANY, (Retina) – 1700px x ANY
- Mini (Standard) – 446px x 335px, (Retina) – 892px x 670px
- Mini with sidebar (Standard) – 370px x 260px, (Retina) – 740px x 520px
- Masonry (Standard) – 480px x 360px, (Retina) – 960px x 720px
- Timeline (Standard) – 970px x 728px, (Retina) – 1940px x 1456px
- Detail (Standard) – 1170px x ANY, (Retina) – 2340px x ANY
- Detail with sidebar (Standard) – 770px x ANY, (Retina) – 1540px x ANY
- Recent Portfolio / Recent Posts (Standard) – 94px x 70px, (Retina) – 188px x 140px
You can set any size for the shop height, but please note that as Cardinal uses a CSS grid, the width of the product image will be determined by the browser width and how many columns you have to display.
The product page image defaults to 50% width as standard, although you can resize this with custom css. The image height/width can be whatever you like, but we’d recommend the width to be at least 50% of your site’s max-width.
You can see the image sizes that we use on the demo to the right. If you aren’t sure what to set, then we recommend you use our settings.