Category: WordPress

Posted on by — 1 Comment

How To Identify Big Files On Your Site

How To Identify Big Files On Your Site 1

One of the most important steps a webmaster need to do to improve his site’s speed is to find out what are the files that takes a long time to loads. Most of the time, those resources are big files (images, css, js files…). A simple audit can help you identify then remove or resize those files to improve your site speed.

Finding big files is quite simple nowadays with the help of your browsers. Modern browsers all support this feature so you can perform this audit on any browser that you prefer. In this post, I’m going to perform the task on Chrome.

Disable minify, caching plugins on your site

This step if very important. Minify, caching plugins (such as W3 Total Cache, WP Super Cache…) usually combines file together to reduce the number of requests. While those tools are nice in helping your site load faster, they hide the actual requests made by individual files.

Open your site in a browser tab

Next, open your site in a new tab. You can open a page, a post on your site if your goal is to inspect that single page/post.

Inspect the large files

Now, right click anywhere on the browser window and select inspect. In some browsers, this option is named inspect elements and it appears nearly at the bottom of the context menu.

inspect the page to audit

You should see a new window appears. On that window, locate the Network tab:

Switch to network tab

Then, finally, reload your page.

You can then see a list of requests that your browser made to your site’s server. When your site finishes loading, click on the Size tab to sort the size of the request in order. It is best to sort the size in decreasing order since you can identify the requests that cost most at the top:

sorting the sizes of the request

As you can see from my image, the top request cost 789KB, which is very large. It is an image. So, I will consider replacing this one with a smaller image or I can make its size smaller.

Next on the list, you can see that the file epo.min.js is 350KB. It’s a javascript file. When you click on that file, you’ll see its full path:

Finding the plugin of the file

From the file path, I can tell that it is a plugin (since it’s in wp-content/plugins folder) and its name could be WooCommerce TM Extra Product Options.

You can search for that in your plugins list and see if that plugin is vital to your site. If it isn’t, you should consider deactivating it to save your site from loading a big file.

You can continue this process to the end of the list. Normally, I don’t inspect all items but some resources that have significant size. Something that is over 50KB is worth inspecting (images are exception, I usually start inspecting images when their size exceed 200kb).

Conclusion

Now you know a quite useful technique to find the large files that cause your site to load slowly. It’s time to start working on your site to improve its performance.

Posted on by — Leave a comment

Easiest Way To Install Google Fonts In WordPress

wordpress add google fonts

Google fonts is a great way to enrich your web typography. There are thousands of fonts available for free. If you have been using new WordPress themes or plugin, you may see that many of them let you pick fonts from Google repository and add to your site. However, you don’t have to use a theme or a plugin to get Google fonts. In this post, I’m showing you the easiest way to install Google fonts in WordPress. You’ll be surprised at how quick it is.

Select a font in Google fonts

The first step, obviously is to select a font form google fonts. Let’s head to https://fonts.google.com/ and pick the fonts you prefer:

fonts available on google fonts

As you can see, there are many fonts available. Simply click on the orange plus icon to add it to your list of select fonts.

add fonts to selection

As you can see, I have added three fonts to my selection. The plus signs were turned to minus so you can remove those fonts in case you need it.

A black box appears at the bottom right of the screen showing the information of the fonts that were added. If I click on that box, there will be a bigger window slide up contains some useful information as well as the installation instructions:

show list of fonts were added

There is one important thing to notice here. There is an orange box says “Load time: Moderate”. This isn’t a good sign because it tells us if we add all these fonts, it will negatively impact our page load time significantly (Adding more fonts, even just one will slow down your site).

Try to remove the fonts you don’t really need. Normally, I select at most two fonts. Let me remove one font so I can get load time: fast.

improve load time by selecting less fonts

Before installing the fonts to our site, let’s click on the customize tab.

selecting font weight in customize tab

Here, you can see a list of font-weight and style that you can add. I currently have the regular font weight for both fonts. Adding more styles let you pick more variations for your fonts. However, similar to font family, adding more font styles adds time to site load time. So, you should be very frugal when picking more styles.

How to install Google fonts in WordPress

Let’s head back to the embed tab and grab the installation info:

copy google fonts snippets to install on website

First, you need to switch to the @import tab. Installing the fonts using the snippets in the standard tab takes more time and require a bit of coding skill (though not much).

Let’s copy the code in first box but excluding <style> and </style>.

