# HOW TO

## Oakland Wordpress Theme Manual

- latest Update: 01/20/2012
- By: cmsmasters
- Official website
- Support Forums
- Start personal support ticket using form here

### Oakland 1.0 WordPress Theme Installation

Once you have installed WordPress (see details here) and logged in to admin panel, you can install Oakland theme.

Note: There is only one way to install Oakland theme - upload via FTP to your server, as usually server doesn't allow to install themes via WordPress if they're bigger than 2 or 10 Mb.

To upload Oakland theme to your server via FTP, you need to unzip and acopy all the files from “Oakland” folder to wp-content/themes/oakland directly on the server (use only lower case letters!). Thereafter Oakland theme will be available for activation in WP admin panel: Appearance/Themes. Again, you can activate it by clicking “Activate”.
Before activation turn all your plugins off - they may affect. We don't guarantee compatibility with additional plugins.

Please, read this carefully before you’ll start to use Oakland theme!

For correct functionality, please, make sure the following folders have the “777” access settings:

/wp-content/themes/oakland/images/cache
/wp-content/themes/oakland/images/social_icons
/wp-content/themes/oakland/images/theme_icons
/wp-content/themes/oakland/images/bgs

And also you’ll have to create a new folder with “777” settings:
/wp-content/uploads

You can do it via your FTP client. Open a drop-down menu by clicking the right mouse on one of the folders, specified above. Choose there “access rights” (or maybe something similar) and make changes. Also apply this for the subfolders and nested files.

Please, don’t set the “777” permission rights to whole “oakland” folder for security reasons.

Warning: If you've faced some error in the process of theme activation, please, disable all plugins.
We don't guarantee compatibility with any additional plugin and don't provide assistance in regard with plugins compatibility or help to set them up. You can download them at your own risk.

### Theme Options

##### Social settings

Social profiles management described here.

To enable sharing icons for your blog posts etc., please, follow to Oakland/General Settings/Sharing Options and activate them in a way you'd like them to be shown at your site.

##### Excerpt & Discussion

To enable discussion or excerpt you should open any page or post and find in the top right corner the Screen Options tab. When you'll click on it the following menu will roll down:

Find here these two options and tick them on. And you'll get the menus for each of them somewhere below the content area.

### Page set up

To create a page you should make the following steps:
1. Go to Pages/Add New

2. Enter the title
3. Set you page options such as:
Oakland General Page Options
Oakland Custom Background Options
Oakland Page Slider Options
Oakland Page Heading Options
etc.
Once you’ve made all the previous steps, you may add the content using either visual, or HTML editor. Let’s start from the Top sidebar.

Make sure you’ve set “Use Top Sidebar” in Page Heading options.

Go to Appearance/Widgets and find a Top Sidebar there.
Drag inside of it, for example, 2 widgets: Text and CMSMS - Divider, as shown on this screenshot:

CMSMS - Divide Widget (see more in the Widgets & Sidebars Set up paragraph) will visually separate your four previous widgets from other site blocks with line, space or link.

Enter the title for the Text widget. Set the widget’s width (in this case 1/1, as we have 2 Widgets and one of them is just a divider - not taken into account; if you had 3 widgets, you could set 1/3 for each) and click “Save”:

You’ll get the same result like here (Top Sidebar is marked with a red rectangle):

You can set up Left/Right sidebars in a same way.

Make sure you’ve set “Use Left Sidebar” or “Use Right Sidebar” in Page General options.

See more about Sidebars in the relevant paragraph.

##### How to set up a front page

You can set any page as your home page in few steps:
1. Create a page you’d like to be shown as a home page;
2. Go to Settings/Reading

Tick “A static page (select below)” box in the “Front page displays section and choose your page in “Front page: select”.

### Page Settings

##### Oakland General Page Options

Every Edit Page has a Page General Page Options settings. They allow you to set the Layout type: Right/Left sidebar or Full Width - and show or hide Middle Sidebar.

When you tick on the Right Sidebar or Left Sidebar checkbox, the following menu appears:

Every Edit Page has a Page Heading Options settings.

##### Oakland Page Heading Options

