Documentation Opta WP

Theme Manual

Opta - WordPress Theme

Thank You :)

Thanks for purchasing our theme. We really appreciate your support and trust in us. We worked hard to make Opta WP theme easy to edit as much as possible. Hopefully, you will enjoy using it. Have fun!

How To Install?

Once you have the zip archive ready, you need to go to your dashboard, which is www.yourwebsite.com/wp-admin and go to Appearance > Themes > Install Themes and, in the top menu, select Upload. Now, select the zip archive and just install it normally.

*Note - Theme is placed in “Opta WP - THEME” folder and you need to upload zip file from that folder (zip file called opta-wp.zip)

After installing the theme, you will get alert of required and recommended plugins. CocoBasic - Opta WP, AddToAny and C ontact Form 7 are required plugins. You need to install and to activate those plugins.

Import Content

This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress admin page dashboard and select Tools > Import and then choose WordPress option.

Here is a small video tutorial how to install and import demo content. https://www.youtube.com/watch?v=AS1lqGPhEZk

Demo Content is placed in “Opta WP - DEMO CONTENT” folder.

After you have imported dummy/demo content go to D ashboard > Settings > Reading and set F ront page displays: “A static page” and select Home for F ront page. For P osts page select B log.

Now, open Dashboard>Settings>AddToAny a nd deselect all checkbox in “Placement”. Of course, you can check some of them if you want to add have some extra sharing buttons, but by default, shortcode for AddToAny plugin is integrated in single-portfolio.php file (Single Post Portfolio).

Creating Menu and Menu Order

In order to create menu, go to Appearance > Menus. You can see on the image below example how menu can looks like.

* Don’t forget to check “Main Menu” . * Note - To add text in menu like on our demo (left part of menu), find in this manual section “Theme Customization” f or instruction

Footer Widget

To set/edit widgets in footer go to Dashboard>Appearance>Widgets.

Here is how it looks our demo widgets area.

* Note - To add text in footer like on our demo (email address, longitude and latitude coordinates), find in this manual section “Theme Customization” for instruction

Content Editing

Page Editing

To edit Page, just open a page that you want to edit and replace the existing content with your own (text, images, videos).

After importing demo content, you will have pages like this:

Now, for each page we will explain just some part of code which is specific for it:

About page

When you open the “About” page in editor (open in Text edit mode), you will see code like this (I nfo shortcode):

[info title="Founded"]MCMLXXXII[/info]

[info title="Art Director"]PETER WALL[/info]

[info title="Headquarter"]NEW YORK[/info]

This code is transformed in this on front side:

On About page is also used “B ox” shortcode. It looks like this:

[box_page]

[/box_page]

“[ box_page]” shortcode will create a place for content ( div tag ) which is 1140px wide. On About page, there is a image placed inside a [box_page] but you can place also text, other shortcodes (like columns) or video inside this shortcode.

*Note - f or posts (regular posts, portfolio posts and gallery posts) use [box_post] s hortcode instead [box_page]

Also, there is a “S kills” shortcode which looks like this:

[skills title="PHOTOSHOP" percent="70%"]

[skills title="HTML/CSS" percent="95%"]

[skills title="WORDPRESS" percent="85%"]

[skills title="JS" percent="65%"]

This code is transformed in this on front side:

On About page is also placed Text Slider shortcode. It looks like this:

[text_slider hover_pause="true" auto="true" dots="true" speed="2000"] [text_slide] The goal of a designer is to listen, observe, understand, sympathize, empathize, synthesize, and glean insights that enable him or her to make the invisible visible [/text_slide] [text_slide] All architecture is shelter, all great architecture is the design of space that contains, cuddles, exalts, or stimulates the persons in that space [/text_slide] [text_slide] As an architect, you design for the present, with an awareness of the past, for a future which is essentially unknown. [/text_slide] [/text_slider]

