WP-Business Version 1.0.001 | 07/ 2013

Theme

Install a Wordpress theme

In this tutorial we'll show you, how to install a theme in your WordPress installation.

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.

Install

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 Install Themes. Choose upload.

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

Activate

Activate

After successfull 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 {doc: theme-settings text: theme settings}.

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.

Setup a theme with demo package

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.


Theme Settings

As soon as you install one of our theme, you have several theme settings that we want to introduce here.

Warp General Theme Settings

General

The general section allows you to edit the "global" settings of your website: Set the default theme profile, allow dynamic profiles, show a browser upgrade message to someone still using a IE6 browser or add your personal Google Tracking Code.

Compression

You can combine, minify, cache and compress (gzip) style sheets and JavaScripts of a theme automatically. Further you can enable the Data URIs feature which allows you to include images in the CSS so there are no extra HTTP requests required to load them.

Social Buttons

You want to promote your content on Twitter or Google+? Just enable Social Buttons in the theme settings and every article will get Twitter and Google+ buttons to share with others.

File Verification

The file verification feature helps you to easily keep track of all modified theme files. With just a click it can tell you exactly which theme files have been modified or deleted, even a few weeks or months later when you might have forgotten that you have changed something somewhere! To prevent modified files when using FTP, make sure the transfer mode is set to binary.

System Check

The {doc: how-to-solve-theme-issues text: system check} gives you a rapid overview of critical and potential issues like writable cache folder, php version etc. so you can handle errors faster.

Warp Profiles Theme Settings

Profiles

A profile can define different settings which are sorted into three main groups: Style, Content and Layout. You can create new profiles, edit already existing ones and assign them to any menu item. Yes, you read it right. Assign any profile to any menu item directly from your theme configuration with just a few clicks. That's not all, profiles have the ability to inherit defined settings from the default profile. This way you can easily make small changes or tweaks and apply them to a page or section of your website! Learn more {doc: how-to-use-profiles text: here}.

Style Settings

The style settings are all about the overall look and feel of your website you can choose from the different styles, colors and fonts.

Content Settings

This settings group lets you change content related things like date or the to-top scroller. It also allows you to hide the main system output, this is really great if you want to build a page which only uses modules or widgets!

Layout Settings

The layout settings panel is all about the theme's sizes and positioning! You can set the overall width and the sidebars' width and ordering as well. Also the module layouts can be set here, as we have mentioned before you can position equally sized modules right next to each other or stack them on top of each other.


Set up the logo

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.

For WordPress

Custom Output

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:

<img src="wp-content/uploads/logo.png" width="200" height="50" alt="logo" />
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

Favicon

The Favicon is located in your theme directory.

To change the favicon, simply replace that file.

iPhone/iPod touch icon

The iPhone/iPod touch icon is located in your theme directory.

To change the icon, simply replace that file.


Set up the Wordpress menu

This tutorial shows you how to set up the main menu correctly in your Warp based theme.

Create the 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 Theme Locations on the left and click on Save.

Menu Styles

Basically there are two menu styles Mega Drop Down and Accordion. The menu will choose its style automatically depending on what position it is published on. The themes menu position will give you the horizontal Mega Drop Down style, while the sidebar positions will render the menu using the Accordion style.

Menu columns

Menu columns

In your WordPress administration click on Appearance Menus and click on the tab of the main menu.

Choose the menu item with the drop down menu you want to customize and click on the small arrow on the right to expand the settings.

There you can set the total of columns you want to have in this menu item's drop down and the width of each column in pixels.

Using icons in menu items

Using icons for menu items

If you'd like to display icons for drop down menu items, just navigate to the desired level 2 menu item of your Main Menu Appearance Menus Your Menu.

Using icons for menu items

Click on the little arrow to expand the menu item settings and type in the path to the icon file in the field Image. Using the relative path to the directory /wp-content/uploads.

Add subtitles to menu items

Add subtitles to menu items

A subtitle can be added to a menu item by simply placing your subtitle text behind two "|" (pipe) characters. Navigate to Appearance Menus and select your menu in the tabs on the top. Then, create a new menu item or edit an old one. Place two "|" (pipe) characters behind the title's caption and enter a text for the subtitle.


Widget Theme Layout

This theme comes with the default Warp6 module layout. The blue module positions allow to choose a module layout which defines the module alignment and proportions: equal, double or stack. You can easily add your own module layouts. 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.

Widget LAyout

Set up the Wordpress Widgets

This tutorial shows you how to set up widgets in your Warp based themes.

Widget Options

Load widgets and their variations

Widgets can be displayed in different styles with additional icons and badges.

