WELCOME!

Thank you for purchasing my theme. The Metropolitan is a one page portfolio theme, built for the popular Wordpress platform. I did my best to include everything in this documentation that you need to know about building stunning portfolio sites with your purchased theme, but if you have any questions that aren't covered in this helpfile, feel free to contact me via my support system or email me via the contact form on my userpage here. Thanks so much!


Table of contents


GETTING STARTED

The downloaded package should contains three directories and one .zip file:

1. Fireworks PNG: here are the original layered png files
2. HELP: the documentation file that you actually reading now:)
3. metropolitan-installer.zip: this is the installer package that contains the tamplate files
4. PSD: here you can find the psd files, but they are generated with fireworks ( Because I working with FW )

The only thing that you need to do before installing Metropolitan is to getting WordPress installed on your web server. Unfortunately the wordpress installation process is beyond the scope of this help file, but don't worry you just have to go through some easy steps, furthermore you can find detailed instructions on the WP team's official site:

Installing WordPress

Installing the theme via the Wordpress theme installer ( step by step just for the beginner's sake )

Step 1:  Login to your wordpress admin area. If you can't find your login page, please visit the your site url plus "/wp-login.php" address. For example: if your domain name is "http://your-site.com", the login page will be available on "http://your-site.com/wp-login.php".

Step 2:  Once you successfully logged in click on the "Appearance --> Themes" menu link.

Step 3:  Now you're on the themes page. At the top you should see the "Add New" button. Click on that button then select "Upload Theme"..

Step 4:  Now you can select the metropolitan-installer.zip. It is important to select exactly the metropolitan-installer.zip file not the entire package that you downloaded from the Themeforest. Next click the "Install Now" button and wait a little bit. It may take a several seconds.

Step 5:  After it is installed, you just need to activate it by clicking on the activate menu item under the "Theme succefully installed message". Once the theme is activated you should see the new menu items in your dashboard navigation:



Installing the theme through an ftp client

In this case you need to extract the metropolitan-installer.zip file. Once it unzipped you should see a simple folder named metropolitan. Next, using any ftp program, upload the entire 'metropolitan' folder into the themes folder on your webserver ( wp-content/themes ). Once you get the theme uploaded go to your dashboard and activate the theme. That's all.


HOMEPAGE

As we know the wordpress is originally a blog engine, therefore your latest blog posts will be shown on your default blog page, but you would like to see something similar to the demo site, right? To change your homepage, just go through the following steps:

Step 1:  First of all let's delete the sample page, because we don't need that predefined page at all.

Step 2:  After then you have to create a new page. So click on the Pages --> Add new menu item. Now type the title / name of the homepage. Just for the sake of simplicity it will be "Homepage" in our example. And the most important is selecting the Homepage template on the right side. And please don't try to add content via the page editor. The content on the homepage will be added via custom post types.


Step 3:  Once the "Homepage" are saved, you just only need to replace the posts on the home with your new page. To do this click on the Setting --> Reading menu item and select the Homepage as a homepage. You can set an alternate page for the blog posts too, but it isn't necessary if you don't want to blogging.


You need to set up the navigation before start to create content. It's a little bit tricky, because there is only one page, so the menu doesn't build links between different pages, unless you split the homesections into different pages, but we will talk about this option later in the multipage chapter. The url fields of the menu items will contain the targets of the page scrolling JQuery script. Let me explain how it works: in default case there are six different sections on the homepage and every section has an identifier. Below are the sections with its identifiers:

1. Home/Slider - #header
2. Portfolio - #portfolio
3. Services - #services
4. About - #about
5. Testimonials - #testimonials
6. Contact - #contact

The navigation will be based on custom links where the labels are optional, but the url must be the identifier of the target section. Below you can read the step by step instruction:

Step 1:  Go to the wordpress menu editor by clicking on the Appearance --> Menus menu item in your dashboard navigation.

Step 2:  You are now in the menu editor, and you can crete your first menu by type the selected name into the "Menu Name" text field and hit the Create Menu button.


Step 2:  After then you need to add items to your freshly created menu. As I said above, we are going to use custom links. The label can be anything, but url must be a valid identifier without any http://

Step 3:  Once the menu items created, just need to select your menu as a primary menu in the theme locations optionbox, and push the save button. Your final result should looks like this screenshot below:


THEME OPTIONS

A) General Options

