General Issues

Contents

1. Section two-blocks - mute or unmute background video

2. Hybrid Composer error on activation

3. WP 5.0 Gutenberg breaks page builder

4. Enable debug mode

5. Copy / paste sections between pages

6. Error file_put_contents

7. Error: Are you sure you want to do this? Please try again.

8. Demo import not working

9. Hide menu & footer on a page

10. Anchor links

11. Page builder not showing up

12. Contact Form 7 use case examples

13. Translate the theme using Loco Translate

14. Hybrid Composer vulnerability

15. Animations render bad on Safari 12+

16. Different logo on specific page

17. Landkit update 1.10 turns code editor into Chinese characters

18. Increase number of tabs (Tab Element)

19. Import multiple demos in one install

20. Import multiple demos

1. Section two-blocks - mute or unmute background video

By default, when you upload a mp4 video to the two-blocks section, the video autoplays muted.

This is because the video size is set as cover and play controls might not be visible on certain resolutions.

You can, however, mute or unmute the video, by following these steps:

<video autoplay loop poster="<?php echo hc_get_img($Y_NOW["video_poster"],"ultra-large"); ?>">

2. Hybrid Composer error on activation

If you're getting this error when activating Hybrid Composer:

Parse error: syntax error, unexpected '[' in /home/content/73/8287873/html/420offices/wp-content/plugins/hybrid-composer/index.php on line 362

it means you're using an older PHP version. Minimum required is 5.6

To update your PHP version using cPanel, follow the steps here: https://www.siteground.com/tutorials/cpanel/php-version-change/

3. WP 5.0 Gutenberg breaks page builder

This issue was fixed in Landkit v.1.9. and Sole v.1.2.

4. Enable debug mode

Sometimes, certain theme functionalities might not work properly (demo import, theme options not saving, etc.) without any error or warning in WordPress dashboard or browser console. To investigate this, you need to enable debugging:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );

A common approach to fixing those errors is by copy/pasting the error (only the error, not the file path) to Google and looking for solutions. Most of the time, you'll see that someone already has a fix on stockexchange or similar websites.

5. Copy / paste sections between pages

Sometimes, you'll need to combine elements from two or more different imported pages and there's a simple way of doing this using the copy / paste feature:


When this feature stops working, just go to Appearance - Theme Options - Customizations and click on Clear LocalStorage.

If this doesn't solve the problem either, before clicking the paste button, try adding a new empty section and deleting it. Then click on paste and it should work.

6. Error file_put_contents

If you're getting “error file_put_contents” when installing demo data, it means your server doesn't have writing permission. The demo install needs to upload and unzip files on your server, so you need to make sure wp-content folder is writable. 

Follow this guide to set the correct permission to your wp-content folder: http://www.wpbeginner.com/beginners-guide/how-to-fix-file-and-folder-permissions-error-in-wordpress/

7. Error: Are you sure you want to do this? Please try again.

Sometimes, when installing the theme from WordPress dashboard, the following error occurs:

This is one of the most unhelpful error because it doesn't say anything and there can be a lot of factors that lead to this. However, in most of the cases, this error is fixed by uploading the theme using FTP instead of WordPress dashboard.

Here's a full tutorial on how to install the theme via FTP: https://socanny.ticksy.com/article/11332

8. Demo import not working

If demo import process runs successfully but nothing happens, there could be a few causes:

1. Incorrect folder permissions. Follow this guide to fix it: https://www.wpbeginner.com/beginners-guide/how-to-fix-file-and-folder-permissions-error-in-wordpress/

2. Incorrect filesystem method set to WordPress. You can check this by uploading a plugin and see if WordPress requires a FTP connection to upload. If that's the case, add this to wp-config.php:

define('FS_METHOD', 'direct');

3. PHP Version: try setting your server PHP version to 7.0.

4. DOM XML PHP extension must be enabled. You can check that with WP ServerInfo plugin. Go to Dashboard - WP ServerInfo - Display PHP Information and scroll down to DOM/XML:

5. Other issues. Enable debug, run demo import and check for errors in debug.log: https://socanny.ticksy.com/article/12718/

9. Hide menu & footer on a page

On your page editor, look for page settings (left panel):

Use "Hide menu" and "Hide footer" to disable menu header and footer on that page.

10. Anchor links

To create an anchor link (a link that automatically scrolls to a specific section), you need to identify the section id. You can also edit the id to your own to make things easier:

Then, on your element, set #section-id as link:

That's it. To find out how to add anchor links to your menu, follow the guide here: https://socanny.ticksy.com/article/11697/

11. Page builder not showing up

If the page editor is blank, meaning there's nothing showing up after the permalink, just go to Screen Options (top right) and make sure "Page Editor" is checked.

12. Contact Form 7 use case examples

Contents:

  1. Install and configure CF7
    1. Default form
    2. Inline Form
  2. Save form data in WP and export to CSV
  3. Redirect form to thank you page
  4. Conditional fields
  5. Check to agree before submit
  6. Pre-populate other forms with CF7 data
  7. Multi step forms

1. Install and configure CF7

download and install: https://wordpress.org/plugins/contact-form-7/

after activation, you will see this in your WP dashboard:

you'll have one pre-installed contact form; form editor looks like this:

first, you wand to edit the form code, in the editor field; there are many form field types to choose from; for more info read this: https://contactform7.com/text-fields/ and this: https://contactform7.com/checkboxes-radio-buttons-and-menus/

a. Default form

A standard form that looks like this on front end:

will have the following code:

<label> Your Name (required)
    [text* your-name placeholder "Name"] </label>
<label> Your Email (required)
    [email* your-email placeholder "Email"] </label>
<label> Subject
    [text your-subject placeholder "Subject"] </label>
<label> Your Message
    [textarea your-message placeholder "Message"] </label>
[submit "Send"]

To break it down, a field works like this:

- This is the form label. You can remove it and have the code like this:

[text* your-name placeholder "Name"]
[email* your-email placeholder "Email"]
[text your-subject placeholder "Subject"]
[textarea your-message placeholder "Message"]
[submit "Send"]

Which will output this form:

text* - This is the field type. * means the field is required.

your-name - The field ID. This will be used to store the data and send it to your email.

placeholder "Name" - Placeholder text. Remove this to get a form with no placeholders.

b. Inline Form

Inline forms usually look like this:

This layout is more suited for forms with fewer fields and without labels. Code looks like this:

<div class="row form-inline">
  <div class="col-md-12">
    [text* your-name placeholder "Name"]
  </div>
  <div class="col-md-12">
    [email* your-email placeholder "Email"]
  </div>
  [submit "Send"]
</div>

To configure the message you receive after the form has been submitted, go to mail tab:

To - enter your email here

From - [your-name] is the name user fills out in the form; note that IDs here need to be the same as in the form code; is the sending email, this can be set to any [email protected] and the email address doesn't have to exist.

Other fields are self explanatory. See how field IDs are used here. Feel free to edit Message Body to your own, but make sure to include all IDs.

The Messages tab allows you to edit all success / error / validation messages.

To add the form on a page, just create a text block element and paste the form shortcode there:

Form will fill out its container width, so adding the text block element in a larger column will result in a wider form.


2. Save form data in WP and export to CSV

Install this plugin: https://wordpress.org/plugins/contact-form-cfdb7/

After each form submission, data will be saved as custom posts:


3. Redirect form to thank you page

Install this plugin: https://wordpress.org/plugins/wpcf7-redirect/

You will see a new tab on your form editor:

Use that for your thank you page info.


4. Conditional fields

Install this plugin: https://wordpress.org/plugins/cf7-conditional-fields/

Plugin documentation is actually very well made so please read that before using it.


5. Check to agree before submit

Add this to your form code, right above the submit button:

[acceptance your-consent] I consent to the conditions. [/acceptance]

For more info, read the documentation here: https://contactform7.com/acceptance-checkbox/


6. Pre-populate other forms with CF7 data

Install this plugin: https://wordpress.org/plugins/wpcf7-redirect/

Check "Pass fields as URL query parameters" and send the redirect page to your next form. Use the query parameters to pre-populate your next form.

7. Multi step forms

Install this plugin: https://wordpress.org/plugins/contact-form-7-multi-step-module/

  1. Create one page or post for each step in your multi-step form process. If you have 3 steps, create 3 pages/posts. You will need the urls to these when creating your forms.
  2. Create a Contact Form 7 form.
  3. Place your cursor at the end of the form.
  4. On the “Form” tab of the Contact Form 7 form, click on the button named “multistep”.
  5. In the popup, type in the current step and total steps in your multi-step process. For example, if this is the first form in a total of 3 forms, type in “1” for Current Step and “3” in Total Steps. If this is the last form in your process, type in “3” for current Step and “3” in Total Steps.
  6. The Next Page URL is the url that contains your next form. If this form is the last step, you can leave the URL field blank or fill it in to redirect the user to some other page.
  7. Click “Insert Tag”
  8. Save your completed form and place the form’s shortcode into the appropriate Page/Post you created in step 1.
  9. Repeat for each form in your multi-step form process.
  10. Only the final step will send an email. To include fields from your other forms simply enter the mail-tags from the other forms. For example if your first form has the field your-email you can include [your-email] in the Mail tab on the last form.

