Adrenaline WordPress Theme Documentation Online Documentation

Introduction & Installation

Introduction

Adrenaline is a WordPress theme for businesses which make heart beats race. Whether it is bungee jumping, paintballing, rock climbing or kayaking - we all love the exhilaration of facing our fears. This theme is the perfect way to show the world the adventure they crave.

Installation

I assume you already have a fresh copy of WordPress installed on your server.

Download the theme zip file
The first thing you will need to do is to download the theme installation zip file.

If you bought the theme on our ProteusThemes Shop, you should have received an email with the list of themes you have access to. You can click on the theme link with file name ending: -installable.zip or you can login to your account and download the installable zip file from there.

If you bought the theme on ThemeForest, then you have to download the installable WordPress files only zip file from the ThemeForest download section.

Install the theme
You can install the Adrenaline WP Theme in two different ways:

Upload a zip file - preferred method
When you are logged in your WordPress dashboard go to Appearance » Themes » Add New » Upload Theme and select the theme installation zip file you downloaded from our Shop or from the ThemeForest and click Install Now button.
FTP upload
Unzip the contents of the theme installation zip file and upload the extracted folder to your server to wp-uploads/themes/ folder using a FTP client.

Once your theme is on the server, activate it by clicking the Activate button below the preview image in Appearance » Themes

Congratulations! Now the Adrenaline WP Theme is installed.

You still need to install/activate the required and recommended plugins - you can do this by visiting Appearance » Install Plugins inside wp-admin.

Updates

Automatic updates
You can register the theme and receive automatic updates. Go to Appearance » Theme Registration and follow the instructions on that page. This will register your copy of the theme and you will get update notifications in the admin dashboard, whenever an update is available.

If you have any issues with the automatic updates, please go to you wp-admin to Dashboard » Updates and click on the Check Again button, to refresh the update data.

Manual update
You can also update the theme manually: here are the steps on how to do that.

Customize the Appearance

You can fully customize the appearance of the Adrenaline WP Theme. Go to the Appearance » Themes and click on the Customize button:

The new window appears and you can now customize the appearance of your theme - upload your custom logo, change the base colors, enable/disable theme features, add Custom CSS or Javascript etc.

Demo Content

One Click Demo Install

You can import demo content from our demo site (with blurred licensed images) with a single click of a button. Go to Appearance » Import Demo Data and click on the import button.

Don't forget to activate all required plugins before importing demo data.

When setting up a content with your new theme, put special focus on the page speed optimization, especially on the image optimization process. This way you can save on your bandwidth, reduce the bounce rate on your website, and make your users happy. Our themes are created with the speed in mind but large, non-optimized images can and will ruin this experience.

Import XML File

If you want to import the demo content the old-fashioned way, you can get a fresh copy of the XML file on our server at this URL: http://artifacts.proteusthemes.com/xml-exports/adrenaline-latest.xml. Don't forget to activate all required plugins before importing demo data. To import the demo data go to Tools » Import, click on WordPress (install the WordPress Importer plugin if not already installed) and upload/import the previously saved xml file (don't forget to enable the Download and import file attachments checkbox to also import the images).

Demo Widgets
After you import the demo content, you can also import widgets the old-fashioned way. The file for widget import is also located on our server: http://artifacts.proteusthemes.com/json-widgets/adrenaline.json. Rename this file to adrenaline.wie (mind the file extension) and use it in the plugin Widget Importer & Exporter. Go to Tools » Widget Import/Export and import the file.

After import setup
After you have imported the demo data and widgets, you should also setup these things:

go to Settings » Reading, set the the Front page displays to a static page and select the front page and the blog page in the appropriate dropdowns,
go to Appearance » Menus, select the main menu from the dropdown at the top and click on Select. Scroll to the bottom and set the Theme location to Main Menu (if there are more locations you can also assign other menus to those locations),
go to Appearance » Widgets, and set Custom menu widgets, by selecting the correct menu (in footer and our services sidebars),
optionally set other things (like logo, colors, ...). These settings can be found in Appearance » Customize.

If for some reason these URLs are not available:

and you bought the theme on our ProteusThemes shop, you can login to your account and download the extras zip file, or
if you bought the theme on Themeforest, you can download the All files & documentation zip from ThemeForest

Once the main theme zip file is downloaded you will find the content.xml and widgets.json file in the extras folder.

Don't forget to activate all required plugins before importing demo data.

Logo

The default logo can be changed in our Theme Options - Appearance » Customize » Theme Options » Logo.

In Adrenaline theme you can select the alternative logo for the home page templates. If you use one of the Front Page with Slider or Front Page With Layer/Revolution Slider page templates, you will find the settings specific to the front page, where you can define alternative logo used on the front page.

