What is a Hard Refresh and How to do it

What is a Hard Refresh?

Hard Refresh is a way of clearing out the browser’s (i.e. Chrome, Firefox, Safari, etc.) cache for a specific page. Clearing the cache will force your browser to load the most recent version of the files used for a specific page, this usually include stylesheets or other important scripts. Clearing of a browser’s cache should be completed every time an update is made on a site, this will allow a view to always see the intended files associated with any and all updates.

Clicking the refresh button located near the address bar IS NOT the same as a hard refresh

How to Hard Refresh in Google Chrome Chrome Logo

Make sure you are on the web page you would like too hard refresh.

  • Windows: hold down Ctrl and then press F5 on your keyboard
  • MAC: hold down ⌘ Cmd and ⇧ Shift and then press R on your keyboard

How to Hard Refresh in Firefox Firefox Logo

Make sure you are on the web page you would like too hard refresh.

  • Windows: hold down Ctrl and then press F5 on your keyboard
  • MAC: hold down ⌘ Cmd and ⇧ Shift and then press R on your keyboard

How to Hard Refresh in Safari Safari Logo

Make sure you are on the web page you would like too hard refresh on a MAC computer.

  • Step #1: Go to Safari (Top right corner of screen near Apple logo) → Preferences → Advanced → (Check Box) Show Develop menu in menu bar
  • Step #2: Go to Develop (Top right corner of screen near Apple logo and left of Safari) → Empty Caches

 

Create Your First Google reCaptcha Keys

Why Do I Need a reCAPTCHA?

According to Google:

reCAPTCHA is a free service from Google that helps protect websites from spam and abuse. A “CAPTCHA” is a turing test to tell human and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure out.

Google

Basically adding a reCAPTCHA will help reduce the amount of SPAM / BOTS trying to submit or add to your site.

However, You are here in order to learn how to CREATE a Google reCAPTCHA. So let’s get started

Log Into Your Google Acct. & Search

search for google recaptcha

  • Make sure you are signed into your, or your company’s, google
  • Search for “google recaptcha admin” at google.com

Google reCAPTCHA Admin

  • Look for the Google reCAPTCHA link in your google search results

The Form

below is a blank version of the form that you will be directed to.

Filling Out The Form

STEP #1 (Label)

  • This section is purely for your reference, I suggest using your Domain name and some descriptor
    • Example: dhali.com – reCAPTCHA

Step #2 (reCAPTCHA type)

  • Select the version of reCAPTCHA you would like to use **Which reCAPTCHA you pick is determined by the service you are using**
    • The example above is specifically for the reCAPTCHA Check Box as seen below.
    • This reCAPTCHA check is what you will want to use if you are using the Gravity Forms Plugin by RocketGenius
  • To get reCAPTCHA check box
    • Select: reCAPTCHA v2
      • Select: “I’m not a robot” Checkbox

Step #3 (Domains)

  • In this section you will be letting Google know which website you want this reCAPTCHA to work on.
  • In the text field simply but your website Domain Name.
  • If you copy your website’s url you might see something like this
    • https://www.dhali.com
  • The part that you want to type into this section is just the Domain, for example:
    • dhali.com
    • NO http// or https//, NO www.
  • If you have additional Domain names you’d like to add simply click the “+” and add another using the same logic.

Step #4 (Owners)

In this section you will see the email address associated with the current Google Account you are using is already present. If you would like to allow another Google Account access to this reCAPTCHA settings page you will add their email here.

Step #5 (Accept the Terms & Email Notifications)

  • Read Terms and Conditions
    • Check the box – Accepting Terms of Service
  • If you would like Google to notify you about suspicious activity on the form where your reCAPTCHA located check the box
    • Send Alerts to Owners
  • Everything should now be filled out!
    • click “Submit”

Copy & Save reCAPTCHA Keys

Above is the Site Key and the Site Secret Key for your new Google reCAPTCHA! Copy these keys and add them to your Plugin or Favorite Developer!

 

