Been working for an Australian customer more recently and for several of her website she use the Thrive Architect Page Builder. Not a bad page builder though I prefer Elementor. Though both are not bad and have similar downsides I bumped into one main pain in the b*tt using Thrive Architect.
Export Trap
I had built up a great page in relatively little time. It was a large landing page with a lot of images, text, a table and loads of pricing and review buttons. Then I saw a save as template option and was like great. This way I can save it as a template and export it. And then reuse it on the live website. Then I found out only landing pages can be exported. And templates or content templates cannot.
Workarounds
The only way I could export it all was by creating a unique WordPress user, exporting the pages under that user or opening the Thrive Architect generated page in html view and copy all over. I decided to do the later. Only other pain there again was that all internal urls needed the TLD changed from test to com.
Final Notes
Why they did not have a page export option or content template option? Not sure. Seems they hadn’t come around doing just that. If I had known all this from the start I would have started with a landing page and customized, saved and exported that. For me this was however too late.
Each week we answer one or multiple Upwork job vacancy questions here on WP Villain. Here is Post I on a WordPress theme built with Visual Composer that has become slow and needs to be converted into a faster site with a better theme setup.
We are currently running a WordPress theme that was heavily modified CSS and utilizes Visual Composer. We need someone to remake a theme using the design we currently have that does not use VC or performs better for Google speed.
Visual Composer
Visual Composer is a great page builder to quickly set up beautiful pages but it takes up a lot of space with short codes and special tags, embedded code, scripts an such. And all this in the end makes many pages on WordPress websites very slow. And, if you ever want to move away from them you are stuck with a lot of custom code tags in your posts and pages that won’t work anymore and will just be printed. It also often conflicts with plugins like Yoast SEO or at least has in the past. That is why we decided a long time ago to dump Visual Composer and either go for a custom code theme or use better page or site builders such as Elementor or Oxygen.
Migrating from Visual Composer
Migrating from Visual Composer to another page builder or simply the WordPress WYSIWYG Editor or Gutenberg is painful. This as it will leave behind all its short codes. And all the functionality that was loaded with it will disappear. So always do this with a local copy and clean it up and find replacement for what was used before.
Theme Choice
You will be able to choose a new turnkey theme or start out with a custom theme, a theme from scratch. The latter is better as you will be able to customize all but will require a lot more work as all will be custom. The former is set up for a large part already so will give you a head start.
Sage Starter Theme
The Sage starter theme is a wonder base theme that works well with many CSS frameworks such as Tailwind, Bootstrap and Foundation, works with a Laravel style file system and view caching and that allows to quickly build solid themes that load fast. It also has built in tools to optimize code, images and concatenate and minify ll the code to loads things way faster. So this would be an option. But it would require quite a bit of work to convert heavily Visual Composer customized pages into custom theme pages. And there may not be budget for that.
Jupiter X and Elementor
With the Jupiter X theme and Template and the use of Elementor Page Builder we would be able to build better pages more quickly that should also load better. Jupiter X offers many templates out of the box that are a great start for many businesses. They also offer a nice range of plugins that make our lives easier. Plugins to add custom post types, custom fields, sliders and much more. It would still take quite some time, but probably less than doing a theme from scratch. Will it be better? It will be better than your VC setup for sure, but the Sage setup will be better and faster.
Choices to make
So what should you choose? A custom theme, one with Sage working with us or a ready made theme we will customize into a site like your current with Elementor? Well, that depends on the budget. A Sage set up will be more work as it will be a new customized theme, possibly using Elementor or Advanced Custom Field, but built form scratch. When you start with Jupiter X you will have a base and styles to work with and you can customize those. You should have an advantage with existing layouts. This depends on how close your base template is to the site you currently have though.
Main Take
So can Jupiter X match site quite well layout wise and or style wise? Well, if so go for that. If not go for the Sage starter theme. We believe in the end Sage will pay off as it will be tailor made, swift and completely as you want it. With Jupiter X as you have a base and several plugins including a page builder that is always somewhat tougher and you are more limited by the foundation you start with. Sage is more of a clean slate you can tailor to your satisfaction.
Mailchimp Comment Optin is a plugin we still use for some of our clients. Fixing Outdated Constructor Errors is needed to work with it properly. The error you get will be:
( ! ) Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; MCAPI has a deprecated constructor in /srv/www/domain.com/current/web/app/plugins/mailchimp-comment-optin/lib/classes/MCAPI.class.php on line 3
This refers to an issue with a class name being the same as a function name. This is an old way to add a constructor from back in the days. To deal with that issue on line 39 change:
As you see we added __construct and with that you initiate a constructor properly.
NB We recommend not using composer for updates anymore. This so your fixes won’t be removed by an outdated flawed version. Just add the plugin to your ignore list.
When I ran Algolia Search with WP Rocket I bumped into WP Rocket Algolia Search Conflict. With JavaScript Minification turned on I got several errors
JavaScript Errors
I got this error:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (head.js.map, line 0)
as well as these:
Uncaught ReferenceError: algoliasearch is not defined at HTMLDocument.<anonymous> ((index):94) at i (a9b476399a1ace75e81cb940be005dd2.js:2) at Object.fireWith [as resolveWith] (a9b476399a1ace75e81cb940be005dd2.js:2) at Function.ready (a9b476399a1ace75e81cb940be005dd2.js:2) at HTMLDocument.K (a9b476399a1ace75e81cb940be005dd2.js:2) (anonymous) @ (index):94 i @ a9b476399a1ace75e81cb940be005dd2.js:2 fireWith @ a9b476399a1ace75e81cb940be005dd2.js:2 ready @ a9b476399a1ace75e81cb940be005dd2.js:2 K @ a9b476399a1ace75e81cb940be005dd2.js:2
and these:
SyntaxError: expected expression, got '<'
ReferenceError: algoliaAutocomplete is not defined[Learn More] wpvilla.in:131:9
The latter two were the real culprit as a soon as these showed up the site would not load properly anymore. The files causing the issue seemed to be:
But I could no longer find a way to exclude these to make the error go away. Only CSS files could be excluded with the latest WP Rocket version it seemed:
So we have turned off minification of JS for now until we have found a solution to the problem. Either an exclusion somehow or Algolia JS Fix. We will keep you posted!
This until I was reminded by WP Rocket you have to have JavaScript minification turned on to see this box. Then we added the Algolia general script and autocomplete script we found. This however clearly was not enough as we still had the same issues.
Solution
Solution given by WP Rocket for the site not loading with Algolia JS minified in the end was to add this to exclude all Algolia JS:
So that means we probably somehow missed a script besides the ones I mentioned and this one was not excluded. It is now. Happy to have this work though! Again I would prefer to go without the inline script added by Algolia, but to solve that more time would be needed.
Let’s face it, WordPress built-in search kind of blows. You can improve search and boost sales with Algolia Search. It will upgrade search to site wide search including products and offers suggestions! And it really easy to get going.
Improving WordPress Search
Visitors as we know can be an impatient bunch. So if we allow them to find what they need faster they are more likely to buy. Also, if search provides suggestions on what is available he or she might also go to a product though he was searching for blog content he saw earlier.
Unfortunately WordPress search out of the box sucks. Even a plugin like Better Search does not quite cut it. Sure it searches not just post, but other post types as well such as pages, but still it does not suggest other possible content, nor is it really fast.
Algolia Search to the rescue
Lighting fast search with search suggestions Google style can now all be done with the power of Algolia Search. Algolia Search is used heavily in the Laravel community and at Laracasts.com and with good reason.
It is simply an amazing search integration. This is what is has on offer:
site-wide search
content suggestions while typing
suggests other options when the customer misspells something*
*Here example of misspelling where correct search term is suggested:
And while you could integrate Google Search this is way prettier as in really integrates well. Just test it on our site. On typing suggestions popup in a dropdown from where a customer can click on a link. Each suggestion is also displayed with a small thumbnail based on the featured image.
Better Conversion and Lower Bounce Rate
All these features will prove that you can boost sales with Algolia Search. It will suggest possible products to buy and it will show these directly while searching. That is pretty amazing isn’t it. Besides a sales boost it is also just a general retention boost. It will lower your bounce rate as visitors will with ease be able to find follow up content, products and services to look at.
Pricing
Let me just quote what they mentioned on the plugin description page here:
Algolia offers its Search as a Service provider on a incremental payment program, including a free Community Plan which includes 10,000 records & 100,000 indexing operations per month. Beyond that, plans start at $35/month.
So you can stay on the free community plan post registration – needed for key – as long as you do not pass 10,000 records & 10,000 indexing operations per month. Indexing wise you should not have issues with that anytime soon on most sites and neither should you record wise.
We have had 2,452 records and 3,311 indexing operations so far with with 150+ post and close to 30 pages. Also during the trial the sky’s the limit really.
Setup
First of all you need to install their plugin. That is easy as always.
Next you will need to register to get your
application id,
search-only api key and
admin api key
and get your trial up and running. The plugin will guide you with this.
Autocomplete
Then you need to choose the content you would like to be part of the searches and allow Algolia to index it under autocomplete and activate this. This will take some time as in will need to index and store it at Algolia for lightning fast future searches and suggestions.
Search Page Choice
On Search page you can choose to use WordPress Search Page or the Algolia Search page:
This really depends on your preference. We are testing with at the moment.
Algolia Dashboard
Once you are setup you can keep track of indexing, searches done and much much more in their Dashboard.
I like the design and UI in general. It is easy to see what is going on. Do think I won’t be needing to check things here that much, but it is nice to have when search starts getting used a lot.
Rolling your Own
If you want to run it all for free and under your control you can clone the repo and roll your own on your own server. Just to to the repository at Github and get your own copy. Then install in on the same web server or a separate on, and integrate it with your site. Doing this all by yourself will require more technical knowhow and more server power of course, but you do keep all the data under your control
IMWZ works with both Yoast SEO and the SEO Framework. Both WordPress SEO Plugins are solid. But let’s do a Yoast SEO vs SEO Framework post here and show you what plugin does what best and worst according to us shall we?
Yoast SEO
Yoast SEO or WordPress SEO seems to be the most famous WordPress SEO plugin out there and it has 5+ million active installations. It was the first SEO plugin IMWZ has used and we still use it for multiple client sites as well as this website though we are considering a migration to the SEO Framework for ours.
Readability and Yoast
Yoast SEO checks your content for markers that indicate solid content. This does not mean it will help you patch your crappy writing skills but it will tell you some of the key indicators whether you are on the right track or not.
It basically checks for the following:
Passive voice – never good to use and better to use the active voice to entice readers
Repetition – whether you start sentences the same way too often or not.
Flesch Reading Ease – Whether your text is easy to read based on the Flesch Reading Ease formula
Paragraph length – whether paragraphs are too long or not – not clear what too long is though really..
Sentence Length – whether too many sentences have more than 20 words which worsen the reading of them
Keywords and Yoast SEO
Based on the keyword(s) or longtail keyword you enter Yoast will calculate your SEO.
It will check:
keyword density in your content
the meta description for keywords,
internal linking
SEO title lenght
outbound links – some to authoritative sites is good
minimum 300 words – though we would dispute this
duplicate usage of keywords chosen which would not be good
images presence – some are recommended
Yoast SEO & Social Media
When you want to setup your display for Facebook or Twitter differently using a different:
title
body content
image
Yoast’s got your back. You can do this using the sharing tab. And with premium you even have previews and Pinterest. Not that we care much about Pinterest down here..
To be honest we don’t use this tab much and neither do we use changes using the SEO Framework tab. That is because we use other tools for Social Media management such as Buffer.
Advantages of Yoast SEO
Yoast SEO is the ideal SEO plugin for beginners although intermediate and advanced users can benefit from it. Why do we say this? Well because it gives a wonderful presentation of what is OK with your content and not. It also tells you how your keyword(s) are represented in your article. You even get a score for readability and SEO. It feels like you are being guided along to solid content and good seo practices. We really enjoyed that in the beginning as we started out our SEO and WordPress journey.
Disadvantages of Yoast SEO
There were a few things we did notice after a while. A lot of the suggestions are just guidelines and are not always correct. If you follow them to strictly sometimes you butcher beautiful content. Three hundred or more words might work most of the time, but sometimes a short and sweet post will do wonders. Sometimes content is difficult to read… because the topic is hard.
The SEO Framework
The SEO Framework has become more and more our to go to WordPress SEO plugin for reasons we will tell you down the line. Now, how does the SEO Framework work? Well you install it and activate it like any other plugin of course. Duh! Now as soon as this is done the magic starts.
SEO Framework & Automatic Generation SEO Data
The SEO Framework will generate the description and SEO title for you. No need to do that.
It also allows for a custom social image when need be. In general the featured images should do just fine though. For this see the social tab under Post SEO Settings:
SEO Framework & Post & Page Key SEO Indicators
Also, on the post or page listing it will show you whether the following are correct:
title length
description length
indexed properly
page links followed
archiving allowed by search engines
post is not redirecting
A nice bird’s eye view of things isn’t it?
Advantages of The SEO Framework
The SEO Framework is a WordPress SEO plugin that warns you from the beginning that it is you who should write solid content and that there is no magical kind of plugin that will do things for you. And at IMWZ we agree. At the end of the day it is all about you writing solid content and preferably content no one ever wrote about before.
It is also amazing that this plugin helps you generate the SEO Title and SEO Description out of the box and let’s you know whether they work or not. That is amazing. And in general when you know your SEO stuff better, do a proper initial paragraph and a solid title / slug that seems to do the trick just fine. Lastly it has a nice listing overview of SEO segments on page listing and post listing as mentioned and the framework is lightweight and easily extensible.
Disadvantages of The SEO Framework
As it does not hold your hand so much you will need a lot of knowledge on good content writing. You also need to know what keyword density will work and not. Just a good SEO title and description is not all there is of course. That is why I would recommend it to more intermediate and advanced users.
So what SEO Plugin to pick?
Well, we go for The SEO Framework. It is lightweight, does not distract you from writing solid content. It just stays in the background and does its thing doing basic automation and warning you on a few core key indicators. It let’s you work on your article, creating great content displayed well in nice chunks with enough imagery and headers to make it easy for people to go through. Something a more experienced writer should have no issues with. Something he or she should enjoy. Idem ditto for SEO writers!
Basic Contact Form 7 CSS styling is horrible. Here a basic setup in CSS I have been working on and will update from time to time. A gist at Github I set up based on one by codehandling. Make sure you do not use the labels and that you check the configuration.
Basic Form Configuration
In Contact Form 7 remove the labels and add placeholders. This will make the form look way more modern and appealing. Here is the basic setup:
As you can see the basic labels have been removed and placeholders have been added for the name and email fields.
Complete Contact Form 7 CSS Boilerplate
So here the actual Contact Form 7 CSS Boilerplate I was talking about. Take it and tweak it to your liking. This setup is responsive and shows a decent form without labels and with placeholders. I have made the fields cover the full width of the form, not just half. I also gave the fields nice rounded corners and a decent submit button.Text in the fields is styled too.
Here is the complete Contact Form 7 CSS Boilerplate:
Every time I use Contact Form 7 I fall for it. I commit the same error over and over again. I enter the wrong data for the from field on the mail tab. And every time it takes me precious time figuring out this silly error. And it is isn’t correctly told in the documentation either I am afraid. So let’s write it down here so we all remember how to properly configure the Contact Form 7 Mail From Field.
Form Data
Let’s say you create a standard form like so:
<label> Your Name (required)
[text* your-name size:30 maxlength:60]</label>
<label> Your Email (required)
[email* your-email]</label>
<label> Your Phone Number
[tel your-tel "012345678"]</label>
<label> Subject
[text your-subject]</label>
<label>Your Message
[textarea your-message] </label>
[submit "Send"]
Mail Tab Data
You also add all this data to the mail tab:
to:
jasper@ianua.dev
NB localhost domain
from:
[your-name][your-email]
subject:
iauna "[your-subject]"
additional headers:
Reply-To: [your-email]
message body:
From: [your-name] <[your-email]>
Subject: [your-subject]
Message Body:
[your-message]
--
This e-mail was sent from a contact form on Iauna (//localhost:3000/ianua/site/web)
You check all and see all is well. Well, you think..
Configuration Error Found
Then you save the form and see:
What? So you go to Contact Form 7 Documentation to resolve configuration errors and see nothing that is wrong. Zilch! So you check all again. You decide to go to the mail tab and you see:
Solution
But…but the your-email tag should load the email address of the client right? It says so here in the documentation that you can. Nope. It is the one connected to the domain. It should be the email address you use to send email to clients. As DavidFB said here:
On the Form, [your-email] is the form fillers address.
On the Mail tab, the settings are for Routing the mail. To is who you want the form data to go to and From is the address SENDing the form data. In this case, it’s not actually the person sending, it’s the web site. So From should match the server domain so it’s not seen by mail servers as spoofing or relaying.
So what you need to add is:
Company Name<name@domain.tld>
After that all will be well. Emails will be sent properly and clients will be happy. Let’s hope we can all avoid this mistake the next time!
Bonus
Do not forget to add the additional headers:
Reply-To: [your-email]
This will make it loads easier to reply to clients when they email you. Saves you time copying their address from the body of the email!
Recently I updated my main slideshow on the homepage. I use Slider Revolution. It is awesome and goes well with the theme I use. For most themes I use really. It is a very versatile slider plugin. But this time around I bumped into an issue I did not see until my CDN loaded the new image. A Slider Revolution Slide could not be loaded.
Slider Revolution Slide could not be loaded
Somehow Slider Revolution did not appreciate the new first slide being 974KB. This caused the slider plugin not to load that slide properly. Here the error in the Chrome inspector console I found:
jquery.themepunch.revolution.min.js?ver=5.2.6:8 https://cdn.imagewize.com/wp-content/uploads/2016/10/en-profile-amwaj-imagewize-larger.jpg Could not be loaded !
This error caused a huge white hole on my homepage! I talked to MaxCDN to figure out why the image would not be loaded from their side. They figured it was a JavaScript issue. So not a CDN issue. This as the asset or image could be loaded from their end and from my VPS. And in the end it was. It was not the new live chat which I was testing though. I thought it was because it got added recently.
Slider Revolution Issues
Slider Revolution somehow blocked the loading. I realized this checking the Performance and SEO Optimization tab for that slider.
It said there was an issue with my first slide. I decided to optimize it some more with Imagify. The slider plugin somehow still loaded the old slide worth 974KB by itself. That is no longer the case in the screenshot above where the total of the 3 slides is only 379.53 KB. Afterwards it was lighter and loaded well. The warning went away too.
SEO Sidenote
I do know SEO wise many out there are not big fans of sliders. But I do still think when you do offer something on the slides like the initial one does and the titles of services on the others slides can contribute to the whole UX. Also make sure you do not slide right away or not too quickly at least. It annoys repeat visitors. And of course do cache things well so visitors do not have to wait too long.
Furthermore, do remember, the eye wants something too and that it provides. I do see a trend popping up every now and then where sites are told to be stripped to the bare minimum and drop slideshows and large images. People are not bots people!
Slider Revolution still a keeper
Finally, the enormous options Slider Revolution offers are incredible. They way you can display slides, effects you can choose and control over desktop, tablet and mobile you have are simply terrific. Too bad the issue was not clear for me from the start. And, perhaps, Slider Revolution should tell me clearer when an added image causes issues.. Still, happy user of SR and not going away anytime soon.
Found out about something really cool this morning. There is a plugin that allows you to update your Envato / Themeforest themes and plugins using a WordPress plugin called Envato market.
Downloading Envato Market Plugin
It is available at Github and can be downloaded here (will start downloading zip file right away). It is a neat plugin that will work right out of the box. Just upload it as a plugin you want to add that is not part of the repository as usual and activate it. There is nothing to it.
Envato Market Backend View
Once you have uploaded and activated the plugin you can choose Envato Market from the sidebar menu in the Dashboard. Then you will be asked to generate an Oauth token.
OAuth Token Generation
This token will allow the plugin access to your Envato account to do certain things like download and update your plugin. All the needed options will be selected right away.
You only need to agree with their terms. This is at the bottom on the page where you can check what access you will allow as shown above. As said just keep the defaults and agree. Then you will see this:
You do need to confirm again that you copied the key. Then you click on “Woohoo got it!” . After that you will be sent back to your Envato apps.
Managing your Envato App
This here below is the display of your Envato Apps management page. It is where you see with what tokens for what apps you are working with.
As you can see the App page is a bit behind as we just created a token for an app (the plugin) to access, but the changes will show up at a later stage. If you have been using Envato apps for a while you will see a list display here.
Running Updates
Once the key has been confirmed as generated by you you can choose the item to update from the Envato Market plugin page in your Dashboard. Et voila. In no time the plugin will have been updated. Just did this for Rocket Pure‘s HumbleShop theme and it worked like a charm!
Here is how the page looks in the Dashboard with the just updated theme:
