Code Supply Co.

Customer Support Service

General

Facebook / Twitter not Pulling the Correct Image

Facebook and other social networks pull the so called OpenGraph meta. These are special tags inside your website’s code. However WordPress themes do not include these codes, as it’s a plugin’s territory.

One of the best plugins that adds such OpenGraph meta tags is SEO by Yoast:

https://wordpress.org/plugins/wordpress-seo/

Please see their documentation for OpenGraph meta:

https://yoast.com/social-media-optimization-with-yoast-seo/

https://kb.yoast.com/kb/getting-open-graph-for-your-articles/

https://kb.yoast.com/kb/custom-open-graph-tags/

Don’t forget to check your page with the Facebook Linter Tool:

https://developers.facebook.com/tools/lint/

It should reset the OpenGraph cache your images should be pulled by Facebook.

How to Use a Custom Font

You need to follow these steps to add a custom font:

  1. Upload webfont files to your server to your wp-content/uploads/ folder.
  2. Navigate to Appearance > Customize > Custom CSS and add your new custom font-face (this is an example, mind the path to your font files, the font name, etc.). You may also use the child theme’s style.css to add these lines.
    @font-face {
        font-family: 'Your Custom Font Name';
        src:    url('path/to/fonts/custom-font.eot');
        src:    url('path/to/fonts/custom-font.eot') format('embedded-opentype'),
            url('path/to/fonts/custom-font.ttf') format('truetype'),
            url('path/to/fonts/custom-font.woff') format('woff'),
            url('path/to/fonts/custom-font.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  3. Add your custom font to the typography dropdowns in Appearance > Customize by adding these lines to your child theme’s functions.php:
    /**
     * Add Custom Fonts to Customizer.
     *
     * @param array $fonts array of fonts.
     */
    function csco_custom_fonts( $fonts ) {
    	$fonts[ 'custom-font' ] = array(
    		'label' => 'Your Custom Font Name',
    		'stack' => 'Your Custom Font Name',
    	);
    	return $fonts;
    }
    
    add_filter( 'kirki/fonts/standard_fonts', 'csco_custom_fonts' );
  4. Now you should be able to see your custom font in the list of fonts in Appearance > Customize.

How to Update Your Theme

Install it as a new theme

To download the latest version of the theme, go to your ThemeForest account → Downloads section, locate the theme, click on Download button and select the “Installable WordPress file only” option.

Now from your WordPress Dashboard, navigate to Themes and activate a default WordPress theme, like TwentySixteen or similar.

Delete the current version of the theme that you want to update.

Upload and Activate the newest version.

Note: It seems scary, but you really won’t lose any of your data. The only exception is if you have made edits to theme files like header.php, footer.php etc. These changes will need to be applied again to the new files. All of your content and theme settings are preserved.

Plugin: As an alternative, you may want to use a plugin to automate backing up your current theme and uploading the new version: Easy Theme and Plugin Upgrades.

Automatically via Envato Market Plugin

Install the Envato Market Plugin from Appearance → Install Plugins.

Navigate to the Envato Market menu, follow the instructions to generate a Global OAuth Personal Token, and enter the Token in your WordPress Dashboard. Your themes can now be updated automatically.

Using a FTP software

To download the latest version of the theme, go to your ThemeForest account → Downloads section, locate the theme, click on Download button and select the “Installable WordPress file only” option.

Login to your server through FTP and navigate to wp-content/themes/ folder of your WordPress installation.

Back up your existing theme by downloading its folder to a safe location on your local hard drive.

Then extract the contents of the archive, you downloaded from ThemeForest, and upload the theme folder to wp-content/themes/.

How to change the number of posts per page

In order to increase the number of posts per page, please navigate to Settings > Reading and change the number of “Blog pages show at most” setting.

 

How to translate your theme

In order to translate a theme into your language, please use either POEdit or Loco Translate.

After you’ve done the translation, place two files (MO and PO) into the /lang/ folder of the theme.

Please note, that files must be named correctly, i.e. fr_FR.mo, de_DE.mo, it_IT, etc.

For the full list of language codes please see WordPress section here.

In order to keep your translation after each theme update, please send us the two files (MO and PO) and we will bundle them with the theme.

Theme is missing the style.css stylesheet

It’s a common issue and there’s an easy fix for it.

Please read this guide.

Where to get MailChimp Embedded Form URL

In order to make subscribtion forms work, please make sure you’ve set up Embedded Form URL in AppearanceCustomizeConnect.

Embedded form url must look like this.

Go to MailchimpListsYour ListSignup FormsEmbedded Form and copy URL between quotes:

<form action="..."></form>

See example.

Select the URL and hit Ctrl-С (Cmd+C for Mac).

Paste the URL to the Embedded Form URL field in AppearanceCustomizeConnect.

The Affair

Mobile Menu

In order to have navigation in mobile view please navigate to AppearanceWidgets and drag and drop Custom Menu to Primary widget area, then select your menu from the dropdown.

See screenshot for details.

Authentic

Some Posts not Appearing on Homepage

There’s a new option to avoid duplicate content on your homepage, introduced in one of the latest versions.

You may disable it by unchecking “Exclude featured posts from the main archive” checkbox in Appearance > Customize > Homepage > Post Slider / Post Tiles / Post Carousel.

 

How to create Video Backgrounds

Please select Post Format: Video and choose a Location in the Video Background meta-box. Don’t forget to input video URL (either YouTube or Vimeo) in the Embed field below post title.

Make sure you’ve provided a thumbnail for the post, as it will serve as a fallback, when the video can’t be loaded.