JAMES I MANUAL

About James
James is a very striking Wp-theme and has spectacular features to present your portfolio or blog website in a most extravagant way. James includes great options to showcase your portfolio or blog on a full screen background through floating photo bricks, posts, videos, galeries and websites. All great options are possible with our without text content. Double your impact! Let James do the work if you are passionate about your portfolio. James also provides an easy solution for you to sell your work online. James is very easy to configure, and offers integration options with the free ecommerce plugin eShop! We hope you will have lots of fun working with James. Visit www.theme-dutch.com for a free support account.

AproductionbyThemeDutch06/2011

James Installation Manual 01. Installing Wordpress 02. Adjust wp-config-sample file 03. Installation of theme James 04. Build your website quick and easy 05. James Adminpanel 06. James page options 07. How to create a contact form 08. How to create a slideshow on every page 09. How to create a page 10. How to create a sidebar 11. How to create a post 12. How to use shortcodes 13. Home page (full screen) features 14. How to create a portfolio 15. Translation ready 16. Support 17. Guidelines for support 18. Services 19. James warranty 20. Contacting Theme Dutch 21. Installing James dummy content 22. Perma-links, the finishing touch

JAMESIMANUAL 2

Installation tips
In this section youll find important information how to work with James, as well as getting support. Please read the following instructions carefully to prevent problems with installing the theme. Requirements: Server with PHP 5 support MySQL database Install WordPress 3.0 or more on a server that supports PHP5 and make sure there is nothing on the server that causes conflicts. If this is not the case, send a request to your hosting provider because we cannot deliver support if your server does not support PHP5. Install James and create a test page. Go to your browser to check if the page looks okay. After you created a test page you are ready to download and install plugins.

General Errors caused by plug-ins

In 95% of the cases the errors (that occur by installing Wordpress and/or a theme) are caused by plug-ins. If this happens, deactivate the plug-ins one at the time and check your website in your browser until you find the plug-in that is causing the problem.

Do you get Internal server error 500?

Dont panic! The problem usually can be solved after a few adjustments. First of all you check if your server is supporting PHP 5. This is necessary to run Wordpress without problems. If your server supports PHP 5, the error can be caused by plug-ins. Deactivate plug-ins and activate them one by one and keep checking your browser to determine which plug-in is causing trouble. NOTE: Before you send us a ticket for support to our Helpdesk because of these failures, please follow the steps that are described above first. Most questions will be answered on the support forum at www.theme-dutch.com

Important notice

"Please keep in mind that due to the open-source nature of Wordpress, a lot of plug-ins are written by small third-party developers who don't have the resources to test their plug-ins with every theme or every other plug-in on the market.

JAMESIMANUAL 3

For this reason, even though there are many well-written and stable plug-ins, most often plug-ins are the source of conflicts and errors. For this reason, we recommend installing one plug-in at a time, testing it thoroughly and only then proceeding to the next plug-in after installing the theme.

1 I Installing Wordpress
Install the latest version of Wordpress 3.0 on your server. You can download the ZIP-file for free at http://wordpress.org/download/. After unzipping the files you see a Wordpress-folder. Upload the complete folder to your server of your favorite FTP client. Pay attention: place the files at the root of your website. This location will be the URL of your website. (http://www.mycompany.com) Go to your URL using your browser and youll probably see this report:

2 I Adjust wp-config-sample File

During this process of installing youll have to provide the config-file with your own data. Search for the file wp-config-sample.php and open it with your favorite editor. Change the information in to your database like following: define('DB_NAME', 'mywebsite'); define('DB_USER', 'usermywebsite'); define('DB_PASSWORD', 'mywebsite1234'); define('DB_HOST', 'localhost'); Pay attention! Save the wp-config-sample.php file as wp-config.php and upload the file to your server. Go back to your browser > http://www.mywebsite.com and when you filled in all data correct youll see the following Welcom screen. JAMESIMANUAL 4

Fill in the name of your website and e-mail address here and click: Install Wordpress. Note: after installation you can change the Blog Title at any time. Youll see the following screen and also arrive at the last process of installing WordPress. Admin always is standard. You can change Admin as well as your password later on. As soon as you log on to Wordpress, youll get a warning that advises you to change your password.

JAMESIMANUAL 5