Every Edit Page has a Page Heading Options settings. They allow you to set any kind of page heading according to your preferences. When you tick on the Use Custom Heading checkbox, the following menu appears:

Here you can choose whether you want to set:
1) A Heading with the icon:

2) A Heading with short description (tagline):

3) A Heading with icon and tagline:

4) Or just leave it Standard:

##### Oakland Custom Breadcrumbs Options

Basically breadcrumbs are an internal links. They make the web site navigation easier. Here is how they might look like:

Every Edit Page has a Custom Breadcrumbs Options settings

so you could add any link you need and set your personal navigation.

##### Oakland Page Slider Options

They allow you to enable slider at the page:
If you'll enable slider - the following menu will roll down:
And you will have an opportunity to choose the slider and set up the content visibility.

##### Oakland Custom SEO Options

If you'll enable custom SEO options - the following menu will roll down:
And you will have an opportunity to set the title, description and keywords customly.

### Slider Manager

To create or manage the slider, please, follow here:

##### How to add new slider

Open Slider Manager and click Add new button:

Enter the name for your slider.
Upload image for the slide from your computer, URL or existing Media Library:

Note: Your image should be optimized for web and be no bigger than 2 MB, otherwise it won't upload.

Enter the title and other parameters if needed and click Insert into Post:

If you won't click this button, your image won't be added to the slider. Use drag'n'drop to change the order of your slides.
If you'll click to Advanced View button, you'll get the following dropdown menu:

Here you may can enable or disable Caption.

It’s a field for your slide description and it may look like this:

On the screenshot it has a title, subtitle and bottom, but you can set a caption with text only, with link or using HTML tags set there <h> and others. To add a link to your slide caption you should go to Enable Caption Link/Button, you can also use your slide as a link here:

To add a video to your slide go to Video Settings:

Enter your video URL.

There are also General Slider Settings:

Set here your slider animation speed, effect. Turn off/on all captions.

You may show slides navigation, which can be used for manual slides changing:

Pause on mouseover button will help to stop slide displaying manually, you can also show slides navigation or timing on mouseover.

Use Save as button to clone slider settings (if you'd like to have few similar sliders with different pictures, for example).

After your slider is ready, save changes and create a page where you’d like to show these slides. You must set your page options to make the slides shown. Go to “Oakland Page Slider Options” while editing the page. Tick “Enable slider” checkbox and choose recently added slider:

### Logo and background

To set your logo, go to CMSMasters admin panel: Oakland/Styling Options/Logo & Favicon and upload your image. It can be any of these formats: .png, .jpg, .gif, .bmp. But make sure your file is no bigger than 2 Mb. WordPress doesn’t allow uploading images bigger than 2 Mb.

Use Background and Header Options (Oakland/Styling Options/Background and Header)

You may enable the background colored block:

and set any color of the block and the navigation dropdowns.

To manage your lines' height (content line, navigation line, Hi-H6 headings' lines, etc.) follow to Oakland/General Options/Line Height Options.

### Set Menu

WordPress codex has very detailed instructions how to manage Menus. You’ll find it at http://codex.wordpress.org/WordPress_Menu_User_Guide

### Widgets and Sidebars Set up

##### Widgets

In addition to 11 standard widgets Oakland has 15 extra ones. We've made the most necessary widgets for your convenience.
To manage widgets go to Appearance/Widgets.

Drag widgets from the left field to the sidebar on the right to activate them, and drag them back to deactivate and/or delete their settings.

To paste some Widget to horizontal Sidebar you must choose its width:

Advertisement Widget

You may use this widget, for example, to place some external links (interesting pages, related topics, etc). When the Advertisement Widget is inside of the sidebar you can set its parameters:

Comments Widget

Use this widget to enable your posts/images/media commenting. When the Advertisement Widget is inside of the sidebar, you may type its title and enter the number of comments (3 by default). You may also choose your Widget’s width for a horisontal sidebar, as it was mentioned before:

Contact Form Widget

You may use this widget to allow users’ messages sending directly to your e-mail. When the Contact Form Widget is inside of the sidebar you can set its parameters:

Contact Information Widget

You may use this widget to show your contacts. When the Contact Form Widget is inside of the sidebar you can set its parameters:

Divider Widget

Use it to visually separate your site blocks with line, space or link. When the Divider Widget is inside of the sidebar, you may choose whether you want to set the separation with line, link or just space:

Custom Text With Icon Widget

More about it you can read below. To set it up, type the title, text and choose the icon from our base:

Embeded Video Widget

Flickr Widget

HTML5 Audio Widget

HTML5 Video

Popular Posts Widget

Note: Popular Posts are inputting by likes' quantity, not by comments!

Recent Posts Widget

Portfolio Items Widget

Arcives Widget

Twitter Widget

Calendar Widget

Categories Widget

Custom Menu Widget

Links Widget

Meta Widget

Pages Widget

RSS Widget

Search Widget

Tag Cloud Widget

To show the Tag Cloud dgar this widget to the relevant sidebar and set it up:

Text Widget

##### Sidebars Set up

To create or delete a Custom Sidebar go to Oakland/General Options/Sidebars.

Add Sidebar:

To enable Custom Sidebar you should open your Page or Post and go to Oakland Post Options/Custom Sidebar.

Here is a sidebar visual description - you can see how each sidebar looks like:

See more about Top Sidebar settings in Page Settings paragraph.

The three sidebars listed above are static for the whole site and can not be set for pages optionally. There is also Right/Left sidebar, it’s not static and can be set for every single page on your site

To manage your sidebars, again, follow to Appearance/Widgets:

You will find the following list of sidebars to the left:

As it was mentioned before, you have to drag widgets from the Available Widget list to each sidebar according to your needs

### Add a Blog page and posts

The easiest way to create a blog page is:
1. Open CMSmasters admin panel
2. Find “Quick page create” at the Dashboard and click on the “Blog Page” button

3. Enter the title and Publish this page
4. Go to Appearance/Menus, choose recently created blog page and add it to the menu:

The other way is to go to WP admin Pages/Add new. You’ll get an Add Page window, where to the left you can see this menu:

Choose the Blog Template.

Every Edit Page has Oakland General Page Options for your page management.

It allows to:
1) Set any of sidebars: Right, Left, Middle, Custom or make a full width page.
2) Choose the Blog Category.
3) Set posts order type and number or items per page.
4) Set items' quantity per page.

There are as well Page Heading Options settings. They allow you to set any kind of page heading according to your preferences. Tick on the Use Custom Heading checkbox and set a unique heading, you may also use Oakland Custom Breadcrumbs Options to place the links you need, Page Slider Options to set a slider to this page, Custom Background to set a unique background and SEO Options.

##### How to add a Post

First you can add a category for your post in Posts/Categories

Enter your category title (Slug and Descriptopn if needed) and click Add New Category button

Then go to Posts/Add New:

Enter the title, choose the category and Post Format (more about it in paragraph Post Formats), add a content.

You can add a featured image as well. And add tags (key words) to your Post.

To set your Post’s appearance (for this Post only) go to Oakland Post Options:

You can choose Layout for each page: Right/Left Sidebar or Full Width. When one of the sidebars is enabled, you can set your Custom Sidebar. More about Sidebars see in the relevant paragraph.

You have an opportunity to:
1) Show Sharing Box:

2) Show About Author Box:

3) Show Recent, Popular and Related Box:

4) Enable Middle Sidebar.
Here is an example of how it will look in the Post:

To manage your Post Tags (remove, add, or edit) go to Posts/Post Tags. You’ll get the following window:

Where you will easily add new Tag or find existing one and edit it. You also can see which Tags are embeded to most of Posts.

##### Blog default options

You can set a default Blog Options for the whole site depending of the blog type you prefer. In this case only those Posts or Pages, which have customized style, set via Edit Post/Page, will have other appearance (as these settings have higher priority).
To manage your default blog options go to Oakland/Blog and the following menu will appear:

You may specify following Blog Page Options (Oakland/Blog Options/Blog Page):
1) Show/Hide Posts Date
2) Show/Hide Posts Categories
3) Show/Hide Posts Author
4) Show/Hide Posts Comments
5) Show/Hide Posts Read More Button

