Author: GuiBento
Live Preview: View Demo
Support: Ask a Question

Welcome to Magician Premium!

We appreciate and thank you very much for you choose to be part of our beloved theme, magician. You are the ownner of a regular license to use the Magician, so it is yours as well.

Here is all the necessary documentation for you to configure your theme and start using it quickly. We removed some installation steps to make it as simple as possible.

In case of any doubt, we are available to help you at Support Forum

First steps

First things first!

To install and configure Magician Premium theme, we must follow a few steps.
The zipped file that you downloaded contains some folders:

Package contents

Before to start working with your new portfolio, make sure that your Wordpress version is updated to the latest one.
You can know more about Wordpress requirements clicking here →.

Theme Installation

Wordpress Dashboard Activation

Basically there are two methods to install any WordPress theme. The first one is using the Wordpress Theme installer and the second is installing it using FTP. Let´s see the first one.

WordPress Theme Installer

Via FTP (alternative and advanced method)

Import demo data
After installing and activating all plugins, you may find under the menu Appearence → Import Demo Data the option to import one of many content.xml demo files under the folder named demo. Before importing the content, copy and paste the desired content.xml and paste on wp-content → radium-one-click-demo-install → demo-files folder overwrinting the content.xml file that was originally there. Also, you are going to find there files with names like settings.rtf and themeoptions.rtf that you must copy and paste under optiontree import panel that you are going to find under optiontree → settings → import.

Required Plugin Installation

In order to take more advantage the theme ask for installing some plugins, we recommend to install all of them. So you can create every element and parts of the theme.

In this sense, once you will activate the theme you will notice a yellow square in the top part where the plugin assistant ask you for installing the included plugins.


Required Plugins

Recommend Plugins

Theme Features

Magician Theme Options

Magician makes use of optiontree framework to organize a deatiled options panel in order for you to manage each part of the theme. You are able to change specific colors of choose one of the predefined color schemes, font-familys and sizes, sidebar attachment and so many creative options to create very unique looks for your businnes.

You may access the panel page under the menu 'appearence' tab and selecting 'Theme Options'.

Here you have a screenshot in order to know more about the options panel.

General color settings.

Navbar color and footer settings.

Typography settings.

Social icons settings.

Creating pages

How to create a New Page

In order to make easier to create your own pages Magician let´s you add your contents in a very easy way. For this just select a template and then use the Visual Composer plugin to create advanced layouts in a few easy steps.

Templates to choose from "Page Attributes"

Hide sidebar


Home page

Setting up any page as home is so easy as clicking on SettingsReading, and select "A static page" and choose "your homepage name" as Front Page.

Home page is automatically configured when you install Magician with one click installation processs.

With the code below you can build a homepage with the same look and feel you can see in the official demo. This page is created using a "Default Page" template and this code based on Visual Composer´s Widgets specially developed for Magician Premium Theme.


For this, just create a "New Page" and select the template '"Default Page"'. Then copy/paste the following code in the WordPress text editor.



Setting up a blog page is so easy as clicking on SettingsReading, and there select "A static page" and choose your "Blog" page as the Posts Page.

Start adding posts to your blog just clicking PostsAdd New.

For this page/template you will notice that there is additional background image options available. You may choose specific solig background colors, background images or even paste a revolution slider shortcode to display slider on the header of your page.

Each single post/article may have different background options that will override major theme configurations.

Page Builder

Magician includes a "page builder" that it will let you create pages in some few minutes. Just take into account that the Visual Composer widgets signed with the theme´s favicon are exclusive for Magician Premium Theme. These widgets will allow you to create all the special elements based on the theme, like SVG transform, the projects grid, the twitter feed or some other interesting elements.

In adition we have included some helper classes to let you work with some elements from the page builder with more precision. Imagine you have placed an title into your composition and you would like to use one of the theme's specific color. Well, to do this you just need to add, using the "Extra Class Name" field on the widget window, a new class of this kind.
"c_base", "c_primary", "c_secondary", "c_tertiary", "c_content" will change text-color css attribute.
"bg_base", "bg_primary", "bg_secondary", "bg_tertiary", "bg_content" will change background-color css attribute.
"f_base", "f_primary", "f_secondary", "f_tertiary", "f_content" will change fill svg css attribute.
"f_primary", "f_secondary" will change font-family attribute based on theme options setup.

Other demo pages

These pages are created using the Visual Composer method, so just copy/paste this codes into your Wordpress text editor and the layout will be automatically generated.

Faq Page →

Contact Page →

Just create a New Page, select a "Default Page" template and paste the following the following code in the WordPress text editor.

Once you have created this piece of code and saved your form, you must to open your contact page and using Visual Composer add this new form using the widget Contact Form 7.


How to setup your navigation

Menu/navigation is adjusted automatically when you import demo content.

Magician comes with two different menu options.

  • Main Menu is the default menu for home page or one page layout style.
  • The second option, subpage menu, may be used to create subpage menus.
  • You may also specify Anchors for your menu links and give visual composer rows an unique ID, this way there will be scrolling effect when user clicks the menu link.

Navigation Layouts

Select a navigation layout

Magician has 3 different navigation styles. These 3 options with the 3 different layouts offer a lot of options and combinations to create different sites and presentations in seconds.

Furthermore, you can set them as sticky/fixed menus. This means that you could create combining content layouts with menu layouts.

Selecting or changing your navigation style is so easy as changing your site layout. Take a look!

  • Within the WP Dashboard click on AppearanceTheme Options and search for Header and Footer tab.
  • Here you will see all options to customize navbar, including sticky/fixed option, brand alignment and custom colors for navbar that may be different from major theme colors.

Sidebar & Widgets

If you clinck on AppearanceWidgets in your admin panel, you will notice that there is a sidebar area available.

Adding widgets just just need to drag and drop them from the widgets area to the sidebar area.

You can define unique widgets for any page with a sidebar with widgets using the WooSidebars plugin included with the theme.

Magician Widgets

Magician SVG transform

Major features:

  • Shape: Courtain, Wave, Triangle, Round Chart, Circle, Rectangle, Custom Shape.
    Each of this options have speacific child features.
  • Fill style: Solid Color, Gradient Color, Image Mask.
  • SVG Gaussian Filter: Specify a number to add gassian blur effect.
  • Force full height: this option force height to be the same was the wrapper around this shape and it will be relative positioned.
  • SVG custom height, SVG custom width: Specify width and height in pixels, percent, inch...
  • Absolute position: if this option is checked, it will force absolute position, this way the svg shape may be aligned with bottom, right, top, left, even center.
  • Bring to front: if this option is checked, it will force z-index attribute and the svg wil be above the content inside its row.

Custom shape

You may also add skrollr data attributes directly into your svg tags.

It is not necessary to open and close svg tag. You must only specify inner svg tags like polygon, rect, circle, path, etc.


And a special big THANK YOU for you all that contribute with the development of magician with suggestions and critics. You will keep working to make it even better so, please, tell us what you need.