You can change speed, set true/false for auto start, pause on hover or to show/hide dots below the slider.

Also, there is a “P age Preference” part where you can do some more customization. This section is placed below the editor and it looks like this:

Here you can set page title and description. We have used this on our “H ome” page and it looks like this:

Gallery Page

On this page you will find shortcode for gallery carousel slider. It looks like this:

[gallery_slider auto="true" speed="1500"]

This code will show all gallery items which are created in Dashboard>Gallery and show it carousel slider.

Also, there is a full_page shortcode which will make a place for content (in this case gallery slider) which is 100% wide.

[full_page]

[gallery_slider auto="true" speed="1500"]

[/full_page]

Contact Page

On this page you will find shortcode for contact form. It is shortcode from Contact Form 7 plugin which looks like this:

[contact-form-7 id="4" title="Contact form 1"]

To set your contact form you need to open Dashboard>Contact>Contact Forms and to edit the contact form.

Or demo code for contact form looks like this:

Code for contact form:

[text* your-name placeholder "Name"]

[email* your-email placeholder "Email"]

[textarea your-message placeholder "Message..."]

[submit "Send"]

Home page (front page)

For this page is important to set Template : “P ortfolio” - on this way, your Home page will work properly. Changing Template for page is placed in right part of screen and looks like this:

To change the default number of visible portfolio items on Home page (before is sowed “Load More Button”) open

Dashboard > Appearance > Customize > Portfolio Settings

Add/Edit Portfolio Item

To Add a new Portfolio Item you need to open

Dashboard > Portfolio > Add New

Enter a Title and after that you need to set “Featured Image” and “P ortfolio Category” :

After you have set the image and category, scroll down to “P ortfolio Preference” :

Here you can set “M ouse over text” , you can set link for Portfolio Thumb - you can set to link to current post, to set link to external site or to set “no link”.

Also, here you can set “I tem Quote” text - if you set some text here, on home page will be portfolio item with quote text (thumb image will not be displayed), like this:

“Item info” c ontent will be displayed in right part of portfolio item and looks like this:

Also, below this content will be added AddToAny share buttons.

“H eader Content” will be displayed in head of single portfolio item, and here you can place image, text, video, image slider….

On our demo there is “Header Content” with:

1. Image:

*here is one extra class “animate” which will give your image “fadeTop” animation

2. Video:

3. Image Slider:

[image_slider class="animate" dots="true" speed="2000"]

[image_slide img="http://image1.jpg"]

[image_slide img="http://image2.jpg"]

[image_slide img="http://image3.jpg"]

[/image_slider]

Add/Edit Gallery Item

To Add a new Gallery Item you need to open

Dashboard > Gallery > Add New

Enter a Title and after that you need to set “Featured Image” for item. After this, your gallery image will be automatically included in [gallery_slider] s hortcode. Of course, you need to add content for item (you will get our demo content)

Edit Post

To edit post, open Dashboard > Posts and select some post to edit.

On Post page you will find this code (open Post in “Text” edit mode):

At missed advice my it no sister. Miss told ham dull knew see she spot near can. Spirit her entire her called. Fat son how smiling mrs natural expense anxious friends. Boy scale enjoy ask abode fanny being son.

This code is displaying a blockquote inline with text, like this:

It is important to set a class “inline-blockquote”. If you don’t set this class, blockquote will be displayed like this:

Shortcodes

This theme has shortcodes. When you install theme plugin named “C ocoBasic - Opta WP”, you will be able to use shortcodes used in this theme. After installation and activation the plugin, open page/post and you will see new icon in the editor. After click on it pop up window with shortcodes list will appear. Choose shortcode you want to insert and you will get a window with fields of attributes.

1. Columns

[col size="one"][/col]

[col size="one_half"][/col]

[col size="one_third"][/col]

[col size="two_third"][/col]

[col size="one_fourth"][/col]

[col size="three_fourth"][/col]