Create a Google Maps API Key

Login To Your Google Account

  • Start by searching Google for the “Google Developer’s Console”

  • Should be the very first search result

  • Sign into your current Google account (You have a Google Account if you have a Gmail), or simply create a new account now.

Activate Your Google Account

  • Agree to the Terms and Services and then Click the “Activate” button in the top right of the screen in order to begin creating your API Key

Personal, Business, and Billing Information

  • The next few steps will involve putting in simple personal/business information and billing information needed to activate the account.
  • You will start each account with a Gifted $300 credit, so no worries about getting charged for anything immediately.

API Library

  • Now that you have activated your Account, head over to the “Library” Section located on the navigation menu on the left hang side.

  • In the API Library Search bar, type the words “Geocoding API

  • Select the “Geocoding API”

Enable the API

Repeat Previous Steps Searching For…

  • Go back to the API Library and complete these same steps by searching for “Maps JavaScript API” and then repeating the same steps searching for “Places API

Create The API Key

  • In the same place you found “Library”, now click on “Credentials” on the navigation located on the right side of the page
  • Around the middle top of the page click “+ CREATE CREDENTIALS”
  • Then Click “API Key”

Copy Your New API Key

  • Simply copy the the Key and you are all done.
  • Speak with your IT Professional about the appropriate ways to keep your API key secure.

Advance Custom Field PRO Repeaters

Advance custom fields is a very powerful plugin for WordPress. In this blog post I will be teaching you how to use the Repeater field from Advance Custom Fields PRO. There are will be two steps that are required to get the Repeater working.

WordPress Admin

Log into the your site back in and make sure you have administrator privileges. If you do not have Advance Custom Fields PRO installed and the license activated please take time to do this.

Steps for creating the Repeater Field:

  • On the left hand side of your Dashboard there should be “Custom Fields”
  • This is where all the Field Groups are that you have created for your site. Press “Add New” on the top of the page
  • The first entry field is the title of the ACF. This will only be seen on the back end when a user is trying to add data. This can be whatever you want. For this demo I will be calling mine “Repeater Test”.
  • Next what you want to do is press the blue button that says “+ Add Field”. This is where we are going to create our repeater field.
    • Field Label: This is the title of the repeating element. For example: If you want a page to have multiple Icons, the Field Label will be “Icons”, If you want different display blocks the Field Label will be “Blocks”, etc.
    • Field Name: This is automatically generated when you add the first Field Label. This will be used when we are writing the Code. Make sure there are no spaces in this field. The best practice is to add a Field Label and use the auto generated name.
    • Field Type: For this example we are using Repeater. Note: If you do not have the PRO version there will be no Repeater for you to select.
    • Instructions: Displays to user on back end to explain how to add data
    • Required: If you want it to be required.
    • Sub Fields: These are the items that you want to be repeated. Press “+ Add Field”.
      • I will not be going over all of the options today. Just make sure you add a Field Label and Field Name so we can access the data in the code.
      • For my example I will be adding an Image (Image), Title (Text), and Description (Text).
      • *Note: For the Image there is an option called Return Value. My code will be handling “Image Array”.
    • The rest of the VALUES can be changed as you feel fit! This is all we need for my code.
  • Make sure you press “Publish” on the top to complete the process




Steps for adding Data:

  • If you chose to display the form on Post or Pages navigate to the correct Post or Page you wish for the data to be entered
  • Click “Add Row” and enter in the data.
  • Keep pressing “Add Row” until all the data is entered.
  • You can delete a row on the left hand column.
  • Or reorder the row by dragging the numbers on the left hand column

PHP Code

This part of the process it going to be more difficult. This will required previous knowledge on the PHP side of WordPress. I will no go over the process of finding the correct location to add the code but these are my recommendations. Either create a Page-current page if that is were the ACF is. Or Add a template part for the posts.

