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.

WordPress Themes Required Plugins

This tutorial will show you how you can alert the users installing the theme that the plugin requires certain plugins to be installed.

When developing a theme you often times rely on certain plugins to add additional functionality to your theme. In this case the following theme relied on 2 Plugins. Testimonials by WooThemes, and Features by WooThemes


The following code was taken from http://www.paulund.co.uk/theme-users-required-plugins. We use it on our themes and I will explain what it does.

  1. First we’re going to hook into the admin_notices hook in wordrpess and run a function called showAdminMessages.
  2. We create our function showAdminMessages and create an empty array $plugin_messages.
  3. Since we’re going to be using the function is_plugin_active we have to require the following file
    include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
  4. We then use an if statement to check if the plugin is not active !is_plugin_active to check the plugins main file.
  5. If the plugin is not active we add a message to our $plugin_messages array notifying the user that the plugin is required and a link to downlod.
  6. We then use another if statement to count our $plugin_messages array > 0 and use foreach to loop through each message and echo out a <div id="message" class="error">
  7. You can see the full code in action below.

WordPress Automatic Updates

We currently manage around 50+ wordpress sites. Keeping plugins up to date on a wordpress site quickly became a daily routine. This task quickly had to be tasked to one of our team members on a daily basis.

wordpress-plugin-update-notification
Dashboards like these became a common thing.

Enabling Automatic Updates

By default, every site has automatic updates enabled for minor core releases and translation files. This does not include plugin updates or major releases of core.

You can enable Automatic updates to Core by placing the following in your wp-config.php file.

define( 'WP_AUTO_UPDATE_CORE', true );

The same can be done to plugins/themes however these are done via filter.

Note: Do not add add_filter() calls in wp-config.php – causes conflicts with WP-CLI and possibly other problems. Add to theme functions.php

Automatic updates for All plugins:

add_filter( 'auto_update_plugin', '__return_true' );

Automatic updates for All themes:

add_filter( 'auto_update_theme', '__return_true' );

Why Should be Updates be made regularly?

  1. Better Security.
  2. Making sure your plugin is up to date with the developer for any known bug fixes or any new features.

Resources

  1. A Guide to Updating WordPress, Plugins and Themes
  2. Configuring Automatic Background Updates
  3. How Do I Configure Automatic Updates in WordPress 3.7?

Wamp WordPress Upload File Size

Look for the following php.ini files in your apache and php folders look for upload_max_filesize and post_max_size and change the default values.

C:\wamp\bin\apache\apache2.4.9\bin\php.ini

upload_max_filesize = 64M
post_max_size = 10M

or

C:\wamp\bin\php\php5.5.12\php.ini

upload_max_filesize = 64M
post_max_size = 10M

Loop with Query Posts

I was running into a problem where I needed to overwrite the default number of posts that get display. I was working on a taxonomy archive page and it was showing at the most 10 posts.

I knew the amount of post that it was showing was because in the WordPress Dashboard there is a setting Where you can set the number of post that can be shown on any given page. This is set under Settings > Reading.

blog-posts-show

I wanted to use the default loop on my taxonomy archive page and just overwrite a couple parameters.

I ran into a great article on Digwp.com that showed different ways of using the WordPress Loop. You can head over and read the Article 4 Ways to Loop with WordPress.


Loop with query_posts();

<?php global $query_string; // required
$posts = query_posts($query_string.'&posts_per_page=3&cat=-6,-9&order=ASC'); ?>

<?php // DEFAULT LOOP GOES HERE ?>

<?php wp_reset_query(); // reset the query ?>

This code above uses the default query and sets the posts shown to 3 excludes category 6 and 9 and shows them in Ascending order.


 

In my case I just needed to overwrite the default setting which was 10. I needed to show all posts in my taxonomy archive page. I just added the following before the loop.

<?php global $query_string; // required
$posts = query_posts($query_string.'&posts_per_page=-1&order=ASC'); ?>

<?php // DEFAULT LOOP GOES HERE ?>

<?php wp_reset_query(); // reset the query ?>

This code above uses the default query and sets the posts shown to -1 (all) and shows them in Ascending order.