WP-Ultimate | Theme Documentation

Requirements

If any of these requirements are missing you might need to contact your webhost and ask them to install or enable the needed extensions.

Theme Installation

Install

To install a theme based on the Warp framework use the theme installer in the WordPress administration.

Go to Appearance » Themes and click on the tab Add New. Choose upload.

Click on Browse..., select the downloaded theme file and click in Install Now.

Installation

Activate

After successful installation click on Activate or go to Appearance » Themes and click on Activate to activate the newly installed theme.

Next you will see a new menu item with a small YOO icon and the theme name. Use the submenu items Theme Options and Widget Options to manage the theme-settings.

Installation

Troubleshooting

If the installation does not work this way and you get an error message, you may try to install the template this way:

  1. Download the {route: download-themes text: latest theme version} and unpack all theme files to a directory on your pc.
  2. Using FTP, upload this directory to the /wp-content/themes directory of your WordPress installation on your server.
  3. Go to Appearance » Themes in the WordPress administration and the new theme will appear in the overview of installed themes.
  4. Click on Activate to activate the newly installed theme.

Quickstart Installation

This tutorial is a step-by-step guide that will show you how to install a Theme Demo Installation Package.

Note: The Theme Demo Packages cannot be installed into an existing Wordpress installation. The Demo Packages include a Wordpress installation package, the Theme, Theme Demo Content and WidgetKit.

Setup the Theme Demo Installation Package

  1. Download your purchased theme and unzip the file to your pc
  2. Extract the .zip file from "quickinstall" folder
  3. Upload all unzipped files via FTP or copy the extracted directory to your webserver.
  4. Create a database for this installation, using a tool like phpMyAdmin in your Hosting Control Panel or ask your Web Host for directions on doing this.
  5. Now just open your webserver's url ( eg: website.com ) in your browser address bar and follow the Joomla or WordPress installation instructions.

Settings

Installation

Styles

The style section contains the customizer. Hit the Customizer button to add your own style or to modify an existing style. After the customizer is loaded, you can easily customize colors, fonts, margins and even more settings of the theme. The customizer saves only the modified variables and automatically compiles them into CSS.

For further information, please watch the Customizer tutorial.


Development

LESS Developer Mode

Check the first option and the browser automatically compiles your LESS files via JavaScript every time you load a page. This provides an appropriate testing environment. It's not recommended to enable developer mode on the live site as the constant process of compiling is highly inefficient.

Dynamics Styles

The second option enables the browser to load styles by URL. This is useful, if you want to test different styles for your website. Disable this option, when your website goes live.

Compile LESS to CSS

To finish your LESS modifications, hit the Compile LESS button and all your changes will be compiled into the final CSS.

Make sure, you aren't developing in the /styles/STYLE-NAME/css folders, because these folders will be overridden as soon as you hit the Compile LESS button.

Compression

To optimize page load time, choose one of the following compression options.

Setting Description
None All files will be loaded separately and fully sized.
Combination + Minify This option will minimize and combine CSS and JavaScript files into one single file.
Combination + Minify + Data URIs Data URI embeds image data directly into the document, thus reducing the HTTP requests for your image files. This applies only to images that have a maximum size of 10kB.
Combination + Minify + Data URIs + Gzip Gzip allows a faster data transfer through compressed data packages, instead of dealing with large data volumes by sending them separately.

Responsive

The viewport meta tag controls the layout on mobile browsers. If it's not set, the default width on mobile is 980px and the site will look the same as on desktops. How to disable the responsive Feature


Bootstrap

By checking this option, you disable Bootstrap. This reduces the page loading time, when you only use the Joomla blog and articles.


Content

Enable or disable the To-top scroller and the Warp branding.


Social Buttons

To enable the users to share articles with others, activate the Social buttons option. It inserts small widgets below your articles. These are loaded via JavaScript from Twitter, Facebook or Google+.

Backgrounds

Each section, where the widgets are stored can have their own background image, font and link color. The section configuration can be done from backend, see image below.

Sections are: headerbar, top-a, top-b, top-c, top-d, bottom-a, bottom-b, bottom-c, bottom-d

Layouts

Layouts

Unbenanntes Dokument Layouts

Store your modifications in a layout profile and assign it to different pages. The default layout will be used on pages without an assigned layout.


Style

Select which style the layout should load.

How to create a new style
  1. Select a style within the customizer.
  2. Hit Copy and enter a new name to duplicate the style.
  3. Now you can start customizing your own style.
  4. Once you are satisfied with your adjustments, hit Save and the customizer saves your style LESS files into the /styles/STYLE-NAME/style.less folder and compiles the CSS files into /styles/STYLE-NAME/css folder.

