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/
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 Munditia.zip file. Unzip this file .
- Using an FTP client to access your host web server
- Upload the Theme files in the extracted folder called Munditia 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 Munditia WordPress Theme
- Install Woocommerce plugin with the WooCommerce pages
- 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 munditia.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.
INSTALLATION OF WOOCOMMERCE AND IT’S PAGES
Next step is crucial if you want the demo content to install properly later on. You can search for WooCommerce plugin in the plugins section or you can download it directly from their website:
You can also find and install the plugin via the Add new plugin directly from your wordpress dashboard. Search for the term WooCommerce and you will get the following results:
Install the first plugin (WooCommerce – excelling eCommerce).
After you install and activate the package, you will be prompted to install WooCommerce pages also (see the screenshot below):
Install the WooCommerce Pages so importing of demo content and setting up the pages will work properly later on.
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.
munditia-wp - this is the demo content for WordPress (all the posts, pages and products) – you should install this content first (as described above)
slider_export - this is the demo content for Revolution Slider (boxed version)
slider_export_full - this is the demo content for Revolution Slider (full width version)
munditia-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:
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-184.108.40.206 – 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
You can search for WooCommerce plugin in the plugins section or you can download it directly from their website:
You can also find and install the plugin via the Add new plugin directly from your wordpress dashboard.
- Login to your WordPress site Dashboard.
- Navigate to Plugins -> Add New.
- Search for “WooCommerce”.
- The top result should be “WooCommerce – excelling eCommerce”. Click install now.
- Depending on your setup you may be prompted for your FTP username and password.
You should see “Successfully installed the plugin WooCommerce – excelling eCommerce” (The version may be different depending on when you are reading this!), underneath simply click Activate Plugin. (If you have already navigated away from this page you can simply follow the above step, navigating to your Installed Plugins page to activate.). If you have troubles seeing which plugin to install, refer to the image above.
You should see a nice magenta banner “Welcome to WooCommerce – You’re almost ready to start selling :)”. WooCommerce needs some pages to be created for it to function, it can do this automatically for you by simply clicking “Install WooCommerce Pages”. (You can change these page names later if you want to).
The first thing we need to do is setup where we are and our currency. These are simple dropdowns and you also get a third dropdown to allow you to limit which countries you are willing to ship to. You currently can only set one currency, which might be an issue for some international sellers, however there is an extension to show dynamic currency conversions in your store using the Open Source Currency Exchange API. This will only serve as a guide for your visitors as payment will still be taken in the base currency you set under general settings. It is also a paid extension.
Most of the options are easy to understand, one definately worth a look is the “Show subcategories”. These three little checkboxes can really affect your look. Check these boxes and your main store page will show your categories instead of products. This is really useful as it gives much more of a e-commerce feel, with lots of products simply having the products shown can make navigating your product categories quite difficult as you have to rely on the WooCommerce widgets.
Out of the box WooCommerce comes with a range of shipping options and even gives you the option to switch it off completely if you are dealing with downloadable or virtual products. The core shipping options allow you to set fixed rate costs for domestic, international and local delivery and allow you to specify different classes like Next Day, Priority Delivery etc by using what are called shipping classes. You can easily set which countries and areas qualify for your different shipping methods and you should be able to get your store up and running using these basic methods.
You can read an extensive documentation about WooCommerce on the plugin’s 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-pmc-shortcode.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 (Munditia). 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.
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).
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 is munditia.
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 Full Width - 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.
Title with Border - this is a block that adds a title with the border as can be seen on the live demo (the border line). This will work in full width, 2 column and 3 column setting. To reduce the border to 2 column or 3 column simply resize the block with drag and drop.
Featured Block, Featured Block Image - This is the block that defines the featured squares 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:
There are three blocks available for product presentation. The unique one is Recent & Featured Pr. which combines recent and featured product blocks. It can be seen on the front page of our live demo. Recent Products and Featured Products are classic blocks and will only feature products from it’s own group.
Settings are pretty much the same for all three blocks and screenshot below illustrates what can be set here:
Product Categories - select which categories are to be displayed.
Number of Products - how many products should be presented in the group.
Use AJAX – whether to use dynamic ajax opening of products or not
Last setting will define how many rows of products are to be displayed at once. Use only numbers like 4,8,12,…
Text - this is the block that is used for the plain text.
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 Feed - 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).
Portfolio – a bigger version of portfolio which is used on Portfolio Pages (3 or 4 column versions of Portfolio section).
Simply select which template you want and set the desired categories. Number of portfolio items defines how many portfolio items are display on a single page.
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:
Blog - Similar to portfolio block. You can set the 3 or 4 column layout and have the masonry display of the Blog section. The default Blog/Categories is not set in the page builder.
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.
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
Revolution Slideshow (full width): 1920px X 840px
Blog Posts: 800px x 390px
Single Portfolio Post: 700px wide (can be of any height)
Single Product: 740px x 600px – or bigger but try to keep similar aspect ratio. If you wish to take advantage of the ZOOM Function, images should be bigger then 740px X 600px, but try to keep a similar aspect ratio.
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.
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.
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.
To add the big mega menu please follow these steps:
1. First add the Shop Page to be the most upper menu. Under CSS Classes add pmcbig
2. Now add a custom link to be the main menu for the Categories part. URL should be #, CSS classneed to be pmcmenutitle.
3. Now add the product categories that you want under the Categories. The menu should now look like the image below:
4. For product tag add the custom link in the same way as for the categories.
5. Now add a custom link for tag. Use a link like this, only that it points to your domain: http://munditia2.premiumcoding.com/product-tag/black-2/
This link will display only products with this tag. The menu should look like the image below:
6. To add the product with the big image in the menu, again add the custom link where the URL is the link to that product. Navigation Label should look like this (with your own link):
<div> <span>White Shirt</span> <img src=”http://munditia.premiumcoding.com/wp-content/uploads/2012/09/product-image-2.jpg” alt=”menu image”> <span>£69.99</span> </div>
If you don’t see the CSS Classes you need to turn them on in Screen Options. Check the screen below for a better understanding:
Quote and Advertisers are set in this tab. Please note that Settings for quotation will only be visible on pages like Categories (on other pages this is set for each Template in Page Builder).
General Settings of the Theme are set in this tab. Screen below is showing what can be set:
Allow Responsive Mode - set if you wish to have responsive mode or not.
Portfolio Slug - portfolio slug defines what prefix your portfolio items have. For instance in Munditia a link for portfolio item would be:
Number of recent portfolio items and posts is only applicable if you do not set that in a certain block in Page Builder.
WooCommerce Settings Tab defines a few basic options of how you want to present your store in our Theme.
Category Type can best be seen on our live demo preview under Menu Shop (you can see all three there). Simply set the one that you prefer.
ZOOM function is used on single products when images will enlarge on hover and you customers will be able to check them in more details.
Setting of Number of products is only applicable if you do not set that in blocks in Page Builder.
Support Tab - is a contact form that is stickied at the right bottom of the Site.
Logo and Favicon are uploaded in this Tab.
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).
Social Icons for the header part are added in this tab. Note that you have complete freedom here and can add your own icons. Set the URL and alt text and upload your icon.
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…
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.
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
This special contact form is added via widgets so this is the procedure of how to add it:
- Go to Appearance -> Widgets
- Add a text widget to Bottom Support Tab Sidebar
- Add title: For presale questions, contact us (or whatever you prefer)
- Add following text to the text field:
If you have any questions about the products, send us an email. [contact-form-7 id="4" title="Contact form 1"]
If you have any questions about the products, send us an email.
[contact-form-7 id="4" title="Contact form 1"]
This tutorial shows how to properly import the demo data and settings, so the theme looks like live preview. More video tutorials from PremiumCoding can be found under my channel.
This tutorial shows how to work with the Theme’s Page Builder.
This tutorial shows how to properly install the Theme and the neccessary plugins.