If you don't specify alternative logo for the front page, the default one set in the customizer will be used.

Favicon

Since WordPress version 4.3, the favicon setting can be found in Appearance » Customize » Site Identity, where you have to set the Site Icon option.

Header Widgets

There are two header widget areas in this theme: Header Left and Header Right, which are visible on all pages except for the front page with slider.

You can put a lot of widgets in the Header widget areas, but your header will look great with the following widgets:

Icon Box

With widget Icon Box you can put any kind of title with small text and image in the header. In our demo we use this widget for contact information which we think is very important for customers.

In this widget you can choose Title, Text and Icon from Font Awesome. You can also choose a link for the whole box. If you leave that field empty the Icon Box will not be click-able.

We give you few Icons to choose from but you can actually use any icon from 519 Font Awesome icons. Just paste the icon title in the Icon field and that's it. How cool is that?

More than one Icon Box widget can be used in the Header.

You can also use tel: and mailto: in the Link area for direct connection with phone or mail. For example: tel:0038631567536 or mailto:[email protected].

Social icons

They are perfect for the Header Right widget area. Input the URL of your social network page and select the social network icon.

Main Menu can be set in wp-admin » Appearance » Menus. Theme locations for Main Menu is called Main Menu.

Pages

wp-admin » Pages is the area where you will spend most of your time when building a site. We added a few tools in that process so you can create your pages easier and faster.

Page Templates

You can choose between 3 different Templates - Default Template, Front Page with Slider and Front Page With Layer/Revolution Slider.

Default Template: Just a default template for simple layouts and Page Builder. First you must choose the Page Builder option under the title and you are ready to go. You can add our widgets here, choose different visual styles and much more. More about that in the next chapter.

Front Page with Slider: This is a unique template which adds an option for a slider in the page options. It can be used with Page Builder. More about that in the Slider chapter.

Front Page with Layer/Revolution Slider: We don't include these two slider plugins with the theme but we make sure they work nicely, since we know our customers want to use them. When you activate this template there is a new Page Slider meta box in which you can put ID/alias from Layer/Revolution Slider.

Page Builder

Page Builder is a very powerful tool for making pages. Here is one example of how it looks:

You can make any kind of grid with adding new rows and inside them you put widgets. When you are finished with adding widgets you can also move whole rows up and down.

For more information on how to use Page Builder please visit Page Builder by SiteOrigin documentation page.

You should also watch this great short video course: Page Builder Tips.

Page Builder Row Style

Let's take a look at how we can style Page Builder rows.

To start off we have to click on "Edit Row" for the row that we want to style as shown on the image above. An "Edit Row" window will open, and on the right, there are three setting tabs: Attributes, Layout and Design. Here you can customize different things for this particular row.

In the Layout tab you can set the Bottom Margin, Padding and change the Row Layout to Full Width. In the Design tab you can set the Background Color, Background Image and other things.

To achieve the same design for the testimonial widget as on our demo page you have to click on Layout tab and set the Bottom Margin to 90px, Padding to 10, 0, 0, 0px and the Row Layout to Full Width Stretched. Then click on the Design tab and set the Background Color to #2e3b4e.

You can now set box around the widget and make selected widgets stand out. This option can be chosen for all widgets in the page builder "widget edit mode" under the Design tab.

Page Builder Widgets

You can use almost any widget in the Page Builder. Let's take a look at a few not so straightforward ones.

SiteOrigin Editor Widget

SiteOrigin Editor will create for you the same editor environment as a normal WordPress editor does. You can use this widget if you want normal text editing options. The SiteOrigin Editor Widget is part of Site Origin Widgets Bundle.

Gift Card example

We used the SiteOrigin Editor widget to create a Gift card "widget". We also enabled the box around the widget design described in the Page Builder Widget Style section above. Here is what we put in the editor:

<h2>A Gift for The Best</h2>
Birthday coming up? Get Rush gift card.
<img class="size-full wp-image-89 alignright" src="https://demo.proteusthemes.com/adrenaline/wp-content/uploads/sites/43/2016/10/partner2.png" alt="partner2" width="208" height="98" />

[button href="#"]Get gift card[/button]

And this is how it looks like:

Call to Action Widget

How do I add a button? With our custom shortcodes. You can find instructions in the Buttons section.

Featured Page is a really simple widget that we use in Page Builder. All you have to do is to select the page and one of the two layouts we made for you.

But how do I change the image and text on the Front Page?

