INSTALLATION VIA FTP
- Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer.
- In the extracted folder you will find Udita.zip file. Unzip this file .
- Using an FTP client to access your host web server
- Upload the Theme files in the extracted folder called Udita to wp-content/themes directory provided by WordPress.
- Go to Administration > Appearance > Themes, under the Manage Themes tab, under the Available Themes, if necessary navigate to the page displaying that Theme, then click the Activate link to make the Theme, the Current Theme. After the Theme uploads to the server simply click on Activate and your brand new theme will be ready to use.
UPLOADING THE THEME VIA ADMINISTRATION PANEL
You can download Themes directly to your blog by using the Add New Themes option in the Appearance sub-menu.
- Log in to the WordPress Administration Panels.
- Select the Appearance panel, then Themes.
- Select Install Themes.
- Use the sub-menu or the Search or Filter options to locate a Theme you would like to use.
- Click on the Preview link to preview the Theme or the Install link to upload the Theme to your blog.
- Use the Upload link in the top sub-menu to upload a zipped copy of a Theme that you have previously downloaded to your machine.
To make the theme look like our live preview and for it to function properly it should be installed in the following order:
- Install the Udita WordPress Theme
- Install Revolution slider and our shortcode/builder plugin (found in the plugins directory in the files for download)
- Import Demo content (found on our support portal)
- Import Demo Settings for the Revolution Slider (found on our support portal)
- Setting up the Home Page
For Theme installation please see this video tutorial. It explains how to install a new WordPress Theme from a zip file, just in case of Buler theme, the file you need to install is Udita.zip (this is the Theme). Procedure is the same, or you can also read the previous chapter where it is explained how you install a Theme via FTP or from Administration Panel.
REVOLUTION SLIDER INSTALLATION
Revolution slider is the premium plugin that comes with the theme. You can find it in the plugins directory of the package you installed from Themeforest. Install it via the Add new Plugin. After the plugin is installed, you will notice a new tab in the left menu of the WordPress Dashboard (at the bottom of it). We will return to the Slider in step 5 where the settings and demo content will be installed. You can read more about the plugin on CodeCanyon where it is available for sale.
IMPORTING OF THE DEMO CONTENT
This is where the exciting stuff happens. For demo content import we first need to install a plugin called WordPress Importer. Go to Tools -> Import and select WordPress. You will be prompted to install a plugin. After the plugin is installed simply select the XML file that you downloaded (unzip it first) from our portal and you are done (with all attachments). If all works smoothly then the Theme is almost ready to look like live preview.
Inside the zip file that you can downloaded from the link above you fill wind 4 files.
udita-demo-content - this is the demo content for WordPress (all the posts, pages and products) – you should install this content first (as described above)
udita-revolution - this is the demo content for Revolution Slider
udita-widgets.wie - demo content that will import widgets (they will be positioned like on our live demo). You will need the following plugin to import the widgets - WIDGET IMPORTER / EXPORTER
Please note that when you are importing demo content for Revolution Slider only use the text files provided above in the case when IMPORTING WITH ZIP FILES FAILES. Below is a link to download the zip file for Revolution Slider (which also contains CSS files and will make the titles exactly the same as on our live preview). Text files will only import the slider settings (WITHOUT CSS).
IMPORTING DEMO SETTINGS FOR REVOLUTION SLIDER
It’s time to import the Settings for the Revolution Slider. Click the Revolution Slider Tab at the bottom of the WordPress Dashboard. Now click the Import Slider button. Now select the ZIP file that you downloaded from our support portal (unzip it first) and click OK. The slider will be added with all the Slides and will be ready to use.
SETTING UP THE HOME PAGE
Go to Settings / Reading in your WordPress Dashboard and add the Static Page from the list of Pages (if you imported all the content properly there should be several pages, just like in our live demo).
For more information please check our support portal at:
WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Fantastico) to automatically install WordPress for you. However, if you wish to install WordPress yourself, the following guide will help. Now with Automatic Upgrade, upgrading is even easier.
Here’s the quick version of the instructions for those who are already comfortable with performing such installations. More detailed instructions follow.
If you are not comfortable with renaming files, Steps 3 and 4 are optional and you can skip them as the install program will create the wp-config.php file for you.
- 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 to 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 (excluding the WordPress 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 the contents of the unzipped WordPress package 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 the URL in a web browser. This should be the URL where you uploaded the WordPress files.
- If you installed WordPress in the root directory, you should visit: http://example.com/
- If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/
For full functionality of the Theme you will have to install some plugins. Below is a short description of where and how you can install the plugins. All these plugins can be found in the directory Recommended Plugins in the zip you downloaded from Themeforest.
- this is our plugin which adds shortcodes and page builder for the Theme (this is a must have)
2. revslider – REVOLUTION SLIDER
- this plugin adds the Revolution Slider, it’s a premium plugin from Codecanyon and is a plugin we will update when there are newer versions
3. contact-form-188.8.131.52 – CONTACT FORM
- this is a plugin that you will need of you want to add the contact form (can be seen on the contact blog). Plugin can be downloaded from WordPress repository
4. twitter-widget-pro.2.6.0 – TWITTER PLUGIN
- this is a plugin that you will need if you want to add the Twitter block (in our live demo the block just above the footer). Plugin can be downloaded from the plugin’s official website
Aqua Page Builder is a powerful WordPress plugin that allows you to create an unlimited number of template variations for use in your WordPress themes. It follows the same user interface used by the Menus & Widgets admin pages – making you feel right at home with the UI.
Similar to the Widgets &s Menus, Aqua Page Builder features the drag and drop interaction to build its templates.
Since its official release over 3 months ago, Aqua Page Builder plugin has received over 10000 downloads across the globe. If you don’t know what Aqua Page Builder (henceforth AQPB) is, then I’d recommend you to watch this short video which demonstrates some of its awesome features. http://www.screenr.com/iI87
The video will demonstrate how easy it is to use the builder and create pages with it.
Plugin is bundled with the Theme and can be found in Recommended Plugins directory in the zip you downloaded from Themeforest:
page-builder-udita.zip – PAGE BUILDER AND SHORTCODE PLUGIN (Theme’s plugin)
- this is our plugin which adds shortcodes and page builder for the Theme (this is a must have!)
After you have successfully installed & activated the plugin, you should see the the link to the Aqua Page Builder page in Appearance > Aqua Page Builder. Please note template names should be unique, therefore you cannot have two templates named, e.g.
If you have succesfully imported the demo content, the page builder should look like this:
This is a part of the front page from the Theme (Udita). Blocks will be explained later on.
To add a block to the main building panel, drag the blocks from the
Available Blocks container on the left of screen to the location you want on the building panel. The block will be automatically opened and you will be able to edit it to your liking.
Depending on which block you’re currently editing, some blocks can be resized and some do not. To resize a block, simply hover on either sides of the block, a “Resize Handle” cursor icon will appear to indicate that the block is resizable. Click, and drag the resize handle to the width you like.
There are two ways to delete a block.
- Method 1 - Drag the block to the
- Method 2 - Open the block to show its content, and on bottom left you should see an anchor link titled
Deletewhich you can click to delete the block.
Please note that all changes will not be saved until you clicked the Save Template button.
Rich Text - this is a block that is used for a more complex presentation with text, images, links, titles,…
Column - this block is only needed if you want to add content within columns. In this case first drag the number of columns you wish to have and size them properly (by dragging them with your mouse). Now add the blocks you wish to use within these columns (so block is inserted inside the column). Use drag and drop to do so.
Clear - defines a padding/margin between blocks. You can also define background color of the clear section.
Portfolio - This is the block that set up the recent portfolio part of the Page. Screenshot belows shows which fields need to be set up in order for the feed to looks exactly like the one on our live demo. This is the block that is used to display portfolio section on front page (in our live demo).
Blog posts full width - this block works in the same manner as the portfolio feed, only it displays recent posts. Screenshot below is showing what needs to be set up:
Advertise - is a block that will display our advertisers/brands section. Images are added in Theme’s options under Content Settings Tab.
Contact form and Widgets - Contact part is divided into two parts. On the left is the contact form and on the right is the part reserved for widgets. Widgets are set up directly from the widgets section so all you have to do here is to choose which widgets part to use. Screenshot below is showing how this part is set up:
Testimonials - this is the block with which you can add the testimonials (quotes from customers). Screenshot below is showing how you can set it up:
GoogleMap - this is the block that will add the GoogleMap (like on our live demo). Screenshot below is showing how our version is set up:
Twitter - a block that adds the twitter feed. Simply enter your twitter username and choose how many recent tweets you would like to have displayed. Further adjustment (like displaying avatar or not) for Twitter block can be set in the Twitter plugin settings which can be found under Settings -> Twitter Widget.
Start Content - This is the block that defines from where the non full width content starts (please note that Revolution Slider can be full width or boxed and this is set from the Plugin settings of the Revolution Slider). Here the blocks background color is set, as well as an background image (if you want one). The special icons that are at the start of the blocks are also set here, you can see all the icons available from Font Awesome Website.
End Content - this is the block that defines where the non full width content stops
Revolution Slider - all you have to input here is the alias of the Revolution Slider that you created (how to set up the slider is explained in the chapter Revolution Slider). In the case of the demo content, the alias depends of the Theme (names are described under installation – demo content of revolution slider).
Breadcrumb - this is the upper section part of each inner page (it defines the path of where in the website you currently are – for example: Home >> Portfolio >> Single Portfolio Title). It will be slightly different on different pages (like portfolio and single portfolio). There is no setting on your part. You just need to set those on certain single Pages (like Page with Sidebar).
Quote with Widgets - is a block that adds the quotation (like the one just above the footer in the live preview). Title and small title can be set.
Featured Block - This is the block that defines the featured squares with numbers found below the Revolution Slider. Screen below shows what content needs to be added to be the same as the ones on the live demo:
The title is actually a number in case of live demo. If you want to roll in, check that in the box under the Title label.
After you have installed everything properly and installed the demo content it will be time to set the home page. If you installed the demo content then you will already have several Pages and you all have to do is set one of them as the home page.
SETTING UP THE HOME PAGE
First you will have to select which page is the front page. Go to Settings / Reading and check the Static Page Tab. Then select the home page you wish to have ( Home, Home nivo, etc.), this will be one of the Pages that you created with the Aqua Page Builder. So the procedure should be:
- Go to Administration > Settings > Reading panel.
- Set ‘Front page displays:’ to ‘a static page’ and choose the first page you created above for ‘Front page.’ If your WordPress site will contain a blog section, set ‘Posts page’ to the page you created for this above. Otherwise, leave this blank.
- Save changes.
- Enable “Permalinks“ to show the “page title” in the address, since
/index.php?p=423defeats the purpose of making a static front page.
Theme uses different image placeholders for different parts of the site . Below is a short list of recommended sizes (used in the live preview).
Revolution Slideshow: 1180px X 480px (you can change that in Revolution Slider Settings)
Blog Posts: 800px x 390px
Single Portfolio Post: 700px wide (can be of any height)
When going to Appearance / Menus you will see the structure of the templates navigation. You can easily edit menu labels, and move them using drag and drop. On the left column you have the possibility to add menu items using “custom links”, “pages” or “categories”. The newly added item will appear at the bottom of the menu structure and can be moved to its desired location. Make sure to always save the menu after making changes.
Be careful to set URL correctly if you wish to have a One Page Theme (like #headerwrap). These have to be the same as ID’s you set in the page builder (for the menu to properly scroll to the correct block.
The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default.
- Locate the pane entitled Pages.
- Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
- Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
- Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
- Scroll back to the Menu Editor.
- Click the Save Menu button.
- Locate the menu item that you want to remove in the menu editor window
- Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
- Click on the Remove link. The menu item/box will be immediately removed.
- Click the Save Menu button to save your changes.
The Navigation Label – this field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog.
The Title Attribute – this field specifies the Alternative (‘Alt’) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.
- Click on the arrow in the top right-hand corner of the menu item to expand it.
- Enter the values for the Navigation Label and Title Attribute that you want to assign to the item.
- Click the Save Menu button to save your changes.
When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.
The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.
To make one menu item a subordinate of another, you need to position the ‘child’ underneath its ‘parent’ and then drag it slightly to the right.
- Position the mouse over the ‘child’ menu item.
- Whilst holding the left mouse button, drag it to the right.
- Release the mouse button.
- Repeat these steps for each sub-menu item.
- Click the Save Menu button in the Menu Editor to save your changes.
Only Advertisers and the quote for the inner pages (like blog, pages,…) are set here. Set them im theme options and then add them via Advertisers Block in Page Builder.
Logo and Favicon are uploaded in this Tab.
Google Analytics - paste the code from analytics in the text field at the bottom of the screen.
All colors for the Theme are set here, from font colors to background colors (apart from the background color of blocks which can be set individually for each block).
Translation tab is not only meant for translation into another language, but it also provides you with the ability to change the text of most aspects of the Theme. Change the lines like Read more, Related Posts, Our major brands, etc…
If your import is failing for some reason, try to the following (this method resolved this issue for us in several cases):
- Download and Install 7zip.
- Right click on your .XML file -> 7zip -> Add to Archive
- Change the “Archive format” to gzip and hit “OK”
- Try to import the file again (using the .gz you just created) and it should work
In some cases it will happen, that some of the blocks might not import. Go to Page builder and simply add those blocks to the Page you have for Home, or any other Page you want those blocks added to.
Please note that for blocks like recent Portfolio items or Recent Posts to properly appear, you need to have some Posts and Portfolio items on your WordPress.
Video Post - Go to the post and set it to video format, then set the field just below the post text that says: Video URL(*required). Also check the Screenshot below that is showing where you have to set the link:
If you don’t wish to have responsive mode and unchecking in theme’s options doesn’t have the desired effect, you can easily remove all the responsive features. ForIphones and Ipads it is enough to simply remove one line from header.php. Open header.php and remove the line:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />
or other mobile devices you need to remove all the css that is used for media queries. Open style.cssand go almost to the end of it where the following line is:
@media screen and (min-width:0px) and (max-width:1180px)
Now delete everything that is beyond this line in style.css (including this line) up until CUSTOM CSS. Do not delete this last part, since the custom css box from theme’s options is included here. The responsive part is now completely removed and your website will be seen in full on mobile devices.
First try to save settings twice, that will help on some servers/cases. If it is not working then try this:
Go to your theme’s directory and set CSS directory’s permission to 755. Then go inside the folder and set permissions of all php files to 755. If it is not permissions issue and is still not working, then drop us an email.
You will have to add embeding of characters family to google fonts. Open scripts.php in includes directory and look for font embeding (at the end of the file). Replace the two existing lines:
wp_register_style(‘googleFont’, ‘http://fonts.googleapis.com/css?family=’.$data['heading_font']['face'] ,”,NULL);
wp_register_style(‘googleFontbody’, ‘http://fonts.googleapis.com/css?family=’.$data['body_font']['face'] ,”,NULL);
wp_register_style(‘googleFontbody’, ‘http://fonts.googleapis.com/css?family=’.$data['body_font']['face'].’&subset=latin,greek,greek-ex’ ,”,NULL);
wp_register_style(‘googleFont’, ‘http://fonts.googleapis.com/css?family=’.$data['heading_font']['face'].’&subset=latin,greek,greek-ex’ ,”,NULL);
First try reseting theme options. If this don’t work send us mail with your login details.
Many users will want to change certain aspects of theme (from headings to buttons, logo position, etc.). The hardest part when doing this is finding out which class you have to edit in style.css. This is where Google Inspect comes to the rescue. Other browsers have similar tools but in our opinion Google Inspect is the most convenient one.
Open Google Chrome and position your mouse over the element that you wish to change. Right click on your mouse and then click Inspect. A window will open showing the location of the class instyle.css. You can now play a bit and change some parameters on the fly to see how they would look (remember that this is only a virtual change and that you will have to edit and save style.css for changes to take affect). After you are happy with the changes you can now apply them to style.css and since you now know the exact line where the class is it should be a breeze.
For editing style.css we recommend Notepad++, it is lightweight, will color your code and number the lines of the file.
This is how it is supposed to be. The theme uses two styling files. General styling is done withstyle.css but options that are defined through administration are saved to a file called options.css that can be found in CSS directory. To change these settings you have to edit the file calledstyle_options.php. You will find a similar structure there so should be no problem if you already edited style.css.