If you want to log on after this step, go to /wp-login.php (e.g. http://www.mywebsite.com/wp-login.php ).

Enter your username and password here. Your Wordpress installation is ready now!

3 I Installation James theme

After installing the Wordpress CMS you are ready to install the theme. Upload the theme to: wp-content/themes JAMESIMANUAL 6

Go to Appearance and select Themes. If you installed the theme correctly youll see James. Press activate to use the theme at your website. Go to your website and youll see that James has been installed. Now you are ready to adjust the content and design of your website any way you want.

Note: Press Activate to use James on your website.

JAMESIMANUAL 7

4 I Build your website quick and easy

This manual guides you to build a basic menu and page structure in 5 steps. After following these steps your website contains the groundwork for your design. Step 1: First of all think about the structure of your Menu. This simplifies the building of your website during the following stages. Dont give the menu names that are very long or too long. Step 2: Create all pages according your menu structure. How to create a page you can reed in this manual. Wait for placing the content, photos or plug-ins. Their turn will come later on. Step 3: Define the Menus for the Header. Go to menus -> Add menu -> save this menu. -> On the left side pick the menu. If you want to use our menu you have to select it. You can also have a backup menu if you want to switch it. At this time you may also want to create a footer menu with some sub links, which are not necessary in the main menu. You also need to set this on the left side where it says: Footer menu Step 4 If you want to use a sidebar on a page, go to the page in the admin. On the right site you can choose template -> sidebar. The last thing you need to do now is add some widgets. Step 5 Congratulations, the basis of your website is clear now. The Menu structure is defined and the navigation is ready now.

Design your pages

After you followed the previous steps you can start building the website: fase 2. James is developed with usability in mind.

JAMESIMANUAL 8

5 I James admin panel

The James admin is so easy to use that besides professionals also beginners can set up their menu very easy. It probably does not take more then 5 minutes. Set your favicon and logo location here, blog meta on/off, style and image/video grideffect etc.

6 I James page options

When you create a new page you get several options. First of all you can enter the Title and can start to fill in text content, as you like. You also can add several shortcodes to spice up the content (more about the shortcodes in chapter 12). On the right side you have the option to choose to a sidebar on your page. This sidebars content is set trough widgets. If you scroll at the page you will see JAMES PAGE OPTIONS. I will give you the possibilities step by step:

JAMESIMANUAL 9

Background: Gallery: Do you want to have a full screen image gallery on your background then this is the right option. You can start by filling up the Transition speed (how fast each slides will occur). If you leave this option blank, the speed will be an average we recommend. The next step is to set up the effect you like and you can choose between these different effects: Fade Slide top Slide right Slide bottom Slide left Carousel left Carousel right

The next step is adding the images. Just click on Add slide and youll get the option to add new slides (NOTE: If you want just 1 background image, add only 1 slide, its as easy as that). You can delete the slides if you want to. Video You can have a video as a background, but be aware that your website can be extremely heavy and depends on the video size you use. You only can use selfhosted videos at this moment. Fill in the complete URL to the video. Url: If you want to show a website as a background, for instance showcase a site youve build, choose for URL. Fill in the complete URL to the website. But this feature also can cause heavy loading! Map: The last option you can choose, as a background is a Googlemap. Just type the address here. For instance: Koningin Regentesselaan 44, Roermond. If it doesnt show up correctly you have typed an incorrect address. Slider: If you also want to show a slider you can add it here. Fill in the height for your slider and add slider (a max of 10). Sub: Featured image You can also set a featured image and it will be shown on top of your page. Contact: The next option you have is to show a contact form on your page. Set the select box to yes and choose all the option you want to. JAMESIMANUAL 10

7 | James post options

As seen in chapter 6 | James page options the main settings for a post are the same. You cant have a contact field on your post, and youll see there is another block in place of the contact. - Homepage brick format: If you are using the brick portfolio or homepage, you can set different bricks here. If you want a video brick you can use youtube, vimeo or selfhosted video. Be aware with youtube to remove all characters that dont belong there. Else you get to see an error in the brick. The youtube link should look like this: http://www.youtube.com/watch?v=90rHFreKjvs Not something like this: http://www.youtube.com/watch?v=90rHFreKjvs&feature=topvideos_music

JAMESIMANUAL 11

It is important to choose a featured image on your post. This will be used within the bricks or full screen gallery.

JAMESIMANUAL 12

7 I How to create a contact form

As you may aspect of a high-end Wordpress this theme comes with a built-in contact form. Of course each field can be set to either optional or required. Dont forget the spam-filter function. Go to James Page Options and select at Show contactform: yes. Design your contact page anyway you like, use the excellent shortcodes to spice up your contact page and hit save. Go to Appearance / Menus and pull your contact page into your menu.

JAMESIMANUAL 13

8 I How to Create a slideshow on every page

You also will find a feature to add a separate slider on every page. You can display pictures on every page that perfectly match the page content. Method: Beneath James Page Options youll find an option to add slides. Fill in the slider height. Next up press add slide. Now you will see 3 fields. The first field is the image link. For this field you can use the easy wordpress uploader. The second field is the link to where the slide should point (not necessary). Third and last field is an overlay text you can fill in to give some details about your image/slide (also not necessary). Thats it, and you already created your slider.

9 I How to Create a Page

James gives you the possibility to add a contact form on every page of your website to enlarge the marketing tool Call to action. Read more about the contact form at section 7 I How to create a contact form. After you followed these steps go to Menus and add your page at the header and / or at the footer menu.

JAMESIMANUAL 14

Featured image
At the pages (Page attributes) you also have an option to add a featured image as you can see at the example on the next page. If you want to add a featured image go to page attributes, add your image and youll see it at the top of your page/post. The featured image is also used as brick image and pop-up and in the portfolios..

10 I How to create a sidebar

JAMESIMANUAL 15

Its very easy to create a sidebar (left). Go to Pages and following to Page attributes at the page where you want to select a Sidebar. If you dont need a sidebar, just choose Default template.

11 I How to Create a Post

Go to WP dashboard and select Post and Add New. Then will appear Add New Post that resemblance a page. In fact youll find the same features as on a page here.

12 I How to use shortcodes

Both on a page or blog youll find the icons T and G where you can click at to make use of the short codes. These are a perfect feature to design your page. Our advice is to work consistent. If you choose for a two-column preparation, then also use a column short code for your content. Here youll see an example how to create a two-column layout. Open the short code menu T and select: two column layout and fill in the fields for the first column. Now click the T again en select two-column last, this wil insert the last column to your page/post.

All short codes work the same way and dont need any further explanation. JAMESIMANUAL 16

Galleria shortcode for image/video gallery

James has a shortcode that allows you insert an image/video gallery on every page/post you choose.

All that this shortcode requires are some simple values that have to be submitted. The shortcode looks the following:

JAMESIMANUAL 17

[image_gallery transition="fade" height="350" width="600" autoplay="true"] [image src="http://yourwebsite.com/img/pic1.jpg" ] [image src="http://yourwebsite.com/img/pic2.jpg" ] [image src="http://yourwebsite.com/img/pic3.jpg" ] [image src="http://yourwebsite.com/img/pic4.jpg" ] [image src="http://yourwebsite.com/img/pic5.jpg" ] [image src="http://yourwebsite.com/img/pic6.jpg" ] [/image_gallery] The image gallery features an auto play function that can be turned on/off with the following: commands: true false The first step will be to setup the height and width of the gallery. Then fill in the complete URL of the image(s) and you made a gallery all by yourself. Make sure your images and your size settings are the same. The following file types can be used for the video gallery:

Flv F4v Mp4 Mov You tube Vimeo

The video gallery features a thumb image with the following command: video thumb_src="http://" [video_gallery height="350" width="600" autoplay="false"] [video thumb_src="http://" video_src="http://" ] [/video_gallery]

JAMESIMANUAL 18

13 I Home page (full screen) features

The James homepage has many possibilities and we will briefly explain how to set up each version: Full screen gallery (no content) You may want to show the images with no content block. This is what you do: Go to settings > reading > Front-page displays Set this to: Your latest posts Next go to the James admin panel under home and choose full screen gallery. Thats it. Full screen gallery (with content) This is a little different: Go to settings > reading > Front-page displays Set this to: A static page Select a homepage. Build the homepage with content you like and add a background gallery Full screen video (no content) This works actually the same as the gallery, but choose video under James admin. You can only use self-hosted videos here. Full screen video (with content) This works the same as the gallery page but set up the background as video. Here you can only use a self-hosted video. Bricks The brick page is a little different but not difficult to set up: Go to settings > reading > Front-page displays Set this to: Your latest posts Next, visit the James admin panel and set the home for bricks. You either can have all your post as bricks or you choose a category you like. Now just fill the chosen category with the posts you like. Dont forget to set up the featured image because the bricks use this also. The Home page can be created through the James PANEL. You have the ability to display a full screen background on the homepage. You have 3 options to run your full screen home page: Video, Gallery or Bricks. Bricks: If you choose Bricks, add the images-category you want to run at your homepage. Video: If you choose video, youll have the option between: video, vimeo, self hosted video or website Gallery: you can run a full screen gallery up to 10 images at your home.

JAMESIMANUAL 19

If you want to show a gallery at the home page, click background-type > Gallery. Here you can fill in the transition speed and choose between 7 background gallery effects. Upload the gallery images you want to use for your gallery.Click save and watch your slideshow for the home.

14 I How to Create a Portfolio

If you want to create a portfolio, simply create a page and give it a suitable name. Now you can use the G icon which pop-up the Galleria options we build in. You can use these to create a fancy portfolio. We are supporting single images, image gallery, single video and video gallery. You can find the explanations about this shortcode in section: 12. > Galleria shortcode On the other hand may you wish to sparkle your portfolio a little bit more. Create a category and fill it with some posts. Now you can go to the James admin panel and select beneath portfolio what type you want the portfolio to be. You can choose between bricks, gallery and just blog posts. Dont forget to set the featured image on each posts as the bricks and gallery are using them!

JAMESIMANUAL 20

15 I Translation Ready
We thought about the smallest details and because we understand our theme will be sold worldwide. You can easily create the translation with the pot file. Just follow the following steps: 1) Download Poedit from http://www.poedit.net/ 2) Install poedit on your computer 3) Open poedit 4) Choose file > new catelogue from POT-file 5) Search your theme folder of sensetive > go to langueses > sensetive.pot 6) Press ok 7) Poedit will ask you where to save the .po and .mo files. Choose the same folder. Call the files your language zone (example: nl-NL for the netherlands) 8) Translate all the options (not all needed) 9) Upload the .mo and .po file to the languages folder on your website. 10) Change you wp-config-file with your language-code

