Let’s face it, there are bad people out there. And, they’re looking to doing bad things to your WordPress website IF they can get access. There are several excellent security plugins available but after experimenting with them over the years and understanding how the typical ‘hacks’ occur, this one provided the best protection.

We suffered a severe hack a few years ago where they were able to deface about 60 websites hosted on our server before we could get a handle on what was happening. They were also successful in uploading some malicious scripts that provided them access to our server’s system and accounts in order to run ‘phishing scams’. I was curious as to how they did it and began researching every resource I could find about the typical methods of hacking WordPress sites. The All In One Security addresses each of the common weaknesses they exploit. Therefore, it’s the first plugin we install.

Price: FREE

Do you ever get that phone call or email that the site is broken yet no one can explain how or why it happened? Then you need this plugin! This monitors all logins and changes to the site so it’s clear who did what and when. It can also act as a security add-on since it displays a list of changed files (should you be hacked), who changed them, etc..

Being able to quickly see what has occurred and by whom is a huge advantage in fixing site issues. Therefore, we recommend this plugin as an extra measure of security and convenience.

Price: FREE

The WordPress default page manager is pretty clunky, let’s face it. So, for easy navigation through pages and sub-pages we use the CMS Tree View which makes itself available under the Pages menu. There are other plugins that provide drag ‘n drop re-arranging and other features. But, we just wanted something simple, fast, and less likely to cause conflicts with other plugins or theme functions.

Price: FREE

There’s all kinds of plugins and ways to make child themes. However, if you REALLY want to manage your child themes and control how they work then Child Theme Configurator is the best we’ve seen.

This plugin provides complete access to moving files between parent theme and child theme. This is vital in the event you wish to modify a header or footer file and not lose the ability to update your parent theme. Plus, it offers the ability to edit those files, analyze parent themes for conflicts, and much more.

Price: FREE

This is the first ‘premium’ plugin that we install. There’re lots of form plugins available but I can assure you that we have designed some of the most amazing form-based sites with Gravity Forms. It’s highly flexible, has a huge community providing both support and resources, is continually updated, and is pretty easy to show the basics to the client when they wish to take over their site updates.

Gravity Forms has provided the most reliable communications between site visitors and site owners that we’ve ever used. In contrast, we have had several issues with the contact form that comes with Divi in regards to consistent sending of form submissions.

Price: $39 for single site license (annually)

I don’t know about you, but i’m fed up with social networking/sharing plugins that want to plaster ads all over my admin page(s) for upgrading and purchase options for other plugins. Therefore, we immediately go with the excellent Monarch plugin from the ET group. It offers lots of options regarding display, has most of the major networks already integrated, is highly customizable and, basically, it works. Oh, and there’s no unwanted ads!

Price: SUBSCRIPTION

Many people consider Jetpack a bloated mess of good ideas but too bulky. There are a couple of features that Jetpack offers, however, that can’t be disputed. First, there are stats that are displayed in the admin area providing the client with easy access to their traffic info. Sure, Google Analytics is a more professional traffic monitor. But, after years of dealing with this, it’s just another login that the client forgets and never looks at. It’s much easier to have them log into a familiar admin area and simply see a snapshot of their daily, weekly or monthly traffic.

The second feature that is a huge factor is the Publicize function. This allows your posts to be ‘published’ simultaneously to your Facebook, Twitter, LinkedIn, Google+ and other accounts. Basically it’s broadcasting your post to all these social networks when you hit the Publish button in your post. This single function is worth installing Jetpack for as it saves hours of time by multi-publishing your articles instead of having to manually repeat that process for each network.

Jetpack allows you to turn off any features you don’t want. This has streamlined the load process and keeps your site running quickly. Once the Publicize integration is set up for each of your social networks then the client doesn’t need to do anything but just write articles. There’s no learning curve for the client which makes this ‘install, configure, and forget’.

Some may feel that there are other individual plugins that do the same thing. And, there are! But, the idea is to keep the number of plugins to a minimum. Plus, Jetpack has many other features that the client may wish to take advantage of by simply activating them in the settings panel.

Price: FREE

A premium plugin that all Divi designers and users should have. This plugin allows you to place any Divi library item into a widget that can then be placed into a sidebar. And, as we know already about Divi, you can create as many sidebars as you wish and integrate those into your page designs as desired. This allows for the ability to have ‘global’ sidebars with Divi library elements you control via the library editor.

Imagine putting any Divi module into a widget. Sliders, testimonials, posts, and more…. all become sidebar elements with this simple but ingenious plugin!

Price: $5.00 (worth every penny)

Rarely do my clients have relevant photos or images that can be used on the site for backgrounds, headers and so forth. And, in order to continue with posts and pages so they are created in a similar fashion as the original design, images become a huge part of the equation. Most of my clients wouldn’t spend the time to tediously search various sites for the right image, download it (or, purchase it if necessary) and open it in Photoshop, crop/resize/optimize it, then insert it into their post or page.

This plugin allows them to search for images from within the WordPress editor interface. The images are pulled from Creative Commons and GPL licenses from various sources displayed in a thumbnail format for the user to select from and can be chosen to be inserted into the page/post text or used as the featured image.

This convenience factor will help the site owner keep a consistent look throughout the site and help keep them out of trouble from doing the dangerous ‘copy/save image as’ for protected images on the web.

Price: FREE