To apply these variations to a widget, go to the Widget Options of your theme in the WordPress administration. After choosing a widget simply select the style, the icon and the badge in the dropdown boxes and click on Save.

Common Options

The available values for the module parameters vary depending on which theme you are using. Check out the Module Variations page of your theme to find out which values are available.

Add subtitles to widget headers

Add sublines to widget headers

A subtitle can be added to a widget title by simply placing your subtitle text behind two "|" (pipe) characters. Navigate to Appearance Widgets and add the subtitle text behind two "|" characters in the title field of the widget of your choice on the right.

Publish a widget in the menu

Publish a widget in the menu

In the WordPress administration, go to Appearance Widgets. Create a widget and drag & drop it to the position menu on the right.

Set the width of the widget in the menu

You can set the width of the widget in the menu by changing the CSS slightly. Open the file /css/modules.css and have a look at this CSS style:

#menu .mod-dropdown .dropdown { width: 300px; }

The default width is 300px, but you can change it to your needs. However it's recommended to {doc: create-a-new-style text: create your own style} because this way all your changes will be kept when updating your theme.


How to use Profiles

A profile is a custom set of theme settings which can define the style, content and layout of your site. The default profile defines the default settings for the entire website. You can create new profiles and assign them to any menu item. This allows you to load different theme settings on different pages.

New profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. One example where we use the profiles are the different theme variations we deliver with each theme. Also special module layout behavior is done using profiles.

The Default Profile

Default Profile

In the general theme settings you find a parameter called Default Profile. Here you choose the profile which will be loaded on all your pages. By default it is set to the profile called default. Each theme has a default profile and it can not be deleted. If you want to load another newly created profile as default for all your pages you can select it here.

Profiles can also be loaded in the frontend of your website by adding a parameter to an URL. For example index.php?profile=myprofile. We use this feature for example to load the different theme variations by clicking on a link on the website. But if you don't need this it should be disabled. This can be done by setting Dynamic Profiles to No, right below the Default Profile parameter.

Create a new profile

Create a new Profile

New profiles can be created in the profile theme settings by clicking on Add and entering a name for your new profile.

Below you can see all settings you can control and override with your new profile. By default all values are inherited by the default profile.

To add new values or to select different options than the default ones, you first need to activate the override with the checkbox on the left.

If you later decide, that you don't want to override one of the default values any longer, simply uncheck the box.

Manually created profiles can be renamed, deleted and assigned to different pages.

Assign a profile to a page

Assign a Profile

One of the major features is the ability to assign different profiles to different pages. This allows you to change the theme's style and layout only on certain pages.

To assign a profile to a single or multiple pages, click on Assign Pages and select the pages you want to load your new profile. You can select multiple items by holding Ctrl-Key while clicking.

Please note that you can only assign one profile per page. If you have already assigned a profile to a page, it will be displayed in grey color and can't be selected.

Example: Create different layouts for different pages

Create different layouts for different pages

One of the most common uses of profiles is to load different page and module layouts for certain pages.

For example let's say your module layout for position Top-A is set to Equal, which means the modules will float horizontally next to each other. But on your frontpage you need your modules on that position to be displayed with the Stack layout, so your modules appear vertically above each other.

To do so you create a new profile called Frontpage, activate the checkbox for Top-A Layout and select Stack. Next click on Assign Pages, to select your frontpage and to save your changes. Now the layout setting for Top-A will be overridden on the frontpage.

Another common use is to hide the System Output on certain pages if you want your page to just contain modules or widgets and no article.


How to update

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

You will receive a notification in the Theme Settings if a newer version of your theme or theme framework is available so if you do see these Notifications, you should visit the Downloads section of your theme and then download the latest theme package. Notifications are smart and won't bother you with any messages unless an update is available for your theme.

Notifications will either be for the Theme Framework ( WARP ) eg: New version available! Download Theme Framework X.X.XX or for the Template files themselves eg: New version available! Download Template X.X.X. Note: Updating the Template Framework ( WARP ) will not result in your Template version from changing, the template and Framework have their own Versioning.

Usually after you download and install a theme, you may have customized it to meet the requirements of your website. In this process you may have changed images, added some HTML or made CSS modifications. In your theme settings the file verification quickly shows you all the modified and missing files in your theme that differ from the version you got from our download section. Now you instantly know which files you have modified in your customization before you start updating your individual template with the new template version.

To update your theme 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 for Joomla or /themes/THEMENAME for WordPress and replace all files.
  4. Redo your changes by merging your customized files with the new ones.

Tip: If you want to modify your theme, it's recommended to create your own style. A style uses a separate directory and this way the all your changes will be kept when updating your original theme files by replacing them.