Site logo - As you can see on the demo page there is no a classic image logo on the site. The design of the home page / section is based on the big bold title on the top. In my opinion that title with a cool font looks way better than a classic image logo. Even though I don't use and prefer an image as logo with this theme, you can add your own logo to the site. You can copy + paste url manually, but I recommend you to use the inbuilt media manager by clicking on the "Select Image" button. After you picked one image as your logo, click the "Inset into Post" to assign the url to the awaiting form field.

Logo width - The width of the logo in pixels

Logo height - The height of the logo in pixels
Note: It is crucial to define the width and height of your logo. Why? Because you need to use a double sized image in order to make its look beautiful on Retina or high res screens. For instance if you want to show a 120x80 logo, you have to upload a 240x160 image then type 120 into the width and 80 into the height field.

Logo alt text - The alternate text of your logo.

Admin logo - You can upload a custom logo for the login page.

Shortcut icon - You can add a shortcut icon (favicon) to your site.

Apple Touch Icon - Touch icon for Apple devices.

Copyright text - You can write a "copyright" text that will be appeared at the bottom of the page.

Prealoder effect - You can control the preloader effect with this option. It can be allowed on every pages, or only on the homepage or you can totally disable it.

404 title - The title of the 404 page. The server will typically generate "404 - Not Found" web page, when a user attempts to follow a broken or dead link.

404 content - You can define a custom text content for your 404 page.

B) Style options

Here you can control the font families, font sizes and the colors of your website. If you would like to try the differents colors and fonts in action, just visit the demo site. Just for the sake of safety below you can see the style options with the default values ( these values might be useful in the future ).

Option name Default value
Text font Raleway
Text font size 15px
Heading font Open Sans
Section title font Open Sans
Section title font size 30px
Menu font Lato
Menu font color #000000
Menu background #FFFFFF
Menu font size 12px
Line color #E4E4E4
Link color #990000
Home / slider section
Welcome message font Open Sans
Welcome message font size 38px
Welcome message color #FFFFFF
Background color #FFFFFF
Background pattern No Pattern
Portfolio section
Background #FFFFFF
Background pattern No Pattern
Heading color #333333
Text color #333333
Services section
Background #000000
Background pattern No Pattern
Heading color #EEEEEE
Text color #B3B3B3
Icon background transparent
Icon border #414040
Quote font Open Sans
Quote font size 24px
About section
Background #FFFFFF
Background pattern No Pattern
Headings / Title color #000000
Text color #CCCCCC
Testimonials background #F0F0F0
Text color #333333
Text sections
Background #FFFFFF
Background pattern No Pattern
Headings / Title color #000000
Text color #333333
Contact section
Background #FFFFFF
Background pattern No Pattern
Headings / Title color #000000
Text color #333333
"GO" button background #000000
"Social section background #000000
Blog / inner pages
Background #FFFFFF
Background pattern No Pattern
Post title size 30px
Post / Page headings color #000000
Post / Page content font size 13px
Post / Page content color #666666
Post elements background #333333
Sidebar font size 12px



C) Home settings

Welcome Message - You can add an introduction text to your site.

Background image - A Background image for the home3 section.

Static video - The <iframe> embed code of the video that will be shown in the home4.

Section 1 content - Select content for the first section.

Section 2 content - Select content for the second section.

Section 3 content - Select content for the third section.

Section 4 content - Select content for the fourth section.

Section 5 content - Select content for the fifth section.

Section 6 content - Select content for the sixth section.

Section 7 content - Select content for the seventh section.

Section 8 content - Select content for the eigth section.

Section 9 content - Select content for the nineth section.