The image on the Front Page is just the normal Featured Image of the selected page. You can change that in the sidebar of every single page. Text can be changed in the Excerpt field which can be found at the end of the page settings. If the excerpt field is not there, you must click on the Screen Option (at the top of the page) and check Excerpt. For more info please take a look at the screenshot below.

Portfolio Grid Widget will display your Portfolio pages (portfolio pages = activities in this theme) in a nice filterable grid. You can choose from two layouts: grid in multiple rows or a slider in a single row. You can also select which categories to display, enable a CTA, ... If you leave the Label for all items empty, there will be no "All" filter tab.

You will be able to display your Instagram images in a very nice responsive row and have an optional call-to-action box:

Just follow these instructions and get your access token from Instagram and you are good to go:

Login and get your Instagram Access Token,
Once you complete the authentication steps, copy the Access Token to the appropriate field in the widget settings.

Note: The instagram data is cached for 30 minutes, so if you add/remove images on your Instagram account and you do not see the changes on your site, that's because the cached data. You can wait for 30 minutes and the images will be displayed or you can reset the cache, by editing/updating the widget ( make a change in the widget. For example: change the widget image number and update the page, then change it back to the desired number and update the page again, that will reset the cache).

Display weather forecasts on your site with our Weather widget.

All you have to do is follow the instructions in the widget settings and the widget will work perfectly. The first thing you will have to do is to register at darksky.net/dev and get your API key. Once you do that, just paste the API key into the widget settings, configure the location coordinates and other settings of the widget.

Note: The weather widget data is cached for 30 minutes, so the weather data will change every 30 minutes. You can reset the cache, by editing/updating the widget (make a change in the widget. For example: change the number of days to forecast and update the page, then change it back to the desired number and update the page again, that will reset the cache).

This is how the Weather widget looks like in this theme:

This widget can be included everywhere - in page builder and in a normal sidebar. For that widget we use a normal WordPress Text Widget.

First, go on https://twitter.com/settings/widgets and click Create new.

Now choose your Username, height of the widget, Theme and Link color. When you are happy with your widget click on Create widget button. You will get the code which you copy and paste in the Text Widget in your WordPress site.

Slider