And Blog Post Options (Oakland/Blog Options/Blog Posts) are:
1) Blog Post Default Layout (choose Right/Left Sidebar or Full Width)
2) Show/Hide Posts Date
4) Show/Hide Posts Categories
5) Show/Hide Posts Author
6) Show/Hide Posts Comments
7) Show/Hide Post Tags
7) Show/Hide Posts Navigation
8) Show/Hide Post Share This Block
9) Show/Hide Post About Author Block Default
10) Show/Hide Blog Related Posts Block Default
11) Show/Hide Blog Popular Block Default
12) Show/Hide Blog Latest Posts Block Default
13) Blog Popular, Latest & Related Posts Number

And don't forget to save changes:

### Post Formats

You have an opportunity to change your Post Formats using this feature:

##### Standard

Standard Format enabled will make your Post look like this:

In fact you’ll get the Post, consisting from a picture and any length text, which will be shown partially in the list.

##### Aside

Aside Format enabled will make your Post look like this:

Basically you will get a short status, which can be commented by other users.

##### Gallery

Gallery Format enabled will make your Post look like this:

So you will get a small gallery right in the list of your posts, and if you’ll click on the post’s image, it will switch to another one.

You may easily change your image order. See the screen cast.

##### Link

Link Format enabled will make your Post look like this:

The title of your post will be at the same time a link to another site.

##### Image

Image Format enabled will make your Post look like this:

Your post will be an image with short description, and if you’ll slick on it - it will appear with a full size in the lightbox.

##### Quote

Quote Format enabled will make your Post look like this:

You can post any quotation using this Post Format.

##### Video

Video Format enabled will make your Post look like this:

You can add a video to your post (using video URL) and it can be played right in the post list in smaller size, or on the Post page. We've created our CMSMS media player, so it's controls appear only when mouse is on the video.

##### Audio

Audio Format enabled will make your Post look like this:

You can add an audio to your post and it can be played right in the post list, or on the Post page.

Note: You should type in the audio link field only in this way: mp3:link_to_the_mp3_file or ogg:link_to_the_ogg_file.
You can’t add this audio via URL from other source, it should be downloaded to your server.

The date in each of these formats leads to the post archives.

### Add Portfolio

The easiest way to create a portfolio page is:
1. Go to CMSmasters admin panel.
2. Find “Quick page create” at Dashboard and click there on “Portfolio” button

3. Enter the title.
4. In Oakland General Page Options you can choose Page Layout Type, Portfolio type (should be created first), the number of items per page, colums number, Middle Horisontal Sidebar visibility and more.

5. Publish this page
6. Add this page to the menu in Appearance/Menus

Or you may go to Pages/Add new and choose the Portfolio template in Page Attributes.

All other steps stay same.

Thereafter you can add the Portfolio Item:
1. Go to Portfolio/Add New Projects

2. Choose your Project Format
1. Slider
2. Video
3. Album

3. Enter Portfolio Item Content
a. Enter the Title
b. Enter Main Content
c. Add a Featured Image
d. In Oakland Project Options you can choose Page Layout Type, Read Button text, the Display Type, Sharing box visibility, Middle Horisontal Sidebar visibility and more.

Display Type gives you a choise: whether you want your item be displayed at the Portfolio page as an image (using featured image) - when Cover option enabled; or with its actual format - video, audio - when Project Format option enabled.
Here you can see the example of Video Project Format right at Portfolio page:

It allows you to watch portfolio video just by clicking on Portfolio Item. But of couse it will be small and could be played with better quality on its actual page.
To set an Attached Images
just click “Please upload images”. Then select your files (by the way, you may add few images at once), save changes and close this window.
Note: Images should be downloaded from your computer - not Media library. And there is no need to click “Set as featured image” or “Insert to post”
Once you’ve updated or published this project you’ll see this images in “Attached Images”
You can easily change items attached images’ order using drag’n’drop. To delete some of them, just click on it and go to gallery tab, in the opened window click “Show”