Note: the homepage generally consist of nine sections. Each section has its default content. You can change the order of the content types ( portfolio, services etc. ) by changing the content of the sections. Please don't select the same value for two sections in the same time ( excpet the "nothing value" that can be selected for multiple sections ). The image below shows the general structure of the scrollable homepage.

Portfolio section title - the title of the portfolio section. For example: OUR WORK.

Services section title - the title of the service section. For example: OUR CAPABILITIES / SERVICES.

About section title - the title of the about section. For example: ABOUT ME / OUR TEAM.

About contents - Text content that appears at the top of the "About" section.

Team title - the title of the team section. For example: OUR TALENTED PEOPLE.

Testimonials title - the title of the testimonials section. For example: TESTIMONIALS

Contact section title - the title of the contact section. For example: CONTACT US / GET IN TOUCH.


D) Services settings

Intro text - You can write an overall description that can describe the quality of your services, your work ethic or something else... This text will be shown right above your services.

"More info" text - You can replace the default content of the "More info" link.

Quote - Quote that will be shown at the bottom of the services section.

Quote author - The author of the quote


E) Contact info

General information - If you would like write some important information assigned to your visitors, you can do it here. The text will be shown on the right side of the contact section, above of your email address.

Address - The address where your potential customers can reach you.

Your telephone number - Your telephone number :)

Email Address - This email address will be shown on the contact page / section, but will not be the destination of the contact form messages!

Google Map - If you want to show a Google Map at the bottom of your site, please insert its iframe into this textarea.


F) Contact form

You can totally customize the contact form by adding custom error messages and labels to the form elements.

Email address (required) - This address will be destianation of the contact form messages.

Name label (required) - The default value of the name field in the contact form. Required by the validation process.

Email label (required) - The default value of the email field in the contact form. Required by the validation process.

Message label (required) - The default value of the message textarea in the contact form. Required by the validation process.

Send button label - The default label of the contact form button. Short values is recommended for the sake of the circle shape (for example: OK, GO ).

Missing name warning (required) - If the user doesn't fill the name field before submit the form, this message will be shown. Required by the validation process.

Missing email warning (required) - If the user doesn't fill the email field before submit the form, this message will be shown. Required by the validation process.

Invalid email warning (required) - If the user are trying to submit the form with an invalid email address, this message will be shown. Required by the validation process.

Missing message warning (required) - If the user doesn't fill the message textarea before submit the form, this message will be shown. Required by the validation process.

Error message color - You can specify a custom color for the error messages.

Email subject (required) - The subject of the emails sent via your contact form. Required by the contact form script.

Thank you message (required) - If the user sent the message succesfully, the form elements will disappear, and this message will be shown. Required by the contact form script.

Disable PhpMailer - If you do not receive emails via the contact form, try to disable PhpMailer. PhpMailer is a robust, reliable and widely used mail sending php class, but some servers does not support it. If you disable PhpMailer, the theme will use the classic mail() function instead.

ContactForm 7 shortcode - If you want to replace the default form with a contact form 7 form, paste the shortecode of the form here.


G) Social media

You can edit your social media profiles in this settings sections. Every social media icon based on the following logic: there are an url and a tooltip text assigned to the same social icon. If you fill the url, the inbuilt icon will be shown as link. If you leave the url field empty, the social icon stays hidden.


H) Blog settings

Blog page layout - You can enable / disable the sidebar on your blog page.

Read more text - You can define a custom "Read more" text.

Prev label - You can edit the tooltip of the next button.

Next label - You can edit the tooltip of the prev button.

Related posts label - The title of the related posts section that appears on the single blog pages.

Don`t show post dates - you can hide post dates on the blog page

Don`t show the author - you can hide the authors on the blog page

Don`t show categories - you can hide categories on the blog page

Don`t show comments - you can hide the number of comments on the blog page

Gallery layout - You can select two layout for the galleries that generated by the gallery shortcode

Comment form settings - The comment form uses the same logic as the contact form!


I) SEO settings