To undo your modifications within a theme style, hit reset to reverse the changes to the default theme values.


Content

Display specific content elements in the theme. Select this option to hide the Joomla system output.


Sidebars

Choose the sidebar widths and align the sidebar to the left or right.


Grid

Choose the grid layout for each position. Further, you can enable horizontal dividers and prevent the responsive grid behavior. Note: Both options are not taken into account for the stacked layout.

Widgets

Modules

Customize your widgets appearance and select your favorite style, icon or badge. For each module you can pick a style and combine it with an icon or badge to create your own unique look. Here is a list of the available options

Class: uk-text-center
Title: No, Yes
Assignment: Assign this widget to a page or post or frontpage
Animation: No, Fade, Scale Up, Scale Down, Slide Top/Bottom/Left/Right
Repeat: On, Off
Style: Default, Box, Box Primary, Box Secondary, Header, Space, Blank
Icon: 500 Icons (Font Awesome)
Badge: Success, Warning, Danger
Display: Desktop, Pad, Phone
Modules

Customize your menu appearance. To configure your menus

Columns: 1-4
Column Width: Set the width in px
Icon: 300 Icons Included
Subtitle: Insert a subtitle for your menu item

Upload your Logo file with the Wordpress Media Manager to your library, normally it is the folder [wp-content/uploads].

If youre Media Upload Settings are "organized by month and year" your path is different. Please make sure you always take the right one.

Logo

Go to Appearance » Widgets and drag & drop a Text widget to the logo position. Edit the newly added widget and fill the fields. This is demonstrated to the right.

For example use following code:

Demo
If the logo image is not visible on all pages, you can add a leading / before the image path, eg: /wp-content/uploads/logo.png

Upload your Logo file with the Wordpress Media Manager to your library, normally it is the folder [wp-content/uploads].

If youre Media Upload Settings are "organized by month and year" your path is different. Please make sure you always take the right one.

Logo

Go to Appearance » Widgets and drag & drop a Text widget to the logo-small position. Edit the newly added widget and fill the fields. This is demonstrated to the right.

For example use following code:

  Demo
If the logo image is not visible on all pages, you can add a leading / before the image path, eg: /wp-content/uploads/logo-small.png

Menu

After installation of the theme click on Appearance » Menus in the administration menu on the left.

Click on the small plus sign to create a new menu, give it a name and click on Save. You can now assign articles or pages to the menu as explained in the WordPress Menu Tutorial.

Tip: You can also create non-clickable menu items, which are for example used in the Accordion menu. To create such an item, create a custom link menu item with a single # as URL.

Assign the menu as Main Navigation

Before the menu works properly in your theme, you have to assign it to the main navigation of the theme. To do so, just select your main menu in the box Manage Locations on the top and click on Save.

Mobile Menu

Mobile Menu

  1. Add a custom menu to the widget position off-canvas
  2. Select your menu save
You can publish any menu on widget position offcanvas. This widget position will be shown in responsive view.

Widget Positions

Mobile Menu Widget Layout
This theme comes with a lot of Widget positions. The blue Widget positions allow to choose a Widget layout which defines the Widget alignment and proportions: equal, double or stack.

Mobile Menu Column Layout
The two available sidebars, highlighted in red, can be switched to the left or right side and their widths can easily be set in the theme administration. For modules in the blue and red positions you can choose different Widget styles. Take a look at the Widget variations page to get an overview.

Widget

How to use the Customizer

The Warp customizer simplifies your workflow and allows you to add new styles with no need for any CSS knowledge. It is divided into two sections. The left hand vertical bar indicates the settings for the theme and on the right you can see your selected theme. All modifications within the customizer will instantly be displayed in the preview on the right side.

By default, the customizer shows only a selected number of variables. Theses variables are the most used in the theme. There are different customizer modes to determine, to what detail you want to customize your theme.

Mode Description
Advanced mode Activating the advanced mode extends the default variables with additional developer variables, which are rarely adjusted.
More In Advanced mode you can see a (More) button next to groups which displays all variables. The @ symbol indicates variables that are defined through other variables.
To optimize performance, we recommend disabling add-ons, like Firebug in Firefox.

How to create a new style

  1. Select a style within the customizer.
  2. Hit Copy and enter a new name to duplicate the style.
  3. Now you can start customizing your own style.
  4. Once you are satisfied with your adjustments, hit Save and the customizer saves your style LESS files into the /styles/STYLE-NAME/style.less folder and compiles the CSS files into /styles/STYLE-NAME/css folder.