Create a new style

Style Structure

Let's create a new style we call fresh. To do so we have to create a new style directory /styles/fresh. That's it! We created a new style which looks the same as our default theme.

Add your own layout markup

We can override the default layout /layouts/template.php file, by putting a new layout file right here /styles/fresh/layouts/template.php. Now you can start customizing it.

Add your own CSS

Next you can add your own CSS /css/layout.css file, by copying it to /styles/fresh/css/layout.css. The fresh style would now load its own layout style sheet. But what if you only have one small modification? For example you just want to change one color. Do you have to copy the whole layout CSS from the default theme? No, just import the /css/layout.css by using @import url(../../../css/layout.css); and add your small modification. You have full control over which CSS assets you want to include from the default theme, from the core framework or neither.

Important: If you do copy the /css/layout.css file to your custom style, make sure to correct the import path at the top of the file.

@import url(../../../warp/css/layout.css);

Useful override sources

This way you can inherit or override any resource from the default theme like the StyleSheets, JavaScript module or system markup files. A style directory can contain:

The newly created style should now be available in the theme settings. To active the new style go to the theme administration and look which default profile is activate. Click on the profile tab and select your active profile. Now choose your newly created style in the style option.


Widgetkit Manager

Widgetkit has a simple and easy to use interface. When you open Widgetkit you'll get an overview of all available widgets. Using the navigation bar you can click through them to open the individual settings of a widget. In general Widgetkit provides two types of widgets.

Content Widgets

Content type widgets like slideshows, accordions etc. help you to organize your content in a slick way. You can include them using shortcodes in your article or through modules and widgets everywhere on your page - even multiple times on the same page.

The Widgetkit Manager gives you a list of all your widgets and related actions like edit, copy and delete.

Widgetkit Manager
In our Themes we are using the Widget LITE only, because its free and has "Slideshow", Lightbox and Spotlight included. If you want to have the full options and all functions you can purchase the WidgetKit Pro.

Global Widgets

These type of widgets like the lightbox or mediaplayer are globally available and can be used on any page. Simply use their HTML markup or attributes to activate them in any article or any custom HTML module and Text widget. The widget settings define a selector on which elements the widget should become active. It comes preset with a default selector which works for all common use cases, but you are also able to change it if you need to.

Widgetkit Manager

Download the WidgetKit Lite here: https://www.yootheme.com/widgetkit

More information about the WidgetKit here: https://www.yootheme.com/widgetkit


Display WidgetKits

There are two ways to display a Widgetkit widget on your website. You can either use a shortcode or publish a dedicated WordPress widget displaying any Widgetkit widget.
Widgetkit Shortcodes

Shortcode

Shortcodes provide a simple way to use widgets in the content of any article on your site. Just copy and paste them in your articles and you're done! When the article is being displayed on your site the shortcode will be replaced with the widget output.

Widgetkit WordPress Widget

WordPress Widget

Widgetkit also provides a WordPress widget which can be added to any of your theme sidebars. Go to Appearance Widgets and drag and drop the Widgetkit widget to a sidebar of our choice. Using widget settings you just select the Widgetkit widget you want to display. That's it.


How to customize a theme

In this tutorial we'll show you, how to start customizing a Warp theme and which tools you need to learn to make small modifications like changing the look and colors of a theme.

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.

Web Developer Tools

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 #headerbar) 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 {doc: directory-structure-explained text: 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.

More Resources

Here are some useful resources to get you started with the web developer tools:

Where to put the CSS to style my custom content?

If you want to style your content, for example some custom markup inside your Joomla or WordPress articles, please use the custom.css file, located in your template's css directory.

Create your own theme style

The recommended way to customize themes is to create your own custom style. Styles are variations of the default theme and are similar to the concept of child themes in Wordpress or sub themes in Drupal. All styles benefit from inheriting layouts and assets from the main theme, which allows you to create minor customizations really fast. The main benefit from using a custom style is that it allows you to update a theme without merging all your customization later. Read on {doc: create-a-new-style text: how to create a new style}

Learn the basics

In general one can say that theme customization is not an easy task. Sometimes it might not work on your first try, but if you do invest some time, things will start to do what you expect them to. Further you don't necessarily need a profound knowledge of web programming, but you do need to know your way around HTML and CSS. Of course if that knowledge is supported by some PHP and JavaScript skills - depending on the task - that is even better. Here are some useful resources to get you started:

Make sure to read through the tutorials of the customizing section which explain how Warp themes work and also provide guidelines on how to modify them.


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

This Theme is for Joomla CMS available too, click here

Fotolio

All Images from Demo Content are purchased by Peter Kuhlmann 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.

Back to Top