Meta keywords - You can add keywords to your website here ( don't forget separate them by commas ). In fact this is not a very important thing in the modern SEO, this is just an additional option for you :)

Meta description - Define a description for your website. This is an importan tag, because the content of this element tells the search engine what your site is about.


J) Advanced options

Analytics tracking code - Paste your entire analytics tracking code ( including the <script> tags ) into this textarea

Custom css - You can add your custom css code to the <head>. Please don not use the <style> tags, because the theme generates them automatically!

Custom javascript - You can add your custom javascript code to the <head>. Please don not use the <script> html tags, because the theme generates them automatically!


Slider

The theme is using a custom post type to manage the slider. Below are the step by step instructions that help you create and edit slides.

Step 1:  Click on the Slider --> Add Slide menu item.

Step 2:  You have to specify a title for your new slide. This is necessary in order to distinguish different slides in the admin area, but won't be shown as a caption on the frontend.

Step 3:  To add an image to your slide, just click on the "Set featured image" link in the "Featured Image" metabox, and the wordpress media manager/uploader will appears. Now you can upload an image or pick one from the recently uploaded files. To set the selected image as a slide click on the "Use as featured image" link. If the media manager doesn't close automatically, don't worry and close it yourself. The recommended minimal size for the images is 2400x1600 in pixels.


Step 4:  You can write a caption to each side in the "Caption" metabox.


Step 5:  Hit the publish button and that's all, your first slide is created. And just for the sake of safety I attached an image to show you how should look an Add New Slide admin page.


PORTFOLIO

I think the portfolio system is most interesting of the theme. It has a quite unique look and structure, the items are loaded via ajax ( no page reload ), it is possible to show an image screen slider, YouTube and Vimeo videos or a SoundCloud player on the single item pages. It is cool and fun to work with. But there are some important things what you need to know before start to build your portfolio. First of all you need to know the recommended image resolutions.

The recommended minimal width of the thumbnails is 600 pixels in order to keep their look sharp on retina devices. Please don't worry about the bandwidth. Bigger resolution doesn't have to mean bigger file size ( useful info here )! An optimized jpeg with 520x520 resolution is lighter than an avarage 260x260 image without optimization. If you don't know how to compress a jpeg file, feel free to visit this link:

Jpeg Optimizer

I recommend you to create the 640x400 thumbnails for instance, then optimize them with a 80 compression level. The "Resize Photo" function is unused in this case, so feel free to uncheck it.

In fact the height of the thumbnails is optional, but it is important to use the same size for all of the thumbnails. If your first thumbnail is 640x640, you will need to use this size for the rest of them otherwise the layout will collapse!

The recommended image size for the portfolio slider is 1920x800 in pixels!

And now let's see the steps you have to go through to create your portfolio.

Step 1:   Ok, let's see how to create categories! First of all click on the Portfolio --> Categories menu item in your dashboard. Now you can specify the name of your first category in the "Name" textfield. The name is required, but you don't need to specify a slug name, and please don't write description to your categories, and don't choose a parent category. Once the name is specified push the "Add New Category" button, and create the other categories.



Step 2:  Click on the "Add item" link, then add a title to your portfolio element. The title will be shown when the user mouseover the items.

Step 3:  Upload / select the thumbnail image. This process is almost the same as adding an image to the slider. Click on the set featured image link, then the media manager will appaers, and you can upload/select an image from the recently uploaded items. To set the selected image as a thumbnail click on the "Use as featured image" link, then close the media manager.

Step 4:  Add some written content to your portfolio item if you want.

Step 5:  And now the most interesting part: add slides to your portfolio item. Under the editor you will find a custom metabox called "Add more content to the item". The first section in that metabox should be the "Slider images". There you can select the first image by clicking on the "Select image" button. The media manager will opens, and you can upload/select an image, but now you have to push the "Insert into post" button to append the url into the target field. You can add as many custom slider images as you like by clicking the "Add new image" button. And you can remove exsisting images from the slider by clicking the "Remove image" button, but use this button only if there are more then one images in the slider.

Step 5/B:  To add a Vimeo or Youtube video to your portfolio item, the only thing what you need to do is pasting the entire embed code into the relevant textarea. The SoundCloud player works the same way.