16 I Support

If you need any support, have suggestions or you just want to ask a question. Go to www.theme-dutch.com/support and create your login account.

17 I Guidelines for support

To make use of our free support you have to send us your PURCHASE CONFIRMATION e-mail of JAMES, which you have received from www.themeforest.net after buying the theme. Also request a free membership (and use the same e-mail address) and register as a member via our website) As soon as we receive both emails, we will activate your free support-membership account. You will receive our log in information in your mailbox. NOTE: Use the same e-mail address that you have used for registration at Themeforest. Only then we can verify what theme youve bought and if you have the right to free support. As soon as you log in to our membership section, you can see what support you can get. You will find everything you need in your special support environment. You can also post a message on our blog if our information is inadequate. We check our blog regularly, but advice you to submit a ticket to our helpdesk if you need support. Our support teams goal is to handle every request quickly and correctly. During office hours we will try to answer immediately, but always within 24 hours on Monday to Friday.

18 I Services
JAMESIMANUAL 21

Our team of web designers and web developers are always standby if you want to make adjustments to your website.

19 I James Warranty

James is provided in a state as downloaded via your www.themeforest.netaccount. We guarantee a professional working James theme if you follow our advice, guidelines and installation instructions of Wordpress 3.0.

20 I Contacting Theme Dutch