The other day, while searching for another issue on a client site, I noticed that there were literally hundreds of revisions kept in the history of many pages. The home page, for example, had 194 revisions dating back a couple of years. This can cause slow page loads, chews up unnecessary database space and it’s doubtful that someone would ever revise back to the first draft of the page or post.

WP Sweep allows you to flush out the revisions based upon two settings, the length of time to keep them and how many to keep. A reasonable number would be 10 revisions max and perhaps anything beyond a month old should be flushed (after the 10). This plugin helps me to police the customer sites without having to do anything in regards to their revision history since it works seamlessly in the background. It also optimizes the database tables as well.

Price: FREE

First off you need to have some knowledge on how and where to insert this code within the realms of both WordPress and Divi to make it work.

In WordPress –

You can go to Appearance and Editor which should take you directly to your stylesheet opened in the editor itself. CAUTION: You should be using a child theme for these additions! If you are using a child theme then and this is your first trip to the editor then the stylesheet should be mostly blank with the exception of some code at the top that MUST REMAIN there. You will insert the new code below it.

This is where you will insert the CSS instructions from iHover by doing a copy/paste. Trying to paste this much code into the Divi custom CSS box in the ePanel will make you go crazy. So don’t do it.

In Divi –

You will need to insert the HTML into the Code module that contains all the div class names and assignments. Once again, DO NOT attempt to paste all this code into the Divi custom CSS box if you wish to keep your sanity.

You need to have the image uploaded to the Media Library and you need to have the URL to that image handy so you can insert it in place of the image reference in the sample HTML code from iHover.

It’s doubtful that you wish to use ALL the effects available. Therefore you don’t need to copy the entire CSS file from iHover. Plus, loading all that extra code will just slow your page load times down by loading unnecessary stuff if you’re only using a single effect. So, we want to pluck out of their CSS file just the stuff we need. Here’s the minimum that you’ll need to get:

First, the basic code handling the global instructions for the effects. This should be about the first 100 lines of code from the CSS file.

.ih-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ih-item a {
  color: #333;
}
.ih-item a:hover {
  text-decoration: none;
}
.ih-item img {
  width: 100%;
  height: 100%;
}

.ih-item.circle {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
}
.ih-item.circle .img {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
}
.ih-item.circle .img:before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
  border-radius: 50%;
}
.ih-item.circle .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.square {
  position: relative;
  width: 316px;
  height: 216px;
  border: 8px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.ih-item.square .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.circle.effect1 .spinner {
  width: 230px;
  height: 230px;
  border: 10px solid #ecab18;
  border-right-color: #1ad280;
  border-bottom-color: #1ad280;
  border-radius: 50%;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
  position: absolute;
  top: 10px;
  bottom: 0;
  left: 10px;
  right: 0;
  width: auto;
  height: auto;
}

If you just want Square Effect #4 (as an example) then that’s all the code you need from the CSS file. If you search down to about line #101 you will see where the name and number of the effects start to appear in the form of something like this:

.1h-item.circle.effect1

That is effect #1 for the circle effect. There will be several instructions following this line that contain effect1 in it. You need ALL of these if you intend to use effect #1 or all of whatever it is of the effect you wish to use. For example, line(s) 101 to 148 are all needed in order to use Effect #1 for circles. Copy and paste these into your child theme’s stylesheet BELOW where you pasted the global CSS for the iHover effects.

This is the code for Square Effect #5 (example on right) just to show you what needs to be copy/pasted:

.ih-item.square.effect5.colored .info {
  background: #1a4a72;
}
.ih-item.square.effect5.colored .info h3 {
  background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect5 .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.ih-item.square.effect5 .info {
  background: #333333;
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect5 .info h3 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  background: #111111;
  margin: 30px 0 0 0;
}
.ih-item.square.effect5 .info p {
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #bbb;
  padding: 20px 20px 20px;
  text-align: center;
}
.ih-item.square.effect5 a:hover .img {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  transition-delay: 0;
}
.ih-item.square.effect5 a:hover .info {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.ih-item.square.effect5.left_to_right .info {
  -webkit-transform: scale(0) rotate(-180deg);
  -moz-transform: scale(0) rotate(-180deg);
  -ms-transform: scale(0) rotate(-180deg);
  -o-transform: scale(0) rotate(-180deg);
  transform: scale(0) rotate(-180deg);
}

.ih-item.square.effect5.right_to_left .info {
  -webkit-transform: scale(0) rotate(180deg);
  -moz-transform: scale(0) rotate(180deg);
  -ms-transform: scale(0) rotate(180deg);
  -o-transform: scale(0) rotate(180deg);
  transform: scale(0) rotate(180deg);
}

Now you need to copy/paste the HTML into your page that contains the div classes and code to display the image and the effects. From the example page (located here: https://gudh.github.io/ihover/dist/) find the effect you want and you’ll see the HTML code for each just below the demos. The part you need is just this:

    

        

        

          
Heading here
          
Description goes here
        
    

Basically the HTML between the “normal” and “end normal” comment lines. This is the code you will copy/paste into the Code module you’ve inserted into your page using the Divi builder. NOTE: This snippet is for Effect #5 only. The HTML will be different for each effect. You must copy/paste the HTML for the effect you want.

You MUST replace the with your URL to your image that you did in Step #1

Now, just change the text that refers to Headline Here and Description. These lines here:

Heading here
Description goes here

To whatever you want them to say. Be advised, though, these are space limited so you can’t get too crazy with the amount of text. Short and sweet!

Hit the Save & Exit and preview your page to see if the effects work.