Step 5/C:  Metropolitan offers a third option: image gallery. To create a gallery click on the "Add Media" button above the rich text editor. Once the media manager opened click on the "Create Gallery" link then upload the images or select from media library.


Once the gallery created you need to select "Media File" value for the "Link To" option then click on the "Insert Gallery" button.


After then cut the shortcode in text mode and paste it into the "Gallery Shortcode" textarea that can be found at the bottom of the page.


Step 6:  Push the publish button, and that's all. I think the screenshot below also might be useful:




SERVICES

In fact the service columns are posts, based on the services post type. If you would like to add a new service to your services section, you will need to create a new post. Let's see how to do this.

Step 1:  Add an intro text to your service by typing a short text into the "Intro text" textarea on the "Theme settings --> Services" page.

Step 2:  Stay a little bit on the options page and think about the your plans with the services section /page. Do you have many services? Do you want to write a longer description to your services, or just want to show their title? Do you want to show icons or bigger images? These are important questions, because you can fit the layout of the services section to your needs on this page.

Step 3:  Ok, now click on the Services --> Add Service menu item in your admin.

Step 4:  Type the title of the actual service. The title will be shown under the circle.

Step 5:  If you want to show icons, you have to add an icon to the big circle or upload a feautered image. The Metropolitan 46 predesigned, high resolution icons. Each icon has a dark / light version. Even though there are some prefabricted icon, you can still upload your own icon. Click on the "Select image" button, upload the selected image then click on the "Insert into Post" button.

Step 6:  Click on the publish button, and your first service will be shown on the services sections.

You can select from two layouts on the "Theme settings --> Services" admin page.


ABOUT

You can show the team members of your company easily thanks to the Team custom post type. Just click on the Team --> Add Person in your admin navigation. You are now in the "Add New Person" admin page, and I guess it doesn't looks too difficult for you after the previous examples, but for the sake of safety below are two screenshots to help you understanding the about post type.

The text content of the "About" section can be edited on the "Theme settings --> Homepage" admin page.


TESTIMONIALS

MagnaModels offers the testimonials post type and its relevant page template to show some customer feedback on your website. The logic of this post type is quite plain. The post title will be the name of the customer, the featured image is her / his avatar and the contents of the editor will be the testimonial itself. Generally that's all.

Admin side:


Client side:


Create a Multipage Site

To be honest this wonderful template is designed for one page portfolio websites, even though you can use it for multi pages sites too. There are several custom page templates in the package to help you divide the home sections into different pages. In the following steps I'll show you how to turn your existing one page website into a multipage site with five pages: 1. Home 2.Works (Portfolio) 3. About 4. Blog 5. Contact.

Step 1:  Because we are going to divide our sections into different pages, we don't need the rest of the sections on our homepage. We need to keep only the slider (header), so let's disable the others.


Step 2:  Once the unused sections are disabled, you just have to create the new pages. To go through this operation click on the Pages --> Add new menu item, select the relevant template in the page attributes on the right side, then push the publish button. Near the Homepage template you have six more custom page templates:

- About page
- Contact page
- Page with sidebar
- Portfolio page
- Services page
- Services page with circles


Step 3:   Your navigation still based on custom links, but this is not the perfect solution in this case, so create a new menu.

Step 4:   Now you need to add your new items to your navigation. To do this just select your freshly created pages from the "Pages" metabox in the menu editor and click on the "Add to Menu" button. And there is only one thing left. The "Metropolitan" uses two menu locations for the navigation: one for the homepage (Primary Menu ), and one for the inner pages ( Secondary Menu ). So you have to select your existing menu for the Secondary Menu too in the "Theme Locations" metabox. And it's a wrap, you're now done with your multipage



BLOGGING

In fact the Metropolitan is a feature rich portfolio and a powerful blogging theme in the same time! It supports 9 post formats and comes with a bunch amount of easy to use and shiny shortcodes, but before start writing blog entries please enable nested comments in 3 level deep.

