Forum Replies Created

Viewing 30 posts - 1 through 30 (of 108 total)
  • Author
  • in reply to: Layerslider video background not working on Chrome #1076015

    Hi Ismael,
    The Site ready has SSL Certificate with HTTPS://

    I have force HTTPS in WordPress config file – this previously did not make a difference.
    i’ll try the suggested plugin to see if that removes the js warning.

    The issue for me ATM is not the JS warning – but that I can’t stream two Youtube Videos on the one page. i.e WP Layerslider video Background and ALB Colour section background video.

    Since you can reproduce this locally can you upgrade the WP Layerslider to 6.8.1 version on the local version to see if this fixes the issue.
    The Change Log seems to suggest this may have been fixed.

    in reply to: Displaying HTML Entities as a code snippet #1075341

    Hi Gunter,

    I was considering ditching ABL altogether and writing the blog articles in WP classic editor – as pasted HTML entities ARE NOT decoded.

    I tested several plugins for embedding code snippets.

    1. PastaCode – decoded the html entities and displayed the email address. – so that didn’t work

    2. oEmbed Gist – h t t p s : / /
    On the other hand, oEmbed Gist showed the GIST snippet as encoded html entities – So that’s my work around solution 2

    My final work around Solution 1
    STEP 1 – Install your plugin – h t t p s : / /
    STEP 2 – Edit the Array

    $this->translate = array(
    				                '#amp;#'          => '&#',
    						'#lt#'		=> '<',
    						'#gt#'		=> '>',
    						'#amp#'		=> '&',
    						'#91#'		=> '&lsqb;',
    						'#93#'		=> '&rsqb;',
    						'#quot#'		=> '&quot;',
    						'#34#'		=> "&apos;",
    						'#br#'		=> '<br/>',
    						'#p#'		=> "<<p>>",

    STEP 3 – Encode the html entity using – h t t p : / /
    STEP 4 – Copy Paste Text and do a FIND => ‘&#’ and REPLACE =>’#amp;#’
    STEP 5 – Copy Paste the new string into the content editor and wrap in < pre > < / pre > tags
    STEP 6 – Update post and re-updated post does not decode html entities – Great!
    STEP 7 – On the front end the plugin Avia Special Character Converter Plugin translates this unique string #amp;# to &#

    As the translate filter is global( i.e it will effect all content ), I wanted to restrict this translate functions to specific elements – hence the unique string that would not normally appear in general content.

    Another thought would be to extend the plugin at a later time – to check for a class on the dom object before translating.
    That way you could have different array translations based on object class. In ALB just add the appropriate Custom Class to the Text Block.

    This solves the issue for now and I can get back to writing my blog article with inline html entity code snippets.

    in reply to: Displaying HTML Entities as a code snippet #1074961

    (Response Private – screen cast video)

    As shown without ALB html entities show fine on the post, even after editing and re publishing.

    However, once you activate ALB – html entities are converted back to readably characters.
    I want to maintain the encoded html characters as a code snippet in the post.

    The only way this works – is to paste the encoded html entities in the visual editor with < pre >
    and update only once – > html entities display fine
    However, If you edit/update the post again – >html entities are converted back to readably characters.

    Not very practical.

    This solution was the only work around in 2015
    h t t p s : / /
    We are aware of the issue and it is currently under investigation. For the mean time, as a temporary workaround, please add the html entity code once you’re totally done with the page. It is only converted to the actual symbols once you re-update the page. Sorry for the inconvenience.

    I can’t believe 4 years later – this is still the case – there is not a better solution.

    I am hoping you can come back with a working method – where html entities are not decoded back to visual characters in ALB after post re-update.

    in reply to: Displaying HTML Entities as a code snippet #1074786

    Hi yes of course I know about text mode in the editor.

    I am writing a blog article comparing different obfuscation methods.

    I need to show the code so I can explain pros and cons.

    1. In content editor switch to text mode
    2. paste the html encode entities
    3. switch back to visual
    4. Update the post
    5. everything displays as it should
    6. Edit the post and the html entities are converted back to html characters.

    this is the issue

    Not the obfuscation plugin



    All this was caused by the new WordPress Gutenberg Editor

    I gather ENFOLD is still not fully compatible after reading a few post on the subject

    For other people – the solution is to install Classic Editor by WordPress Contributors
    open each page/post and update!

    Kriesi, may be you could include a ENFOLD notification to users that the classic editor plugin is required until you resolve your compatibility issues

    cheers : )

    in reply to: Layerslider video background not working on Chrome #1073483

    Hi Ismael,

    Ok this has taken 4 hours to narrow down.

    I have upgrade the SERVER DEV site
    WP 5.1
    PHP 7.2
    ENFOLD 4.5.4

    enfold-child is deactivated with enfold parent theme active
    No plugins
    No custom Quick css

    Open a fresh incognito window
    On first load the WP LayerSlider [HOME YOUTUBE] video background is visible
    Scroll to the bottom of the home page the HOW TO GUIDES – VIEW DIY VIDEOS colour section (Youtube) background does not play
    Stay at the bottom of the home page and do a hard refresh of the browser a couple of times.
    Now the HOW TO GUIDES colour section background video plays
    Now Scroll to the top of the page
    The WP LayerSlider [HOME YOUTUBE] video Background – nothing visible accept spinning loading icon.

    I can consistently reproduce this in Chrome and Firefox on a Mac Min and Mac Book Pro

    If I change the WP Layerslider at the top of the home page to [HOME LOCAL VIDEO]

    Both WP LayerSlider [HOME LOCAL VIDEO] video background && HOW TO GUIDES colour section background videos BOTH PLAY!

    There must be some kind of conflict or precedence to which background video is streamed from Youtube.

    To double check this, I have created a fresh install test environment. (Response Private)

    WP LayerSlider Youtube Background Video –> Video Does Not Play
    ENFOLD ALB Colour section Youtube Background Video –> Video Plays

    ENFOLD ALB Colour section Youtube Background Video –> Video Plays
    ENFOLD ALB Colour section Youtube Background Video –> Video Plays

    So specifically this narrows the issue to conflict of having both of the following on one page
    WP LayerSlider Youtube Background Video && ENFOLD ALB Colour section Youtube Background Video

    Let me know if you can reproduce this bug locally

    in reply to: Layerslider video background not working on Chrome #1071611

    Hi Ismael,

    Still have not resolved this issue.
    WP 5.0.3 or WP 5.1

    Just installed a new .local version to do presentation with client on my laptop. And now both Youtube and Self Hosted Videos don’t play in WP LayerSlider.

    Also noted – When Editing LayerSlider on the new local layer slider background <divs> are empty.
    <div class="ls-background-videos"></div>
    <div class="ls-slide-backgrounds"></div>
    LayerSlider is saving changes – however the output does not update – cleared cache and incognito.

    I have delete all other SLIDES and now only have the one slide with self hosted background video – NO YOUTUBE!
    Console Log is still showing error
    The target origin provided (‘https //’) does not match the recipient window’s origin



    WP LayerSlider is at version 6.8.1, However the latest version of Enfold 4.5.4 only has WP LayerSlider 6.7.6

    Hoping you can release a version of Enfolds with the latest WP LayerSlider

    in reply to: Layerslider video background not working on Chrome #1054681

    Hi Ismael,

    I am having the same issues with MAC Chrome.

    As Layerslider WP is bundled with Enfolds – this is my only option for support

    Google seems to think this issue is resolved with previous chrome update.

    I am running
    WordPress 5.0.3
    Enfold – You are running the latest version! (4.5.2)
    Chrome – Version 71.0.3578.98 (Official Build) (64-bit)
    LayerSlider WP – 6.7.6

    On the home page I have a Layerslider with a background video. ( The Video shows in the Layerslider Editor and auto plays) However, on the live site the video does not load. I just get a spinning Ajax wheel of death.

    Console log show error:

    www-widgetapi.js:100 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').
    h.B @ www-widgetapi.js:100

    On the same page I have Video the opens in a modal video and auto plays.
    a Colour Section Video Background that also loads and auto plays.

    It seems related just to the Video Background on the LayerSlider WP – as all other video elements play just fine.

    There is no audio in the Video and Yes volume is set to Zero and &mute=1; parameter is added to the <iframe src=

    Trouble shooting…
    I have disabled all plugins
    Used Parent Theme Enfolds instead of my customised Child Theme.

    Error still persists.

    I have tried all methods of adding the youtube hosted video – youtube watch url URL / URL / Youtube Share <embed> code
    On pasting the youtube embed code into the layer slider I have tried multiple combinations of youtube embed parameters.
    I even copied the html source <iframe code from the page source containing an Advance layout Builder Colour Section background video – with all the parameters – then changing the video Play ID accordingly.

    During trouble shooting I noticed the following:
    Safari (Version 10.1.2) and Firefox Developer (65.0b11 (64-bit)
    The Layerslider Background video loaded fine the first time – but after refreshing the page the video did not play.
    On the same page the Advanced Layout Builder Colour Section Background Video – Did not play.

    After changing the LayerSlider WP background video to self hosted – everything is working as expected.

    <video width="640" height="360" preload="metadata" autoplay>
    	<source src="/wp-content/uploads/2019/01/video-file.mp4" type="video/mp4">

    Code Examples:
    Layerslide code from URL

    <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

    LayerSlider WP background video – DOES NOT WORK IN ANY MAC BROWSER

    Youtube Video Embed Code

    <iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    LayerSlider WP background video – WORKS IN SAFARI ONLY

    Youtube Video Embed Code – added &autoplay=1&mute=1

    <iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    LayerSlider WP background video – DOES NOT WORK IN ANY MAC BROWSER

    Extended Parameters

    <iframe height="1600" width="900" data-autoplay="1" data-volume="0" data-mute="1" data-videoid="youtubevideoid" data-hd="1" data-rel="0" data-wmode="opaque" data-loop="0" data-version="3" data-autohide="1" data-color="white" data-controls="0" data-showinfo="0" data-iv_load_policy="3" data-original_url="" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src=""></iframe>

    LayerSlider WP background video – WORKS ON FIRST LOAD – SAFARI and FIREFOX
    On same page Colour Section Video Background did not load/auto play
    ON REFRESH/RELOAD of the PAGE – LayerSlider WP background video PLAYBACK FAILED
    On same page Colour Section Video Background now auto playing

    CHROME sometime plays and some time does not play the Layerslider video background.
    I cannot work out a stable reason why this happens.

    There is some information here about loading of the DOM elements out of order which may be the ultimate cause of a delay problem
    also an old thread on the same issue!topic/youtube-api-gdata/XqaUDWkQXcw

    Related ENFOLD support threads

    I hope I’m not alone and support can work with LAYERSLDER WP to resolve this issue

    FYI – yes I also tried varying Chrome browser settings :: chrome://flags/#autoplay-policy

    in reply to: Image hotspot Tooltips with click – again – again 2018 #1047985

    The Final Interim Solution.

    Copy avia.js from the Parent Theme enfold > js > avia.js to the Child Theme enfold-child > js > avia.js

    Then in the child theme functions.php file enqueue avia.js to load from the new location

    function wp_change_aviajs() {
       wp_dequeue_script( 'avia-default' );
       wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
    add_action( 'wp_enqueue_scripts', 'wp_change_aviajs', 100 );

    enfold-child open and edit the avia.js file

    At the top of the file replace/add the following:

        "use strict";
        // EXTENSION ----------------------------------------------------------------
    	// KEEP IN OUTER SCOPE i.e. not in doc ready
        var active_hotspot = null;
        var active_hotspot_previous = null;
        function guidGenerator() {
            function s4() {
                return Math.floor((1 + Math.random()) * 0x10000)
            return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
        $('body').on('mouseover', 'div.av-image-hotspot.av-display-hotspot', function (e) {
            var guid = guidGenerator();
            if (active_hotspot && active_hotspot !== $(this).attr('data-guid') )  {
                active_hotspot_previous = active_hotspot;
            active_hotspot = guid;
            $(this).attr('data-guid', guid);
        $('body').on('mouseleave', 'div.av-image-hotspot.av-display-hotspot', function (e) {
            if ( $(this).attr('data-guid') === active_hotspot ) {
                return false;
        // EXTENSION ----------------------------------------------------------------

    Scroll down to the following Function line 1645

            display_tooltip: function(e)

    add this replace/add this code:

          display_tooltip: function(e)
            	// EXTENSION ----------------------------------------------------------------
                if ( active_hotspot_previous !== $(e.currentTarget).attr('data-guid') ) {
                if ( $(e.currentTarget).hasClass('open') ) {
                    return false;
                // EXTENSION ----------------------------------------------------------------        	
                var _self		= this,

    Avia Layout Builder set the Image Hot Spot to Show Tooltips – On Mouse Hover

    The hotspot tooltip will show on mouse hover and remain visible, allowing the user to interact with hotspot content buttons, links etc.
    Only one hot spot tooltip will remain visible. When you hover a second hotspot the first hotspot tooltip will hide and the new hotspot tooltip will be visible.

    Hi Ismael,

    Thanks for picking that up.
    I gather the closing curly bracket was left over from other @media only screen and everything after that stopped loading.
    Makes me look like a complete novice for missing that!
    My Bad.

    Works from enfold-child/style.css

    All good!

    Thanks for the continued Support.

    in reply to: Image hotspot Tooltips with click – again – again 2018 #1032384

    HI blafoley,
    Thanks for sharing your solution.

    I disabled all my customisations for this and implemented your code in functions.php – Set Hotspots to ‘always show’, However the widow ready function did not hide the tooltips on the page load. I had to click each hotspot to closed the open tooltip. Once closed the click function worked well. I also tried loading this via ‘wp_header` with out effect.

    Overriding the functionality via jQuery has given me some ideas though. Thanks ; )
    I have my PHP Guy looking into options and will report back once we have a solution.

    Hi details provided

    in reply to: Google font Flash of Unstyled Text (FOUT) issue #1025755

    Hi Victoria,

    This was solved by activating Siteground’s SuperCache solution with Cloud flare.

    That, said, it still should not occur.

    Put this one on the back burner to investigate with the next release.

    thanks ; )

    in reply to: Image hotspot Tooltips with click – again – again 2018 #1025216

    I have had a hack at the JS in avia.js from within the child theme and achieved 90% of the functionality. example provide privately.
    LINE 2219

            bind_events: function()
    	        var click_tooltips		= '.av-click-tooltip [data-'']';
    			this.scope.on(this.options.event + ' mouseenter', click_tooltips, $.proxy( this.start_countdown, this) );
    			   if(this.options.event != 'click')
    					this.scope.on('mousedown', click_tooltips, $.proxy( this.hide_tooltip, this) );
    					this.body.on('mouseleave', click_tooltips, $.proxy( this.hide_tooltip, this) );

    mouseenter the hotspot number = tool tip is shown
    mouseleave the hotspot number= tool tip remains open
    mouseenter the hotspot number = tool tip is shown again with a re animated flicker
    Click the hotspot number = tool tip is closed

    This allows for interaction of elements within the tool tip. Not Ideal but it’s a quick hack to show the client.
    I could not work out how to activate the tooltip on ‘click’ as avia-tooltips.js is very similar to avia.js (lines 1565 – 1824 ) have very similar functions. with default event: ‘mouseenter’

    Q1. Please advise which js overrides the other for the image hot spot ‘mouseenter’

    Q2. avia.js line 1570 delayHide: 0, this variable is not used in the js – at all. in avia.js or avia-tooltips.js
    It would be fair to assume that by including the variable delayHide (set at a high value) on the mouseleave event – the tool tip would remain open for a set amount of time. Again allowing for interaction of the html elements in the tooltip.

    Q3. Ultimately I’d like to remove the flicker on the second mouseenter by changing this to a click event to open and close the tool tip. and only have one tooltip open at one time. i.e if another hotspot was clicked the current open tooltip would close and the new tooltip would open.

    Coding Suggestions greatly appreciated

    in reply to: Google font Flash of Unstyled Text (FOUT) issue #1024653

    Hi Victoria,

    I’m sure id know if it was my internet connection. Any way speed test results shared privately.

    As I was very specific with my browser versions and operating system – I should ask you what is your test environment? As I have proven that it exists in 2 OSX operating systems on Chrome and Firefox.

    I added the preconnect to the <head> in the child theme head.php

    <link type="text/css" rel="preconnect" href="//,400,700%7COpen+Sans:400,600" id="avia-google-webfont" crossorigin="anonymous">

    However, this had no effect on the FOUT.

    I also edited the parent theme ENFOLD > framework > php > class-style-generator.php
    Lines 495 – 498 to the following:

    f.type 	= 'text/css';
    f.rel 	= 'preconnect';
    f.href 	= '//".apply_filters('avf_google_fontlist', $this->google_fontlist)."'; 	= 'avia-google-webfont';
    f.crossOrigin = 'anonymous';

    However, this did not work either, as the rel=stylesheet was not declared on the font <a href and the theme did not change the fonts.

    I also downloaded the fonts from google to host locally. Importing the fonts into Enfold ( ) however, again this had no effect on the FOUT in Chrome and Firefox.

    Interesting enough, the FOUT does not occur in any Safari browser. regardless of load speed (throttled)

    I have also provided a link to an additional video of the FOUT in FIREFOX


    Technical Considerations
    Google Chrome
    Chrome renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

    Mozilla Firefox
    Firefox first displays the text in the default font, and then re-renders text in the font once it has loaded. This behavior is known as a “flash of unstyled text.”

    Apple Safari
    Safari renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

    in reply to: Google font Flash of Unstyled Text (FOUT) issue #1023924
    This reply has been marked as private.

    Hi Lennone,

    Things have obviously changed in the past 2 years since this post.

    You can remove this by editing your (.htaccess file) HTTP headers to set expiry times for certain types of files.

    Read more here:
    https:// gtmetrix (dot) com / leverage-browser-caching.html

    in reply to: Open Gallery from a link or sigle image #1004257

    Hi Bridster,

    The original Manual workaround at the beginning of the thread still works.

    If you do the following without STEP 1 – The text block HTML will still work, However, you won’t be able to see or re-edit the HTML after you have published. So do Step 1 First. That way you can re-edit the HTML in the Debug Window below the Layout Builder.

    STEP 1
    Add AVAI LAYOUT BUILDER DEBUG MODE code to you CHILD THEME functions.php file.

    Avia builder debug mode
    add_action( 'avia_builder_mode', "builder_set_debug" );
    function builder_set_debug() {
    	return "debug";

    STEP 2
    On the page with the gallery add a mannual list of links to images in your media gallery.
    Add an Avia Layout Builder TEXT BLOCK Element. Change from Visual to Text mode.
    The trick here is to add rel=”prettyPhoto[gal2]” to the <a href
    The First Image is outside of the hidden <div>

    <a rel="prettyPhoto[gal2]" title="photo 1 title" href="">test lightbox text link</a>
    <div style="display:hidden;">
    <a rel="prettyPhoto[gal2]" title="photo 2 title" href=""></a>
    <a rel="prettyPhoto[gal2]" title="photo 3 title" href=""></a>
    <a rel="prettyPhoto[gal2]" title="photo 4 title" href=""></a>

    enfolds (dot) huxburyquinn (dot) com (dot) au (/) lightbox-text-link

    in reply to: Open Gallery from a link or sigle image #1003843

    Hi Bridster,

    Q1. Popup content page – It will be a page with the gallery and then you will have to click again to open the gallery.

    Q2. The Shortcode is entered not in a code block but just as text. switch from visual mode to text mode in the text editor.
    see my tutorial here:

    enfolds (dot) huxburyquinn (dot) com (dot) au (/) 2018 (/) 02 (/) 28 (/) enfolds-content-pop-up

    in reply to: Open Gallery from a link or sigle image #1003170

    Hi Birdster,

    Looks like Enfolds have changed the way the associated gallery data-rel works.

    Try this solution here:

    Or see if my popup content Shortcode is of any use

    Hi Basillis,

    Yep Enfolds 4.3 update fixed the issue with WooCommerce products. Thanks!

    Great job on the new Enfolds 4.3 release.

    I’ve been pushing for a performance improvement for some time now.

    Well done Kriesi team.
    I look forward to your continued support.

    This reply has been marked as private.


    I decided to do some comprehensive testing on the DEVELOPMENT SITE

    WOTCACHE After loading the PRESET for ENFOLDS
    1. Front page – On page load first render there is a CSS flicker
    2. Front page – The full-page Slider – not rendered
    3. Front page – Testimonials slider – not rendered
    4. Front Page – Gravity Form – not rendered
    5. Page Content – Animated images and galleries – not rendered
    6. Page Content – Portfolio Grid – not rendered
    the list goes on.

    Reset the WOT Cache Preset to GENERAL
    Make the following edits
    Minify [ √ ] HTML / [ √ ] CSS

    COMBINE CSS [ √ ]
    Exclude CSS

    ASYNC CSS [ ] don’t tick



    EXCLUDE PAGES – empty



    MOVE JS [ √ ]

    COMBINE JS [ √ ]
    EXCLUDE JS [ ] empty

    ADD TRY-CATCH WRAPPING [ ] don’t tick

    DEFER JAVASCRIPT [ ] don’t tick
    EXCLUDE PAGES – empty




    Let me know how you go with these settings.

    Back again! Some healthy discussion here.

    I recently purchased WotCache for a client and tested it out. The default preset for Enfolds was disappointing.
    After resetting and doing manual tweaks, I got some impressive results in the high 90’s. However, several other issues surfaced.
    1. Admin Bar Disappeared. As per the preset – Be sure to exclude CSS: admin-bar.min.css and dashicons.min.css
    2. Minify JS worked fine, however, for whatever reason I could not track down – WotCache also minified some shortcode inline js breaking the JS cookie. It seems to be all or nothing. For now, I have disabled Minify JS. I am working on segmenting the shortcode inline JS to an external file – so that it could be excluded.
    3. The compression minify engine – results were good – however, on testing with Pagespeed insights, GTMetrix, WebPageTest and Pingdom. All suggested that the CSS and JS could be reduced further. Most of these sites allow you to download optimised assets. What is the go here? There must be a reason why WotCache is using a particular minify engine.
    4. With Cache activated, I soon noticed 404 errors on editing and publishing pages.
    5. The WOT CACHE spin icon was always present at the bottom of the page in admin
    6. Clearing the Cache would time out and the spinning icon would not go away
    7. On publishing an update, the cache for that post was not auto updated. The client found this very annoying – having to constantly manually clear the cache.

    After dealing with these issues – In this instance – have disabled the WotCache plugin.
    I’m not saying that the plugin doesn’t work, but with a few improvements, performance could be better.
    Hopefully, the guys at WotCache can resolve these issues with future updates.

    I currently host over 20 sites with DREAMHOST a USA hosting provider. I am in Australia and so are my clients.
    With most speed test from US servers, everything is lightning fast. However, when speed testing with an Australian severs first-byte is the main issue.
    The use of a CDN would resolve this issue, however, with Dreamhost, at the moment, there is a restriction with the Cloudflare that the domain must force WWW – which creates the “too many redirects issue”.
    And I believe DreamHost has saturated their Shared Server Hosting. With Vanilla install of WordPress and Enfolds with no traffic, the site automatically exceeds Dreamhosts’ CPU usage. Dreamhost is forcing users to upgrade to DreamPress or a VPS.

    On the back of this, I am trialling hosting with SiteGround – and with a vanilla install of Enfolds out of the box with no CDN, using Sydney as my speed test server location, For first-byte I get a yellow “C” on Siteground instead of a red”F” from Dreamhost.
    SiteGound has built-in server caching solution, SuperCache –

    I have yet to do further testing with Enfolds on the SiteGound Server. I will report back later with a more resolved conclusion.

    I hope this helps.

    This reply has been marked as private.
    This reply has been marked as private.

    Hi Allia19
    Sorry to hear you are having problems.

    On a child theme, you do not copy the ‘functions.php’ file from the parent ENFOLD theme.

    Please go here to download the child theme

    FTP – Upload the Child theme to your /wp-content/themes/

    WP – Activate the “Enfold Child” Theme in Dashboard>Appearance>Themes

    FTP – Open the ‘functions.php’ file in Enfold Child via text editor – Paste in the latest code above from ( February 28, 2018 at 4:03 am) above.

    FTP Open ‘style.css’ in Enfold Child via text editor – Paste in the CSS code above.

    WP – Add a page and get the ID of the page you wish to pop-up i.e. 4920

    WP – On the page for the pop-up, paste in your shortcode like this.
    ‘[mfp_post_popup post_slug_id=”4920″ popup_id=”popup_1″ link_text=”open me”]’

    I only posted the new code yesterday – so it fully tested and working on my client website. So it should be right.

    Let me know if you have any further problems with your implementation.



    PHP extract() function is being depreciated – so I have updated the code below

    	SHORTCODE  - obfuscate email
    	[obfuscate_email email=" (Email address hidden if logged out) " subject="Test Subject" body="Message with line returns
    	line 2
    	line 3" text="Click to Email" class="custom_class"]
    function obfuscate_email_shortcode( $atts ){
    //default values
    	$atts = shortcode_atts([
    		'email' => ' (Email address hidden if logged out) ',
    		'subject' => 'Website Email Enquiry',
    		'text' => 'Email Us',
    		'body' => '',
    		'class' => 'email_hide'
    	], $atts );
    //split the email address so it can't be read by spam bots
    	$email_parts = explode( '@', $atts['email'], 2 );
    //recreate the js url
    	$url = sprintf(
    		"javascript:window.location.href='mailto:' + [ '%s', '%s' ].join('@') + '?subject=%s&body=%s'",
    		str_replace( '<br />', '%250D%250A', $atts['body'] )
    //print to screen
    	return sprintf(
    		'<a href="%s" class="%s">%s</a>',
    add_shortcode( 'obfuscate_email', 'obfuscate_email_shortcode' );


    PHP extract() function is being depreciated – so I have updated the code below

    I have added additional session timer cookie to automatically pop-up after a time period.
    shortcode option: popup_delay="" is optional.

    example: [mfp_post_popup post_slug_id=’1′ popup_id=’join’ link_text=’Subscribe’ popup_delay=’15’]

    function inline_popup_enabler(){
             * JavaScript Cookie v2.2.0
             * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
             * Released under the MIT license
            !function(e){var n;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var t=window.Cookies,o=window.Cookies=e();o.noConflict=function(){return window.Cookies=t,o}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var t=arguments[e];for(var o in t)n[o]=t[o]}return n}return function n(t){function o(n,r,i){if("undefined"!=typeof document){if(arguments.length>1){"number"==typeof(i=e({path:"/"},o.defaults,i)).expires&&(i.expires=new Date(1*new Date+864e5*i.expires)),i.expires=i.expires?i.expires.toUTCString():"";try{var c=JSON.stringify(r);/^[\{\[]/.test(c)&&(r=c)}catch(e){}r=t.write?t.write(r,n):encodeURIComponent(String(r)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=encodeURIComponent(String(n)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var f="";for(var a in i)i[a]&&(f+="; "+a,!0!==i[a]&&(f+="="+i[a].split(";")[0]));return document.cookie=n+"="+r+f}for(var p={},u=function(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)},s=document.cookie?document.cookie.split("; "):[],d=0;d<s.length;d++){var l=s[d].split("="),C=l.slice(1).join("=");this.json||'"'!==C.charAt(0)||(C=C.slice(1,-1));try{var g=u(l[0]);if(C=(||t)(C,g)||u(C),this.json)try{C=JSON.parse(C)}catch(e){}if(p[g]=C,n===g)break}catch(e){}}return n?p[n]:p}}return o.set=o,o.get=function(e){return,e)},o.getJSON=function(){return o.apply({json:!0},arguments)},o.remove=function(n,t){o(n,"",e(t,{expires:-1}))},o.defaults={},o.withConverter=n,o}(function(){})});
                $( document ).ready( function(){
                    var popup_link = $('.inline_popup');
                    var delay = 'delay');
                    var cookieName = 'MfpHasDisplayedPopup';
                        midClick: true
                    if( typeof Cookies.get( cookieName ) === 'undefined' && typeof delay !== 'undefined' ){
                        setTimeout( function(){
                            Cookies.set( cookieName , '1' );
                        }, parseInt( delay ) * 1000 )
                } );
    add_action('wp_footer', 'inline_popup_enabler');
    	[mfp_post_popup post_slug_id="" popup_id="" link_text="" custom_class="" popup_delay=""]
    function mfp_post_popup_shortcode( $atts ){
    	//default values
    	$atts = shortcode_atts( [
    		'post_slug_id' => '',
    		'popup_id'     => '',
    		'link_text'    => 'hello',
    		'mfp_hide'     => 'mfp-hide',
    		'custom_class' => 'mfp_popup_content',
    		'popup_delay'  => false,
    	], $atts );
    	//get post content
    	$pop_slug = get_post( $atts['post_slug_id'] );
    	$content = apply_filters( 'the_content', $pop_slug->post_content );
    	//output post content into the footer before the closing body tag - content is hidden
    	add_action('wp_footer', function() use( $content, $atts ) {
    		echo sprintf(
    			'<div id="%s" class="%s %s main_color">%s</div>',
    	//output popup link
    	return sprintf(
    		'<a class="inline_popup" %s href="#%s">%s</a>',
    		( $atts['popup_delay'] ) ? 'data-delay="' . esc_attr( $atts['popup_delay'] ) . '"' : '' ,
    add_shortcode( 'mfp_post_popup', 'mfp_post_popup_shortcode' );

    How to include a Body with multiple lines in a mailto: link

    Replace the //default values code section with the code below:

    //default values
        extract( shortcode_atts([
            'email' => ' (Email address hidden if logged out) ',
            'subject' => 'Website Email Enquiry',
            'text' => 'Email Us',
            'body' => '',
            'class' => 'custom_class'        
        ], $atts ) );

    Then replace the sprintf output with the following:

    $url = sprintf(
            "javascript:window.location.href='mailto:' + [ '%s', '%s' ].join('@') + '?subject=%s&body=%s'",
            str_replace( '<br />', '%250D%250A', $body )

    Stackoverflow – insert a line break in mailto body
    \r\n and %0D%0A within the shortcode body=”line 1 example\r\nline 2 example” OR body=”line 1 example%0D%0Aline 2 example” did not work within the shortcode and in modern email applications.

    After troubleshooting for 3 hours – I worked out that urlencode($body) honoured line returns. However the body output had replaced spaces with a plus’s ‘+’.

    Not very readable.

    So in the updated code we search for <br /> in the body content and replace %0D%0A with the urlencode format %250D%250A to maintain the line returns.

    • This reply was modified 2 years, 4 months ago by  HuxburyQuinn.
Viewing 30 posts - 1 through 30 (of 108 total)