Engic - A Sleek Multiuse Responsive WP Theme

1. Add custom fonts in Engic with the child theme

2. How to generate and add your own API key for the Google Maps

3. How to add custom fonts via Child Theme?

4. Recommended Server Settings - Memory issues

5. Fonts not displayed correctly

6. What we need to understand about the full-screen images

7. How to use the Child Theme

8. How to translate your logo with WPML

9. WP & Theme updates - Important!

New rules from Google! From June 22th 2016 Google requires you to use an API KEY to display the maps you need on your website.

So please:

1. Generate an API key from https://developers.google.com/maps/documentation/javascript/get-api-key by following the detailed instructions by Google.
2. Place your API key in the related field in Theme Options > Map Options.
3. You are ready!

It is worth noting that this option was added in the Theme Options in Corpus 2.7.1 and in Engic 1.7.1.

Alternative solution with the child theme:

1. Generate an API key from here https://developers.google.com/maps/documentation/javascript/get-api-key 

2. Use the child theme to add one of the following functions according to the theme you are using:

//Corpus
function eut_child_map_scripts() {
    wp_register_script( 'eut-googleapi-script', '//maps.googleapis.com/maps/api/js?key=API-KEY', NULL, NULL, true );
}
add_action( 'wp_enqueue_scripts', 'eut_child_map_scripts' );

//Engic
function eut_child_map_scripts() {
    wp_register_script( 'google-maps', '//maps.googleapis.com/maps/api/js?key=API-KEY', NULL, NULL, true );
}
add_action( 'wp_enqueue_scripts', 'eut_child_map_scripts' );

3. Place your API key in the API-KEY space you see in the function.

Under Theme Options - Typography you can select a variety of Standard and Google Fonts.

In some cases you might need to use a Custom Font, we have implemented a solution to add your Custom Fonts and be able to select them in the Typography section of our options panel ( Theme Options - Typography ).

To use fonts in WordPress it's normally required to add some css code in your header. The remaining part is to be able to select it from the Font Family combo boxes.

Of course you can also add refined css code under Theme Options - CSS/JS Options - CSS Code.

Web fonts are provided in various formats:

• .eot
• .woff
• .woff2
• .ttf
• .svg

Usually some documentation is already provided when you purchase a custom Font. A sample css is normally included in the documentation.

As an example we'll use a font called: MyCustomFont. You need to replace it with the actual Font Family name. In this example fonts are uploaded in a folder webfonts inside you Child Theme root directory.

Add the following snippet in the functions.php file of your Child Theme.

function eut_child_theme_print_custom_fonts() {
?>
<style type="text/css">
    @font-face {
        font-family: 'MyCustomFont';
        src: url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.eot');
        src: url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.eot?#iefix') format('embedded-opentype'),
        url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.woff2') format('woff2'),
        url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.woff') format('woff'),
        url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.ttf') format('truetype'),
        url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.svg#wf') format('svg');
    }
</style>
<?php
}
add_action( 'wp_head', 'eut_child_theme_print_custom_fonts' );

The following function adds the fonts to the Font Family selectors.

function eut_child_theme_custom_font_selection( $std_fonts ) {
    $my_custom_fonts = array(
        "MyCustomFont"    => "MyCustomFont",            
    );
    return array_merge($std_fonts, $my_custom_fonts);
}
add_filter( 'eut_std_fonts', 'eut_child_theme_custom_font_selection' );

In $my_custom_fonts array you can also add additional fonts. Your custom Fonts will be added as Standard Fonts in all Font Family selectors under: Theme Options - Typography Options.

This way you can add as many custom fonts as you like.

Note: Keep in mind that the last filter is only available in theme Corpus, our other themes have similar hooks.

For Engic:

add_filter( 'engic_eutf_std_fonts', 'eut_child_theme_custom_font_selection' );

For Anemos:

add_filter( 'anemos_eutf_std_fonts', 'eut_child_theme_custom_font_selection' );

For Fildisi:

add_filter( 'fildisi_eutf_std_fonts', 'eut_child_theme_custom_font_selection' );

There are hundreds of thousands of web hosts out there, not all of them are fit for a WordPress installation. There are a few (well-known) low budget host providers that you can experience multiple issues when you use a premium, high quality theme (demo import issues, images upload etc). As you can easily understand this is out the scope of our support and something that you need to sort out with your host provider. At least, make sure you have covered the basics: WordPress Minimum Requirements

Recommended PHP and MySQL versions:

• PHP 5.6 or greater
• MySQL 5.5 or greater
• The mod_rewrite Apache module

Themes and Plugins often require more memory than the server default values. In some server installations some php variables are very low and not recommended for WordPress installations with premium Themes or/and multiple Plugins.

Recommended php variable values:

Snippet for php.ini

    memory_limit = 256M 
    post_max_size = 128M 
    upload_max_filesize = 32M  
    max_input_vars = 2000
    max_execution_time = 300

Snippet for .htaccess

  php_value memory_limit 256M
  php_value post_max_size 128M
  php_value upload_max_filesize 32M
  php_value max_input_vars 2000
  php_value max_execution_time 300

• memory_limit ( This sets the maximum amount of memory in bytes that a script is allowed to allocate)
• post_max_size ( Sets max size of post data allowed. This setting also affects file upload. )
• upload_max_filesize ( The maximum size of an uploaded file. e.g: Theme, Plugin, Media File )
• max_input_vars ( Increase to 2000 to enable large menus with many menu items e.g > 80 )
• max_execution_time (The maximum time in seconds a script is allowed to run before it is terminated )