Set up your blog page:
You have to create a new page with the "Default" page template, then select it as your blog page on the "Settings ---> Reading" page in your admin.

Flickr widget:
Because this theme built for creative people you can add a Flickr photostream to your sidebar. To use the widget you have to know your own flickr id. You can extract your Flickr id from your Flickr url, if not, you can use the idGettr application.



How to add a blog to your one page portfolio website

In the "CREATE MULTIPAGE SITES" chapter we can see how to divide the homepage into separate page. But what can we do, if wanna keep our home page with its cool scrolling script, and we need a blog page too. Fortunately we can do it easily since version 1.1, thanks to the two menu locations of the theme. Let's see the steps.

NOTE:   I'd like to note that we will use the menu structure what we created in the "C) NAVIGATION" chapter.

Step 1:   If you already have a blog page ( otherwise please create one ), go to the menu editor and add that page to the navigation.


Step 2:   As I said above the theme contains two menu locations: Primary Menu and Secondary Menu. The Secondary Menu is built for the inner pages, therefore you have to create an another menu for your fresh blog page. This additional menu will be very similar to the existing one, but you need to use a page type for the homepage item, and you have to insert the url of your site into the custom links. Once items created, just select your new navigation for the Secondary Menu by checking the relevant checkbox at the bottom. If you don't understand something, feel free to check out the following image:



SHORTCODES

To insert a shortcode into the editor, push the shortocodes button in the TinyMce button bar. After then the shortcodes box will appear, and you can choose one from the codesnippets.

A) Image frames

Before you add an imageframe to your post, you need to know the absoulte path of the selected image. I recommend you to upload your images first to the media lybrary, then copy and paste the urls into a texteditor. I think this is the easyest way to collect the relevant image urls for your post.

[image_frame1 src="The full path to the image"] - a simple image frame.

[image_frame2 src="The full path to the image" title="Image title"] - Image frame with title

[image_frame3 src="The full path to the image" title="Image title"]Image description[/image_frame3] - Image frame with title and description


[image_frame_left_1 src="The full path to the image"] - a simple image frame ( left aligned ).

[image_frame_left_2 src="The full path to the image" title="Image title"] - Image frame with title ( left aligned ).

[image_frame_left_3 src="The full path to the image" title="Image title"]Image description[/image_frame_left_3] - Image frame with title and description( left aligned ).

[image_frame_right_1 src="The full path to the image"] - a simple image frame ( right aligned ).

[image_frame_right_2 src="The full path to the image" title="Image title"] - Image frame with title ( right aligned ).

[image_frame_right_3 src="The full path to the image" title="Image title"]Image description[/image_frame_right_3] - Image frame with title and description( right aligned ).


B) Youtube videos

To use the youtube shortcodes, you have to know the id of the selected video. The video id can be found in the url:


[youtube id="Video id"] - a simple embedded youtube video

[youtube_frame1 id="Video id"] - A youtube video in a frame

[youtube_frame2 id="Video id" title="Video title"] - A youtube video in a frame with title

[youtube_frame3 id="Video id" title="Video title"]Video description[/youtube_frame3] - A youtube video in a frame with title and description


[youtube_left id="Video id"] - a simple embedded youtube video ( left aligned )

[youtube_frame_left_1 id="Video id"] - A youtube video in a frame ( left aligned )

[youtube_frame_left_2 id="Video id" title="Video title"] - A youtube video in a frame with title ( left aligned )

[youtube_frame_left_3 id="Video id" title="Video title"]Video description[/youtube_frame_left_3] - A youtube video in a frame with title and description ( left aligned )

[youtube_right id="Video id"] - a simple embedded youtube video ( right aligned )

[youtube_frame_right_1 id="Video id"] - A youtube video in a frame ( right aligned )

[youtube_frame_right_2 id="Video id" title="Video title"] - A youtube video in a frame with title ( right aligned )

[youtube_frame_right_3 id="Video id" title="Video title"]Video description[/youtube_frame_right_3] - A youtube video in a frame with title and description ( right aligned )

