cocobasicthemes@gmailscale enjoy ask abode fanny being son. this code is displaying a blockquote...
TRANSCRIPT
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 Contact
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 Dashboard >
Settings > Reading and set Front page displays: “A static page” and
select Home for Front page. For Posts page select Blog.
Now, open Dashboard>Settings>AddToAny and 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” for 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 (Info 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 “Box” shortcode. It looks like this:
[box_page]
<img class="aligncenter" src="http://demo.cocobasic.com/opta-wp/wp-content/uploads/2017/02/about_img.jpg"
alt="" />
[/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 - for posts (regular posts, portfolio posts and gallery posts) use
[box_post] shortcode instead [box_page]
Also, there is a “Skills” 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 “Page 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
“Home” 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:
<p>[text* your-name placeholder "Name"] </p>
<p>[email* your-email placeholder "Email"] </p>
<p>[textarea your-message placeholder "Message..."] </p>
<p class="contact-submit-holder">[submit "Send"]</p>
Home page (front page)
For this page is important to set Template : “Portfolio” - 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
“Portfolio Category”:
After you have set the image and category, scroll down to “Portfolio
Preference” :
Here you can set “Mouse 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 “Item 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” content will be displayed in right part of portfolio item and
looks like this:
Also, below this content will be added AddToAny share buttons.
“Header 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:
<img class="animate aligncenter" src="http://image_url.png" alt="" />
*here is one extra class “animate” which will give your image “fadeTop”
animation
2. Video:
<iframe class="animate" src="https://player.vimeo.com/video/174678341?color=ffffff" width="640"
height="346" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
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] shortcode. 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):
<blockquote class="inline-blockquote">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.</blockquote>
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
“CocoBasic - 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"]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 [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]
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 Dashboard > Appearance > Customize
Site Title, Tagline and Site Icon Customizing
Menu Text
Default content:
Welcome to our online art journey. You can read our <a
href="http://demo.cocobasic.com/opta-wp/blog">thoughts</a> or you can simply <a
href="http://demo.cocobasic.com/opta-wp/contact/">write to us</a>
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:
<a href="mailto:[email protected]">[email protected]</a>
Footer Mail Second Line:
or can use our <a href="http://demo.cocobasic.com/opta-wp/contact/">contact form</a> as well
Footer Latitude:
<a href="https://goo.gl/Iuqj8E" target="_blank">40.758896° N</a>
Footer Longitude:
<a href="https://goo.gl/Iuqj8E" target="_blank">-73.985130° W</a>
Footer Copyright Content:
© 2017 - COCO + BASIC
Footer Social Content:
<a href="#">TWITTER</a><a href="#">FACEBOOK</a><a href="#">INSTAGRAM</a><a href="#">BEHANCE</a>
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-pagination/
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
www.cocobasic.com