Please NEVER customize the pre definied style. Copy a Style at the customizer section and then you can edit your duplicated style.

How to customize

If you want to customize a template ( logo.gif, color, font or background) and don´t know the css class, please use Firefox with the Firebug extension. Now you can analyze every CSS style for customizing the template CSS. Firebug Tutorial


Web Developer Tools

Whenever you try customizing our templates we highly recommend using Web Developer Tools like the famous Firebug plugin for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out CSS styles right in your browser and inspecting existing styles to find their location in the theme's CSS files.


Editing CSS styles directly in your browser

Bring up Firebug by right-clicking on an interesting element and choosing "Inspect Element". On the left side you see the html-structure of your document (make sure you have the HTML-Tab enabled). Here you have the possibility to add and edit attributes and their values. Just double-click parts of the code to edit them.

Firebug

Even more interesting is the right side of the plugin, here you see all css-styles for the selected element. If you want to edit something just double click on it, enter your new value and press enter when you are done. You will notice that Firebug opens a new empty line so you can not only edit existing styles but also add new ones. Firebug even shows you the computed style-values for the selected element, make sure you have activated the style-tab for our example.


Finding the right CSS file in your theme

As you might already have noticed, next to each css-selector (in our case .toolbar-outer) a filename and a line number are being displayed. Just hover over it and you will see the full path to the file. To learn more about your template's directory structure have a look at this tutorial.


Tip: Disable the theme's Gzip and Compression feature or any other caching script you may be using on your your site when you start out on customizations. If you don't do this, you will not see the file and line locations of the code you want to customize and you also will not see changes you made immediately. Also remember to frequently clear browser caches.
Please never edit the original CSS files, because these files will be overwritten with the next theme update. Always add your custom style to the custom.css

Watch the Firebug Tutorial Video

Template Updates

Here is a brief instruction on how to update a theme based on the Warp framework without uninstalling and reinstalling the theme.

Notifications will either be for the Theme Framework ( WARP ) eg: New version available! Download Theme Framework X.X.XX

Updating the Template Framework ( WARP ) will not result in your Template version from changing, the template and Framework have their own Versioning.

Warp Framework Update

To update the WARP framework do the following steps:
  1. First of all make a backup of all the customized theme files, so you can recover it and redo all changes at any time.
  2. Download the latest theme version and extract the package to your Desktop.
  3. Copy all files to /templates/TEMPLATENAME/WARP and replace all files.
  4. Redo your changes by merging your customized files with the new ones.

Download Latest Warp Version

WidgetKit

  1. Download the latest WidgetKit Lite version.
  2. Go to the extensions installer in the Joomla administration, select "Upload package File" and select the widgetkit zip.
  3. Click on the Install button and Joomla will install it automatically

Requirements

  • PHP 5.4.4+
  • PHP GD extension (enabled in PHP 5.0+)
  • PHP JSON support
If any of these requirements are missing you might need to contact your webhost and ask them to install or enable the needed extensions.

Installation & Setup

  1. Select from the top menu: wp-admin -> Plugins -> Add New -> Upload
  2. Click on the Choose File button
  3. Select the wp_roksprocket.zip that you just downloaded from your local drive.
  4. Click the Install Now button.

Create a Slideshow

  1. Select from the top menu: wp-admin -> Appearance -> Widgetkit -> Slideshow
  2. Click on the Choose File button
  3. Select the wp_roksprocket.zip that you just downloaded from your local drive.
  4. Click the Install Now button.
Widgetkit

Assign a Slideshow to a widget Position

  1. Select from the top menu: wp-admin -> Appearance -> Widgetkit -> Slideshow
  2. Click on the Choose File button
  3. Select the wp_roksprocket.zip that you just downloaded from your local drive.
  4. Click the Install Now button.
Widgetkit

More detailed documentation of this module: https://yootheme.com/widgetkit/documentation

Credits

WARP Framework

Many thanks to YooTheme.com for this amazing WARP Framework for Wordpress

YooTheme WidgetKit

Many thanks to YooTheme.com for the cool WidgetKit for Wordpress

Joomlaplates

Help and support, click here

Fotolio

All Images from Demo Content are purchased by Joomlaplates and licensed to JoomlaPlates.com and they are not include the Theme package. Our demo content and slideshow pictures are only for demonstration use. Re-use of any graphics, icons or photos from the demo content for any purpose is strictly prohibited.