C) Vimeo videos

The vimeo shortcodes are very similar to the youtube snippets. You also need to know the id of the selected video and the id also can be found in the url:


[vimeo id="Video id"] - A simple vimeo video without any frame

[vimeo_frame1 id="Video id"] - A vimeo video in a frame

[vimeo_frame2 id="Video id" title="Video title"] - A vimeo video in a frame with title

[vimeo_frame3 id="Video id" title="Video title"]Video description[/vimeo_frame3] - A vimeo video in a frame with title and description


[vimeo_left id="Video id"] - A simple vimeo video without any frame ( left aligned )

[vimeo_frame_left_1 id="Video id"] - A vimeo video in a frame ( left aligned )

[vimeo_frame_left_2 id="Video id" title="Video title"] - A vimeo video in a frame with title ( left aligned )

[vimeo_frame_left_3 id="Video id" title="Video title"]Video description[/vimeo_frame_left_3] - A vimeo video in a frame with title and description ( left aligned )

[vimeo_right id="Video id"] - A simple vimeo video without any frame ( right aligned )

[vimeo_frame_right_1 id="Video id"] - A vimeo video in a frame ( right aligned )

[vimeo_frame_right_2 id="Video id" title="Video title"] - A vimeo video in a frame with title ( right aligned )

[vimeo_frame_right_3 id="Video id" title="Video title"]Video description[/vimeo_frame_right_3] - A vimeo video in a frame with title and description ( right aligned )

D) List styles

The easyest way to use the list shortcodes is using the inbuillt shortcode manager. But for the sake of safety you can view below all of the available list styles.


[check_list]
  • Item #1
  • Item #2
  • Item #3
[/check_list]

[remove_list]
  • Item #1
  • Item #2
  • Item #3
[/remove_list]

[settings_list]
  • Item #1
  • Item #2
  • Item #3
[/settings_list]

[user_list]
  • Item #1
  • Item #2
  • Item #3
[/user_list]
 

[cross_list]
  • Item #1
  • Item #2
  • Item #3
[/cross_list]

[undo_list]
  • Item #1
  • Item #2
  • Item #3
[/undo_list]

[redo_list]
  • Item #1
  • Item #2
  • Item #3
[/redo_list]

[speech_list]
  • Item #1
  • Item #2
  • Item #3
[/speech_list]
 

[attention_list]
  • Item #1
  • Item #2
  • Item #3
[/attention_list]

[telephone_list]
  • Item #1
  • Item #2
  • Item #3
[/telephone_list]

[lock_list]
  • Item #1
  • Item #2
  • Item #3
[/lock_list]

[mail_list]
  • Item #1
  • Item #2
  • Item #3
[/mail_list]


FAQ / TROUBLESHOOTING

I would like to notice that this is the very first version of theme. My beta testers and me did our best to avoid every issues and I think the theme works without problems, but if you find anything that doesn't work perfectly, please don't contact me instead of underrate the theme. I'll do my best to solve your problems as soon as possible. My email address is info@magna-themes.com.

It seems none of the animations and effects work.

All of the animations are powered by compilicated javascript functions, so the problem should be javascript releated. There are three possible causes in this case:

1) Your browser block javascript. In fact all of the modern browsers enable javascript animations, so the possibility of this is very low nowdays.

2) A wrongly written third party plugin can destroy the javascript functions of the theme. Please try to de-activate all of the plugins, clear the cache of the browser and refresh the site.

3) Maybe your server blocks the dynamic javascript files which are crucial in the javascript structure of the theme. You can check it by viewing the site in Chrome and hit F12. If the server blocks js.php files, the Chrome's developer tool will notice the lack of the following files:

- custom_js.js.php
- js_settings.js.php
- js_variables.js.php

This problem used to happen with auto-installed WordPress platform at GoDaddy. In this case you will need to go to the wp-content folder of the problematic site and delete the .htaccess file. It is always recommended to create a backup before delete it.

How can I change the order of the portfolio / service / about items?