Building a Theme slider has never been easier.
You can create a Theme slider on any page you want. The only thing you must do is choose the page template Front Page With Slider (you can use this template even if it's not for the front page). After you select this page template there will be a new meta box at the bottom of the page which is called Front page slider and header. Now you can add images or videos to your slider.

When you add a video, you also have to upload a video "thumbnail", which will serve as a clickable area (also a play button overlay will be added to this image). When a user clicks on this image, the video will open in a pop-up modal window.

As you can see on the example image bellow, you also have two other tabs: Slider settings and Header settings. In Slider settings tab, you can change how the slider behaves and change the slider options. In the Header settings tab you can change the things next to the slider images (on the left): Logo, header info text, header info link and header info social icons.

This is how the slider backend looks like:

Please take a look at this slider dimensions article for the recommended size of the slider images for this theme.

You can also use Layer/Revolution Slider. We don't include them with the theme but we make sure they work. When you activate page template - Front Page With Layer/Revolution Slider there is new field in which you can put id/alias from Layer/Revolution Slider.

ProteusThemes Options

You can find all Theme Options in the Customizer: Appearance » Customize. This is a live preview editor for your page.

Here you can change:

Logo
Header
Navigation
Page Header Area
Theme Layout & Colors
Shop
Footer
Custom Code
And Much More ...

Shortcodes

Buttons

For adding buttons you must use the button shortcode which looks like this: [button]Your Text[/button]
There are 7 options with different attributes - style, href, target, fa, corners, fullwidth and class.

Text: You can change the text of the button.
Example: [button]New Text[/button]

Style: You can choose between a few styles - primary, secondary, danger, success, info or default.
Example: [button style="primary"]Your Text[/button]

Href: You can add URL to the button.
Example: [button href="http://www.proteusthemes.com"]Your Text[/button]

Target: You can choose if you want to open the link in the same - "_self" or new - "_blank" window.
Example: [button target="_blank"]Your Text[/button]

Font Awesome icon: You can add a font awesome icon to the button.
Example: [button fa="fa-phone"]Your Text[/button]

Cornes: You can change the corners of your button to be rounded.
Example: [button corners="rounded"]Your Text[/button]

Full width: You can stretch your button to full width.
Example: [button fullwidth="true"]Your Text[/button]

Class: You can add extra custom classes to the button.
Example: [button class="btn-lg extra-custom-class"]Your Text[/button]

Icons - Font Awesome

Shortcode for Font Awesome is very similar to the buttons shortcode. It looks like this: [fa]
There are 3 options with different attributes - icon, href, target and color.

Icon: You can use any 519 FontAwesome icon. To set the selected icon, just get the title of the icon, for example "fa-phone".
Example: [fa icon="fa-phone"]

Href: You can add URL to the icon.
Example: [fa href="http://www.proteusthemes.com"]

Target: You can choose if you want to open the link in the same - "_self" or new - "_blank" window.
Example: [fa target="_blank"]

Color: You can set a custom color to your icon.
Example: [fa color="#ff00ff"]

So a Font Awesome icon shortcode with a home icon, linking to a page and opening in a new window/tab would look like this: [fa icon="fa-home" href="http://www.proteusthemes.com" target="_blank"]

Tables

Tables are in fact not made with real shortcodes but very simple html tables.

They must be inserted in the Text page editor or in the Text widget. Look at the images bellow:

After that all you need to do is to add our adrenaline-table class in the <table> and that's it.

Example for our demo Pricing Tables:

<table class="adrenaline-table">
  <thead>
    <tr>
      <th>OUR ACTIVITIES</th>
      <th class="align-center">For single person</th>
      <th class="align-center">For family</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Swimming</td>
      <td class="align-center">$19</td>
      <td class="align-center">$29</td>
    </tr>
    <tr>
      <td>Rafting</td>
      <td class="align-center">$22.95</td>
      <td class="align-center">$20.95</td>
    </tr>
    <tr>
      <td>Canooeing</td>
      <td class="align-center">$22.95</td>
      <td class="align-center">$20.95</td>
    </tr>
    <tr>
      <td>Boating</td>
      <td class="align-center">$23.95</td>
      <td class="align-center">$20.95</td>
    </tr>
    <tr>
      <td>Diving</td>
      <td class="align-center">$9.95</td>
      <td class="align-center"><a href="#">GET IN TOUCH</a></td>
    </tr>
  </tbody>
</table>

Widgets

Clients

This one is actually normal text widget with some html code.

<div class="logo-panel">
  <img src="https://demo.proteusthemes.com/adrenaline/wp-content/uploads/sites/43/2016/10/partner1.png" alt="partner1"/>
  <img src="https://demo.proteusthemes.com/adrenaline/wp-content/uploads/sites/43/2016/10/partner2.png" alt="partner2"/>
  <img src="https://demo.proteusthemes.com/adrenaline/wp-content/uploads/sites/43/2016/10/partner3.png" alt="partner3"/>
  <img src="https://demo.proteusthemes.com/adrenaline/wp-content/uploads/sites/43/2016/10/partner6.png" alt="partner6"/>
  <img src="https://demo.proteusthemes.com/adrenaline/wp-content/uploads/sites/43/2016/10/partner5.png" alt="partner5"/>
</div>

Change source of image - src="yourimage.jpg" and your image will be shown.

Plugins

We also use and support some of the best plugins for WordPress.

Required and Recommended Plugins

You can install and activate these plugins by going to wp-admin » Appearance » Install Plugins.

The list of required and recommended plugins used in this theme:

Contact Form 7

We use Contact Form 7 for our Contact Us page. This is the code from our demo:

<div class="row">
  <div class="col-xs-12  col-lg-6">
    [text* your-name class:form-control placeholder "First Name*"]
  </div>
  <div class="col-xs-12  col-lg-6">
    [email* your-email class:form-control placeholder "E-mail*"]
  </div>
  <div class="col-xs-12">
    [text your-subject class:form-control placeholder "Subject"]
  </div>
  <div class="col-xs-12">
    [textarea your-message class:form-control placeholder "Message"]
    <div class="wpcf7-notice" style="font-size: 16px;">Fields with * are required.</div>
    [submit class:btn class:btn-primary "SEND MESSAGE"]
  </div>
</div>

After that just place the plugin's shortcode into your Contact Us page.

WooCommerce

This theme supports basic WooCommerce integration.

Once WooCommerce is activated you will see this notice:

Click on Run the Setup Wizard button to begin the WooCommerce install. That will start the setup wizard, where you can set things like shop pages, store locale, shipping & tax and payments.

If you want to change some settings, you can change them in WooCommerce » Settings. There are many tabs at the top, you can configure to fit your needs.

Most of our themes come with our own demo products for the WooCommerce store and will be imported automatically when you import the demo content using our industry-leading One Click Demo Import plugin. You need to make sure that WooCommerce is activated at the time that you import the demo data.

However, you can (optionally) install the additional demo products by WooCommerce. Go to Tools » Import » WordPress and import the demo XML file which can be found in the folder where WooCommerce was installed on your server. Usually this is in wp-content/plugins/woocommerce/dummy-data/dummy-data.xml. Also check the Download and import file attachments checkbox, so that all product images will be downloaded as well.

When you're done, you should see the products:

If you want to feature certain products, you can do so by clicking a star symbol in the table seen above.

When you are done with the settings, go to Appearance » Widgets.

Drag & Drop the WooCommerce widgets that start with "WooCommerce" to the sidebar called Shop Sidebar.

That's all, your WooCommerce shop is now ready!

All further information and documentation for WooCommerce can be found on the official WooCommerce website.

Adrenaline Gift Card

We've prepared the detailed tutorial how to setup and sell gift cards, which is a variable product in WooCommerce. You can find it in our Knowledge Base.

Adrenaline Booking

We've integrated the most flexible and easy-to-use plugin for selling bookings directly from your website in Adrenaline theme. It's called WooCommerce Appointments. The tutorial how to set it up coming soon.

Breadcrumbs NavXT

The breadcrumbs in this theme are powered by the Breadcrumbs NavXT plugin.

All the settings for breadcrumbs can be found in Settings » Breadcrumbs NavXT. When you first access this settings page, there might be a notice, which has a link Migrate now at the end, just click it and it will take you to the correct settings page. Here you can define a separator (which should be empty by default for our themes), breadcrumb hierarchies for different pages (pages, custom post types, taxonomy, ...) and set other breadcrumbs related things.

Default Product Breadcrumbs

Let's take a look at how to setup the default breadcrumbs used on this theme for the Products custom post type. Go to Settings » Breadcrumbs NavXT and click on the Post Types tab. Scroll down to the Product section, and set the Product Root Page to Shop page and since we set the root page, we can also disable (uncheck) the Product Archive Display checkbox. Don't forget to save the settings.

SiteOrigin Widgets Bundle

SiteOrigin has many good widgets that you can use in the Page Builder editor or in the sidebars. Let's take a look at the widgets that need special setup.

SiteOrigin Google Maps

This is a great Google Maps widget with many settings (you can set a custom marker, add information to the marker, use different styles of maps and much more). What bothers most users is the first setting that they have to set before the widget will work properly, that's the Google Maps API key.

Under the API input field you will find this link to the Google Maps API key page. Go to this page, login to your google account and generate the Google Maps API key. Copy the generated API key to the widget. Now you can start using the Google Maps widget and set other setting of the widget.

Note: If you are using a Static image map type, then you will need to input the static Google Maps API key, so go to this Static Google Maps page and click on the "Get a key" button to generate a static Google Maps API key and use that key in the widget instead.

Last but not least there is our footer area. The footer area is divided into:

Top footer is divided in three sections that are explained in the subsections below.

Footer Logo

You can disable the Footer logo section in Appearance » Customize » Theme Options » Footer, by unchecking the Enable footer logo checkbox. Here you can also set the logo and the retina version of the logo, which should be double the size of the normal logo for screens with high DPI (example: your normal logo is 300x150 px, so your retina logo should be 600x300 px).

Footer Custom Text

You can disable this custom text area, by deleting the content of the text area Custom text in Apperance » Widgets » Footer. In this text area, you can add whatever you want (text, images, HTML code, shortcodes, ...).

Footer Widgets

Here you can add widgets in the Apperance » Widgets » Footer. There are also few options for that area in Appearance » Customize » Theme Options » Footer. You can change the layout of the widgets, how many widgets to display and change footer colors.

The Bottom Footer area has 4 custom text fields. Custom text for the left, center(left), center(right) and right side of the bottom footer can be added in live customizer Appearance » Customize » Theme Options » Footer.

Translations

Manual translation

We have an article with a video on how to translate our themes.

WPML for Multilingual sites

This theme officially supports WPML. Head over to the WPML website, buy the subscription, then install the main plugin — likely the OTGS Installer Plugin. When prompted to download, install, and activate specific WPML plugins, make sure to install and activate these:

WPML Multilingual CMS
String Translation
Media Translation

WPML’s setup wizard will also prompt you to install other plugins if it thinks you need them. For example, if this theme includes a WooCommerce-based site, WPML will prompt you to install WooCommerce Multilingual & Multicurrency. Install whatever WPML suggests installing.

Extras

Demo Images

All images used in Adrenaline WP can be found on Shutterstock.

All the images shown in the demo page of Adrenaline WP are copyrighted and come blurry with the theme (demo content).

Customizations

If you need advanced customizations for this theme, we can do that. See our Theme Customization page for details.

Changelog

View the Adrenaline WP changelog.

Support

If you need more help after all, you can write to us.