Installing WordPress

WordPress is known for its 5-Minute installation process. WordPress is very easy to install, many web hosts even have useful tools (e.g. Fantastico) to automatically install WordPress for you.

However, if you wish to install WordPress yourself, the following little video and the links will help you further.

• Download WordPress
• Official WordPress Installation Guide
• Common Installation problems
• Hosting WordPress
• Video provided by WP101

Installing Justo Manually

Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

1. Login to your WordPress admin.
2. In the "Appearance → Themes" menu click the tab "Install Themes"
3. At the top of the page click, "Upload", then click the file input to select a file.
4. Select the zipped theme file inside the wp-theme folder, "justo.zip", and click "Install Now"
5. After installation you will receive a success message confirming your new install.
6. Click the link "Activate"

1. Login to your FTP server and navigate to your WordPress themes directory. Normally this would be "wp-content/themes"
2. Unzip the files from the zipped theme.
3. Open it and inside the wp-theme folder find the folder "justo" and upload it to your "wp-content/themes" directory.
4. Check if the cache folder permissions are set to 777.
5. After the files are finished uploading, login to your WordPress admin.
6. In the "Appearance" menu click "Themes"
7. Click "Activate" for the theme "Justo"

Installing Justo with our theme installer.

The installer is the perfect solution for everybody who's in a hurry and doesn't have time to read the docs or wait for support. With a few steps your new theme should look exactly like the demo. There are a few thing you need to consider before using this great and powerful function.

1. Only use the TitanInstaller on a fresh Install, already have content inside your set-up then use the documentation for a manual guide.
2. Install the shortcodes plugin
3. Please delete the default page and post, that WordPress creates for you, before you start.
4. Don't look at the front-end until all steps are finished, this to avoid confusing.
5. Click the link "Activate"

This process is comparable with importing the dummy content by uploading the xml inside the WordPress Importer. Only now you wont have to search for an xml file within the download package and install the importer plugin first. Just one click and your done.

1. Reader settings

Our themes uses default WordPress front page for showing home content, so make sure to leave this option as default.

if you want to edit the code for home page, please goto theme folder and open the index.php file. It generates the Home Page. Do this only if you are comfortable with handling code and have some descent knowledge of WordPress.

2. Go to Option panel

For the homepage we're using a homepage layout builder which let's you decide what you want to show inside the homepage elements.

Open the option panel menu and click on the home builder link to open up the homepage grid builder

3. Working with the Homepage Layout Builder

1. Select the blue button, this one is fixed and can only be used to create the homepage from.
2. Select the layout element you want to include, choose from; Full width text section, Two column section, Three column section, Four column section, Custom info post section, Divider, Intro text section, Post section, Twitter section, Scrollable section, Pricing table section, Slider widget and Page content.
3. Once you've decided which element you need you click on Add Element, so first start filling up your page with the elements. Don't worry if the order is not correct, your able to rearrange them later by dragging them to it's proper position.
4. Click on the edit icon to open an element, now you see all kinds of inputs, just fill out all the details required.
5. Some elements widths can be set also, for example you want a slider in 2/3 and twitter in 1/3 then you need to set it up here by selecting the appropriate column width from the drop-down.
6. Click your mouse on a row and start dragging it till your satisfied.
7. Don't need an element anymore or made a mistake then simply remove it by clicking on the bin icon.
8. Hit save and your homepage is created.
9. Click Quick Start to create layouts for other pages like about us, services etc.

4. Adding layouts inside pages

Now to show the about us page you need to create a new page wp-admin/post-new.php?post_type=page and scroll down till you see the Layout Details window. Now select the full width option 1 and select the about us from the titantemplate drop-down 2

Adding portfolio items

Start by opening a new portfolio post type, then add title and a little short description of your portfolio item. Just like you would do normally.

1. Want to show a different picture inside the portfolio grid then add a featured image instead here.
2. Want to show a slideshow inside the single portfolio then click here to add your slider items.
3. Open the slide item by clicking on the pencil icon, now upload your images or videos. The slider works with Vimeo, Youtube and plain images.
4. Select your media type and add image or video depending on your selection.
5. This option depends on a few factors, when you only want to show a single image then upload a featured image and select featured image from here. Want to show the slideshow then load your slider items and select slideshow in here. Want to show a single video then select video in here and add the video url.

Adding portfolio pages

Adding portfolio is even easier then creating a portfolio items. Sit back and pay attention while we're explaining the process of adding a portfolio page.