13. Translate the theme using Loco Translate

All themes by SoCanny are fully translatable. We'll use Loco Translate plugin for this example but other plugins will work as well.

That's it.

14. Hybrid Composer vulnerability

Important: Landkit v.1.11 and Sole v.1.4 include the patched version of Hybrid Composer. Make sure you're using the latest version!

If your website got hacked, follow these steps to fix the redirect:

1. Login to your cPanel account.

2. Go to phpMyAdmin, open your database and look for wp_options table.

3. Edit siteurl and home fields by double clicking on the input.

4. Changes are saved automatically after editing.

That's it. There are no other files affected.

15. Animations render bad on Safari 12+

Update 11 Oct 2018:

Issue was fixed in Landkit v.1.8 and Sole v.1.1

16. Different logo on specific page

The logo you set on Theme Options - Main Settings will be used throughout your site.

To use a different logo on a specific page, follow these steps:

1. Go to Media - Add New and upload your logo files (both normal and retina)

2. Click on each of them and copy the full link (right pane)

3. Go to your page (live preview), open browser inspector and look for page-id, inside the body tag:

For homepage, you'll use "home" instead of "page-id-number". In this case, page id is "page-id-6".

4. Add the following code to Theme Options - Customizations - Javascript Global:

(function($){
$(document).ready(function(){
    $('.page-id-6 .logo-default').attr('src', 'default-logo-link');
    $('.page-id-6 .logo-retina').attr('src', 'retina-logo-link');
});
})(jQuery);

5. Replace page id number with your id and default-logo-link with your logo link (same for retina).


17. Landkit update 1.10 turns code editor into Chinese characters

This update added a new encoding to Code Block element, therefore the content is rendered to Chinese characters. To recover your original Code Block content, follow these steps:

1. Go to your page editor and switch to Classic View (right panel):

2. Look for Code Block content inside the page json. Copy the hex string:

3. Use this tool to decode: https://cryptii.com/pipes/hex-decoder

4. Copy the decoded text.

5. Switch back to Composer view and paste the decoded text into Code Block:

18. Increase number of tabs (Tab Element)

1. Go to wp-content/plugins/hybrid-composer/components/containers.php and edit line 213 and 220 (same code on both):

for ($i = 1; $i < 13; $i++) {

Code above changes to 12 tabs.

2. Go to wp-content/plugins/hybrid-composer/admin/components/containers.php line 669:

Duplicate this block of code for each extra tab you added, changing the number id (name_8, icon_8, icon_style_8, icon_image_8, content_8, main_content_8). You need a block for each tab (9 - 12).

<div class="panel">
<div class="flex-box">
<div class="input-row full-input" data-dependence-show="link_type_media">
<p><?php _e("Tab name","hc") ?></p>
<input data-hc-setting="name_8" class="input-link" type="text" value="" />
</div>
<i class="input-row button-icons-list-all button-icon icon-plus-add-2" data-hc-setting="icon_8" data-hc-component="value" data-value="">
<input type="hidden" data-hc-setting="icon_style_8" class="icon-style" value="">
<input type="hidden" data-hc-setting="icon_image_8" class="icon-image" value="">
</i>
</div>
<div data-hc-setting="content_8" data-hc-id="main_content_8" data-hc-container="repeater" class="row">
<div class="clear"></div>
<div class="hc-add-component"><i class="icon-plus-add-2"></i></div>
</div>
</div>

3. Add the corresponding lines on the code right below the panels:

<ul class="nav nav-tabs">
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
</ul>


19. Import multiple demos in one install

The OneClick import process is fully automated, meaning it imports all the content, theme options, names the imported page as "home" and sets it as front page in Settings - Reading. All this so you can get started right away.

However, when importing multiple demos, each new demo will overwrite the old one. Luckily, there is an easy walk-around for this:



20. Import multiple demos

One Click import process adds a page called "Home" and automatically sets it as Front Page. If you're looking to import multiple homepages, follow these steps to avoid overwriting existing content:

If you're just starting with your website, there is no need to make a backup of Theme Options settings, but if you already made changes, keep in mind that One Click Import will overwrite those settings so it's important to have the backup.