COPY AND PASTE THIS IN THE CORRECT POSITION:





       

Responsive image

Improving Website Page Speed Performance

Page Speed on a website can help especially for mobile users visiting your website. We recommend testing a website across different tools and not just relying on one.  Some of the tools we use for testing Page Speed performance are WebPageTest.org, Pingdom Website Speed Test, and Google PageSpeed Insights.

Image Optimazation

This is often overlooked but it’s probably the most important aspect of optimizing your website. Some methods/tools of image optimization you can use are

  • Photoshop – You can export images and save them at Quality 70
  • TinyPng.com – Allows you to upload both .jpg, .png files 20 at a time and optimizes them for you.
  • Grunt – Running a task to optimize your images while developing. We use grunt-contrib-imagemin.

Minify/Concat JS/CSS files

If you have multiple js/css resources on your site concatinating and minifying these files into 1 single file will help improve Page Speed performance. A Grunt Task can also help with this task. grunt-contrib-cssmin and grunt-contrib-uglify. Below is an example of what a Gruntfile.js may look like when using grunt-contrib-cssmin and grunt-contrib-uglify.

uglify: {
  options: {
    mangle: false,
    sourceMap: true
  },
  my_target: {
    files: {
      'assets/js/scripts.min.js': [
        'src/js/google-fonts.js',
        'src/js/jquery.nivo.slider.js',
        'src/js/jquery.prettyPhoto.js',
        'src/js/main.js'
      ]
    }
  }
},
cssmin: {
  options: {
    sourceMap: true
  },
  target: {
    files: {
      'assets/css/styles.min.css': [
        'src/css/bootstrap.css',
        'src/css/reset.css',
        'src/css/nivo-slider.css',
        'src/css/prettyPhoto.css',
        'src/css/styles.css'
      ]
    }
  }
}

WordPress vs Squarespace

At Dhali we design most of our sites using WordPress. WordPress is a powerful open source software and tool for building websites and apps. Some estimate that over 25% of ALL websites are currently built with WordPress.

The most common use for a WordPress site is as a content management system, or CMS. This allows users to edit their website like a Google Doc. Along with the intuitive CMS, WordPress has a multitude of powerful tools “under the hood”. These tools allow our development team to make beautiful, easy to edit websites.

Another popular CMS is the new kid on the block, Squarespace. Squarespace is a beautiful, although limited, alternative to WordPress. Squarespace thrives off of its “drag and drop” system and pre-made themes. These tools allow users to create professional looking sites with no code or prior experience.

So which is best for you, WordPress or Squarespace?

The answer is it depends.

To decide, you must have the goal of the website in mind. The best way to explain this is by giving a few examples. As you will see, the choice almost always boils down to functionality and flexibility.

Portfolio

Let’s say you are a photographer who needs a simple portfolio site. The goal of the site is to showcase your work and set up a contact form for potential clients to reach you. You don’t have a large budget want to get started immediately.

The immediate answer here is Squarespace.

Why? Squarespace has a few pre-built templates for portfolios to get you started. Because you have a small budget, the upfront cost will only be for your domain name and first month of Squarespace. If you spend a few hours uploading your photos and connecting an email address, your site is as good as live.

Why you shouldn’t choose Squarespace.
Let’s say down the line you want to add in some sort of social interaction to your site, such as the ability to “like” photos. Squarespace simply does not have this functionality. Also, because Squarespace severs are the only place you can host Squarespace sites, you will never be able to transfer your website to another hosting provider.

Small Business

Let’s say that you are a small business looking to grow their online presence. The goal of your website is to display your products and reach out to potential clients. Your brand has a very distinct style, and in the future you hope to add eCommerce to your site so that you may sell products online.

The answer here is WordPress.

Building this site on WordPress will allow you to start with the end in mind. Phase one of the project will be getting the website up and running and adding in various pages and products. Phase two can then be implemented down the road, giving your site the eCommerce functionality when you need it.

In addition, with WordPress where you host your site is completely up to you, allowing further flexibility. All while branding and customizing your site to look the way you want it.

That’s where we come in.

Our team at Dhali has the skills and tools available to help you achieve your goals. We design fully customized sites with the future in mind, and even show you show to add to your WordPress website.

(We also offer hosting programs that cover everything from security maintenance to posting blogs)

See for your self!

Visit our clients page. All of which were built on WordPress.

Update Your WordPress Website

Clients often ask what the benefits are of updating their WordPress site, including plugins and themes. While some of the benefits include fixing/addressing bugs, adding key features and increased functionality, the main reason why it is vital to be on top of your WordPress site maintenance is security reasons.

According to WPBeginner, more than 80% of WordPress sites that had not been properly maintained and updated were hacked.

There are different reasons as to why WordPress sites are frequently hacked. Most of hacks, however, can be traced back to the fact that the site is running on outdated versions of PHP, WordPress, themes, or plugins. By not updating your WordPress site regularly and in conjunction with the released WordPress updates, you are leaving your website buggy and unprotected to hacks.

We have a tested and true process for maintaining all client WordPress Websites:

  1. Read the release notes or changelog to see what the updates change.
  2. Test the update on a development site. That way, if anything breaks, we can troubleshoot before updating your live site.
  3. Back up your site.
  4. Install the updates.
  5. Review and test your site. Focus on the items that were noted in the release notes or changelog.

Just like you need to install an update on your operating system for your mobile phone, web applications such as WordPress need the same software updates from time to time.

Deleting Custom Fields in WordPress

While working on a project you may have had custom fields that are left behind and that are no longer in use for the current theme these unused custom fields remain in your database. I came across this exact scenario when I was upgrading a section of a website that was outdated and needed to be re-done. The previous programmer had use a plethora of custom fields and my goal was to reduce the amount of custom fields used.

Take a look at the following example. All the custom fields that are not being used

 

Removing Unused Custom Fields

  1. Log into to phpMyAdmin
  2. Select your database.
  3. If you use a different database prefix than the default “wp_” one, then you’ll need to change that in the example below. Replace “meta_key” with your actual custom field name.
  4. Run the following script. ( The script will run and delete any references to that custom field and the data associated with it )
DELETE FROM wp_postmeta WHERE meta_key = 'meta_key';

Alternatively you can also run an sql script that looks at meta_key and see if there are any empty values

SELECT * FROM wp_postmeta WHERE meta_key = 'meta_key';

In my scenario I needed to look for any custom field containing the words productOption running the sql script returned the following.

SELECT * FROM wp_postmeta WHERE meta_key LIKE '%productOption%';

wp-unused-fields-db

Changing Database Prefix in WordPress

The following blog post over at DigWp.com has a great step by step tutorial on changing your database prefix in WordPress database tables. You will definitely come across this scenario when working on WordPress websites.

Change Your Database Prefix to Improve Security

What I found really helpful is that you can run an SQL command to rename all your tables at once.

RENAME table `wp_commentmeta` TO `wp_VzQCxSJv7uL_commentmeta`;
RENAME table `wp_comments` TO `wp_VzQCxSJv7uL_comments`;
RENAME table `wp_links` TO `wp_VzQCxSJv7uL_links`;
RENAME table `wp_options` TO `wp_VzQCxSJv7uL_options`;
RENAME table `wp_postmeta` TO `wp_VzQCxSJv7uL_postmeta`;
RENAME table `wp_posts` TO `wp_VzQCxSJv7uL_posts`;
RENAME table `wp_terms` TO `wp_VzQCxSJv7uL_terms`;
RENAME table `wp_term_relationships` TO `wp_VzQCxSJv7uL_term_relationships`;
RENAME table `wp_term_taxonomy` TO `wp_VzQCxSJv7uL_term_taxonomy`;
RENAME table `wp_usermeta` TO `wp_VzQCxSJv7uL_usermeta`;
RENAME table `wp_users` TO `wp_VzQCxSJv7uL_users`;

