Opta WP

1. Set Up Video

2. Documentation Opta WP

3. Return CocoBasic shortcode generator Icon

4. Change Header and Footer Logo Size

5. Center Widgets in Footer

6. Change Font

7. Changelog

Manual for Opta WP

With WordPress 5.X we have disabled the shortcode generator icon - this icon (add-on) was created for the old editor. To return again this icon, you need to install the Classic Editor plugin - https://wordpress.org/plugins/classic-editor/ 

*Note - For Opta ver 1.4 and up - you don't need to do any changes bellow, just install the Classic Editor and Shortcode Generator Icon will be back.

Now, follow the steps 1-5 from this image:

And add "//" on lines 19 and 21.

Will my theme work without this changes (without shortcode generator icon)?

Yes, your theme will work and all shortcodes will work fine. The shortcode generator just "write" shortcodes (text) for you in the editor and has nothing to do with shortcode functionality.

Our default size for logo in header and footer is 140x140px but using some CSS code it is displayed 70x70px logo. Image is 140x140px but it is displaying 70x70px.

Why?

On this way, our logo is retina ready - it will look perfect on any device with any resolution.

How to change Header and Footer logo size?

To change image size for Header and Footer logo, in: 

Dashboard > Appearance > Customize > Additional CSS

add code like this:

.header-logo img {
width: auto;
height: auto;
}
.footer-logo {
width: auto;
height: auto;
}

This code will use the original sizes for Header and for Footer images. But, after this code, your header logo (maybe) is not center properly with "Menu" lines. You can use some more CSS code to move it Up/Down to make it perfect, like this:

.header-logo img {
width: auto;
height: auto;
margin-top: -20px;
}
.footer-logo {
width: auto;
height: auto;
}

*change value for "margin-top"

But with this code your logo will not be Retina Ready. If is not important for you to be Retina Ready, you are done. Don't read the boring text below.

I want bigger logo than 70x70px and to be Retina Ready!

Lets say, you need a Header logo which will be displayed in 200x150px dimension and Footer logo which will be displayed in 100x100px. That mean, you will need to create a Header logo which is 400x300px and a Footer logo 200x200px and in: 

Dashboard > Appearance > Customize > Additional CSS

add code like this:

.header-logo img {
width: 200px;
height: 150px;
margin-top: -20px;
}
.footer-logo {
width: 100px;
height: 100px;
}

*change value for "margin-top"

Now, your Header (200x150px) and Footer (100x100px) logo are Retina Ready.

Different Logo size on smaller resolutions

In case that you need to use different size for logo for smaller resolutions, you can add code like this in

Dashboard > Appearance > Customize > Additional CSS:

@media screen and (max-width: 1020px){
.header-logo img {
    width: 65px;
    height: 50px;
}
.footer-logo{
    width: 65px;
    height: 50px;
}
}

In "translation" this code say - when the screen width is lower then 1020px, use other dimensions for logo (65x50px) and for footer logo.

You can use some other "break point", let say 768px instant of 1020px and then to make your logo smaller.  

To center the Widgets in Footer add this CSS code in Dashboard > Appearance > Customize > Additional CSS

ul#footer-sidebar li.widget
{
    text-align:center;
}

To add new Google Font, lets say "Oswald" - https://fonts.google.com/specimen/Oswald you need to find this line of code in functions.php:

$font_url = add_query_arg('family', urlencode('Playfair Display|Montserrat:400,700|Roboto:300,300i,400,400i,700,700i'), "//fonts.googleapis.com/css");

and replace with this code:

$font_url = add_query_arg('family', urlencode('Oswald|Playfair Display|Montserrat:400,700|Roboto:300,300i,400,400i,700,700i'), "//fonts.googleapis.com/css");

on this way, you will include just Oswald Regular weight. If you want to include Oswald Regular and Bold use code like this:

$font_url = add_query_arg('family', urlencode('Oswald:400,700|Playfair Display|Montserrat:400,700|Roboto:300,300i,400,400i,700,700i'), "//fonts.googleapis.com/css");

Now, your new Google Font is included in theme, but you need to make some CSS changes.

Here is a CSS code which you need to add in Dashboard > Appearance > Customize > Additional CSS to replace all "Playfair" font with "Oswald":

.menu-left-text, .post-num, .blog-item-holder h2.entry-title, 
.page h1.entry-title, .blog h1.entry-title, .single h1.entry-title,
.nav-previous a, .nav-next a, .archive-title h1, .search .search-title h1, 
.grid-item.quote-item, .portfolio-text-holder .portfolio-text,
.taxonomy-title h1, .carousel-slider .slick-slide .item-text a,
.single-gallery h1.entry-title, .big-text, .footer-first-line,
.our-position-holder, h4.widgettitle
{
    font-family: 'Oswald', serif;
}

ver 1.7 (March 21, 2023) 
==================== 

- functions.php
- style.css
- admin/class-tgm-plugin-activation.php
- languages/opta-wp.pot

ver 1.6 (December 22, 2020) 
==================== 

- header.php
- footer.php
- functions.php

- CocoBasic - Opta plugin updated to 1.5

ver 1.5 (September 23, 2020) 
==================== 

- header.php

ver 1.4 (June 13, 2019) 
==================== 

- CocoBasic - Opta plugin updated to 1.4

ver 1.3 (January 12, 2019) 
==================== 

- style.css
- functions.php
- css/common.css
- js/main.js
- js/infinite-loading-index.js
- js/infinite-loading-portfolio.js
- taxonomy-portfolio-category.php
- loop-portfolio.php
- admin/custom-admin.php
- admin/css/layout.css
- languages/opta-wp.pot

- Removed: admin/js/admin.js
- Added: wpml-config.xml
- Renamed: js/html5.js => js/html5shiv.js
- Added: plugins/cocobasic-shortcode.zip

- CocoBasic - Opta plugin updated to 1.3

ver 1.2 (Nov 30, 2017) 
==================== 

Fixed: 

- style.css

ver 1.1 (Jul 6, 2017) 
==================== 

Fixed: 

- loop-portfolio.php 
- loop-index.php (date format) 
- archive.php (date format) 
- single.php (date format) 
- taxonomy-portfolio-category.php 
- functions.php (wrapped all functions - make it ready for Child Theme + some small fix) 
- CocoBasic Opta WP plugin update to 1.1 

Added: - child theme