Note: If you have already a larger number or if you don't have any issues, you don't need to modify them.

Keep in mind that some values must be larger than others: memory_limit > post_max_size > upload_max_filesize

These values can be changed with the following methods:

• inform your hosting provider to do it for you
• from you hosting panel
• php.ini ( FTP access required )
• .htaccess ( FTP access required )

One of the most important files in your WordPress installation is the wp-config.php file. This file is located in the root of your WordPress file directory and contains your website's base configuration details, such as database connection information.

WP_MEMORY_LIMIT option allows you to specify the maximum amount of memory that can be consumed by PHP. This setting may be necessary in the event you receive a message such as "Allowed memory size of xxxxxx bytes exhausted".

This setting increases PHP Memory only for WordPress, not other applications. By default, WordPress will attempt to increase memory allocated to PHP to 40MB. Increasing memory allocated to PHP

Increase PHP Memory to 96M

define( 'WP_MEMORY_LIMIT', '96M' );

Administration tasks require much memory than usual operation. When in the administration area, the memory can be increased or decreased from the WP_MEMORY_LIMIT by defining WP_MAX_MEMORY_LIMIT.

define( 'WP_MAX_MEMORY_LIMIT', '256M' );

Please note, this has to be put before wp-settings.php inclusion.

If you serve fonts files from different domains, fonts might not displayed correctly due to Cross-origin resource sharing (CORS). More info about CORS here: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Chrome, Firefox and newer versions of Internet Explorer enforce the Cross-Origin Resource Sharing standard, and thus only render web fonts served with the appropriate “Access-Control-Allow-Origin” response header.

For example if you have more than one domain/sub-domain to show your site, fonts might not be displayed correctly in your other domains/sub-domains. This might affect Font Icons like Awesome Fonts or custom fonts hosted from your server.

Use-case:
http://www.sampledomain.com ( fonts shown correctly )
http://subdomain.sampledomain.com ( fonts not shown correctly )

To solve this issue you need to set the appropriate “Access-Control-Allow-Origin” response header.

You can modify your .htaccess file to allow fonts from another domain.

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://subdomain.sampledomain.com"
    </IfModule>
</FilesMatch>

or allow fonts from all domains ( in case you have more than one domain that is mapped to your site )

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Depending on the server similar code must be configured ( e.g: for IIS7 or nginx )

More info here: http://enable-cors.org/server.html

This is always a tricky question to answer, because you have to first understand how image resizing works to understand the nature of full-screen images.

For this example, we’ll pretend the image below is our computer monitor

And this is the image we want to use full screen

Problem is, the image of the woman is not the same size as our computer monitor. So what are our options?

Technically we could just resize the image to the same size as our monitor. But because the original image and our monitor are two different size ratios, we’d have to severely distort the image to accomplish this, and it would end up looking like this:

Obviously the above result is a bad solution. How can we avoid image distortion?

One way is to use the “cropping” method. Here’s an example:

The above example covers the entire screen, but as you can see, it also crops, or cuts off a large portion of the image. So how can we display the entire image without distorting it and without cropping it either? By resizing the image so it fills as much of the screen as possible, while making sure no portion of it is cropped. Here’s the result:

As you can see, the above example creates white space on the sides of the image. So how can you display a full-screen image without distorting it, without cropping it, and without creating white space? Technically, you could just make the image the same exact size as your computer monitor, but because there are so many different monitor sizes, that isn’t the greatest solution. Instead, you’ll have to decide which one of the above examples is best for your project:

• Distort the image: almost always a bad choice
• Crop the image: a good choice when you want to avoid “white space”
• Fit without cropping: usually creates “white space”, but a good choice when showing the entire image is most important

Post's source

Firstly, if you need small css changes you can use the CSS Options (to place your code) in Theme Options. If you need to change more, then it's better to use the child theme. For example, if you've ever edited PHP files (or JS files), then you know how hard it can be to upgrade your theme later.

Generally, a WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. So install both themes (themename and themename-child), activate the child theme and you ensure that changes you make to the files are not overwritten when upgrading the main theme. If you need to edit PHP files(or JS files), the first thing you need to do is replicate the old file before we start to modify it. So, copy and paste the theme's original file into your child theme folder ensuring that the file name and location is exactly the same. For example, if you want to modify the themename/folder-name/file1.php, then you would copy and paste this file to themename-child/folder-name/file1.php. Then, you can open and make any necessary changes.

More information can be found on the official WordPress Codex: https://codex.wordpress.org/Child_Themes

A sample Child Theme is provided in the main.zip file.

When you activate the Child Theme you need to assign again your Menus Locations and Widgets.

• Appearance – Menus – Theme Locations
• Appearance – Widgets

By using a child theme, you don't have to worry about the updates of the parent theme.

You can easily translate your logo via the String translation if you use the following procedure:

• Go to WPML > String Translations > Translate texts in admin screens. You will find this option in the lower left of your screen.
• Search for the fildisi_eutf_options > logo and expand it (for the Fildisi Theme for this example)
•  Select logo URL checkbox option
• Scroll all the way down and press the 'Apply' button
• Go to WPML -> String Translations
• Translate the string for the logo URL, with your translated logo image URL (this will be your translated image for the logo).

When a major WP release arises it is crucial not to update WP version unless you are 100% sure that our Theme is compatible at that particular time. Proper order of update is Theme first, WP later. 

It is very important to stay always updated in both Theme & related plugins. Proper way of updating Theme & related plugins can be found here: How to update Engic.

You could frequently check the changelog of our Theme in the following link: Engic changelog.

In that way you can always be sure that your site will always work flawlessly.