Then “Delete” and “Continue”.
Note: There is one important trick you should know about adding video. The picture of your video in the portfolio posts list doesn’t appear by default – you should set it by yourself via “Featured image”, otherwise your video won’t run – WordPress won’t recognize it and be able to show it in the menu, nor even after you just click “Preview”.
If you’d like to create Portfolio with sorting, you might need to use Categories.
Go to Portfolio/Project Categories

And create a category there. Enter a Name and click “Add New Category”.

Then set this category for the projects you need. Once you got to editing project page in admin panel, you’ll find there “Project Categories” block.

And don’t forget to click Publish/Update button.
If you need to create few Portfolio pages, you can use Portfolio Types.
Create or Edit some project and set a type for it.

Publish it with this type enabled.
Then go to portfolio page in WP admin panel and select your portfolio type

Note: This option appears only for those pages, which have “Portfolio” set in Page Attributes.

The next step. Publish/Update this page and there will be shown only projects with type selected. For the other portfolio pages you can use new type to get posts with different projects.
To manage, add, delete, rename types you can use Portfolio/Portfolio Types tab.

There is also a Sort Projects tab in the WP menu: Portfolio/Sort Projects.
When you'll click on it - you'll get a list of your projects. In our preview site it looks like this:
Here you can easily change the order of your projects using drag’n’drop.

##### Project options

To set your Project unique appearance (for this Project only) go to Oakland Project Options. Every Edit Project page has an access to them.

You can choose Layout for each page: Right/Left Sidebar or Full Width. When one of the sidebars is enabled, you can set your Custom Sidebar.

As it has been noticed above, you have an opportunity to:

1) Set your Page Layout Type (Right/Left Sidebar, Full Width)
2) Enter your Project Read More Button Text
3) Choose Portfolio Page Display Type
4) Enable/Disable Sharing Box
5) Enable/Disable Recent, Related & Popular Box
6) Enable/Disable Middle Horizontal Sidebar

If the Video format is enabled, there apper such an option: Video Link.

If the Album format is enabled, there apper another option: Column Number.

Use the other Oakland Project options as well: Custom Background Options, Page Slider Options, Page Heading Options, Custom Breadcrumbs Options, Custom SEO Options to make the Project more relevant on your opinion.

##### Portfolio default options

You can set a default Portfolio Options for the whole site depending of the portfolio type you prefer. In this case only those Projects, which have customized style, set via Edit Project, will have other appearance (as these settings have higher priority).
To manage your default blog options go to Oakland/Portfolio Page and the following menu will appear:

Choose whether you want to set up Portfolio with Sidebar or Full Width Portfolio.

##### Settings for a Full Width Portfolio

Choose One, Two, Three or Four Column Template and set there following options:

1) Projects Title Visibility
2) Projects Description Visibility
3) Projects Read More Button Visibility

##### Settings for a Portfolio with Sidebar

Again, choose One, Two or Three Column Template and set there following options:

1) Projects Title Visibility
2) Projects Description Visibility
3) Projects Read More Button Visibility

##### Portfolio Projects

To set your Project default Options go to Oakland/Portfolio Page/Portfolio Projects. You'll get the following options:

1) Portfolio Project Layout Default: enable Right/Left Sidebar or set a Full Width.
2) Show/Hide Project Date
3) Show/Hide Project Categories
4) Show/Hide Project Author
5) Show/Hide Project Comments
6) Show/Hide Project Tags
7) Show/Hide Project Navigation
8) Project Share This Block Visibility
9) Portfolio Related Projects Block Default Visibility
10) Portfolio Popular Projects Block Default Visibility
11) Portfolio Latest Projects Block Default Visibility
12) Set Portfolio Default Latest Projects Number

### Contact Page

##### How to set up the Contact Page using Form Builder 1.2

Create unlimited contact forms!
Use fields, text areas, drop-downs, radiobuttons, checkboxes etc.
Set verification and fields that are required. You can set view of mails you’ll receive with “Message composer”. Enable/disable reCaptcha and even add your forms in sidebars!

To make it easier for you to understand how it works we made a video screencast ,which will help you to set the contact page via Form Builder 1.2 and more.