Theme Dutch is a division of studio mikmak, advertising agency and is based in the Netherlands.

Theme Dutch

Koningin Regentesselaan 44 6043 CM Roermond The Netherlands www.theme-dutch.com

21 I Installing dummy content for James

Press the general tab (admin panel) and locate Dummy content. Switch it from Dont place dummy content into Place dummy content, and press Save Changes. The post/pages will be implemented on your WordPress installation. The only thing thats left is to setup the menus and youll have a preview of what you can do with James.

22 I Permalinks, the finishing touch

This step can be skipped, but for your users and SEO purposes you can make the http:// links a bit more readable for your visitors and increase the chance for you to be found in search engines.So under Settings > Permalinks, you edit them. On this page you will see 5 options under Common Settings. Lets start of with an example. Click on Month and name and see what happens. You see this structure appear under Custom Structure: /%year%/%monthnum%/%postname%/ If you want your http:// link to resemble the page/post name youll have to put in the following structure under Custom Structure: /%postname%/ Your links will now appear like http://www.yoursite.com/contact etc.
AproductionbyThemeDutch09/2010

JAMESIMANUAL 22

If you save this and all goes well, you have your permalinks working. If you get an error that tells your .htaccess is not write-able you have to follow these steps. Copy past the given code from Wordpress Open a text, edit program like, Notepad or TextEdit Paste the given code from Wordpress in the text file Save it and it doesnt matter if its saved as .txt extension Upload the text file into the root directory where youve installed Wordpress Then rename it to .htaccess When you rename it dont put any .txt/.doc extension etc. behind it Reload your admin panel, you should be up and running now

NOTE: If you still get an error follow the last steps because some extra code maybe in you .htaccess that will make Wordpress not read it properly. Go to your ftp and locate the .htaccess [it may not be visible since its a hidden file. In this case go to your preferences of your ftp and set show hidden files]. Now you should be able to see the .htaccess file. Click it and choose edit with Notepad, TextEdit or Dreamweaver etc. Select all the code and delete it, then copy past the code from Wordpress that still is in your computers memory. Save the file and you see a prompt of your ftp program saying uploaded successfully Go and reload your admin panel and your site should be back and running with permalinks

JAMESIMANUAL 23