In order to define page/post layout, you can choose six different columns sizes: one, one_half, one_third, two_third, one_fourth and three_fourth. Important thing here is that rightmost column in the row need to have class “last” (you will see the checkbox with option “last”).

[col size="one_third_last"][/col]

So, if you want three columns in a row that will be:

[col size="one_third"]Content[/col]

[col size="one_third_last"]Content[/col]

Very important is that you don’t forget to check “last” in case rightmost column in a row.

2. Skills

[skills title="PHOTOSHOP" percent="70%"]

[skills title="HTML/CSS" percent="95%"]

[skills title="WORDPRESS" percent="85%"]

[skills title="JS" percent="65%"]

3. Text Slider

4. Image Slider

[image_slider hover_pause="true" auto="true" class="animate" dots="true" speed="2000"] [image_slide img="http://image1.jpg"] [image_slide img="http://image2.jpg"] [image_slide img="http://image3.jpg"] [/image_slider]

5. Item Info

[info title="Founded"]MCMLXXXII[/info] [info title="Art Director"]PETER WALL[/info] [info title="Headquarter"]NEW YORK[/info]

6. Big Text

[big_font]Hello, drop us a line or two[/big_font]

7. Gallery Slider

[gallery_slider auto="true" speed="1500"]

8. Page/Post Box/Full WIdth

[box_page]CONTENT[/box_page] [box_post]CONTENT[/box_post] [full_page]CONTENT[/full_page] [full_post]CONTENT[/full_post]

Theme Customization

To open customizer click on D ashboard > Appearance > Customize

Site Title, Tagline and Site Icon Customizing

Menu Text

Default content:

Welcome to our online art journey. You can read our thoughts or you can simply write to us

Portfolio Settings

Set number of portfolio items which will be displayed on Home page before “Load More” button

Image section

Our default logo size is 140x140px but we have this css code:

.header-logo img { width: 70px; height: 70px; }

.footer-logo { width: 70px; height: 70px; }

On this way, our logo is Retina ready. If you want to use some other dimensions for logo, you can add custom css code like this:

Footer Text

Footer Mail:

[email protected]

Footer Mail Second Line: or can use our contact form as well

Footer Latitude:

40.758896° N

Footer Longitude:

-73.985130° W

Footer Copyright Content:

Footer Social Content:

TWITTER FACEBOOK INSTAGRAM BEHANCE

Colors

Plugins

CocoBasic - Opta WP plugin User interface for Opta WP. It will add Portfolio and Gallery post types and also with add shortcodes.

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. https://wordpress.org/plugins/contact-form-7/

Add To Any Share buttons for your pages including AddToAny's universal sharing button, Facebook, Twitter, Google+, Pinterest, WhatsApp and many more. https://wordpress.org/plugins/add-to-any/

Source & Credits

Special thanks to creators and contributors of these awesome libraries, we couldn’t done this without them.

Images used just in DEMO theme https://unsplash.com

VIdeo used in theme https://vimeo.com/174678341

Contact Form 7 Plugin https://wordpress.org/plugins/contact-form-7

Add To Any Plugin https://wordpress.org/plugins/add-to-any/

HTML5 Fallback Support https://code.google.com/p/html5shiv

Respond JS https://github.com/scottjehl/Respond

jQuery http://jquery.com

Google Web Fonts http://www.google.com/webfonts

Easing jQuery Plugin http://gsgd.co.uk/sandbox/jquery/easing

Infinite scroll http://wp.tutsplus.com/tutorials/theme-development/how-to-create-infinite-scroll-p agination/

TGM-Plugin-Activation https://github.com/thomasgriffin/TGM-Plugin-Activation

Smart Menus http://www.smartmenus.org/

Slick http://kenwheeler.github.io

FitVideo.js http://fitvidsjs.com/

We are sorry if we forgot to mention someone.

Questions?

If you have any issues feel free to ask anything via our email [email protected]