To set up the reCaptcha go to Oakland/General Options/Theme Options. Enter your reCAPTCHA public and privat keys. You can get them here.

### Fonts set up

Oaklandtheme gives you an opportunity to set more than 400 fonts from the base of Google Web Fonts.

Fonts’ options are available at Oakland/Styling Options/

And also at Oakland/General Options/Theme Fonts Manager/

The fonts’ variety is divined into two parts: basic Google fonts (Content Fonts) and Custom Google fonts.

First let’s overview the capability of fonts’ customizing in Styling Options tab.

Front Name Options is an instrument for changing all the fonts for headings, messages, code and buttons on your site.

Font Size Options allow to change the headings’, messages’, code’s and buttons’ font size.

Using Font Color Options you can set any color of all your fonts via visual palette or just pasting the colour code (number) to the field “#”.

If you would like to add some special Google web font, you can use Theme Fonts Manager.

Note: You can find and preview all the Google fonts here

The Font Name you can find in Google fonts description to the chosen font.

Don’t forget to save changes.

You’ll be also able to delete or edit your theme fonts in Theme Fonts Manager.

Typical font headings’ visualisations for our preview site you’ll find at our Typography page.

### How to translate your website or edit all default messages

Oakland is a multilingual theme! You can translate it into German, French, Italian, Portuguese, Polish, Russian, Spanish and Turkish from our base, or set any other language.
This procedure will take few minutes. First thing you should do is go to the root directory on your server and find there your WP files. You have to to edit the wp-config.php file by typing the language code to the line

define('WPLANG', '');

to make it look like this:

define('WPLANG', 'lg_LG');

In this line lg_LG is a sample code of any language you’d like to set.

Here is a list of language codes we have for you:

de_DE means to translate your site into German

fr_FR means to translate into French

it_IT means Italian

pt_PT means to translate into Portuguese

pl_PL means Polish

es_ES means to translate your site into Spanish

ru_RU means to translate into Russian

tr_TR means to translate into Turkish

Note: You will find all the language files by following to wp-sontent/themes/oakland/themes/languages.

If you’ve noticed any incongruity in our translations, please feel free to tell us about it at our Support forum.

We highly appreciate your help.
We also will be grateful if you’ll provide us with correct translations. Your author rights for given translation files will be saved, of course.

If there is no language needed in our base, you can download your own language files and edit wp-config.
To create your own language file or make changes in translation you should install Poedit:

http://www.poedit.net/

To change the texts of translations or customize some texts in your site’s messages, open .po file in Poedit. You’ll get the list of messages and common phrases. Select a text you’d like to edit and enter changes in a lower field. Before closing don’t forget to save changes.

To create your own language file, please, copy the en_EN.po (or any of those .po files we have in “languages” folder) file from folder, run Poedit and go to File/New catalog from POT file.

Find the file en_EN.po uploaded recently and set it as your .po translation template. You’ll get the following list:

You must enter new text to the field in the bottom of the window – it will be saved for each item automatically. Edit all the messages you need and save changes to the file before closing. The program will create two files with similar names: .po and .mo.

Copy these two files to your server: wp-sontent/themes/oakland/theme/languages. Add the new file’s name to your wp-config.php file inside of empty quotes in the line

define('WPLANG', '');

Note: Don’t enter a file type to the line. For examble, define('WPLANG', 'lg_LG.po') is incorrect!

### Shortcodes

You will find the examples of the Shortcodes at our preview site here > Features > Shortcodes. Please, watch the screen cast as well.

You may show/hide Kitchen Sink by clicking Alt + Shift + Z or press this button in the visual editor:

And the following buttons will appear:

For your convenience all the shortcodes were grouped and have dropdowns. It will save your time and is more graphically.

And you will find same shortcodes right in the HTML menu!

Click once - and you'll open the tag, second click will close it down. If you have added many shortcodes you may use this button to close all the tags:

Use Fullscreen to make editing more pleasant.

You will get all the shortcodes without dropdowns in the visual editor:

### Footer Options

Go to Oakland/Styling Options/Footer Options to set your footer visibility and change the text inside of it: