Build a Self-Hosted WordPress Site – Part 2

Build a Self-Hosted WordPress Site - Part 2 - Quick Cache SettingsBuild a Self-Hosted WordPress Site Part 2 - Cache SettingsBuild a Self-Hosted WordPress Site - Part 2 - Quick Cache On

In the first blog post in this series on how to build a Self-Hosted WordPress site, I explained how to get the basic plugins installed. Now it’s time to configure those plugins. First we will  look at Quick Cache. This will work best with the appropriate supporting software on your server, which I will cover in a separate series of posts focusing on server configuration. At the top in orange you can see Quick Cache is off. A few paragraphs down, it tells how you can test if Quick Cache is working. Using Firefox, all you need do is open a Private Tab or Window and open your site in that, and view the source. If the code isn’t there, go back to plugins and select Drop-ins at the top. You will see you need to check if the WordPress wp-config.php has the line define(‘WP_CACHE’, true); in it. If it does not, you will need to make a manual edit of the file to add that line. See my separate guide on editing the wp-config.php file. Anyway, you simply switch Quick Cache on (the big yellow option) and save the settings at the bottom of the page. After I have checked that it IS working, I go back and select the ‘No, I don’t want the source code to contain any of these notes.’ I have tested Quick Cache against 6 other cache plugins, and this was a long way the fastest, with my home page loading in the Pingdom tests at about 0.35 seconds!! Before I did any fine tuning of my website, that was typically 12-15 seconds! (more…)

Build a Self-Hosted WordPress Site

Build Your Self-Hosted WordPress SiteIn the next few blog posts I am going explain how to build a Self-Hosted WordPress site. Yes, that’s right. No debate over which Content Management Software (CMS) to use. It’s WordPress. Sorry if that offends you, but I have been doing web design far too long to be bothered with anything else. For 99% of users, WordPress is fine and dandy. For the purposes of these blog posts, I am going to skim over some of the really basic stuff (I might come back and add a bit of detail). I know that you can develop a site on your local PC or Mac, but the first time you get stuck, anybody who tries to help you will want to see what you have, and that means you need a web server. Unless you want to do a simple blog, forget the WordPress.com hosting packages, and become a self-hosted site.

Build Your Self-Hosted WordPress SiteThat means you should get a domain. I use GoDaddy. I can see no reason why you shouldn’t do the same. Priced in US Dollars and no sales tax, they are usually cheap and effective. You need a web server. There are hundreds of cheap ‘WordPress Specialist’ web hosts. Forget them. Forget all the special ‘free’ hosting deals. The bottom line is, less than US$40 per month is cheap – if you pay annually you can often get a discount on this, sometimes as much as 25% off. I have been through all manner of web hosts and deals over the years, so you might be wise to avoid all that heartache. My preference is for what is called a cloud web server. But, beware, my experience over the last year makes me wary of Cloud Servers that use OnApp for management of the server; my sites used to ave this and it often crashed, leaving me offline for a day or more each time. On a budget look for OpenVZ and for performance at a price use KVM, here is a comparison.

With a Cloud Server, this means that your site does not reside on one machine, but shares its resources across a lot of physical machines. This is a much faster and more reliable solution. Different hosts may use a different name for this type of package, but this is what you need. Unless you have a big web site in mind, you will want to start with a Virtual Private Server (VPS) with a Unix operating System (such as Centos), Apache, MySQL and PHP. To make managing it easy, you will want WHM, cPanel and EasyApache installed. Most importantly, you will want a Managed Service. That means, when it goes wrong, you get help. If you can persuade the host to do it for you, installing nginx as a reverse proxy server for Apache will speed things up, but make things a bit more difficult to manage.

(more…)

Useful WordPress Plugins