1. Add your portfolio page title in here.
2. Don't add anything in here since it will not show anywhere. The portfolio page templates only show thumbnails and the ajax powered single portfolio.
3. Inside the Page Attributes window your able to select the portfolio page template.
4. Leave this set to the default value, there are no sidebars active inside the grid pages.
5. These options are also of no use, only when adding posts and pages your able to use them.
6. Now when you have added images inside the portfolio post types and assigned the to a Model category/filter for example then click here on the tab Models. Now only portfolio items from the Models category will show. Want more filter/categories to show then select more tabs.
7. Your able to sort the grid by title, date, random, author or none
8. And your able to order the grid on ascending or descending
9. Activate or de-activate the Live Animating Filtering
10. Add the page title in here which will show inside the background area below the menu
11. Add the title description in here which will show inside the background area below the title
12. This section is made for those who wants to change the colors of the top background section. Your able to add backgrounds, change background colors, title colors and description colors.

Adding portfolio menus

Now we will guide you through the process of setting up the custom menus and show the Portfolio with portfolio categories attached.

1. Open the screen option panel
2. Select Portfolios
3. Select Portfolio Categories
4. Now go to Appearance -> Menus and add an # inside the url input and add a label name and click on Add to Menu
5. Scroll down until you find the Portfolio Categories window, select the categories you need and click on Add to Menu
6. Now simply drag your Portfolio Categories below the Custom Portfolio Menu and your done

Featured Media Options.

The blog is something we all are very familiar with so we won't go through the basics. We're only explaining the functions we've added such as the featured media options, the filters and grid page templates.

Create a new post and scroll down to the bottom of the page till you see the Layout Details window.

1. Select Sidebar position
2. Select which sidebar you wan to show
3. Select which featured media you want to show inside the Grid. Video or Featured Image
4. When you want a video to show inside the grid then select the video option and add the full URL https://vimeo.com/51714207 Make sure for Vimeo your using https:// and for YouTube add the large share link http://www.youtube.com/watch?v=PHsgYnXjyiY
5. These are the default WordPress Post Formats

   WordPress Post Formats

6. This is de default featured image function

   WordPress Post Thumbnails

Adding blog page templates.

Your able to choose between 3 different grid to show of your blog posts and it's also possible to choose between various filtering option so that you can make any type of blog page and as much as you please.

Functionality is somehow the same as creating a portfolio page.

1. Add your blog page title in here, we will show you how to set up a full width blog page.
2. Don't add anything in here since it will not show anywhere. The blog page templates are only showing posts.
3. Inside the Page Attributes window your able to select the blog page template Full Width 1, Full Width 2 or Classic.
4. Leave this set to the default value, there are no sidebars active inside the full width page templates, when you select classic blog template then you can select a left or right sidebar.
5. These options are also of no use, Only when creating normal pages your able to use them.
6. Sort by category options are available, so when you only want to show a certain category inside your blog page then select that category here.
7. Your able to sort the grid by title, date, random, author or none
8. And your able to order the grid on ascending or descending
9. This option is not active here, only when selecting the portfolio page template
10. Add the page title in here which will show inside the background area below the menu
11. Add the title description in here which will show inside the background area below the title
12. This section is made for those who wants to change the colors of the top background section. Your able to add backgrounds, change background colors, title colors and description colors.

Adding a slideshow and learning the settings

We have two options for you, adding layered slideshows inside the homepage slideshow and adding Fade slideshows through the layout editor and short-codes.

• 1. Click to add a new slideshow.
• 2. Enter the name of the slideshow.
• 3. Enter the width and height of the slideshow, this will be ignored when you select this slideshow through the featured media option inside a post or page.
• 4. Decide how many second you want in between slides.
• 5.
For homepage
• We have the fade , left , right , top , bottom and layered slider option
For other slides
• We have the jQuery , fade and gallery option
• 6. Don't want a responsive slider then disable it here.
• 7. Activate or de-activate the pre-loading
• 8. Show the description of the slideshow or not, this will not be active for layered slider.
• 9. Do you want the slides to auto-play or not, set it up here.
• 10. Want the slides to control by arrows, select it here.
• 11. Want to control the slides by bullets, select it here.

• 12. Click to add a new image or video.
• 13. Open to start setting up the slideshow items.
• 14. Add title and description (Caption).
• 15. Select where you want the slider to point to, portfolio, blog or a custom link.
• 16. Upload your image.
• 17. Rearrange your slides by dragging then or delete a slide by clicking on the bin icon.
• 18. click save and your done.