As we know the wordpress is blog engine in default case. The mentioned content types are powered by custom post types and the Worldpress handles their items as blog posts. WP always shows the latest post first, so you can change the order by changing the post dates of the selected elements. If you find this way uncomfortable, feel free to try out the Post Type Order plugin. It works well for me.

How can I change the order of the portfolio categories?

Unfortunately Wordpress doesn't allow their users to change the categories, but there is a plugin that solves this problem: Category Order. It is a quite old plugin, but still works well.

The ajax driven elements ( portfolio and sevice item ) don't load into the homepage properly.

Change the permalinks to default. In fact the ajax loaded elements should well with all of the available permalinks, but some servers don't support ajax calls with permalinks other than default.

The Contact form doesn't work. What am I suppose to do?

Emailing is one of the most complicated part of webdevelopment. There are several things that may cause the misfunction of the contact form. Fortunately the theme contains two alternative solutions in order to avoid problems with the contact form.

1) If you can't receive emails, go to the "Theme settings --> Contact form" page and check the "Disable PhpMailer" option. Click "Save Changes" , refresh your site and try out the form. Note: the PhpMailer is the script behind the contact form. It is a widely used and very reliable mail sending php class, but some servers don't support it. If you select the mentioned option, the theme will use the wp_mail() function instead of the PhpMailer.

2) The theme is compatible with the Contact Form 7 plugin. It is the most popular and most reliable contact form plugin. Install the plugin, create a form ( or use the form that the plugin offers in default ) and paste its shortcode into the "ContactForm 7 shortcode" field on the "Theme settings --> Contact form" page then save the settings. Now the new form should appear on the contact section.

3) If none of the alternatives above work, try to install the Easy WP SMTP plugin.. This plugin allows you to configure and send all outgoing emails via a SMTP server. This is very helpful, because there are lot of hosting companies that doesn't support mail() function on their server.

The form works, but I receive the messages into the spam folder.

In this case you can try the solution 3) of the previous question, or simply allow emails from the address that sends the contact form messages.

How to use custom social icons?

The default social icons can be found inside the images/social_icons, images/social_icons2 and images/social_icons3 folders. You just need to simply overwrite those icons with your own images, but it is important to keep the original size.

Google Analytics doesn't work

First of all you need to be sure to insert javascript only code into the "Analytics tracking code" on the "Theme settings --> Advanced" page. So, you need to remove the <script> and </script> html tags from tha tracking code. If you already did that and the system still doesn't work, please try to add the entire tracking code ( this time including the <script> tags ) to the header.php manually. The code should be placed right above the closing </head> tag!

Insert into post button doesn't work....

To be honest this is the most misterious issue which can be happen to a WordPress site and sometimes it remains unsolved. Anyway, there are some known causes and fixes:

1) Site urls ( WordPress Address (URL) && Site Address (URL) ) contain capital letters. Please check the site url options on the "Settings --> General" page. They should not contain any capital letters.

2) Wrong site url configuration #2. The site urls on the "Settings --> General" page must be the same as you see in address bar of the browser.

3) Maybe a .htaccess rule doesn't let you upload an image. Please check the .htaccess file in the root. Sometimes there is an additional .htaccess file inside the wp-content folder that can block the image uploader.

4) Maybe the memory limit of your server is too low and that causes the problem. Please try to add the define('WP_MEMORY_LIMIT', '128M'); to the wp-config.php file.


CREDITS

Javascript:

JQuery by John Rising - http://jquery.com/
JQuery easing - http://gsgd.co.uk/sandbox/jquery/easing/
FlexSlider by Muffin - http://flex.madebymufffin.com/
tipTip by Drew Wilson - http://code.drewwilson.com/entry/tiptip-jquery-plugin
Backstretch by Scott Robbin - http://srobbin.com/jquery-plugins/backstretch/
SwipeBox by Constantin Saguin - http://brutaldesign.github.io/swipebox/
YTPlayer by Matteo Bicocchi - http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/


All of the photos bought at:

Depositphotos


Icons

Iconsweets2 by YummyGumm - http://iconsweets2.com/