With me now working on the shop for our site, I thought I would wind up the development series of blog posts with a summary of what useful WordPress plugins are still in our design (in alphabetical order):

  • Autoptimize. This plugin helps optimize your site loading time. It concatenates (joins) all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts to the footer. It also minifies the HTML code itself, making your page really lightweight. There are some advanced options too, but I have left it with the default HTML, CSS and Javascript optimization set to ‘on’. One of the things this plugin does is to move Javascript to the footer, but beware, some plugins don’t like this. I have avoided using any plugin that has this issue.
  • Avatar Manager. I have switched off Gravatars. Whilst our site has a blog, comments are disabled and I do not think many of our shop customers will have Gravatar accounts, nor want one. The functions.php code (see our previous blog post) we have switches off loading of the the Gravatar assets. Avatar Manager for WordPress is a sweet and simple plugin for storing avatars locally and more.
  • Dequeue Font Awesome. Does what it says, and removes all Font Awesome stylesheets added to your theme by certain plugins, to not be loaded by several times, if your theme already make use of Font Awesome (as Ultimatum Themes do, which is what we use). Use also with the next plugin, Enqueue Font Awesome CDN.
  • Enqueue Font Awesome CDN. This plugin automatically enqueues the Font Awesome CSS file from the MaxCDN CDN. This means our theme no longer loads a local version, but uses the MaxCDN version instead.
  • Responsive Lightbox by dFactory. This plugin allows users to view larger versions of images and galleries in a lightbox (overlay) effect optimized for mobile devices. Note that some custom code is needed in the functions.php file to work with WooCommerce, again see our previous blog post. Also note that as Ultimatum Theme also loads PrettyPhoto, I had to dequeue the Ultimatum PrettyPhoto style and scripts. I have this set to PrettyPhoto with Facebook style.
  • Use Google Libraries. A number of the javascript libraries distributed with WordPress are also hosted on Google’s AJAX Libraries API. This plugin allows your WordPress site to use the content distribution network side of Google’s AJAX Library API, rather than serving these files from your WordPress install directly.
  • Wordfence Security. The first paid for plugin on this list. Wordfence provides real-time distributed protection for your site, and I also use the basic cache that is included, but not the Falcon engine.
  • ZWoom – WooCommerce Product Image Zoom. A rather simple plugin, allows image zoom on mouse hover.

And a few more I am considering:

That’s all for now.

Cotswold Photo WordPress functions.php file

A simple post. Some of you have asked me what I have in the Cotswold Photo WordPress functions.php file for our child theme (called Togger). So here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<?php 
$theme = array(
  'theme_name' => 'Togger',
  'theme_slug' => 'togger',
);
 
require_once( get_template_directory() . '/wonderfoundry/wonderworks.php' );
 
add_action( 'wp_enqueue_scripts', 'cp_manage_styles_and_scripts', 99 );
 
function cp_manage_styles_and_scripts() {
// remove PrettyPhoto css from Ultimatum
  wp_deregister_style( 'prettyphoto' );
  wp_dequeue_style( 'prettyphoto' );
  wp_dequeue_style( 'ubermenu-basic' );
  wp_deregister_style( 'ubermenu-basic' );
//ultimatum loads prettyphoto scripts that need to be disabled
  wp_dequeue_script( 'fancybox' );
  wp_deregister_script( 'fancybox' );
  wp_dequeue_script( 'enable-lightbox' );
  wp_deregister_script( 'enable-lightbox' );
  wp_dequeue_script( 'lightbox-script' );
  wp_deregister_script( 'lightbox-script' );
  wp_dequeue_script( 'jquery-prettyphoto' );
  wp_deregister_script( 'jquery-prettyphoto' );
// Add Darkly themed Ubermenu style sheet
  wp_register_style( 'ubermenu_cp', get_stylesheet_directory_uri() . '/css/ubermenu_custom.min.css', false, '1.0.0' );
  wp_enqueue_style( 'ubermenu_cp' );
}
 
if ( function_exists( 'is_woocommerce' ) ) {
  function df_woocommerce_single_product_image_html($html) {
    $html = str_replace('data-rel="prettyPhoto', 'rel="lightbox', $html);
    return $html;
  }
  add_filter('woocommerce_single_product_image_html', 'df_woocommerce_single_product_image_html', 99, 1); // single image
  add_filter('woocommerce_single_product_image_thumbnail_html', 'df_woocommerce_single_product_image_html', 99, 1); // thumbnails
 
  add_action( 'wp_enqueue_scripts', 'manage_woocommerce_styles_and_scripts', 99 );
 
  function manage_woocommerce_styles_and_scripts() {
//dequeue parts of WooCommerce not required in any event
    wp_dequeue_style( 'woocommerce-general' );
    wp_deregister_style( 'woocommerce-general' );
    wp_dequeue_style( 'woocommerce-layout' );
    wp_deregister_style( 'woocommerce-layout' );
    wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
    wp_deregister_style( 'woocommerce_prettyPhoto_css' );
    wp_dequeue_script( 'prettyPhoto' );
    wp_deregister_script( 'prettyPhoto' );
    wp_dequeue_script( 'prettyPhoto-init' );
    wp_deregister_script( 'prettyPhoto-init' );
//dequeue scripts and styles
    if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
//remove generator meta tag
//      remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );
//      remove_action( 'wp_enqueue_scripts', array( $GLOBALS['woocommerce'], 'frontend_scripts' ) );
      wp_dequeue_style( 'woocommerce-smallscreen' );
      wp_deregister_style( 'woocommerce-smallscreen' );
      wp_dequeue_style( 'woocommerce-multiple-addresses-plugin-styles' );
      wp_deregister_style( 'woocommerce-multiple-addresses-plugin-styles' );
      wp_dequeue_script( 'wc-add-to-cart' );
      wp_deregister_script( 'wc-add-to-cart' );
      wp_dequeue_script( 'woocommerce' );
      wp_deregister_script( 'woocommerce' );
      wp_dequeue_script( 'wc-cart-fragments' );
      wp_deregister_script( 'wc-cart-fragments' );
      wp_dequeue_script( 'woocommerce-multiple-addresses-plugin-script' );
      wp_deregister_script( 'woocommerce-multiple-addresses-plugin-script' );
    } else {
// Add Darkly themed WooCommerce style sheet
      wp_register_style( 'woocommerce_cp', get_stylesheet_directory_uri() . '/css/woocommerce_custom.css', false, '1.0.0' );
      wp_enqueue_style( 'woocommerce_cp' );
    }
    if ( ! is_bbpress() ) {
//remove bbPress scripts and atyles
      wp_dequeue_style( 'bbp-default' );
      wp_deregister_style( 'bbp-default' );
      wp_dequeue_style( 'bbp-default-bbpress' );
      wp_deregister_style( 'bbp-default-bbpress' );
      wp_dequeue_script( 'bbpress-editor' );
      wp_deregister_script( 'bbpress-editor' );
    }
 
  }
}
 