Where to put this code? You may ask. Well, let’s go to our site’s dashboard and go to Apperance->Customize-> Additional CSS and paste the code there:

import google fonts to wordpress in the theme customize.png

Now, for the second part, let’s copy it. However, before you can paste it, you need to know where do you want to use those fonts. For example, in my case, you want to use Raleway for the whole site, you need to write this in the Additional CSS box:

body { font-family: 'Raleway', sans-serif; }

If you want to use Raleway for body text and Montserrat for the headings, you can place the rules like this:

body { font-family: 'Raleway', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; }

If you want to use, say Raleway for the sidebar only, you would put this rule in additional CSS box:

.widget-area { font-family: 'Raleway', sans-serif; }

If you want to apply a specific font for the content body only, you would like to put something like this:

.content-area { font-family: 'Raleway', sans-serif; }

These rules will work in most case (if your theme adhere to WordPress theme structure standards). However, you can easily use the inspector tool on your browser to find the CSS selectors to apply the fonts.

Conclusion

Now you know how to install Google fonts in WordPress. However, while it is easy to install those pretty fonts, it is also easy to add many fonts and make your site load slowly. It is best to select one or two fonts and strive for the load time: fast for the best results.

Posted on by — Leave a comment

[Solved] Hide WordPress Dashboard Notifications Without Using Plugins

[Solved] Hide WordPress Dashboard Notifications Without Using Plugins 2

There are a lot of times you find your dashboard is flooded with tons of notifications, mostly from plugins and themes.

Hide WordPress Dashboard Notifications

In rare cases, those notifications are useful. Most of the time, they are outright annoying. Some notifications even appear after you click on the close icons right next to them.

So, you wonder, is there any way to hide these notifications for good? If possible, without using a plugin?

Well, that’s the reason I’m writing this. I’m going to show you the easiest way to hide WordPress dashboard notifications without using any plugin.

Are you ready? Let’s get started.

Hide WordPress Dashboard Notification in less than 1 minute

With this method, you need to write some code. Don’t worry, you are not actually writing any code but to copy and paste some code I have here.

Now, copy this code:

add_action('admin_head', 'bc_disable_notice');

function bc_disable_notice()
{ ?>
 <style>
    .notice { display: none;}
 </style>
<?php }

Where to put this code, you might ask.

Well, let’s put this at the end of your themes functions.php file.

However, as I mentioned in many of my posts, this is not a safe way since your changes could be overridden by theme updates.

So, make sure you create a child theme of your current them and put that code at the end of your child theme’s functions.php file.

Save the file and reload your dashboard. The notices should have gone.

Hide only dismissible notices only

What if you want to hide only dismissible notices only? (The ones that have the close button at their right). Well, it’s super easy too.

Let’s remove the code you entered previously and replace with this one:

add_action('admin_head', 'bc_disable_notice');

function bc_disable_notice()
{ ?>
 <style>
    .notice.is-dismissible { display: none;}
 </style>
<?php }

Save the file and you are done!

Conclusion

There you go. Now you can hide WordPress dashboard notifications without using any plugin. Let me know what you think and if you have suggestions, leave a comment below.

Posted on by — Leave a comment

The Ultimate Guide To Create Contact Form On WordPress

contact form on wordpress

Creating contact form is super easy in WordPress. Do a simple search and you can find tons of plugins available with 4.5+ star rating. You think that why do you need another tutorial, right? Well, for most people those plugins will work right out of the box and they can move on doing other important things. For some others, things are not so easy.

Maybe you have followed some tutorials, setup exactly as they said but still, the form doesn’t work. In other cases, you may want to add some tweaking to the look and feel of the form.

Whatever your reasons, my goal is to help you setup contact form for your website from scratch and make it work so you never miss an important message from your visitors.

Let’s get started.

Plugins to use

Before we begin, let’s have the following plugins ready:

  1. Contact Form 7 (required)
  2. Easy WP SMTP (required)
  3. Super simple grid (my plugin, optional if you want to have multiple columns form)
  4. Recaptcha V2 For Contact form 7 (optional but recommended)

Step 1: Create a contact form with contact form 7

The first step is to create a contact form with Contact form 7. You should have contact form 7 installed and activated for now.

If you look at your dashboard menu on the left, there should be an option called Contact:

The Ultimate Guide To Create Contact Form On WordPress 3