Working with the layered slider on the homepage

Inside the homepage slider we have a cool new function and that's the layered slider. The layered slider is really easy to use once you make a little time to study it's functions. The layered slider is only active inside the homepage and after you select the Layered slider from the slider settings.

When you don't need the layered slider anymore after you filled up the layers then you don't need to delete them but just choose a different slider type and the layers will be flattened and used as a normal slider

1. Make sure you have the general tab opened.
2. Upload a image with dimensions of 2560x600, this way people with a larger screen don't see cut off sides.
3. Leave this empty, no need for this inside the layered slider.

1. Select the Create Layers tab.
2. Click on add layer.
3. Set the slide in and slide out direction of this layer.
4. Set the in and out animation effect of this layer.
5. Set the position of the layer, from top and left.
6. Set the delay time, make sure that with each layer this time is always set properly. For example first layer has to kick in at 0.4 then the second layer has to kick a little later etc. Same for outgoing time.
7. Select the type, your able to select between image and html.
8. When image is selected, upload your image here.
9. This is a layer with html active. Then there's also a Vimeo and youtube option, simply select the video option and add the appropriate video url, width and height.
10. Add the html inside the text area, anything is possible. You want to style it then use either existing classes or use inline css.
11. Set the duration time, make sure all layers are activating within 2 seconds or else it will take way to long before the slide is completed.
12. Hit save and your done.

Please remember that this is a powerful slider option which can't be learned in 5 seconds and requires a little bit patience to understand. Also be creative with your layers and you will see that anything is possible.

For all sliders, if only one slide is present, it becomes a static slide. It can be used to show single image on home page or a layered set.

When you want to add the certain sliders through short-codes then you need to download our titanshortcode plugin and install it. After you've activated it your able to select the slideshow through the short-code menu.

When you want to add a slideshow through the layout editor then just add an layout element and select slider widget. Now select your slider from the dropdown list.

The Sidebar Manager allows you to create dynamic sidebars on the fly, creating them is very easy. Let's get started.

Be warned! One important thing to note here is to keep sidebar name meaningful and do not add numbers or special characters as FIRST LETTER.

1. First goto options panel menu and click on sidebar manager.
2. Now enter sidebar bar name and click on create and a bar will be added in the bottom dashed area which represents a sidebar.
3. When you are satisfied hit save and that's it. Now go to widget panel and after the footer widget holders you will see the dynamic sidebars.
4. The sidebars can be arranged and if you want to delete it click on the little red cross and the sidebar is gone.
5. All that's left is to populate the sidebars you've created and assign them to the appropriate page. Do this by opening a page or post, select the layout preference and which sidebar you want to show.

When you've installed the theme with the titan installer then the menu is already active and populated. If not then it's real easy to add your own.

1. Go to Appearance
2. Click on menu inside the Appearance menu.
3. Create your menus for the top menu, the main menu and the footer menu
4. Select these menus and position them inside the theme location window
5. Select your pages and drag to them the right
6. Now organize your menus by dragging them to the desired location and don't forget to hit save when your done

• Getting Started With WordPress Custom Menus
• Appearance Menus Screen
• How To Use The New Custom Menu Feature in WordPress 3.0+
• WordPress 3.0+ Menu Management

The footer isn't really that difficult and therefore we keep it short. It works just like any other footer area. We have a footer tab inside the option panel from where your able to select if you want to show the footer or not. And your able to select the layout of the footer.

When you select for example the 2 column layout, two extra widgets areas will be created for you. When you select 5 columns layout for example then 5 widget areas will be created for you. Just populate them through the "Widgets" area and when your not happy with the layout then you can come back here and select a different column structure.

You can decide if you want a footer menu or not and your able to ad the footer copyright text in here.

1. Show the footer widgets or not
2. Select the amount of columns
3. Show the footer menu or not
4. Add you footer copyright text in here

1. Default Blog sidebar
2. Mobile sidebar, anything added in here will show inside the mobile footer
3. These are the footer columns as described at the footer section

The widgets are all pretty straight forward and require no explanations. Just open them and set them up.

General Tab contains all the settings which are common in all pages. These includes logo , favicon, analytics related settings. You can also add social links which are shown inside the top slide out menu of the theme. Breadcrumbs and pagination style can also be set from here.