// Add Product Reviews section to Admin
if ((is_admin() )) {
  add_action('admin_menu', 'add_product_reviews'); 
 
  function add_product_reviews() { 
    global $menu, $product_reviews;
    $post_type = 'product';
    add_menu_page(__('Product Reviews'),__('Product Reviews'), 'manage_woocommerce', "edit-comments.php?post_type={$post_type}",'','',58.5);
  }    
 
  function separate_comments_and_review( $clauses, $wp_comment_query ) {
    global $wpdb;
    if ( ! $clauses['join'] )
      $clauses['join'] = "JOIN $wpdb->posts ON $wpdb->posts.ID = $wpdb->comments.comment_post_ID";
    if(!empty($_GET['post_type']) &&$_GET['post_type'] == 'product' )
      {
    if ( ! $wp_comment_query->query_vars['post_type'] ) 
          $clauses['where'] .= $wpdb->prepare( " AND {$wpdb->posts}.post_type = %s", 'product' );
      } else {
    if ( ! $wp_comment_query->query_vars['post_type' ] ) 
          $clauses['where'] .= $wpdb->prepare( " AND {$wpdb->posts}.post_type != %s", 'product' );
      }
      return $clauses;
    }
 
  function change_comment_status_link( $status_links ) {
    if( isset( $_GET['post_type'] ) ) 
    {
      $status_links['all'] = '<a href="edit-comments.php?post_type=product&comment_status=all">All</a>';
      $status_links['moderated'] = '<a href="edit-comments.php?post_type=product&comment_status=moderated">Pending</a>';
      $status_links['approved'] = '<a href="edit-comments.php?post_type=product&comment_status=approved">Approved</a>';
      $status_links['spam'] = '<a href="edit-comments.php?post_type=product&comment_status=spam">Spam</a>';
      $status_links['trash'] = '<a href="edit-comments.php?post_type=product&comment_status=trash">Trash</a>';
    }
    return $status_links;
  }
 
  function check_current_page( $screen ) {
    if ( $screen->id == 'edit-comments' ) // Checking comment page
    {
      add_filter( 'comments_clauses', 'separate_comments_and_review', 10, 2 );
      add_filter( 'comment_status_links', 'change_comment_status_link' );
      if( isset( $_GET['post_type'] ) ) 
      {
        function product__comment_columns( $columns ) {
          $columns['comment'] = __( 'Review' );
          return $columns;
        }
        add_filter( 'manage_edit-comments_columns', 'product__comment_columns' );
      }
    }
  }
 
  add_action( 'current_screen', 'check_current_page', 10, 2 );
  add_filter('menu_order','change_label');
 
  function change_label($stuff) {
    global $menu,$submenu;
    global $wpdb;
    $sql = "SELECT count(*) FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID)
      WHERE comment_approved = '0' AND comment_type = '' AND post_password = '' AND post_type != 'product' ORDER BY comment_date_gmt DESC";
    $comments = $wpdb->get_col($sql);
    $sql1 = "SELECT count(*) FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID)
      WHERE comment_approved = '0' AND comment_type = '' AND post_password = '' AND post_type = 'product' ORDER BY comment_date_gmt DESC";
    $reviews = $wpdb->get_col($sql1);
    $menu[25][0]= 'Comments<span class="awaiting-mod count-'.$comments[0].'"><span class="pending-count">'.$comments[0].'</span></span>';
    $menu[58.5][0]= 'Reviews<span class="awaiting-mod count-'.$reviews[0].'"><span class="pending-count">'.$reviews[0].'</span></span>';
    return $stuff;
  }
}
 
// Remove Gravatar (taken from a Buddy Press board, hence bp_ naming
function bp_remove_gravatar ($image, $params, $item_id, $avatar_dir, $css_id, $html_width, $html_height, $avatar_folder_url, $avatar_folder_dir) {
  $default = get_stylesheet_directory_uri() .'/_inc/images/bp_default_avatar.jpg';
  if( $image && strpos( $image, "gravatar.com" ) ){
    return 'avatar';
  } else {
    return $image;
  }
}
 
add_filter('bp_core_fetch_avatar', 'bp_remove_gravatar', 1, 9 );
 
function remove_gravatar ($avatar, $id_or_email, $size, $default, $alt) {
  $default = get_stylesheet_directory_uri() .'/_inc/images/bp_default_avatar.jpg';
  return "{$alt}";
}
 
add_filter('get_avatar', 'remove_gravatar', 1, 5);
 
function bp_remove_signup_gravatar ($image) {
  $default = get_stylesheet_directory_uri() .'/_inc/images/bp_default_avatar.jpg';
  if( $image && strpos( $image, "gravatar.com" ) ){
    return 'avatar';
  } else {
    return $image;
  }
}
 
add_filter('bp_get_signup_avatar', 'bp_remove_signup_gravatar', 1, 1 );
 
// Defer jQuery Parsing using HTML5′s defer property
if (! is_admin() ) {
  function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
  }
  add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}
 
//turn heatbeat api off (speeds up admin-ajax.php)
 
function my_deregister_heartbeat() {
    global $pagenow;
 
    if ( 'post.php' != $pagenow && 'post-new.php' != $pagenow ) {
        wp_deregister_script('heartbeat');
        wp_register_script('heartbeat', false);
    }
}
add_action( 'admin_enqueue_scripts', 'my_deregister_heartbeat' );
 
// the next 2 commented out functions (leave commented out on a working site, uncomment it for a test site) will show the hooks being loaded on a page
 
/*function dump_hook( $tag, $hook ) {
    ksort($hook);
 
    echo "<pre>>>>>>\t$tag<br>";
 
    foreach( $hook as $priority => $functions ) {
 
    echo $priority;
 
    foreach( $functions as $function )
        if( $function['function'] != 'list_hook_details' ) {
 
        echo "\t";
 
        if( is_string( $function['function'] ) )
            echo $function['function'];
 
        elseif( is_string( $function['function'][0] ) )
             echo $function['function'][0] . ' -> ' . $function['function'][1];
 
        elseif( is_object( $function['function'][0] ) )
            echo "(object) " . get_class( $function['function'][0] ) . ' -> ' . $function['function'][1];
 
        else
            print_r($function);
 
        echo ' (' . $function['accepted_args'] . ') <br>';
        }
    }
 
    echo '</pre>';
}
 
function list_hooks( $filter = 'wp_footer' ){
    global $wp_filter;
 
    $hooks = $wp_filter;
    ksort( $hooks );
 
    foreach( $hooks as $tag => $hook )
        if ( false === $filter || false !== strpos( $tag, $filter ) )
            dump_hook($tag, $hook);
}*/
 
// The next function (leave commented out on a working site, uncomment it for a test site) will show the assets being loaded on a page (css and js)
 
/*function inspect_scripts_or_styles() {
    echo "<br />JS assets:<br />";
    global $wp_scripts;
    foreach( $wp_scripts->queue as $handle ) :
        echo $handle . '<br />';
    endforeach;
    echo "<br />Style assets:<br />";
    global $wp_styles;
    foreach( $wp_styles->queue as $handle ) :
        echo $handle . '<br />';
    endforeach;
}
 
add_action( 'wp_print_scripts', 'inspect_scripts_or_styles' );*/

Enjoy.

Faster WordPress and Caching

How to get a faster WordPress powered website? Now that I am (reasonably) happy with the look and feel of things, I have turned my focus to performance. The website as it was took far too long to provide the first byte of data to the visitor’s browser, and then took far too long to follow with the content. The result in real world testing would be that a visitor would not wait for the site to load, and would go elsewhere, or give up. A faster WordPress server? Maybe.

I think the server is pretty much as fast as it can be and is not lacking in resources. Tests I have run show that the server is not having to work at all. So, only a few variables exist to slow things down:

  • The data uplink speed from the server. Currently at 100 mbps, it could be upgraded to 1 gbps (ten times faster). I need to find the cost.
  • Every time a page is requested, WordPress has to make it from the database. That takes time. Better to cache that page if it is unlikely to change from one visit to the next. I have tried W3TotalCache and WP-FFPC, but I noticed that our site security software, Wordfence, has 2 cache types available as an option. I can’t get the advanced Falcon working, as our site is not using .htaccess, and so the rules needed for Falcon need re-writing (I have posted a support ticket for this help), but the basic cache works fine. Much faster than W3TotalCache and WP-FFPC. No extra cost there.
  • Those static files (stylesheets, javascripts and cached pages) from our own server are still too slow. The online guides I have read suggest that using a Content Delivery Network (CDN) will speed this up. As our host is a Cloudflare partner, I have asked for details to upgrade to Cloudflare Pro, which will mean that Apache server will need mod_cloudflare adding. Hopefully BBGN, our host, can do that. The most that this will cost is $5 per month (75% off the normal price).
  • Physical distance. No matter where your server is in the world, the data has to travel all the way to the visitor’s computer, and that takes time. A CDN holds copies of your files in dozens of places in the world, again reducing the load time.

Hopefully, all this, when I get details and implement them, will give us a faster WordPress.

Deferring Parsing of Javascript in WordPress

So, I have been configuring WordPress with WooCommerce, and discovering quite a lot as I go. I had optimized the loading speed of the web site by deferring parsing of the javascripts to later in the page, using this code in my child theme functions.php file:

1
2
3
4
5
6
7
8
if (!(is_admin() )) {
  function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
  }
  add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

The above code breaks the SyntaxHighlighter Evolved plugin, so I have switched to the WP-Syntax plugin, together with the WP-Syntax Editor Integration plugin. The original code I used to defer loading of javascript broke the WordPress Lightbox functionality. You can read about the code I used at the Uzelac Media website. Note that the code above ‘fixes’ the improper use of apostrophes and quote marks – the code on the linked page, if copied and pasted as is, will not work. Use the code shown above instead.

[Edit: I have since removed this code from my functions.php file and used a plugin called Autoptimize instead.]