Installation (Udita)

Theme Installation (Udita)

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.

  1. Log in to the WordPress Administration Panels.
  2. Select the Appearance panel, then Themes.
  3. Select Install Themes.
  4. Use the sub-menu or the Search or Filter options to locate a Theme you would like to use.
  5. Click on the Preview link to preview the Theme or the Install link to upload the Theme to your blog.
  6. 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.

Back To Top

How to make the Theme look like our live preview (Udita)

To make the theme look like our live preview and for it to function properly it should be installed in the following order:

  1. Install the Udita WordPress Theme
  2. Install Revolution slider and our shortcode/builder plugin (found in the plugins directory in the files for download)
  3. Import Demo content (found on our support portal)
  4. Import Demo Settings for the Revolution Slider (found on our support portal)
  5. Setting up the Home Page

 

These are the basic steps, which I will explain further below.

THEME INSTALLATION

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:

http://themesupport.premiumcoding.com

Back To Top

WordPress Installation

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.

  1. Download and unzip the WordPress package if you haven’t already.
  2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
  3. 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.
  4. 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/

Back To Top

Recommended Plugins

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.

 

 1. page-builder-pmc-shortcode – 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)

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-7.3.5.3 – 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

 

Back To Top

Page Builder (Udita)

How to install and use the Page Builder (Udita)

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 &amps 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.

 

INSTALLATION

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!)

Back To Top

How to create a new template and add Blocks (Udita)

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. 

1
Home

If you have succesfully imported the demo content, the page builder should look like this:

udita-documentation-wordpress-blog-theme-1

 

This is a part of the front page from the Theme (Udita). Blocks will be explained later on.

Back To Top

Adding a Block

To add a block to the main building panel, drag the blocks from the 

1
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.

Back To Top

Resizing the Block

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.

Back To Top

Deleting a Block

There are two ways to delete a block.

  • Method 1 – Drag the block to the 
    1
    Available Blocks

     container.

  • Method 2 – Open the block to show its content, and on bottom left you should see an anchor link titled 
    1
    Delete

     which you can click to delete the block.

Please note that all changes will not be saved until you clicked the Save Template button.

Back To Top

Page Builder Blocks (Uditia)

Rich Text

Rich Text - this is a block that is used for a more complex presentation with text, images, links, titles,…

Back To Top

Column, Clear

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.

Back To Top

Portfolio

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).

page-builder-mundus-3

Back To Top

Blog posts full width

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:

image_26

Back To Top

Advertise

Advertise - is a block that will display our advertisers/brands section. Images are added in Theme’s options under Content Settings Tab.

Back To Top

Contact Form, Widgets

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:

Contact Form and Widgets

Back To Top

Testimonials, Google Map

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:

page-builder-mundus-4

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:

Google Map

Back To Top

Twitter

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.

Back To Top

Start Content, End Content

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

Back To Top

Revolution Slider

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).

Back To Top

Breadcrumb

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).

Back To Top

Quote with Widgets

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.

Back To Top

Featured Block, Featured Block Image

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:

page-builder-mundus-2

 

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.

Back To Top

General Settings (Udita)

Setting up the Home Page

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:

  1. Go to Administration > Settings > Reading panel.
    reading-1

    Reading panel

    1. 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.
    2. Save changes.
  2. Enable “Permalinks to show the “page title” in the address, since 
    1
    /index.php?p=423

     defeats the purpose of making a static front page.

Back To Top

Recommended Image Sizes (Udita)

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)

Back To Top

Navigation and Menu Settings (Udita)

How to set up the Navigation

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.

page-builder-mundus-5

 

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.

  1. Locate the pane entitled Pages.
  2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
  4. 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.
  5. Scroll back to the Menu Editor.
  6. Click the Save Menu button.

Back To Top

Deleting a menu item

  1. Locate the menu item that you want to remove in the menu editor window
  2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
  3. Click on the Remove link. The menu item/box will be immediately removed.
  4. Click the Save Menu button to save your changes.

Back To Top

Customizing Menu Item

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.

  1. Click on the arrow in the top right-hand corner of the menu item to expand it.
  2. Enter the values for the Navigation Label and Title Attribute that you want to assign to the item.
  3. Click the Save Menu button to save your changes.

Back To Top

Creating Multi Level Menus

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.

wp3menu-screen6

  1. Position the mouse over the ‘child’ menu item.
  2. Whilst holding the left mouse button, drag it to the right.
  3. Release the mouse button.
  4. Repeat these steps for each sub-menu item.
  5. Click the Save Menu button in the Menu Editor to save your changes.

Back To Top

Theme's options (Udita)

Content Settings (Udita)

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.

udita-documentation-wordpress-blog-theme-2

Back To Top

General Settings (Udita)

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.

udita-documentation-wordpress-blog-theme-3

 

Back To Top

Styling Options (Udita)

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).

udita-documentation-wordpress-blog-theme-4

Back To Top

Translation Tab (Udita)

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…

udita-documentation-wordpress-blog-theme-5

Back To Top

FAQ (Udita)

WordPress failed to import the demo content

If your import is failing for some reason, try to the following (this method resolved this issue for us in several cases):

  1. Download and Install 7zip.
  2. Right click on your .XML file -> 7zip -> Add to Archive
  3. Change the “Archive format” to gzip and hit “OK”
  4. Try to import the file again (using the .gz you just created) and it should work

Back To Top

Some of the Blocks did not import, what to do?

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.

Back To Top

How to set up the Video Post properly

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:

screen-video-post

Back To Top

How to completely remove responsive mode

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.

Back To Top

Theme’s settings are not saving. What to do?

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.

Back To Top

What to do if some characters don’t show up (like Greek, Cyrillic,…)

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:

1
2
<strong>wp_register_style('googleFont', 'http://fonts.googleapis.com/css?family='.$data['heading_font']['face'] ,'',NULL);</strong>
<strong>wp_register_style('googleFontbody', 'http://fonts.googleapis.com/css?family='.$data['body_font']['face'] ,'',NULL);</strong>

with:

1
2
<strong>wp_register_style('googleFontbody', 'http://fonts.googleapis.com/css?family='.$data['body_font']['face'].'&amp;amp;subset=latin,greek,greek-ex' ,'',NULL);</strong>
<strong>wp_register_style('googleFont', 'http://fonts.googleapis.com/css?family='.$data['heading_font']['face'].'&amp;amp;subset=latin,greek,greek-ex' ,'',NULL);</strong>

Back To Top

Can’t see theme admin panel.

First try reseting theme options. If this don’t work send us mail with your login details.

Back To Top

How to check which element to apply styling to with Google Inspect

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.

Back To Top

Theme options are overriding style.css

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.

Back To Top