The footer isn't really that difficult and therefore we keep it short. It works just like any other footer area. We have a footer tab inside the option panel from where your able to select if you want to show the footer or not. And your able to select the layout of the footer.

When you select for example the 2 column layout, two extra widgets areas will be created for you. When you select 5 columns layout for example then 5 widget areas will be created for you. Just populate them through the "Widgets" area and when your not happy with the layout then you can come back here and select a different column structure.

You can decide if you want a footer menu or not and your able to ad the footer copyright text in here.

Be warned! Wordpress saves sidebars by number instead of name, so when dynamically new sidebars or footer areas are added or deleted it's possible that WordPress swaps or deletes widgets.

This tab advanced settings like WordPress admin login screen logo and page not found input details.

This tab contains all the font and title related settings. In the first section you can set font related settings which includes font families , font weights and body font size. The rest of the panels in this tab have font size related settings for each major modules like portfolio , blogs and generic heading settings.

The Heading font size settings applies only for the content coming from WP editor.

This tab contains all the settings related to portfolio templates and single portfolio posts. You can select the number of portfolio items to show on a portfolio template here, enable the light-box or set the portfolio column item limit

Your able to select between dark and light style in here. However when you want a different touch or want to add some color then just simply follow the instructions by clicking on the button below

Click here to find out how to duplicate a style

This tab keeps check of which resizing method is used. By default and recommended resizing is timthumb because it is memory and speed friendly. But sometimes there are circumstances when you are not able to use it, in that case you can switch to wordpress core resizer. It will work same as timthumb. If both do not work which is very rare set the resizing to none and no resizing will be applied .

When you use wordpress core resizer, always make sure that height and width of images are greater than the place you are using it. Like if you are using for front page slider make sure image sizes are greater than 980 x 350 else wordpress won't resize it.

This tab contains all the layout related settings. You can switch on/off responsive layout , set boxed template mode on . You can also set the default layout mode for posts and pages.

This tab contains all the blog and single posts related settings. Here you can select use of excerpt or framework's default content limiter. Number of blog posts , meta info that appears under posts title in blog template. This tab also contains single posts settings which are self explanatory.

Plugins

The plugins we're using within our theme are the following. All instructions can be found on the plugins websites and here's also a useful site with snippets for our themes and plugins.

Just download the plugin, install them and activate them. they are all compatible with this theme.

• TitanShortcodes Plugin
How to install
• Login to your WordPress admin
• In the “Appearance → Plugins → Add New”
• At the top of the page click, “Upload”, then click the file input to select the plugin’s zip file.
• Click the link “Activate”.
• Now your able to start adding shortcodes by using the shortcode editor. The titan icon is located inside the wordpress wysiwyg window.
• TitanTables Plugin
How to install
• Login to your WordPress admin.
• In the “Appearance → Plugins → Add New”
• At the top of the page click, “Upload”, then click the file input to select the plugin’s zip file.
• After installation you will receive a success message confirming your new install.
• Click the link “Activate”.
• Now start adding tables by using the Tables editor. Click here to find out how it works
• Contact Form 7 Plugin

Translation

How to work with PoEdit and use the po/mo files in the this theme

Inside this section you will find a small and very easy to understand guide about the way to ad po and mo files to this theme. Make sure you have translated your wordpress set-up. read through the following list about the way to achieve this. It's really easy, in some cases you can even download a copy of wordpress in your language.

Next you find the po and mo file of this theme inside the lang folder inside the root of the theme. Download these files and open the po file with Poedit. When you've opened the .po file you will see a screen like shown on the right.

Next thing you need to do is to translate all items until the last line. After that you need to save the file as both .po and .mo. Rename it the the po and mo files to your language code. For example when your dutch and you have set the translate option inside your config.php to define ('WPLANG', 'nl_NL'); then you need to rename your po and mo to nl_NL.po and nl_NL.mo

Now you've saved your po and mo you need to upload them to the root of the theme. Not inside the lang folder but in the root of the theme. If this doesn't work then rename the lang folder to language and ad the files in there. Below you will find a few more useful links to get started with making the po and mo work.

• WordPress in Your Language
• Translating WordPress
• WP Translations: mo and po files
• Installing WordPress in Your Language
• Translate Your WordPress Theme Using Your .Po & .Mo Files Into Your Own Language
• Localize & Translate Your WordPress Themes
• Translate WordPress Themes & Plugins: Advice & Resources
• How to make a translatable WordPress theme
• WordPress theme localization