WordPress Development Tips
Optimizing WordPress
Optimizing WordPress sites can be a huge subject with many variables that are dependent upon a site's build and use case. However, the good news is that by following a fairly simple checklist you can ensure that most sites are more than optimized enough to meet modern web standards. Please see this guide for more detailed info, but essentially the steps you should take boil down to these:
- Choose the right host, and be careful about what hosting plan you choose.
- Choose the WordPress theme / page builder you use carefully. It is our belief here at IO that the days of the traditional WordPress "theme" are rapidly coming to close and that with the advent of advanced page builders and the release of Gutenberg that the future of WordPress development lies in using backbone themes along with a page builder to build sites. As such IO recommends Elementor for both you are your customers.
- Limit plugin usage. The more plugins you use, the slower your site will be. Choose only plugins you absolutely need.
- Clean out the site's trash, or better yet, configure the site's wp-config.php file to auto empty the trash on a regular basis. See this guide for how.
- Reduce Post Revisions, Drafts, Spam, Pingbacks and Trackbacks.
- Optimize your images for the web. If you use a plugin for this, use then delete the plugin to keep the site clean. Better yet, optimize photos using your favorite photo editor (IO recommends GIMP) before upload to your site.
- Be careful about adding ads to your site.
- Consider not using official social media buttons & widgets. Writing your own isn't difficult.
- Enable server side gzip compression. IO recommends using your site's .htaccess file to do this if your host uses Apache. See a guide for doing so, here.
- Minify and combine CSS and Javascript. IO recommends using a plugin for this. We recommend Fast Velocity Minify unless you use SiteGround hosting. In that case we recommend using SiteGround's built in SG Optimizer plugin.
- Further steps you can take include: enabling browser cache on your site's server, using cache plugins, and using a CDN. However IO recommends caution with these optimizations as your customer's sites are likely to change fairly often and these approaches can keep the updates from appearing on customers browsers when intended unless steps are added to your workflow. If your site isn't optimized enough by the basic steps above and you do chose to try these, you do so at your own risk.
Custom Contact Forms
InflatableOffice offers two ways to place a contact form on your site that will fully integrate with your IO account. The first is built right into the plugin, and is a contact form found on it's own page located at https://{your domain}/io_contactform. The second solution is to build a custom contact form that can be integrated where ever you like on your site. This solution is more complicated and does require you be comfortable with PHP and web development. It also requires your site to use the Elementor Page Builder to work.
To create a custom IO integrated form for your site, first use Elementor's Form Widget to create a basic contact form and place it where you like on your site. Once created give your new form the Form Name of: Request Call Back. From there, our integration supports and requires the use of the following four form fields: Name, Email, Phone, and Message. You will need to create each of these fields. Once created enter the field name (from above) into Label and Placeholder, and select the appropriate Type using the following guide:
Field Name - Type
Name - Text
Email - Email
Phone - Tel
Message - Textarea
After you enter these you will need to go that field's advanced settings and enter a Custom ID using the below guide:
Field Name - Custom ID
Name - firstandlastname
Email - email
Phone - cellphone
Message - notes
Once these are entered, go to the Submit Button settings area of the widget and here enter a Button ID of: io_cub. Finally, make sure the Actions After Submit settings area is cleared and you can then save the widget by clicking Update.
From here there is more to do. You now need to add the following code to your theme's functions.php file:
<span style="color: rgb(0, 0, 0);">add_action( 'elementor_pro/forms/form_submitted', function( $module ) {
$io_pagename = get_option('io_pagename');
$page_name = urlencode($io_pagename);//'Demo+Rentals+LLC';
$page_name = '&name='.$page_name;
$params = '';
if(isset($_COOKIE['adwords'])) $params.='&adwords=1';
$link = 'https://rental.software/quotes/contactme.php?nowrap=1'.$page_name.$params;
wp_safe_remote_post( $link, [
'body' => $_POST['form_fields'],
]);
} );
</span>
It is important to keep in mind that changes made to your functions.php file are done at your own risk, and if theme you are using is not your own then you should be creating and using a child theme before making changes like this. Troubleshooting Guide
403 errors
These errors mean something is blocking us from creating or updating the pages. Wordfence plug-in or some other similar firewall plugin could be causing this. Go to Wordfence -> Options -> Whitelist IPs and add the following under Other Options, then hit Save.
209.250.2.70
208.64.38.12
404 errors
This means the website wasn't found. It can be caused by recent changes to a website and you may just need to wait a little longer. Another potential solution is to de-activate the IO plugin and then re-activate it. We've also seen if you change the WordPress -> Settings -> Permalink configuration to something different, save, then switch back to Post Name it solve the issue before.