Click on that option, you’ll see contact form 7 screen:

The Ultimate Guide To Create Contact Form On WordPress 4

As you can see, there is already a form created for you. Go ahead and delete it as we are going to create a new form.

Click on the add new button at the top to add a new form.

The Ultimate Guide To Create Contact Form On WordPress 5

As you can see, there are three main things we are going to do with Contact form 7:

  1. Enter a form name (nearly the easiest thing)
  2. Add, remove fields to your form (hardest)
  3. Click on Save button to save your form (the easiest)

As the form name, you can enter anything you like. In case you need to have multiple contact form, the name should help you tell which for is which.

Now, let’s go ahead to configure the fields of our form.

Normally, a contact form should have the following fields:

  1. Contact name
  2. Contact email
  3. Subject
  4. Message

However, you can add more fields if you need to.

Contact form 7 support a variety of fields as you can see at the top of the form editor:

The Ultimate Guide To Create Contact Form On WordPress 6

As you can see, you can even add radio, checkboxes and even quizzes to the contact form, which is very great.

To add any field to your form, first, put the cursor where you want to insert the field, then click on the field you want to insert.

For example, I want to insert a confirmation checkbox below the message box, I click on the space below that message box:

The Ultimate Guide To Create Contact Form On WordPress 7

Then, click on acceptance button at the top:

The Ultimate Guide To Create Contact Form On WordPress 8

Configure the field before adding to your form

A window will show up for me to configure the field:

The Ultimate Guide To Create Contact Form On WordPress 9

There are a few things you need to pay attention to:

  1. Name: this should be human readable and it should tell you what the field is about. If you are adding a telephone field (tel), then you should name it tel, phone…
  2. Id and class: These fields are useful if you want to style them using CSS later. If you are happy with the default, leave them blank.
  3. Condition: this option is specific to acceptance field only
  4. Options: This option is specific to acceptance. In other fields, you will have the required checkbox to mark the field cannot be blank when submitting form.

Now, I have the form ready. I’m going to save it. After saving the form, there is a field appears:

The Ultimate Guide To Create Contact Form On WordPress 10

This is the shortcode. You can think of shortcode as a placeholder for a, usually, much bigger text. In this case, it’s our form.

This is the code we put in the contact page to display the contact form. Thus, let’s go ahead and put this code in a page.

If you are using Gutenberg editor, you should add a shortcode element first before putting the shortcode:

The Ultimate Guide To Create Contact Form On WordPress 11

In case you use the classic editor, you just paste the code in the page’s body.

Let’s publish the page and take a look at our form:

The Ultimate Guide To Create Contact Form On WordPress 12

As you can see, the form looks great and it has all the fields as added in contact form 7 form builder.

Step 2: Configure SMTP server to ensure mail delivery

Nowadays, most hosting providers offer mail function out of the box for PHP (the programing language behind WordPress). As a result, many of you may not have any problem get the contact message delivered to your inbox. However, if you have built your contact form, tried to submit a message but still didn’t see anything in your inbox, it’s time to configure your SMTP server.

Don’t worry about the jargons, it is very simple to fix mail sending problem in WordPress as I made a tutorial here:

The Ultimate Fix To WooCommerce Not Sending Email Notifications Problem (For FREE)

The tutorial is for WooCommerce but it works for WordPress too.

Step 3: Put your form in multiple columns

Now you should have the form up and running. When someone submit the form, you should get a message in your inbox. That’s great!

However, what if you want to put the form in multiple columns? No worries, I got you covered!

Here is the detailed tutorial on how to put contact form 7 in multiple columns.

How To Add Columns In Contact Form 7

Step 4: Add recaptcha v2 to your form to prevent spam

Spam is a serious problem that any site owner has to face today. When you put up a form, you open a door to your inbox for spammer. Thus, adding captcha to your form is a great way to keep your inbox clean.

Now, let’s add the plugin Recatpcha V2 For contact form 7 to your site.

After you activate the plugin, you’ll see a new option under Contact form 7 menu:

The Ultimate Guide To Create Contact Form On WordPress 13

Click on that to start setting up Recaptcha.

The Ultimate Guide To Create Contact Form On WordPress 14

Select the options as in the screenshot and click on submit.

You are done on that screen. However, there in one extra step you need to do to make recaptcha works. That is integrate recaptcha with your site.

Still under Contact menu, click on Integration:

The Ultimate Guide To Create Contact Form On WordPress 15

You’ll see there is a box says reCaptcha. Click on setup integration button in that box to start integrating it to your site:

The Ultimate Guide To Create Contact Form On WordPress 16

The next screen is where you put reCaptcha keys:

The Ultimate Guide To Create Contact Form On WordPress 17

You may wonder, where do I get those keys? Don’t worry, I’ll walk you through that.

First go to this url:

https://www.google.com/recaptcha/admin/create

If you are not logged in to your gmail account, login first and try visiting that page again. You’ll see a screen like this:

The Ultimate Guide To Create Contact Form On WordPress 18

There are two recaptcha options at the time of this writing: v2 and v3. You should select v2, not v3 for this to work.

Make sure you add your domain at “add a domain, e.g. example”

Finally, click on Submit to finalize the process. As a result, you’ll see the keys available in the next screen:

The Ultimate Guide To Create Contact Form On WordPress 19

Now, copy them to put in the integration screen on your blog and you are done.

The Ultimate Guide To Create Contact Form On WordPress 20

Click on save changes to save the keys.

Now, there is one more thing you need to do. That is putting [recaptcha] tag to the contact form so the captcha will show up.

The Ultimate Guide To Create Contact Form On WordPress 21

And when I view the form, sure enough, recaptcha box is there:

Recaptcha is working on contact form 7 form

Conclusion

As you can see, setting up contact form on WordPress could be quite tricky. However, with the helps of plugins, it is much easier to create fully functional contact page. Hopefully the tutorial is helpful to you. If you need further assistance, don’t hesitate to drop me a message.

Posted on by — Leave a comment

How To Add Columns In Contact Form 7

contact form

Contact form 7 is a great plugin to build contact form for WordPress. In contrast to its super powerful functions, the look at feel of this form builder has been very basic through the years.

One of the most needed feature is to layout the contact form in multiple columns. This feature is available in many form builders. However, we still haven’t seen any sign of it get added to contact form 7.

If you need to layout your form in multiple columns, don’t worry, I got your back.

I will show you how to layout contact form 7 fields in as many columns as you like (well, may not as many as you want but sufficient for all your needs).

Let’s get started.

Step 1: install plugin to enable grid system on your site

We are going to install a plugin which I’ve made a few minutes ago to enable multiple columns layout on your site. My plugin uses a CSS framework called skeleton CSS to let you layout elements on multiple columns.

You are not limited to use this for laying out contact form 7 elements. You can use this for many other things you need.

Let’s download and install my plugin here:

https://www.dropbox.com/s/685l4umn4pi5k6v/super-simple-grid.zip?dl=0

Install and activate it then you are done. There isn’t anything to configure with my plugin. Isn’t that great 😉

Step 2: Putting contact form 7 elements to columns

Before we actually begin putting contact form 7 elements, I would like to introduce you to our grid system.

There are three elements of our system:

  1. Container (this is the outer most element)
  2. Row (represents a row)
  3. Column (represent a column)
Illustration of contact form 7 grid
Illustration of contact form 7 grid

If you now HTML/CSS, this diagram is not strange to you.

Now, let’s create a simple form in contact form 7.

I’m not going to show you how to create a form since it’s very easy to do so. You’d probably know how to do that already.

This is my form code:

contact form 7 code

I’ll take the shortcode and put on a contact page. This is what I have:

How To Add Columns In Contact Form 7 22

You can see that, everything is in one column.

What if I want to put the email field to the right of the name field?

It is super simple. I’m going to:

  1. Add a container div that wrap the form
  2. Add a row at the top and inside that row, add two columns
  3. One column hosts the name field, the other hosts the email field
  4. I add another row. Inside that row, add one column that spans the whole row.
  5. Then, I put the rest of the form in that row

Here is the code:

contact form 7 code layout in multiple columns

The grid system is based on 12 columns layout. So, in the first row (.c7-row), you see that I have two columns, each spans six columns so they will occupy equal amount of space.

On the second row, I put everything in one column that span 12 columns. You can see that the class is twelve columns.

Now, save the form and let’s see the result:

How To Add Columns In Contact Form 7 23

Not surprisingly, we have the two fields: name and email laid out in a single row.

Conclusion

As you can see, it’s very simple to create a contact form 7 form that has multiple columns. Hope you now can create better contact form for your site.

If you have question, please ask. I’d love to hear your feedback.