Upgrade Wamp Server to PHP 7

We recently upgraded our development and production servers to PHP 7. We develop locally using Wamp Server so we needed to install PHP 7 on our computers as well. After digging around and some trial and errors I found the youtube video below.

Install Microsoft Packages

Download PHP 7

  • Download PHP zip file from http://windows.php.net/download/
  • Choose the correct file 64 or 84 bit Depending on your operating system
  • Choose the Thread Safe file

Create PHP7 Folder in wamp directory

  • Extract contents from PHP7 Download
  • Copy files over to a new folder in wamp\bin\php\php7.0
  • You will need to copy 2 files from an older php version php.ini and wampserver.conf into your new folder wamp\bin\php\php7.0

Modify php.ini

  • In your new folder open php.ini
  • In php.ini find extension_dir and replace the older php version with the new version
  • In php.ini find zend_extension and comment this line out it is no longer needed.
  • Create a copy of php.ini once the above changes are made and rename it to phpForApache.ini

Modify wampserver.conf

  • In your new folder open wampserver.conf and replace LoadModuleName and LoadModuleFile to load the PHP 7 like so

phpConf['apache']['2.4']['LoadModuleName'] = 'php7_module';
$phpConf['apache']['2.4']['LoadModuleFile'] = 'php7apache2_4.dll';
$phpConf['apache']['2.4']['AddModule'] = '';

Start Wamp Load PHP 7

  • Start Wamp > PHP > Version > 7

Notes: PHP 7 needs Apache 2.4 otherwise it will not run. Make Sure Wamp Server is running Apache 2.4. In the video the extensions were changed I tried it and it PHP 7 wouldn’t load in Wamp Server so i kept the same extensions from my previous php.ini file and it worked

WordPress Core Update – 4.6.0

UPDATING WORDPRESS CORE

“New features in 4.6 help you to focus on the important things while feeling more at home.”


Why Updating your WordPress site is so important

These updates are included in your WordPress hosting with Dhali.

There are five main reasons for keeping every aspect of your WordPress site up to date, which are:

  • Security
  • Performance
  • Bug fixes
  • Compatibility
  • Features

Each of these is important for different reasons, but security is the our priority. You can see more about the most recent update below.

WordPress 4.6 “Pepper”

Search and Replace

Changing permalinks or any other string in a database can be a hassle especially if you don’t know MySql commands.  When working with WordPress you’ll soon run into this situation where you need to change a string across the entire database whether you’re changing permalinks when launching or migrating a site or just doing a find and replace on the entire database.

Luckily I came across this tool called Database Search and Replace Script in PHP

Installation & Use

To use the script, download the zip file from Database Search and Replace Script in PHP, extract the folder called search-replace-db-master, renaming it to something of your choosing, upload it to your web sites root directory, then navigate to that folder in your browser (domainname.com/your-secret-search-replace-folder). The script will automatically attempt to find and populate the database fields but make sure to double check that the information is correct.

The root WordPress structure would looks like this.

/your-secret-search-replace-folder
/wp-admin
/wp-content
/wp-includes


Navigating to the following url (domainname.com/your-secret-search-replace-folder) using your browser will bring up the following page.

search-replace-db-details

  1. Fill in the field you want search for then fill in the field you want to replace with
  2. Database: Make sure the database field information is correct.
  3. Tables: Select Which tables you want to include
  4. Actions: Click dry run to run a scan first to see how many instances of your field will be replaced ( Will not change fields only runs a search )

After dry run is clicked it will go search through the database tables and look for the instance you defined in the search for field.

search-replace-db-tables


If you’re satisfied with the dry run then go ahead and click live run ( This will execute find/replace and change all the fields ).

*** Very Important *** After you’re done making your find/replace changes make sure to delete the folder ( /your-secret-search-replace-folder ) from your root directory.