Thank you for purchasing my theme. The "Me" is a one page portfolio theme, built for the popular Wordpress platform. I belive you can find 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


The downloaded package should contains three directories, an xml file and the installer .zip file:

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

The only thing what you need to do before installing "Me" 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, and 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:  After you successfully logged in, click on the Themes menu item, under Appearance.

Step 3:  Now you're on the themes page. At the top you should see two tab options. Click to "Install Themes". After then you have to click on the Upload link in the small menu right below the tabs.

Step 4:  Now you can select the me-installer.zip ( this is the installer file of the latest version, in the previous versions you might find a file called me-v32-wordpress.zip, me-v31-wordpress.zip, or just me-wordpress.zip ). It is important to select exactly the me-installer.zip file, not the entire package what 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

You need to extract me-installer.zip file in case you want to install it via ftp. Once it is unzipped you should see a simple folder named me-3-9-3. Next, using any ftp program, upload the entire 'me-3-9-3' folder into the themes folder on your webserver ( wp-content/themes ). After then go to your dashboard and activate the theme. That's all.


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 name of your future 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 five different sections ( + three inactive text sections ) on the homepage and each section has an identifier. Below are the sections with its identifiers:

1. Home/Slider - #wrapper
2. Portfolio - #portfolio
3. Services - #services
4. About - #about
5. Contact - #contact
6. Text1 ( Inactive in default ) - #text1
7. Text2 ( Inactive in default ) - #text2
8. Text3 ( Inactive in default ) - #text3
8. Text4 ( Inactive in default ) - #text4
8. Text5 ( Inactive in default ) - #text5

Note: you can activate and edit the text sections on the "Theme settings --> Homepage". If you want to activate a text section, you will need to select it for a section on the mentioned page. There is a relevant tutorial video that demostrates how the system works.

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 labels 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:


A) General Options

Top Margin - You can set the distance (in pixels) between the page top and your logo. The default value is 19px.

Site logo - the full path to your logo. You can define it 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.

Tocuh icon 1/2/3/4 - Touch icons for Apple devices. These options are briefly explaned in the options panel.

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

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. I think you will understand these options without explanation, and I hope you will enjoy the customization. The only think what I'd like to recommend you is to keep the light background. Of course you may modify it, but in my opinion the best option is the default #F8F8F8. Just for the sake of safety below you can see the style options with the default values ( this screenshot might be useful in the future ).

C) Home settings

Intro text - You can add an introduction text to your site. The text will be shown under the navigation.

Static video - If you would like to show a static Vimeo / Youtube video instead of the slider, just insert the embed code of the selected motion picture into this textarea then click "Save changes".

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 ( inactive in default ).

Section 7 content - Select content for the seventh section ( inactive in default ).

Section 8 content - Select content for the eighth section ( inactive in default ).

Note: the homepage generally consist of five active and three inactive sections. Of course the inactive sections are not visible in default. 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.

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

Text section 1 title - This is the title on the top of the first optional text section. This section is inactive in default.

Text section 1 content - The content of the first optional text section. Doesn't allow shortcodes!

Text section 2 title - This is the title on the top of the second optional text section. This section is inactive in default.

Text section 2 content - The content of the second optional text section. Doesn't allow shortcodes!

Text section 3 title - This is the title on the top of the third optional text section. This section is inactive in default.

Text section 3 content - The content of the third optional text section. Doesn't allow shortcodes!

White space - Control the free space between the sections.

Enable preloader - Show an animated svg preloader. It is recommend in case you have many images or other media on your site.

D) Slider settings

Slider width - The width of the slider in pixels. The default value is 700

Animation - Select an animation type for the slides, "fade" or "slide"

Sliding direction - You can select the sliding direction, "horizontal" or "vertical". It works only, if the "slide" animation has been selected in the prev option.

Auto play - Play the slide show automatically.

Slideshow speed - Set the speed of the slideshow cycling, in milliseconds.

Animation speed - Set the speed of animations, in milliseconds.

Allow Prev/Next buttons? - Create navigation for previous/next navigation? (true/false).

Allow ControlNav? - Create navigation for paging control of each slide?

Keyboard navigation - Allow slider navigating via keyboard left/right keys?

Mousewheel navigation? - Enable mousewheel navigation.

Randomize - Randomize slide order?

Slide to start - The slide that the slider should start on. 0 = first slide.

E) Portfolio settings

Portfolio "i" button tooltip - tooltip text assigned to the "Info button" on the portfolio items.

Portfolio link button tooltip - tooltip text assigned to the "Link button" on the portfolio items

All projects text - You can modify the `All projcets` text in the filter.

Disable filter - You can turn off the filtering effect on the portfolio.

Disable overlay effect - If selected, the black overlay will be gone and the image became a big link.

How to show items? - You can choose from two effects to show the ajax loaded portfolio items. One loads the item into a full screen overlay while the other shows the item inside the container element of the filter links.

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

Services Layout - How do you want to show your services? If you don`t intend to use long description for your services, I recommend you to pick the boxed (3 services per row) layout. Otherwise the `1 service per row` option will be the best for you.

Circle background - You can change the background color of the icon container circles.

G) 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 - Your address, where your potential customers can reach you. Will be shown under additional information.

Your telephone number - Of course this text field is borned to store your telephone number. The telephone number will be shown under the address

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

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

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

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

Newer posts tooltip - You can edit the tooltip of the next button.

Older posts tooltip - You can edit the tooltip of the prev button.

Don`t show post dates - This option hides the post dates.

Don`t show the author - This option hides the author's name.

Don`t show categories - This option hides the category / categories.

Don`t show comments - This option hides the number of comments, but you cannot disable the comments completely by checking this checkbox.

Name label - The default value of the name field in the comment form. REQUIRED.

Missing name warning - Error message shown if the user doesn't fill out the field.

Email label - The default value of the email field in the comment form. REQUIRED.

Missing email warning - Error message shown if the user doesn't fill out the field.

Invalid email warning - Error message shown if the user tries to send the comment with an invalid email address.

Website label - The default value of the name field in the comment form. It is not required, but I recommend to fill out.

Message label - The default value of the textarea. REQUIRED.

Missing message warning - Error message shown if the user doesn't write a comment into the textarea.

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

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


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 default size of the slider is 700x290 pixels, but If you care about devices with Retina screen, you need to use 1400x680 images. Of course you can define new dimension for the slider on the "Theme settings --> Slider" page.

Step 4:  You can add a link and caption to your slide by filling out the "Caption" and the "Link" metaboxes. You need to know that these fields are absolutely optianls, the slider works well without them.

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.


I think the portfolio system is the heart of the theme. Based on a custom post type, you can create categories for filtering elements, the item pages are loaded via ajax ( no page reload ), and you can add a slider, or a vimeo, or a youtube video to every single item. In one word: it's cool. And is fun to work with. But there are some important things what you need to know before start to build your portfolio. For example the image resolutions. There are five available shapes for the thubnails: circle (default), cube, oval, landscape and portrait. The circle, cube and oval layouts require 520x520 images, the landscape 520x390 while the portrait portrait 520x690. As you may already noticed all of the mentioned sizes are two times bigger than their final screen size. Why? It is recommended to upload thumbnails in 2X size 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 520x520 thumbnails, then optimize them with a 80 compression level. The "Resize Photo" function is unused in this case, so feel free to uncheck it.

The width of the slider on the item pages is between 620px and 960px ( 1240 & 1920 if Retina counts ). The value is depends on the selected layout:

Layout1 & Layout2 ( media content on the left / right ): the slider is 620px ( Retina: 1240px ) wide.
Layout3 & Layout4 ( media content on the top / bottom ): the sldier is 960px ( Retina: 1920px ) wide.

If you aren't sure which layout will be the best for you, I recommend to use at least 960px wide images in the slider, so the images cannot be undersized.

The height is optional.

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

Step 1:  This step was required in the earlier versions, because the filter feature based on the categories. But now you can switch off the filter on the options page, so this step is currently optional.

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. Write your text into the editor, but please be concise if you picked one of the 1/2 layouts, because there aren't to much space near the slider. If you intend to add longer text, please select the layout3 or layout4.

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. But please keep in mind that you can't add a video and a slider to the same item. You have to make a decision: slider or video?

Step 6:  Of course you can add a link to your project too. To do this just insert the full url into the "Link to the project" text field. If you leave it empty, the link button won't be shown on the item.

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


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, just create a new post. Let's see in details, 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. From the version 3.1 you are able to pick an icon from the available 46 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.

If you upload a featured image ( Normal size: 260x260, Retina: 520x520 ), that image will be shown instead of the icon.

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


You can add persons easily to the about section thanks to the about custom post type. Just click on the About --> Add person in your admin navigation. You are now in the New Person admin page, and I presume 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.

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
- Blog with sidebar
- Blog without sidebar
- Contact page
- Portfolio page
- Services page

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 "Me" 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


Honestly this theme is built for portfolio sites, but as we know the Wordpress is primarily a blog engine, therefore you can use the "Me" for blogging too. Before start writing blog entries please enable nested comments in 4 level deep. Below are the short list of blogging features:

Custom avatars:
If you want to uplad a custom avatar that appears in your comments, I recommend you to use the WP User Avatar plugin that is fully compatible with the theme. The old custom avatar option of the theme was built on deprecated coding standards, so it was time to replace it with this up-to-date plugin.

Set up your blog page:
You have to create a new page with the "Default" page template. There were custom page templates for blog pages in the earlier versions ( v.1.2 and below ), but the newer releases use a different, and better logic, so it is enought to create a new page with the mentioned "Default" 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 in the "Theme Locations" metabox on the left side. If you don't understand something, feel free to check out the following image:


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

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

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

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.

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3

  • Item #1
  • Item #2
  • Item #3


A) General upgrade instructions

How to get the latest version Updates are free and it is easy to get the latest versions. You need to log in to your Themeforest account, go to the "Downloads" page and download the theme again. You can download the installer file separately, but I recommend to download the entire package, because the documentation and other files may change too.

Installation: You don't have to delete the previous version of the theme to install the latest one, because the versions above 2.0 has their own folder ( me_v2 | me_v21 | me_v211 | me_v_3 ) within the wp-content/themes directory.

Menu locations: The wordpress will handle the new version as a different theme, so you have to select again your menu(s) for the relevant theme location(s).

B) Upgrade from an earlier version than 2.0

Contact form: The e-mail address that shown on the front end and the destination of the contact form has been separated from version 2.0. What it means? It means that you have to set up a different email address for your contact form on the "Theme settings --> Contact form" page, otherwise the form won't work.

Services: The old ugly custom metabox that handled the descriptions has been replaced with the default WYSWYG editor. This allows you to edit the content much better, but unfortunately cannot show the content of the old "Description" metabox, so you need to copy + paste the previously created descriptions manually. I recommend you to copy them into a text file before you update the theme.

Blog pages: As I wrote above, the blog related custom page templates has been deleted, because I decided to let the index.php file do the blogging job, and you don't have to select a different template to show / hide the sidebar. Now you can do it on the "Theme Settings --> Blog" page easily. As we remeber we wasn't able to set up our blog pages as a "Posts page" on the "Settings --> Reading" page in the past, because this process replaces the page template with the structure of the index.php file. But now, the blogging system of the theme is completely powered by the index.php, so you HAVE TO select your page as a "Posts page", otherwise your posts won't be shown.

I modified my theme. Will I lose all of the mods? No, the new installation won't overwrite or delete your previuos developement, but your modifications won't be inherited. As you can read above, this version has its own directory, so it won't use your modified files at all. But if you are satisfied with your website, and the one of the earilier versions runs great, you don't have to update it. It is just a possibility, it is not a must :)

And that's all. All of the other options will be imported automatically.

C) Upgrade from 3.0 to 3.1

Services: The version 3.1 comes with 46 prefabricated, retina ready icons that can be selected in the metabox that can be found right below the editor. Now the featured images shows full images instead of icons ( the "Featured images" option also removed from "Theme settings --> Services page" ), so you need to re-select or re-upload your icons by using the funcionality of the mentioned metabox.

D) Upgrade from 3.1 to 3.4

Custom avatars: The inbuilt custom avatar feature of the "Me" was built on deprecated coding standards and caused some notices in the debug bar, so I replaced it with the Wp User Avatar plugin. If you use any custom avatar, you need to define it again by using the mentioned plugin.


It seems none of the animations work on the homepage ( slider, portfolio overlay etc... ).

All of the animations are powered by compilicated javascript functions, so the problem should be javascript releated. The version below 3.0 isn't really "plugin proof". That means a third party plugin can destroy the animations easily. There are two possible solutions in this case: 1) Deactivate all of the plugins. 2) Install the latest release of the theme that handles third party plugins much better than the versions below 3.0.

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 and Taxonomy Terms Order.

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 Configure SMTP plugin.. Maybe you need to contact to your hosting provider to get the required data ( smtp host, smtp username, smtp password etc... ).

Google Analytics doesn't work, what to do?

It is important to insert only javascript code ( without the <script> and </script> tags ) into the "Analytics tracking code" option on the "Theme settings --> Advanced" page. If you already removed the mentioned html elements from the code but it still doesn't work, please try to insert the code manually into the header.php file. This time you need to use the <script> tags, because the code will be the part of the html output directly. The code must be placed rigt above the closing </head> tag.

How to change up & down arrows?

Feel free to overwrite the original image files which can be found inside the images folder:

- up.png ( 46x46 )
- up@2X.png ( 92x92 )
- down.png ( 46x46 )
- down@2X.png ( 92x92 )

If you want to change their size, you will need to modify the line 148 and line 149 in the style.css file:

                a.scroll_down { display: block; width: 46px; height: 46px; margin: 0 auto; margin-bottom: 600px; background: url('images/down.png') no-repeat; }

a.scroll_top { display: block; width: 46px; height: 46px; margin: 0 auto; margin-bottom: 50px; background: url('images/up.png')no-repeat; }

The media manager became blank when I click on the "Insert into post" button.

This a known yet misterious issue that happen to WordPress sites. In many cases the issue remain unsolved, even though there are some practices that helped in the past:

1) Don't use capital letters in the WordPress Address (URL) && Site Address (URL) options.

2) The values inside the WordPress Address (URL) && Site Address (URL) options must be same!

3) Check the .htaccess file, maybe there is a rule which doesn't let you upload or insert the image.

4) Maybe the memory limit is too low. Try to add define('WP_MEMORY_LIMIT', '128M'); to the wp-config.php file.

How to change hard coded strings in the contact section?

You will need to edit the lib/home_sections/contact_section.php ( contact section for the homepage ) or the template-contact.php ( individual contact page template ) file. You will need to edit the following code snipppet:

                <strong><?php _e('Address:','me_theme') ?></strong> ( line 77 )
                <strong><?php _e('Phone:','me_theme') ?></strong> ( line 81 )
                <strong><?php _e('Email:','me_theme') ?></strong> ( line 85 )

How to make portfolio images black&white?

There is a relevant option called "Auto greyscale". It can be found on the "Theme settings --> Portfolio" admin panel.

I don't like the preloader animation! How can I replace it?

Overwrite the images/preloader.svg file with your own svg xml. You can get some fancy svg preloader here and here.

How can I edit files inside the lib folder of the theme?

As all we know it is not possible to edit files inside a theme sub-folder by using the default theme / plugin editor ( Appearance --> Editor ). In case you need to modify something inside the lib directory of the "Me" theme for instance, you will need to use an ftp connection or install the WPide plugin. WPide is a very good file editor extension that can edit anything inside the wp-content folder.



Photos on the demo site